@omegagrid/toolbar 0.10.2 → 0.10.5

package/dist/constants.d.ts

@@ -0,0 +1,50 @@
+declare const _default: {
+    PREFIX: string;
+    DEFAULT_ACCENT_COLOR: string;
+    DEFAULT_ACCENT_COLOR_2: import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | any | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }> | ArrayLike<number> | {
+        [key: string]: any;
+    }>;
+    SIZER_SIZE: number;
+    SLIDER_SIZE: number;
+    SLIDER_MIN_LENGTH: number;
+    EXPANDER_SIZE: number;
+    LIST_ITEM_HEIGHT: number;
+    LIST_RENDERING_TRESHOLD: number;
+    LIST_AUTOSCROLL_TRESHOLD: number;
+    LIST_AUTOSCROLL_DELAY: number;
+    DEFAULT_TEXT_HIGHLIGHT_COLOR: string;
+    TOOLTIP_MARGIN: number;
+    MENU_ITEM_HEIGHT: number;
+    COLORPICKER_COLOR_SIZE: number;
+    DEFAULT_NUMBER_FORMAT: string;
+    BUTTON_HEIGHT: number;
+    FONT_SIZE: number;
+    FLOATING_WINDOW_MAX_WIDTH: number;
+    TOOLBAR_HEIGHT: number;
+    TOOLBAR_COMPONENT_SIZE_BASE: number;
+    TOOLBAR_TOOLTIP_DELAY: number;
+};
+export default _default;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAMC"}

package/dist/constants.js

@@ -0,0 +1,8 @@
+import { constants as coreConstants } from '@omegagrid/core';
+export default {
+    TOOLBAR_HEIGHT: 30,
+    TOOLBAR_COMPONENT_SIZE_BASE: 24,
+    TOOLBAR_TOOLTIP_DELAY: 200,
+    ...coreConstants
+};
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE7D,eAAe;IACd,cAAc,EAAE,EAAE;IAClB,2BAA2B,EAAE,EAAE;IAC/B,qBAAqB,EAAE,GAAG;IAC1B,GAAG,aAAa;CAEhB,CAAA","sourcesContent":["import { constants as coreConstants } from '@omegagrid/core';\n\nexport default {\n\tTOOLBAR_HEIGHT: 30,\n\tTOOLBAR_COMPONENT_SIZE_BASE: 24,\n\tTOOLBAR_TOOLTIP_DELAY: 200,\n\t...coreConstants\n\n}"]}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ui';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './ui';
+export * from './types';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAC;AACrB,cAAc,SAAS,CAAC","sourcesContent":["export * from './ui';\nexport * from './types';"]}

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+import { ColorTypes, ComponentAdapter, ComponentId, IconSpec } from "@omegagrid/core";
+import { NodeSource } from "@omegagrid/tree";
+import { TemplateResult } from "lit-html";
+export type ToolbarItemType = 'divider' | 'button' | 'togglebutton' | 'dropdown' | 'dropdown-button' | 'dropdown-custom' | 'color' | 'text' | 'label' | 'dropdown-menu';
+export type ToolbarItem = {
+    type: ToolbarItemType;
+    id: string;
+    title?: string;
+    value?: unknown;
+    tooltip?: string;
+    color?: ColorTypes;
+    icon?: IconSpec | string;
+    width?: number;
+    text?: string;
+    caption?: string;
+    content?: TemplateResult<1>;
+    items?: ToolbarItem[][] | NodeSource[];
+    adapter?: ComponentAdapter;
+    colspan?: number;
+    default?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    hidden?: boolean;
+    gap?: number;
+    alignment?: 'left' | 'right';
+    options?: Record<string, unknown>;
+    createComponent?: (id: ComponentId, value?: unknown) => Promise<HTMLElement> | HTMLElement;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,MAAM,eAAe,GAC1B,SAAS,GAAC,QAAQ,GAAC,cAAc,GAAC,UAAU,GAAC,iBAAiB,GAC9D,iBAAiB,GAAC,OAAO,GAAC,MAAM,GAAC,OAAO,GAAC,eAAe,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,eAAe,CAAC;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAC,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,WAAW,EAAE,EAAE,GAAC,UAAU,EAAE,CAAC;IACrC,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,GAAC,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,WAAW,CAAC,GAAC,WAAW,CAAC;CACzF,CAAA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ColorTypes, ComponentAdapter, ComponentId, IconSpec } from \"@omegagrid/core\";\nimport { NodeSource } from \"@omegagrid/tree\"\nimport { TemplateResult } from \"lit-html\";\n\nexport type ToolbarItemType = \n\t'divider'|'button'|'togglebutton'|'dropdown'|'dropdown-button'|\n\t'dropdown-custom'|'color'|'text'|'label'|'dropdown-menu';\n\nexport type ToolbarItem = {\n\ttype: ToolbarItemType,\n\tid: string,\n\ttitle?: string,\n\tvalue?: unknown,\n\ttooltip?: string,\n\tcolor?: ColorTypes,\n\ticon?: IconSpec|string,\n\twidth?: number,\n\ttext?: string,\n\tcaption?: string,\n\tcontent?: TemplateResult<1>,\n\titems?: ToolbarItem[][]|NodeSource[],\n\tadapter?: ComponentAdapter,\n\tcolspan?: number,\n\tdefault?: boolean,\n\tplaceholder?: string,\n\tdisabled?: boolean,\n\thidden?: boolean,\n\tgap?: number,\n\talignment?: 'left'|'right',\n\toptions?: Record<string, unknown>,\n\tcreateComponent?: (id: ComponentId, value?: unknown) => Promise<HTMLElement>|HTMLElement,\n}"]}

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

@@ -0,0 +1,9 @@
+export * from './toolbarButton';
+export * from './toolbarDropdown';
+export * from './toolbarCustomDropdown';
+export * from './toolbarDropdownButton';
+export * from './toolbarDropdownMenu';
+export * from './toolbarGrid';
+export * from './toolbarText';
+export * from './toolbarColorPicker';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC"}

package/dist/ui/controls/index.js

@@ -0,0 +1,9 @@
+export * from './toolbarButton';
+export * from './toolbarDropdown';
+export * from './toolbarCustomDropdown';
+export * from './toolbarDropdownButton';
+export * from './toolbarDropdownMenu';
+export * from './toolbarGrid';
+export * from './toolbarText';
+export * from './toolbarColorPicker';
+//# sourceMappingURL=index.js.map

package/dist/ui/controls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './toolbarButton';\nexport * from './toolbarDropdown';\nexport * from './toolbarCustomDropdown';\nexport * from './toolbarDropdownButton';\nexport * from './toolbarDropdownMenu';\nexport * from './toolbarGrid';\nexport * from './toolbarText';\nexport * from './toolbarColorPicker';"]}

package/dist/ui/controls/renderers.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from "lit-html";
+import { ToolbarItem, ToolbarItemType } from "../../types";
+export declare const renderers: Map<ToolbarItemType, (item: ToolbarItem, value?: unknown) => TemplateResult<1>>;
+//# sourceMappingURL=renderers.d.ts.map

package/dist/ui/controls/renderers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/renderers.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAmB3D,eAAO,MAAM,SAAS,8BAAmC,WAAW,UAAU,OAAO,KAAK,cAAc,CAAC,CAAC,CAAC,CA0EzG,CAAC"}

package/dist/ui/controls/renderers.js

@@ -0,0 +1,96 @@
+import { dom } from "@omegagrid/core";
+import { html } from "lit";
+import { styleMap } from "lit-html/directives/style-map.js";
+const defaultStyles = new Map([
+    ['button', {}],
+    ['togglebutton', {}],
+    ['dropdown', {}],
+    ['dropdown-button', { width: '38px' }],
+    ['color', { width: '38px' }],
+    ['text', { width: '100px' }],
+]);
+function getItemStyle(item) {
+    const style = { ...defaultStyles.get(item.type) };
+    style.display = item.hidden ? 'none' : null;
+    if (item.width)
+        style.width = dom.numToPixels(item.width);
+    if (item.gap)
+        style.marginLeft = dom.numToPixels(item.gap);
+    return style;
+}
+export const renderers = new Map([
+    ['button', (item) => html `
+		<og-toolbar-button
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-button>
+	`],
+    ['togglebutton', (item, value) => html `
+		<og-toolbar-button
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			type="toggle"
+			state="${value ? 'checked' : 'unchecked'}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-button>
+	`],
+    ['dropdown', (item, value) => html `
+		<og-toolbar-dropdown
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			.value="${value}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-dropdown>
+	`],
+    ['dropdown-custom', (item, value) => html `
+		<og-toolbar-customdropdown
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			.value="${value}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-customdropdown>
+	`],
+    ['dropdown-button', (item) => html `
+		<og-toolbar-dropdownbutton
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-dropdownbutton>
+	`],
+    ['dropdown-menu', (item) => html `
+		<og-toolbar-dropdownmenu
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-dropdownmenu>
+	`],
+    ['color', (item, value) => html `
+		<og-toolbar-colorpicker
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			.value="${value}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-colorpicker>
+	`],
+    ['text', (item, value) => html `
+		<og-toolbar-text
+			data-id="${item.id}"
+			class="control"
+			.item="${item}"
+			.value="${value}"
+			style="${styleMap(getItemStyle(item))}">
+		</og-toolbar-text>
+	`],
+    ['label', (item, value) => html `
+		<label style="${styleMap(getItemStyle(item))}">${value}</label>
+	`],
+]);
+//# sourceMappingURL=renderers.js.map

package/dist/ui/controls/renderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.js","sourceRoot":"","sources":["../../../src/ui/controls/renderers.ts"],"names":[],"mappings":"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","sourcesContent":["import { dom } from \"@omegagrid/core\";\nimport { html } from \"lit\";\nimport { TemplateResult } from \"lit-html\";\nimport { StyleInfo, styleMap } from \"lit-html/directives/style-map.js\";\nimport { ToolbarItem, ToolbarItemType } from \"../../types\";\n\nconst defaultStyles = new Map<ToolbarItemType, StyleInfo>([\n\t['button', {}],\n\t['togglebutton', {}],\n\t['dropdown', {}],\n\t['dropdown-button', {width: '38px'}],\n\t['color', {width: '38px'}],\n\t['text', {width: '100px'}],\n]);\n\nfunction getItemStyle(item: ToolbarItem): StyleInfo {\n\tconst style: StyleInfo = {...defaultStyles.get(item.type)};\n\tstyle.display = item.hidden ? 'none' : null;\n\tif (item.width) style.width = dom.numToPixels(item.width);\n\tif (item.gap) style.marginLeft = dom.numToPixels(item.gap);\n\treturn style;\n}\n\nexport const renderers = new Map<ToolbarItemType, (item: ToolbarItem, value?: unknown) => TemplateResult<1>>([\n\t['button', (item: ToolbarItem) => html`\n\t\t<og-toolbar-button\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-button>\n\t`],\n\t['togglebutton', (item: ToolbarItem, value?: unknown) => html`\n\t\t<og-toolbar-button\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\ttype=\"toggle\"\n\t\t\tstate=\"${value ? 'checked' : 'unchecked'}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-button>\n\t`],\n\t['dropdown', (item: ToolbarItem, value?: unknown) => html`\n\t\t<og-toolbar-dropdown\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\t.value=\"${value as string}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-dropdown>\n\t`],\n\t['dropdown-custom', (item: ToolbarItem, value?: unknown) => html`\n\t\t<og-toolbar-customdropdown\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\t.value=\"${value as string}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-customdropdown>\n\t`],\n\t['dropdown-button', (item: ToolbarItem) => html`\n\t\t<og-toolbar-dropdownbutton\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-dropdownbutton>\n\t`],\n\t['dropdown-menu', (item: ToolbarItem) => html`\n\t\t<og-toolbar-dropdownmenu\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-dropdownmenu>\n\t`],\n\t['color', (item: ToolbarItem, value?: unknown) => html`\n\t\t<og-toolbar-colorpicker\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\t.value=\"${value as string}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-colorpicker>\n\t`],\n\t['text', (item: ToolbarItem, value?: unknown) => html`\n\t\t<og-toolbar-text\n\t\t\tdata-id=\"${item.id}\"\n\t\t\tclass=\"control\"\n\t\t\t.item=\"${item}\"\n\t\t\t.value=\"${value as string}\"\n\t\t\tstyle=\"${styleMap(getItemStyle(item))}\">\n\t\t</og-toolbar-text>\n\t`],\n\t['label', (item: ToolbarItem, value?: unknown) => html`\n\t\t<label style=\"${styleMap(getItemStyle(item))}\">${value}</label>\n\t`],\n]);"]}

package/dist/ui/controls/toolbarButton.d.ts

@@ -0,0 +1,10 @@
+import { Button } from '@omegagrid/core';
+import { ToolbarItem } from '../../types';
+export declare class ToolbarButton extends Button {
+    static styles: import("lit").CSSResult[];
+    item: ToolbarItem;
+    constructor();
+    firstUpdated(): void;
+    willUpdate(changedProps: Map<PropertyKey, undefined>): void;
+}
+//# sourceMappingURL=toolbarButton.d.ts.map

package/dist/ui/controls/toolbarButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarButton.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAc,MAAM,iBAAiB,CAAC;AAIrD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,qBACa,aAAc,SAAQ,MAAM;IAExC,MAAM,CAAC,MAAM,4BAOV;IAGH,IAAI,EAAE,WAAW,CAAC;;IAOlB,YAAY;IAUZ,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC;CAepD"}

package/dist/ui/controls/toolbarButton.js

@@ -0,0 +1,54 @@
+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 { Button, ColorTypes } from '@omegagrid/core';
+import constants from '../../constants';
+import { css, render, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { actions } from '@omegagrid/core';
+let ToolbarButton = class ToolbarButton extends Button {
+    constructor() {
+        super();
+        this.color = null;
+    }
+    firstUpdated() {
+        this.addEventListener('click', () => {
+            actions.dispatchActionEvent(this, 'toolbar', {
+                type: 'change',
+                key: this.item.id,
+                value: this.type == 'toggle' ? (this.state == 'checked') : this.item.value
+            });
+        });
+    }
+    willUpdate(changedProps) {
+        if (changedProps.has('item') && this.item) {
+            this.icon = this.item.icon;
+            this.text = this.item.text;
+            this.color = this.item.color ? this.item.color : (this.type == 'normal' ? ColorTypes.Gray : ColorTypes.Accent);
+            this.disabled = this.item.disabled || false;
+            if (this.item.content) {
+                render(html `<div slot="content">${this.item.content}</div>`, this);
+            }
+        }
+        super.willUpdate(changedProps);
+    }
+};
+ToolbarButton.styles = [...Button.styles, css `
+		:host {
+			box-sizing: border-box;
+			display: block;
+			min-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+			height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+		}
+	`];
+__decorate([
+    property({ type: Object })
+], ToolbarButton.prototype, "item", void 0);
+ToolbarButton = __decorate([
+    customElement('og-toolbar-button')
+], ToolbarButton);
+export { ToolbarButton };
+//# sourceMappingURL=toolbarButton.js.map

package/dist/ui/controls/toolbarButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarButton.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarButton.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,MAAM;IAcxC;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,YAAY;QACX,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACnC,OAAO,CAAC,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE;gBAC5C,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE;gBACjB,KAAK,EAAE,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK;aAC1E,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,UAAU,CAAC,YAAyC;QACnD,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;YAC/G,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;YAE5C,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACvB,MAAM,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,IAAI,CAAC,OAAO,QAAQ,EAAE,IAAI,CAAC,CAAC;YACpE,CAAC;QACF,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAChC,CAAC;;AAxCM,oBAAM,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAA;;;;gBAIvB,SAAS,CAAC,2BAA2B;aACxC,SAAS,CAAC,2BAA2B;;EAEhD,CAAC,AAPW,CAOV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;2CACP;AAZN,aAAa;IADzB,aAAa,CAAC,mBAAmB,CAAC;GACtB,aAAa,CA4CzB","sourcesContent":["import { Button, ColorTypes } from '@omegagrid/core';\nimport constants from '../../constants';\nimport { css, render, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { actions } from '@omegagrid/core';\n\n@customElement('og-toolbar-button')\nexport class ToolbarButton extends Button {\n\n\tstatic styles = [...Button.styles, css`\n\t\t:host {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: block;\n\t\t\tmin-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\theight: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.color = null;\n\t}\n\n\tfirstUpdated() {\n\t\tthis.addEventListener('click', () => {\n\t\t\tactions.dispatchActionEvent(this, 'toolbar', {\n\t\t\t\ttype: 'change',\n\t\t\t\tkey: this.item.id,\n\t\t\t\tvalue: this.type == 'toggle' ? (this.state == 'checked') : this.item.value\n\t\t\t});\n\t\t});\n\t}\n\n\twillUpdate(changedProps: Map<PropertyKey, undefined>) {\n\t\tif (changedProps.has('item') && this.item) {\n\t\t\tthis.icon = this.item.icon;\n\t\t\tthis.text = this.item.text;\n\t\t\tthis.color = this.item.color ? this.item.color : (this.type == 'normal' ? ColorTypes.Gray : ColorTypes.Accent);\n\t\t\tthis.disabled = this.item.disabled || false;\n\n\t\t\tif (this.item.content) {\n\t\t\t\trender(html`<div slot=\"content\">${this.item.content}</div>`, this);\n\t\t\t}\n\t\t}\n\t\n\t\tsuper.willUpdate(changedProps);\n\t}\n\n}"]}

package/dist/ui/controls/toolbarColorPicker.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { ToolbarItem } from '../../types';
+import { Button, ColorPickerEvent, Dropdown, events } from '@omegagrid/core';
+export declare class ToolbarColorPicker extends LitElement {
+    static styles: import("lit").CSSResult[];
+    item: ToolbarItem;
+    value: string;
+    dropdown: Dropdown;
+    button: Button;
+    btnContent: HTMLDivElement;
+    _onChange: (e: events.ChangeEvent<string>) => void;
+    _onPreview: (e: ColorPickerEvent) => void;
+    _onPreviewEnd: (e: ColorPickerEvent) => void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=toolbarColorPicker.d.ts.map

package/dist/ui/controls/toolbarColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarColorPicker.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarColorPicker.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,UAAU,EAAQ,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG7E,qBACa,kBAAmB,SAAQ,UAAU;IAEjD,MAAM,CAAC,MAAM,4BAmCV;IAGH,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAGd,QAAQ,EAAE,QAAQ,CAAC;IAGnB,MAAM,EAAE,MAAM,CAAC;IAGf,UAAU,EAAE,cAAc,CAAC;IAE3B,SAAS,GAAI,GAAG,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,UAIzC;IAED,UAAU,GAAI,GAAG,gBAAgB,UAGhC;IAED,aAAa,GAAI,GAAG,gBAAgB,UAGnC;IAED,MAAM,6CAyBJ;CAEF"}

package/dist/ui/controls/toolbarColorPicker.js

@@ -0,0 +1,111 @@
+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 { css, LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { actions } from '@omegagrid/core';
+let ToolbarColorPicker = class ToolbarColorPicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._onChange = (e) => {
+            this.button.style.backgroundColor = e.value;
+            actions.dispatchActionEvent(this, 'toolbar', { type: 'select', key: this.item.id, value: e.value });
+            this.dropdown.close();
+        };
+        this._onPreview = (e) => {
+            this.button.style.backgroundColor = e.color;
+            actions.dispatchActionEvent(this, 'toolbar', { type: 'preview', key: this.item.id, value: e.color });
+        };
+        this._onPreviewEnd = (e) => {
+            this.button.style.backgroundColor = e.color;
+            actions.dispatchActionEvent(this, 'toolbar', { type: 'previewEnd', key: this.item.id, value: e.color });
+        };
+        this.render = () => html `
+		<og-button 
+			mode="toggle"
+			color="gray"
+			style="${styleMap({ backgroundColor: this.value })}"
+			?disabled="${!!this.item.disabled}">
+			<div class="btn-content" slot="content">
+				${this.item.icon ? html `<og-icon .icon="${this.item.icon}"></og-icon>` : ``}
+			</div>
+		</og-button>
+
+		<og-dropdown
+			style="min-width: 14px; flex: 0"
+			color="gray"
+			alignment="left"
+			?disabled="${!!this.item.disabled}"
+			.positionOffset="${-constants.TOOLBAR_COMPONENT_SIZE_BASE}">
+			<og-colorpicker
+				slot="content"
+				@change="${this._onChange}"
+				@preview="${this._onPreview}"
+				@previewEnd="${this._onPreviewEnd}"
+				@mousedown="${(e) => e.stopPropagation()}">
+			</og-colorpicker>
+		</og-dropdown>
+	`;
+    }
+};
+ToolbarColorPicker.styles = [css `
+		:host {
+			display: flex;
+			flex-direction: row;
+			max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+		}
+
+		og-button {
+			box-sizing: border-box;
+			display: block;
+			width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+			height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+			max-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+			min-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+			line-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+			padding: 0;
+			flex: 0;
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+
+		.btn-content {
+			text-align: center;
+			margin-left: 1px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		og-button+og-dropdown {
+			border-top-left-radius: 0;
+			border-bottom-left-radius: 0;
+			border-left: none;
+			height: 100%;
+		}
+	`];
+__decorate([
+    property({ type: Object })
+], ToolbarColorPicker.prototype, "item", void 0);
+__decorate([
+    property({ type: String })
+], ToolbarColorPicker.prototype, "value", void 0);
+__decorate([
+    query('og-dropdown')
+], ToolbarColorPicker.prototype, "dropdown", void 0);
+__decorate([
+    query('og-button')
+], ToolbarColorPicker.prototype, "button", void 0);
+__decorate([
+    query('.btn-content')
+], ToolbarColorPicker.prototype, "btnContent", void 0);
+ToolbarColorPicker = __decorate([
+    customElement('og-toolbar-colorpicker')
+], ToolbarColorPicker);
+export { ToolbarColorPicker };
+//# sourceMappingURL=toolbarColorPicker.js.map

package/dist/ui/controls/toolbarColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarColorPicker.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarColorPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import constants from '../../constants';\nimport { css, LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ToolbarItem } from '../../types';\nimport { Button, ColorPickerEvent, Dropdown, events } from '@omegagrid/core';\nimport { actions } from '@omegagrid/core';\n\n@customElement('og-toolbar-colorpicker')\nexport class ToolbarColorPicker extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tmax-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\n\t\tog-button {\n\t\t\tbox-sizing: border-box;\n\t\t\tdisplay: block;\n\t\t\twidth: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\theight: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\tmax-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\tmin-width: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\tline-height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t\tpadding: 0;\n\t\t\tflex: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\n\t\t.btn-content {\n\t\t\ttext-align: center;\n\t\t\tmargin-left: 1px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\n\t\tog-button+og-dropdown {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-left: none;\n\t\t\theight: 100%;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\t@property({type: String})\n\tvalue: string;\n\n\t@query('og-dropdown')\n\tdropdown: Dropdown;\n\n\t@query('og-button')\n\tbutton: Button;\n\n\t@query('.btn-content')\n\tbtnContent: HTMLDivElement;\n\n\t_onChange = (e: events.ChangeEvent<string>) => {\n\t\tthis.button.style.backgroundColor = e.value;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'select', key: this.item.id, value: e.value});\n\t\tthis.dropdown.close();\n\t}\n\n\t_onPreview = (e: ColorPickerEvent) => {\n\t\tthis.button.style.backgroundColor = e.color;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'preview', key: this.item.id, value: e.color});\n\t}\n\n\t_onPreviewEnd = (e: ColorPickerEvent) => {\n\t\tthis.button.style.backgroundColor = e.color;\n\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'previewEnd', key: this.item.id, value: e.color});\n\t}\n\t\n\trender = () => html`\n\t\t<og-button \n\t\t\tmode=\"toggle\"\n\t\t\tcolor=\"gray\"\n\t\t\tstyle=\"${styleMap({backgroundColor: this.value})}\"\n\t\t\t?disabled=\"${!!this.item.disabled}\">\n\t\t\t<div class=\"btn-content\" slot=\"content\">\n\t\t\t\t${this.item.icon ? html`<og-icon .icon=\"${this.item.icon}\"></og-icon>` : ``}\n\t\t\t</div>\n\t\t</og-button>\n\n\t\t<og-dropdown\n\t\t\tstyle=\"min-width: 14px; flex: 0\"\n\t\t\tcolor=\"gray\"\n\t\t\talignment=\"left\"\n\t\t\t?disabled=\"${!!this.item.disabled}\"\n\t\t\t.positionOffset=\"${-constants.TOOLBAR_COMPONENT_SIZE_BASE}\">\n\t\t\t<og-colorpicker\n\t\t\t\tslot=\"content\"\n\t\t\t\t@change=\"${this._onChange}\"\n\t\t\t\t@preview=\"${this._onPreview}\"\n\t\t\t\t@previewEnd=\"${this._onPreviewEnd}\"\n\t\t\t\t@mousedown=\"${(e: MouseEvent) => e.stopPropagation()}\">\n\t\t\t</og-colorpicker>\n\t\t</og-dropdown>\n\t`;\n\n}"]}

package/dist/ui/controls/toolbarCustomDropdown.d.ts

@@ -0,0 +1,11 @@
+import { Dropdown } from '@omegagrid/core';
+import { ToolbarItem } from '../../types';
+export declare class ToolbarCustomDropdown extends Dropdown {
+    static styles: import("lit").CSSResult[];
+    item: ToolbarItem;
+    value: string;
+    willUpdate(props: Map<string, unknown>): void;
+    getComponent(): Promise<HTMLElement>;
+    open(): Promise<void>;
+}
+//# sourceMappingURL=toolbarCustomDropdown.d.ts.map

package/dist/ui/controls/toolbarCustomDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarCustomDropdown.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarCustomDropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAU,MAAM,iBAAiB,CAAC;AAIpE,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG1C,qBACa,qBAAsB,SAAQ,QAAQ;IAElD,MAAM,CAAC,MAAM,4BAMV;IAGH,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAEd,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAShC,YAAY;IAaZ,IAAI;CASV"}

package/dist/ui/controls/toolbarCustomDropdown.js

@@ -0,0 +1,58 @@
+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 { ColorTypes, dom, Dropdown } from '@omegagrid/core';
+import constants from '../../constants';
+import { css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { actions } from '@omegagrid/core';
+let ToolbarCustomDropdown = class ToolbarCustomDropdown extends Dropdown {
+    willUpdate(props) {
+        super.willUpdate(props);
+        this.style.width = dom.numToPixels(this.item.width || (this.item.text ? null : 23));
+        this.style.textAlign = this.item.text ? 'left' : 'center';
+        this.icon = this.item.icon;
+        this.color = ColorTypes.Gray;
+        this.noCaret = true;
+    }
+    async getComponent() {
+        if (!this.item.createComponent)
+            return null;
+        const component = await this.item.createComponent(this.item.id, this.value);
+        component.slot = 'inner-content';
+        component.addEventListener('change', (e) => {
+            this.close();
+            actions.dispatchActionEvent(this, 'toolbar', { type: 'select', key: this.item.id, value: e.value });
+        });
+        return component;
+    }
+    async open() {
+        const component = await this.getComponent();
+        if (component.parentElement != this.dropdown) {
+            dom.empty(this.dropdown);
+            this.dropdown.appendChild(component);
+        }
+        await super.open();
+    }
+};
+ToolbarCustomDropdown.styles = [...Dropdown.styles, css `
+		:host {
+			display: flex;
+			flex-direction: row;
+			height: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;
+		}
+	`];
+__decorate([
+    property({ type: Object })
+], ToolbarCustomDropdown.prototype, "item", void 0);
+__decorate([
+    property({ type: String })
+], ToolbarCustomDropdown.prototype, "value", void 0);
+ToolbarCustomDropdown = __decorate([
+    customElement('og-toolbar-customdropdown')
+], ToolbarCustomDropdown);
+export { ToolbarCustomDropdown };
+//# sourceMappingURL=toolbarCustomDropdown.js.map

package/dist/ui/controls/toolbarCustomDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarCustomDropdown.js","sourceRoot":"","sources":["../../../src/ui/controls/toolbarCustomDropdown.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAU,MAAM,iBAAiB,CAAC;AACpE,OAAO,SAAS,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAGnC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ;IAgBlD,UAAU,CAAC,KAA2B;QACrC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACpF,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC1D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACrB,CAAC;IAED,KAAK,CAAC,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO,IAAI,CAAC;QAC5C,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5E,SAAS,CAAC,IAAI,GAAG,eAAe,CAAC;QAEjC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAqB,EAAE,EAAE;YAC9D,IAAI,CAAC,KAAK,EAAE,CAAC;YACb,OAAO,CAAC,mBAAmB,CAAC,IAAI,EAAE,SAAS,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAC,CAAC,CAAC;QACnG,CAAC,CAAC,CAAC;QAEH,OAAO,SAAS,CAAC;IAClB,CAAC;IAED,KAAK,CAAC,IAAI;QACT,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,YAAY,EAAE,CAAC;QAC5C,IAAI,SAAS,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC9C,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC;QACD,MAAM,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;;AA3CM,4BAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,CAAA;;;;aAI5B,SAAS,CAAC,2BAA2B;;EAEhD,CAAC,AANW,CAMV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mDACP;AAGlB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oDACX;AAdF,qBAAqB;IADjC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,qBAAqB,CA+CjC","sourcesContent":["import { ColorTypes, dom, Dropdown, events } from '@omegagrid/core';\nimport constants from '../../constants';\nimport { css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ToolbarItem } from '../../types';\nimport { actions } from '@omegagrid/core';\n\n@customElement('og-toolbar-customdropdown')\nexport class ToolbarCustomDropdown extends Dropdown {\n\n\tstatic styles = [...Dropdown.styles, css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\theight: ${constants.TOOLBAR_COMPONENT_SIZE_BASE}px;\n\t\t}\n\t`];\n\n\t@property({type: Object})\n\titem: ToolbarItem;\n\n\t@property({type: String})\n\tvalue: string;\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tsuper.willUpdate(props);\n\t\tthis.style.width = dom.numToPixels(this.item.width || (this.item.text ? null : 23));\n\t\tthis.style.textAlign = this.item.text ? 'left' : 'center';\n\t\tthis.icon = this.item.icon;\n\t\tthis.color = ColorTypes.Gray;\n\t\tthis.noCaret = true;\n\t}\n\n\tasync getComponent() {\n\t\tif (!this.item.createComponent) return null;\n\t\tconst component = await this.item.createComponent(this.item.id, this.value);\n\t\tcomponent.slot = 'inner-content';\n\n\t\tcomponent.addEventListener('change', (e: events.ChangeEvent) => {\n\t\t\tthis.close();\n\t\t\tactions.dispatchActionEvent(this, 'toolbar', {type: 'select', key: this.item.id, value: e.value});\n\t\t});\n\n\t\treturn component;\n\t}\n\n\tasync open() {\n\t\tconst component = await this.getComponent();\n\t\tif (component.parentElement != this.dropdown) {\n\t\t\tdom.empty(this.dropdown);\n\t\t\tthis.dropdown.appendChild(component);\n\t\t}\n\t\tawait super.open();\n\t}\n\n}"]}

package/dist/ui/controls/toolbarDropdown.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { ToolbarItem } from '../../types';
+import { SerializedValue, TreeDropdown } from '@omegagrid/tree';
+export declare class ToolbarDropdown extends LitElement {
+    static styles: import("lit").CSSResult[];
+    tree: TreeDropdown;
+    item: ToolbarItem;
+    value: string;
+    updated(): void;
+    _onChange: () => void;
+    getValue(): (string & any[]) | SerializedValue[];
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=toolbarDropdown.d.ts.map

package/dist/ui/controls/toolbarDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbarDropdown.d.ts","sourceRoot":"","sources":["../../../src/ui/controls/toolbarDropdown.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAA0B,eAAe,EAAe,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGrG,qBACa,eAAgB,SAAQ,UAAU;IAE9C,MAAM,CAAC,MAAM,4BAUV;IAGH,IAAI,EAAE,YAAY,CAAC;IAGnB,IAAI,EAAE,WAAW,CAAC;IAGlB,KAAK,EAAE,MAAM,CAAC;IAEd,OAAO;IAaP,SAAS,aASR;IAED,QAAQ;IAMR,MAAM,6CAUJ;CAEF"}