@omegagrid/bucket 0.10.2 → 0.10.4

package/dist/ui/modalSidebar.js

@@ -0,0 +1,85 @@
+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 { dom } from '@omegagrid/core';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import style from './modalSidebar.style';
+let ModalSidebar = class ModalSidebar extends 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.showLoader = () => this.overlay.show(this);
+        this.hideLoader = () => this.overlay.hide();
+        this._onClose = () => {
+            this.close();
+        };
+        this.render = () => html `
+		<div class="header">
+			<div class="title">${this.caption}</div>
+			${this.closable ? html `<div class="close" @click="${() => this.close()}">&times</div>` : ``}
+		</div>
+		<div class="body"></div>
+		<og-overlay defaultLoader></og-overlay>
+	`;
+    }
+    // private isEdited = false;
+    layout() {
+        this.component?.layout();
+    }
+    disconnectedCallback() {
+        this.component?.removeEventListener('close', this._onClose);
+    }
+    async updated(props) {
+        if (props.has('componentId') && this.componentId) {
+            this.showLoader();
+            const component = await this.bucket.components.get(this.componentId);
+            this.component = component;
+            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();
+            this.hideLoader();
+        }
+    }
+    close() {
+        this.bucket.sidebars.closeModalSidebar();
+    }
+};
+ModalSidebar.styles = [style];
+__decorate([
+    property({ type: String })
+], ModalSidebar.prototype, "caption", void 0);
+__decorate([
+    property({ type: Boolean })
+], ModalSidebar.prototype, "closable", void 0);
+__decorate([
+    property({ type: Object })
+], ModalSidebar.prototype, "bucket", void 0);
+__decorate([
+    property({ type: String })
+], ModalSidebar.prototype, "componentId", void 0);
+__decorate([
+    query('.body')
+], ModalSidebar.prototype, "body", void 0);
+__decorate([
+    query('og-overlay')
+], ModalSidebar.prototype, "overlay", void 0);
+ModalSidebar = __decorate([
+    customElement('og-bucket-modal-sidebar')
+], ModalSidebar);
+export { 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,OAAO,EAAe,GAAG,EAAmB,MAAM,iBAAiB,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,KAAK,MAAM,sBAAsB,CAAC;AAGlC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAQN,aAAQ,GAAG,KAAK,CAAC;QAqBjB,oBAAoB;QACpB,+BAA+B;QAC/B,mDAAmD;QACnD,yDAAyD;QACzD,OAAO;QACP,0BAA0B;QAC1B,6CAA6C;QAC7C,IAAI;QAEJ,eAAU,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3C,eAAU,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAEvC,aAAQ,GAAG,GAAG,EAAE;YACf,IAAI,CAAC,KAAK,EAAE,CAAC;QACd,CAAC,CAAA;QAyBD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;wBAEI,IAAI,CAAC,OAAO;KAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,8BAA8B,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE;;;;EAI5F,CAAC;IAEH,CAAC;IAtDA,4BAA4B;IAE5B,MAAM;QACJ,IAAI,CAAC,SAAoB,EAAE,MAAM,EAAE,CAAC;IACtC,CAAC;IAkBD,oBAAoB;QACnB,IAAI,CAAC,SAAS,EAAE,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,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACrE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,GAAG,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;YAClB,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;IACF,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC;IAC1C,CAAC;;AAhEM,mBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAGxB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACT;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;8CACT;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACV;AAGf;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDACA;AAGzB;IADC,KAAK,CAAC,OAAO,CAAC;0CACM;AAGrB;IADC,KAAK,CAAC,YAAY,CAAC;6CACH;AApBL,YAAY;IADxB,aAAa,CAAC,yBAAyB,CAAC;GAC5B,YAAY,CA6ExB","sourcesContent":["import { ComponentId, dom, Layout, Overlay } from '@omegagrid/core';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { Bucket } from './bucket';\nimport style from './modalSidebar.style';\n\n@customElement('og-bucket-modal-sidebar')\nexport class ModalSidebar extends LitElement implements Layout {\n\n\tstatic styles = [style];\n\n\t@property({type: String})\n\tcaption: string;\n\n\t@property({type: Boolean})\n\tclosable = false;\n\n\t@property({type: Object})\n\tbucket: Bucket;\n\n\t@property({type: String})\n\tcomponentId: ComponentId;\n\n\t@query('.body')\n\tbody: HTMLDivElement;\n\n\t@query('og-overlay')\n\toverlay: Overlay;\n\n\tprivate component: HTMLElement;\n\t// private isEdited = false;\n\n\tlayout() {\n\t\t(this.component as Layout)?.layout();\n\t}\n\n\t// _onSave = () => {\n\t// \tif (!this.isEdited) return;\n\t// \tthis.bucket.editorContainer.model.walk(tab => {\n\t// \t\tif (tab.id == this.componentId) tab.unsaved = false;\n\t// \t});\n\t// \tthis.isEdited = false;\n\t// \tthis.bucket.editorContainer.updateTabs();\n\t// }\n\n\tshowLoader = () => this.overlay.show(this);\n\thideLoader = () => this.overlay.hide();\n\n\t_onClose = () => {\n\t\tthis.close();\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.component?.removeEventListener('close', this._onClose);\n\t}\n\n\tasync updated(props: Map<PropertyKey, unknown>) {\n\t\tif (props.has('componentId') && this.componentId) {\n\t\t\tthis.showLoader();\n\t\t\tconst component = await this.bucket.components.get(this.componentId);\n\t\t\tthis.component = component;\n\t\t\tdom.empty(this.body);\n\t\t\tthis.body.appendChild(component);\n\t\t\t// component.removeEventListener('save', this._onSave);\n\t\t\t// component.addEventListener('save', this._onSave);\n\t\t\tcomponent.addEventListener('close', this._onClose, {once: true});\n\t\t\tcomponent.focus();\n\t\t\tthis.hideLoader();\n\t\t}\n\t}\n\n\tclose() {\n\t\tthis.bucket.sidebars.closeModalSidebar();\n\t}\n\n\trender = () => html`\n\t\t<div class=\"header\">\n\t\t\t<div class=\"title\">${this.caption}</div>\n\t\t\t${this.closable ? html`<div class=\"close\" @click=\"${() => this.close()}\">&times</div>` : ``}\n\t\t</div>\n\t\t<div class=\"body\"></div>\n\t\t<og-overlay defaultLoader></og-overlay>\n\t`;\n\n}"]}

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,wBAsDE"}

package/dist/ui/modalSidebar.style.js

@@ -0,0 +1,58 @@
+import { css } from 'lit';
+import constants from '../constants';
+export default css `
+	:host {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+		background-color: var(--og-bucket-sidebar-background-color);
+		box-shadow: 8px 8px 4px -3px var(--og-dialog-shadow);
+	}
+
+	:host(.right) {
+		box-shadow: -8px 8px 4px -3px var(--og-dialog-shadow);
+	}
+
+	* {
+		box-sizing: border-box;
+	}
+
+	.header {
+		display: flex;
+		min-height: ${constants.SIDEBAR_HEADER_HEIGHT}px;
+		line-height: ${constants.SIDEBAR_HEADER_HEIGHT}px;
+		padding: 0 10px;
+		flex: 0;
+	}
+
+	.title {
+		font-size: var(--og-font-size);
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		flex: 1;
+	}
+
+	.close {
+		flex: 0;
+		margin-top: ${constants.SIDEBAR_HEADER_HEIGHT / 4}px;
+		min-width: ${constants.SIDEBAR_HEADER_HEIGHT / 2}px;
+		height: ${constants.SIDEBAR_HEADER_HEIGHT / 2}px;
+		line-height: ${constants.SIDEBAR_HEADER_HEIGHT / 2}px;
+		border-radius: var(--og-base-radius);
+		cursor: pointer;
+		text-align: center;
+	}
+	
+	.close:hover {
+		background-color: var(--og-accent-color);
+		color: var(--og-text-color-2);
+	}
+
+	.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,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;gBAmBF,SAAS,CAAC,qBAAqB;iBAC9B,SAAS,CAAC,qBAAqB;;;;;;;;;;;;;;;gBAehC,SAAS,CAAC,qBAAqB,GAAG,CAAC;eACpC,SAAS,CAAC,qBAAqB,GAAG,CAAC;YACtC,SAAS,CAAC,qBAAqB,GAAG,CAAC;iBAC9B,SAAS,CAAC,qBAAqB,GAAG,CAAC;;;;;;;;;;;;;;;;CAgBnD,CAAC","sourcesContent":["import { css } from 'lit';\nimport constants from '../constants';\n\nexport default css`\n\t:host {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tflex-direction: column;\n\t\tbackground-color: var(--og-bucket-sidebar-background-color);\n\t\tbox-shadow: 8px 8px 4px -3px var(--og-dialog-shadow);\n\t}\n\n\t:host(.right) {\n\t\tbox-shadow: -8px 8px 4px -3px var(--og-dialog-shadow);\n\t}\n\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.header {\n\t\tdisplay: flex;\n\t\tmin-height: ${constants.SIDEBAR_HEADER_HEIGHT}px;\n\t\tline-height: ${constants.SIDEBAR_HEADER_HEIGHT}px;\n\t\tpadding: 0 10px;\n\t\tflex: 0;\n\t}\n\n\t.title {\n\t\tfont-size: var(--og-font-size);\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tflex: 1;\n\t}\n\n\t.close {\n\t\tflex: 0;\n\t\tmargin-top: ${constants.SIDEBAR_HEADER_HEIGHT / 4}px;\n\t\tmin-width: ${constants.SIDEBAR_HEADER_HEIGHT / 2}px;\n\t\theight: ${constants.SIDEBAR_HEADER_HEIGHT / 2}px;\n\t\tline-height: ${constants.SIDEBAR_HEADER_HEIGHT / 2}px;\n\t\tborder-radius: var(--og-base-radius);\n\t\tcursor: pointer;\n\t\ttext-align: center;\n\t}\n\t\n\t.close:hover {\n\t\tbackground-color: var(--og-accent-color);\n\t\tcolor: var(--og-text-color-2);\n\t}\n\n\t.body {\n\t\tflex: 1;\n\t\toverflow: hidden;\n\t}\n\t\n`;"]}

package/dist/ui/path.d.ts

@@ -0,0 +1,17 @@
+import { OmegaComponent } from '@omegagrid/core';
+import { PathSegment, PathSegments } from '../types';
+export declare class BucketPathEvent extends Event {
+    readonly path: PathSegment[];
+    readonly index: number;
+    get segment(): PathSegment;
+    constructor(type: string, args?: Partial<BucketPathEvent>);
+}
+export declare class BucketPath extends OmegaComponent {
+    static styles: import("lit").CSSResultGroup[];
+    path: PathSegments;
+    clickable: boolean;
+    willUpdate(): void;
+    _onClick: (e: PointerEvent) => void;
+    render: () => Iterable<unknown>;
+}
+//# sourceMappingURL=path.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../src/ui/path.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAS,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIrD,qBAAa,eAAgB,SAAQ,KAAK;IACzC,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,IAAI,OAAO,gBAAmC;gBAElC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;CAIzD;AAED,qBACa,UAAW,SAAQ,cAAc;IAE7C,MAAM,CAAC,MAAM,iCAyBV;IAGH,IAAI,EAAE,YAAY,CAAC;IAGnB,SAAS,UAAS;IAElB,UAAU;IAcV,QAAQ,GAAI,GAAG,YAAY,UAS1B;IAED,MAAM,0BAUsC;CAE5C"}

package/dist/ui/path.js

@@ -0,0 +1,97 @@
+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 { OmegaComponent, utils } from '@omegagrid/core';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { join } from 'lit/directives/join.js';
+import { map } from 'lit/directives/map.js';
+export class BucketPathEvent extends Event {
+    get segment() { return this.path[this.index]; }
+    constructor(type, args) {
+        super(`path.${type}`, { bubbles: true, composed: true });
+        if (args)
+            Object.assign(this, args);
+    }
+}
+let BucketPath = class BucketPath extends OmegaComponent {
+    constructor() {
+        super(...arguments);
+        this.clickable = false;
+        this._onClick = (e) => {
+            const target = e.currentTarget;
+            const id = target.dataset.id;
+            if (id) {
+                this.dispatchEvent(new BucketPathEvent('click', {
+                    path: this.path,
+                    index: this.path.findIndex(seg => seg.id === id)
+                }));
+            }
+        };
+        this.render = () => join(map(this.path, segment => segment.clickable ? html `
+		<a @click="${this._onClick}" data-id="${segment.id}">
+			${segment.icon ? html `<og-icon .icon="${segment.icon}"></og-icon>` : ''}
+			${segment.label}
+		</a>
+	` : html `
+		<span data-id="${segment.id}">
+			${segment.icon ? html `<og-icon .icon="${segment.icon}"></og-icon>` : ''}
+			${segment.label}
+		</span>
+	`), html `<span class="separator">/</span>`);
+    }
+    willUpdate() {
+        this.path = this.path?.map(segment => {
+            let seg;
+            if (utils.isObject(segment)) {
+                seg = segment;
+            }
+            else {
+                seg = { id: segment };
+            }
+            seg.label ?? (seg.label = seg.id);
+            seg.clickable ?? (seg.clickable = this.clickable);
+            return seg;
+        });
+    }
+};
+BucketPath.styles = [OmegaComponent.styles, css `
+		:host {
+			font-size: 10px;
+			white-space: nowrap;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 2px;
+			padding: 0 2px;
+			background-color: var(--og-background-color);
+		}
+
+		a {
+			color: var(--og-accent-color);
+			cursor: pointer;
+		}
+
+		a:hover {
+			text-decoration: underline;
+		}
+
+		og-icon {
+			margin-right: -4px;
+			display: inline;
+		}
+	`];
+__decorate([
+    property({ type: Array })
+], BucketPath.prototype, "path", void 0);
+__decorate([
+    property({ type: Boolean })
+], BucketPath.prototype, "clickable", void 0);
+BucketPath = __decorate([
+    customElement('og-bucket-path')
+], BucketPath);
+export { BucketPath };
+//# sourceMappingURL=path.js.map

package/dist/ui/path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.js","sourceRoot":"","sources":["../../src/ui/path.ts"],"names":[],"mappings":"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","sourcesContent":["import { OmegaComponent, utils } from '@omegagrid/core';\nimport { css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PathSegment, PathSegments } from '../types';\nimport { join } from 'lit/directives/join.js';\nimport { map } from 'lit/directives/map.js';\n\nexport class BucketPathEvent extends Event {\n\treadonly path: PathSegment[];\n\treadonly index: number;\n\tget segment() { return this.path[this.index] }\n\n\tconstructor(type: string, args?: Partial<BucketPathEvent>) {\n\t\tsuper(`path.${type}`, {bubbles: true, composed: true});\n\t\tif (args) Object.assign(this, args);\n\t}\n}\n\n@customElement('og-bucket-path')\nexport class BucketPath extends OmegaComponent {\n\n\tstatic styles = [OmegaComponent.styles, css`\n\t\t:host {\n\t\t\tfont-size: 10px;\n\t\t\twhite-space: nowrap;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: 2px;\n\t\t\tpadding: 0 2px;\n\t\t\tbackground-color: var(--og-background-color);\n\t\t}\n\n\t\ta {\n\t\t\tcolor: var(--og-accent-color);\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\ta:hover {\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\tog-icon {\n\t\t\tmargin-right: -4px;\n\t\t\tdisplay: inline;\n\t\t}\n\t`];\n\n\t@property({type: Array})\n\tpath: PathSegments;\n\n\t@property({type: Boolean})\n\tclickable = false;\n\n\twillUpdate() {\n\t\tthis.path = this.path?.map(segment => {\n\t\t\tlet seg: PathSegment;\n\t\t\tif (utils.isObject(segment)) {\n\t\t\t\tseg = segment as PathSegment;\n\t\t\t} else {\n\t\t\t\tseg = {id: segment as string};\n\t\t\t}\n\t\t\tseg.label ??= seg.id;\n\t\t\tseg.clickable ??= this.clickable;\n\t\t\treturn seg;\n\t\t}) as PathSegment[];\n\t}\n\n\t_onClick = (e: PointerEvent) => {\n\t\tconst target = e.currentTarget as HTMLElement;\n\t\tconst id = target.dataset.id;\n\t\tif (id) {\n\t\t\tthis.dispatchEvent(new BucketPathEvent('click', {\n\t\t\t\tpath: this.path as PathSegment[],\n\t\t\t\tindex: this.path.findIndex(seg => (seg as PathSegment).id === id)\n\t\t\t}));\n\t\t}\n\t}\n\n\trender = () => join(map(this.path as PathSegment[], segment => segment.clickable ? html`\n\t\t<a @click=\"${this._onClick}\" data-id=\"${segment.id}\">\n\t\t\t${segment.icon ? html`<og-icon .icon=\"${segment.icon}\"></og-icon>` : ''}\n\t\t\t${segment.label}\n\t\t</a>\n\t` : html`\n\t\t<span data-id=\"${segment.id}\">\n\t\t\t${segment.icon ? html`<og-icon .icon=\"${segment.icon}\"></og-icon>` : ''}\n\t\t\t${segment.label}\n\t\t</span>\n\t`), html`<span class=\"separator\">/</span>`);\n\n}"]}

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,0BAcX;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;IAMzB,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAQ9C,MAAM;IAMN,MAAM,6CAA2B;CAEjC"}

package/dist/ui/sidebar.js

@@ -0,0 +1,62 @@
+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 { dom } from '@omegagrid/core';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+let Sidebar = class Sidebar extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.render = () => html `<div></div>`;
+    }
+    async loadComponent(id) {
+        dom.empty(this.container);
+        this._component = await this.bucket.components.get(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() {
+        if (this._component?.layout) {
+            this._component.layout();
+        }
+    }
+};
+Sidebar.styles = css `
+		:host {
+			display: block;
+			color: var(--og-text-color);
+			background-color: var(--og-background-color);
+		}
+		
+		* {
+			box-sizing: border-box;
+		}
+
+		div {
+			height: 100%;
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], Sidebar.prototype, "bucket", void 0);
+__decorate([
+    property({ type: String })
+], Sidebar.prototype, "componentId", void 0);
+__decorate([
+    query('div')
+], Sidebar.prototype, "container", void 0);
+Sidebar = __decorate([
+    customElement('og-bucket-sidebar')
+], Sidebar);
+export { 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,OAAO,EAAE,GAAG,EAAU,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI5D,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAiDN,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA,aAAa,CAAC;IAElC,CAAC;IAtBA,KAAK,CAAC,aAAa,CAAC,EAAW;QAC9B,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACvD,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,IAAK,IAAI,CAAC,UAAqB,EAAE,MAAM,EAAE,CAAC;YACxC,IAAI,CAAC,UAAqB,CAAC,MAAM,EAAE,CAAC;QACtC,CAAC;IACF,CAAC;;AA7CM,cAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;EAclB,AAdY,CAcX;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCACV;AAGf;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACL;AAGpB;IADC,KAAK,CAAC,KAAK,CAAC;0CACa;AAzBd,OAAO;IADnB,aAAa,CAAC,mBAAmB,CAAC;GACtB,OAAO,CAmDnB","sourcesContent":["import { dom, Layout } from '@omegagrid/core';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { Bucket } from './bucket';\n\n@customElement('og-bucket-sidebar')\nexport class Sidebar extends LitElement implements Layout {\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t\tcolor: var(--og-text-color);\n\t\t\tbackground-color: var(--og-background-color);\n\t\t}\n\t\t\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tdiv {\n\t\t\theight: 100%;\n\t\t}\n\t`;\n\n\t@property({type: Object})\n\tbucket: Bucket;\n\n\t@property({type: String})\n\tcomponentId: string;\n\n\t@query('div')\n\tcontainer: HTMLDivElement;\n\t\n\tprivate _component: HTMLElement;\n\t\n\tasync loadComponent(id?: string) {\n\t\tdom.empty(this.container);\n\t\tthis._component = await this.bucket.components.get(id);\n\t\tif (this._component) this.container.appendChild(this._component);\n\t}\n\n\tasync updated(props: Map<PropertyKey, unknown>) {\n\t\tif (!this.bucket) return;\n\n\t\tif (props.has('componentId')) {\n\t\t\tthis.loadComponent(this.componentId);\n\t\t}\n\t}\n\n\tlayout() {\n\t\tif ((this._component as Layout)?.layout) {\n\t\t\t(this._component as Layout).layout();\n\t\t}\n\t}\n\t\n\trender = () => html`<div></div>`;\n\n}"]}

package/dist/ui/sidemenu.d.ts

@@ -0,0 +1,23 @@
+import { List, ListItemElement, 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;
+    private items;
+    selectItem(id: string): void;
+    constructor();
+    requestHide(): void;
+    _onMouseMove: (_e: MouseEvent, elm: ListItemElement) => void;
+    updated(): Promise<void>;
+    updateActiveIndex(): void;
+    firstUpdated(): void;
+    _itemRenderer: (div: HTMLDivElement, index: number) => Promise<void>;
+    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,EAAuB,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAqB5C,qBACa,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;IAC3B,OAAO,CAAC,KAAK,CASV;IAEH,UAAU,CAAC,EAAE,EAAE,MAAM;;IAkBrB,WAAW;IASX,YAAY,GAAI,IAAI,UAAU,EAAE,KAAK,eAAe,UAQnD;IAEK,OAAO;IAOb,iBAAiB;IAOjB,YAAY;IAIZ,aAAa,GAAU,KAAK,cAAc,EAAE,OAAO,MAAM,mBAIxD;IAED,MAAM,6CAcJ;CAEF"}

package/dist/ui/sidemenu.js

@@ -0,0 +1,135 @@
+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 constants from '../constants';
+import { ComponentStore, dom } from '@omegagrid/core';
+import { LitElement, html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+const itemStyle = css `
+	.item {
+		vertical-align: middle;
+		text-align: center;
+		border-bottom: 1px solid var(--og-border-color);
+		color: var(--og-text-color);
+		
+	}
+
+	.item, .item.selected {
+		background-color: var(--og-background-color) !important;
+	}
+
+	.item.selected og-bucket-button, .item:hover og-bucket-button {
+		color: var(--og-text-color-3);
+	}
+`;
+let Sidemenu = class Sidemenu extends LitElement {
+    get tooltip() { return this.tooltipRef?.value; }
+    get count() { return this.settings?.items?.length ?? 0; }
+    selectItem(id) {
+        const index = this.settings?.items.findIndex(item => item.id === id);
+        if (index >= 0) {
+            this.list.select(index);
+            this.updateActiveIndex();
+        }
+    }
+    constructor() {
+        super();
+        this.tooltipRef = createRef();
+        this.items = new ComponentStore((index) => {
+            const item = this.settings?.items[index];
+            const b = dom.createElement('og-bucket-button', {
+                active: this.settings?.activeIndex === index,
+                text: item.text,
+                icon: item.icon,
+                statusIcon: ['fas', item.statusIcon]
+            });
+            return b;
+        });
+        this._onMouseMove = (_e, elm) => {
+            const tooltip = this.settings.items[elm.index].tooltip;
+            if (tooltip) {
+                this.tooltip.querySelector('[slot="body"]').innerText = tooltip;
+                this.tooltip.attachTo(elm, 'right');
+            }
+            else {
+                this.tooltip.deatach();
+            }
+        };
+        this._itemRenderer = async (div, index) => {
+            const item = await this.items.get(index);
+            dom.empty(div);
+            div.appendChild(item);
+        };
+        this.render = () => html `
+		<og-list
+			.size="${this.count}"
+			?nativeHeight="${true}"
+			.customStyle="${itemStyle}"
+			sliderSize="6"
+			itemHeight="${constants.SIDEMENU_WIDTH}"
+			.itemRenderer="${this._itemRenderer}"
+			@select="${() => this.updateActiveIndex()}">
+		</og-list>
+
+		<og-tooltip ${ref(this.tooltipRef)} style="max-width: 300px; display: none">
+			<div style="padding: 5px" slot="body"></div>
+		</og-tooltip>
+	`;
+        dom.debounceOn(this, 'mousemove', '.item', this._onMouseMove, { wait: 10, noMatchCallback: () => {
+                this.tooltip.deatach();
+            } });
+        dom.on(this, 'mouseout', '.item', () => this.requestHide());
+        dom.on(this, 'mouseleave', '.item', () => this.requestHide());
+    }
+    requestHide() {
+        if (this._hideTimer == null) {
+            this._hideTimer = window.setTimeout(() => {
+                this.tooltip.deatach();
+                this._hideTimer = null;
+            }, 100);
+        }
+    }
+    async updated() {
+        if (this.settings?.activeIndex >= 0) {
+            this.list.select(this.settings?.activeIndex);
+            this.updateActiveIndex();
+        }
+    }
+    updateActiveIndex() {
+        this.settings.activeIndex = this.list.selectedIndex;
+        this.items.forEach((item, index) => {
+            item.active = index === this.settings.activeIndex;
+        });
+    }
+    firstUpdated() {
+        document.body.appendChild(this.tooltip);
+    }
+};
+Sidemenu.styles = css `
+		:host {
+			display: block;
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		og-list {
+			height: 100%;
+		}
+	`;
+__decorate([
+    property({ type: Object })
+], Sidemenu.prototype, "settings", void 0);
+__decorate([
+    query('og-list')
+], Sidemenu.prototype, "list", void 0);
+Sidemenu = __decorate([
+    customElement('og-bucket-sidemenu')
+], Sidemenu);
+export { 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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","sourcesContent":["import constants from '../constants';\nimport { ComponentStore, dom, List, ListItemElement, Tooltip } from '@omegagrid/core';\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { SidemenuSettings } from '../types';\nimport { BucketButton } from './bucketButton';\n\nconst itemStyle = css`\n\t.item {\n\t\tvertical-align: middle;\n\t\ttext-align: center;\n\t\tborder-bottom: 1px solid var(--og-border-color);\n\t\tcolor: var(--og-text-color);\n\t\t\n\t}\n\n\t.item, .item.selected {\n\t\tbackground-color: var(--og-background-color) !important;\n\t}\n\n\t.item.selected og-bucket-button, .item:hover og-bucket-button {\n\t\tcolor: var(--og-text-color-3);\n\t}\n`;\n\n@customElement('og-bucket-sidemenu')\nexport class Sidemenu extends LitElement {\n\n\t@property({type: Object})\n\tsettings: SidemenuSettings;\n\n\t@query('og-list')\n\tlist: List;\n\n\tstatic styles = css`\n\t\t:host {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\tog-list {\n\t\t\theight: 100%;\n\t\t}\n\t`;\n\n\tprivate tooltipRef = createRef<Tooltip>();\n\tget tooltip() { return this.tooltipRef?.value; }\n\n\tget count() { return this.settings?.items?.length ?? 0 }\n\n\tprivate _hideTimer: number;\n\tprivate items = new ComponentStore<BucketButton>((index: number) => {\n\t\tconst item = this.settings?.items[index];\n\t\tconst b = dom.createElement<BucketButton>('og-bucket-button', {\n\t\t\tactive: this.settings?.activeIndex === index,\n\t\t\ttext: item.text,\n\t\t\ticon: item.icon,\n\t\t\tstatusIcon: ['fas', item.statusIcon]\n\t\t});\n\t\treturn b\n\t});\n\n\tselectItem(id: string) {\n\t\tconst index = this.settings?.items.findIndex(item => item.id === id);\n\t\tif (index >= 0) {\n\t\t\tthis.list.select(index);\n\t\t\tthis.updateActiveIndex();\n\t\t}\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tdom.debounceOn(this, 'mousemove', '.item', this._onMouseMove, {wait: 10, noMatchCallback: () => {\n\t\t\tthis.tooltip.deatach();\n\t\t}});\n\n\t\tdom.on(this, 'mouseout', '.item', () => this.requestHide());\n\t\tdom.on(this, 'mouseleave', '.item', () => this.requestHide());\n\t}\n\n\trequestHide() {\n\t\tif (this._hideTimer == null) {\n\t\t\tthis._hideTimer = window.setTimeout(() => {\n\t\t\t\tthis.tooltip.deatach();\n\t\t\t\tthis._hideTimer = null;\n\t\t\t}, 100)\n\t\t}\n\t}\n\t\n\t_onMouseMove = (_e: MouseEvent, elm: ListItemElement) => {\n\t\tconst tooltip = this.settings.items[elm.index].tooltip;\n\t\tif (tooltip) {\n\t\t\t(this.tooltip.querySelector('[slot=\"body\"]') as HTMLDivElement).innerText = tooltip;\n\t\t\tthis.tooltip.attachTo(elm, 'right');\n\t\t} else {\n\t\t\tthis.tooltip.deatach();\n\t\t}\n\t}\n\n\tasync updated() {\n\t\tif (this.settings?.activeIndex >= 0) {\n\t\t\tthis.list.select(this.settings?.activeIndex);\n\t\t\tthis.updateActiveIndex();\n\t\t}\n\t}\n\n\tupdateActiveIndex() {\n\t\tthis.settings.activeIndex = this.list.selectedIndex;\n\t\tthis.items.forEach((item, index) => {\n\t\t\titem.active = index === this.settings.activeIndex;\n\t\t});\n\t}\n\n\tfirstUpdated() {\n\t\tdocument.body.appendChild(this.tooltip);\n\t}\n\n\t_itemRenderer = async (div: HTMLDivElement, index: number) => {\n\t\tconst item = await this.items.get(index);\n\t\tdom.empty(div);\n\t\tdiv.appendChild(item);\n\t}\n\n\trender = () => html`\n\t\t<og-list\n\t\t\t.size=\"${this.count}\"\n\t\t\t?nativeHeight=\"${true}\"\n\t\t\t.customStyle=\"${itemStyle}\"\n\t\t\tsliderSize=\"6\"\n\t\t\titemHeight=\"${constants.SIDEMENU_WIDTH}\"\n\t\t\t.itemRenderer=\"${this._itemRenderer}\"\n\t\t\t@select=\"${() => this.updateActiveIndex()}\">\n\t\t</og-list>\n\n\t\t<og-tooltip ${ref(this.tooltipRef)} style=\"max-width: 300px; display: none\">\n\t\t\t<div style=\"padding: 5px\" slot=\"body\"></div>\n\t\t</og-tooltip>\n\t`;\n\n}"]}

package/dist/ui/top.d.ts

@@ -0,0 +1,14 @@
+import { Bucket } from './bucket';
+import { Layout, OmegaComponent } from '@omegagrid/core';
+export declare class BucketTop extends OmegaComponent implements Layout {
+    static styles: import("lit").CSSResult[];
+    get bucket(): Bucket;
+    items: NodeListOf<HTMLDivElement>;
+    leftItem: 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":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAO,MAAM,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAE9D,qBACa,SAAU,SAAQ,cAAe,YAAW,MAAM;IAE9D,MAAM,CAAC,MAAM,4BAAW;IAExB,IAAI,MAAM,IAAoC,MAAM,CAAE;IAGtD,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAGlC,QAAQ,EAAE,cAAc,CAAC;IAEzB,aAAa,SAAO;IAEd,OAAO;IAgBb,YAAY;IAIZ,MAAM,6CAOJ;IAEF,MAAM;CAQN"}

package/dist/ui/top.js

@@ -0,0 +1,64 @@
+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 { html } from 'lit';
+import { customElement, query, queryAll } from 'lit/decorators.js';
+import style from './top.style';
+import { dom, OmegaComponent } from '@omegagrid/core';
+let BucketTop = class BucketTop extends OmegaComponent {
+    constructor() {
+        super(...arguments);
+        this.leftItemWidth = 250;
+        this.render = () => html `
+		<div class="item" id="logo" data-component="bucket-logo"></div>
+		${this.bucket?.compact ? '' : html `
+			<div class="item" id="left" data-component="bucket-topLeft"></div>
+		`}
+		<div class="item" id="center" data-component="bucket-topCenter"></div>
+		<div class="item" id="right" data-component="bucket-topRight"></div>
+	`;
+    }
+    get bucket() { return this.parentComponent; }
+    async updated() {
+        if (!this.bucket)
+            return;
+        let visible = false;
+        for (const item of this.items) {
+            const component = await this.bucket.components.get(item.dataset.component);
+            dom.empty(item);
+            if (component) {
+                item.appendChild(component);
+                visible = true;
+            }
+        }
+        if (!visible)
+            dom.hideElement(this);
+    }
+    firstUpdated() {
+        this.layout();
+    }
+    layout() {
+        if (this.bucket?.compact)
+            return;
+        if (!this.bucket?.container?.containers[0])
+            return;
+        if (!this.bucket.container.items[0].collapsed && this.leftItem) {
+            dom.setMinSize(this.leftItem, { w: this.bucket.container.containers[0].offsetWidth });
+        }
+    }
+};
+BucketTop.styles = [style];
+__decorate([
+    queryAll('.item')
+], BucketTop.prototype, "items", void 0);
+__decorate([
+    query('#left')
+], BucketTop.prototype, "leftItem", void 0);
+BucketTop = __decorate([
+    customElement('og-bucket-top')
+], BucketTop);
+export { BucketTop };
+//# sourceMappingURL=top.js.map