@omegagrid/core 0.10.2 → 0.10.4

package/dist/types.js

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export var ColorTypes;
+(function (ColorTypes) {
+    ColorTypes["Accent"] = "accent";
+    ColorTypes["Red"] = "red";
+    ColorTypes["Yellow"] = "yellow";
+    ColorTypes["Green"] = "green";
+    ColorTypes["Blue"] = "blue";
+    ColorTypes["Gray"] = "gray";
+    ColorTypes["Transparent"] = "transparent";
+})(ColorTypes || (ColorTypes = {}));
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,uDAAuD;AAwDvD,MAAM,CAAN,IAAY,UAQX;AARD,WAAY,UAAU;IACrB,+BAAiB,CAAA;IACjB,yBAAW,CAAA;IACX,+BAAiB,CAAA;IACjB,6BAAe,CAAA;IACf,2BAAa,CAAA;IACb,2BAAa,CAAA;IACb,yCAA2B,CAAA;AAC5B,CAAC,EARW,UAAU,KAAV,UAAU,QAQrB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { TemplateResult } from \"lit-html\";\nimport { IconSpec } from \"./ui\";\n\nexport type ThemeDefinition = Record<string, string>;\nexport type ThemeVariables = Map<string, string>;\n\nexport type ThemeType = 'light'|'dark';\n\nexport type Theme = {\n\tname: string,\n\ttype: ThemeType,\n\tdefinition: ThemeDefinition,\n\taccentColor?: string,\n};\n\nexport type LocaleId = string;\n\nexport type LayoutOptions<TParent extends HTMLElement = HTMLElement> = {\n\tparent?: TParent,\n\telements?: Map<string, HTMLElement>,\n}\n\nexport interface Layout extends HTMLElement {\n\tlayout(options?: LayoutOptions) : void;\n}\n\nexport type ComponentState = {\n\tname?: string;\n\t[key: string]: unknown;\n}\n\nexport interface Statefull {\n\tget state(): ComponentState;\n\tset state(value: ComponentState);\n\tgetState(): ComponentState;\n\tsetState(state: ComponentState): void;\n}\n\n/**\n * General = 'g',\n * Text = 't',\n * Number = 'n',\n * Date = 'd',\n * DateTime = 'dt',\n * Time = 'tm',\n * Checkbox = 'b',\n * Select = 's',\n * MultiSelect = 'm',\n */\nexport type UIValueType = 'g'|'t'|'n'|'d'|'dt'|'tm'|'b'|'s'|'m';\n\nexport type UIValueFormat = string;\n\n\nexport enum ColorTypes {\n\tAccent = 'accent',\n\tRed = 'red',\n\tYellow = 'yellow',\n\tGreen = 'green',\n\tBlue = 'blue',\n\tGray = 'gray',\n\tTransparent = 'transparent',\n}\n\nexport type DecimalSeparator = '.'|',';\nexport type Orientation = 'vertical'|'horizontal';\nexport type VerticalDirection = 'up'|'down';\nexport type HorizontalDirection = 'left'|'right';\nexport type Direction = VerticalDirection | HorizontalDirection;\nexport type DiagonalDirection = 'ne'|'nw'|'se'|'sw';\nexport type VerticalPosition = 'top'|'bottom'|'center';\nexport type HorizontalPosition = 'left'|'right'|'center';\nexport type DirectionalPosition = VerticalPosition | HorizontalPosition;\nexport type Size = {w: number, h: number};\nexport type Location = {x: number, y: number};\nexport type Position = {r?: number, b?: number, l?: number, t?: number};\nexport type CssPosition = {r?: string|number, b?: string|number, l?: string|number, t?: string|number};\nexport type Rect = {x: number, y: number, w: number, h: number};\n\nexport type AcordionItem = SplitContainerItem & {\n\ttitle?: string|HTMLElement|TemplateResult<1>,\n\ticon?: string|IconSpec\n}\n\nexport type SplitContainerItem = {\n\tid?: ComponentId,\n\tsize?: number|null, // width or height\n\tcollapsed?: boolean\n}\n\nexport type ComponentId = string|number;\n\nexport type ComponentFactory<T = HTMLElement> = (id?: ComponentId) => T|Promise<T>;\n\nexport interface ComponentContainer<T = HTMLElement> {\n\tcreateComponent: ComponentFactory<T>;\n}\n\nexport type Matrix<T = unknown> = T[][];\n\nexport type Scalar<T = unknown> = T;\n\nexport type DeepPartial<T> = {\n\t[P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];\n};\n\nexport interface Populatable {\n\tpopulate(source: Record<PropertyKey, unknown>): void;\n\tgetSourceData(): Record<PropertyKey, unknown>;\n}\n\nexport interface IPrototype<T> { prototype: T }\n\nexport type ValueFormatter<T = unknown> = (value: T) => string;\n\nexport type CustomProperties = Record<string, unknown>;\n\nexport type User = {\n\tid: string,\n\tname?: string\n};\n\nexport type AnyFunction<A = any> = (...input: any[]) => A\nexport type AnyConstructor<A = object> = new (...input: any[]) => A\nexport type Mixin<T extends AnyFunction> = InstanceType<ReturnType<T>>\n\nexport interface Model<TSource = unknown> {\n\t\n\tpopulate(source: TSource): void;\n\tgetSourceData(): TSource;\n\n}\n\nexport type KeyValue = {\n\tkey: string,\n\tvalue?: string\n}\n"]}

package/dist/ui/accordion.d.ts

@@ -0,0 +1,16 @@
+import { AcordionItem, ComponentId } from '../types';
+import { Panel } from './panel';
+import { SplitContainer } from './splitContainer';
+export declare class Accordion extends SplitContainer {
+    #private;
+    static styles: import("lit").CSSResult[];
+    items: AcordionItem[];
+    constructor();
+    willUpdate(props: Map<string, unknown>): void;
+    get totalCollapsedHeight(): number;
+    fixSizes(): Promise<void>;
+    layout(): Promise<void>;
+    getComponent(index: number, id?: ComponentId): Panel;
+    connectedCallback(): void;
+}
+//# sourceMappingURL=accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/ui/accordion.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAErD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKlD,qBACa,SAAU,SAAQ,cAAc;;IAE5C,MAAM,CAAC,MAAM,4BAsBV;IAGH,KAAK,EAAE,YAAY,EAAE,CAAM;;IAe3B,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IActC,IAAI,oBAAoB,WAMvB;IAEK,QAAQ;IAkER,MAAM;IAQZ,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,WAAW;IAwC5C,iBAAiB;CAKjB"}

package/dist/ui/accordion.js

@@ -0,0 +1,209 @@
+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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Accordion_panels, _Accordion_collapsedIndices, _Accordion_heights;
+import { html, render, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { dom } from '../common';
+import { SplitContainer } from './splitContainer';
+import { until } from 'lit/directives/until.js';
+const MIN_PANEL_SIZE = 50;
+let Accordion = class Accordion extends SplitContainer {
+    constructor() {
+        super();
+        this.items = [];
+        _Accordion_panels.set(this, new Map());
+        _Accordion_collapsedIndices.set(this, new Set());
+        _Accordion_heights.set(this, []);
+        this.defaultLayout = false;
+        this.addEventListener('splitContainer.resize', () => {
+            __classPrivateFieldSet(this, _Accordion_heights, [...this.containers].map(c => c.offsetHeight), "f");
+            this.layout();
+        });
+    }
+    willUpdate(props) {
+        if (props.has('items')) {
+            __classPrivateFieldGet(this, _Accordion_panels, "f").clear();
+            __classPrivateFieldSet(this, _Accordion_heights, [], "f");
+            this.items?.forEach((item, i) => {
+                // override SplitContainer collapse logic
+                if (item.collapsed)
+                    __classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").add(i);
+                item.collapsed = false;
+                __classPrivateFieldGet(this, _Accordion_heights, "f").push(item.size);
+            });
+        }
+        super.willUpdate(props);
+    }
+    get totalCollapsedHeight() {
+        return [...__classPrivateFieldGet(this, _Accordion_collapsedIndices, "f")].reduce((acc, i) => {
+            const panel = __classPrivateFieldGet(this, _Accordion_panels, "f").get(i);
+            if (!panel)
+                return acc;
+            return acc + (panel.collapsed ? panel.header.offsetHeight ?? 0 : 0);
+        }, 0);
+    }
+    async fixSizes() {
+        await Promise.all([...__classPrivateFieldGet(this, _Accordion_panels, "f").values()].map(panel => panel.updateComplete));
+        const containerHeight = this.clientHeight;
+        const collapsedCount = __classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").size;
+        const visibleCount = this.items.length - collapsedCount;
+        let totalCollapsedHeight = 0;
+        let totalVisibleHeight = 0;
+        let unsetHeightCount = 0;
+        let heights = new Array(this.items.length).fill(null);
+        let lastIndex;
+        for (let i = 0; i < this.items.length; i++) {
+            const collapsed = __classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").has(i);
+            if (collapsed) {
+                const panel = __classPrivateFieldGet(this, _Accordion_panels, "f").get(i);
+                if (!panel)
+                    continue;
+                heights[i] = panel.header?.offsetHeight || 0;
+                totalCollapsedHeight += heights[i];
+            }
+            else {
+                heights[i] = __classPrivateFieldGet(this, _Accordion_heights, "f")[i];
+                if (!heights[i])
+                    unsetHeightCount++;
+                totalVisibleHeight += heights[i] || 0;
+                lastIndex = i;
+            }
+        }
+        let remainingHeight = containerHeight - totalCollapsedHeight - totalVisibleHeight;
+        let reset = false;
+        let addHeight = 0;
+        let remainingCount = visibleCount;
+        if (remainingHeight > 0) {
+            for (let i = 0; i < this.items.length; i++) {
+                if (__classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").has(i))
+                    continue;
+                if (!heights[i]) {
+                    addHeight = remainingHeight / unsetHeightCount;
+                    heights[i] = addHeight;
+                    unsetHeightCount--;
+                    remainingHeight -= addHeight;
+                    totalVisibleHeight += addHeight;
+                }
+                else {
+                    addHeight = remainingHeight / remainingCount;
+                    heights[i] += addHeight;
+                    remainingHeight -= addHeight;
+                }
+                remainingCount--;
+            }
+        }
+        for (let i = 0; i < this.items.length; i++) {
+            if (__classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").has(i))
+                continue;
+            if (heights[i] < MIN_PANEL_SIZE) {
+                reset = true;
+                break;
+            }
+        }
+        if (reset) {
+            heights = heights.map((h, i) => __classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").has(i) ? h : (totalVisibleHeight / visibleCount));
+        }
+        else if (remainingHeight > 0) {
+            heights[lastIndex] += remainingHeight;
+        }
+        heights.forEach((h, i) => this.setContainerSize(i, h));
+    }
+    async layout() {
+        await this.fixSizes();
+        this.containers.forEach((_, i) => {
+            const component = this.getContainerComponent(i);
+            if (component?.layout)
+                component.layout();
+        });
+    }
+    getComponent(index, id) {
+        let panel = __classPrivateFieldGet(this, _Accordion_panels, "f").get(index);
+        if (panel)
+            return panel;
+        panel = dom.createElement('og-panel');
+        const item = this.items[index];
+        panel.collapsible = true;
+        panel.collapsed = __classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").has(index) ?? false;
+        panel.icon = item.icon;
+        panel.arrowPosition = 'left';
+        __classPrivateFieldGet(this, _Accordion_panels, "f").set(index, panel);
+        panel.addEventListener('resizestart', () => {
+            if (panel.collapsed) {
+                if (!__classPrivateFieldGet(this, _Accordion_heights, "f")[index])
+                    __classPrivateFieldGet(this, _Accordion_heights, "f")[index] = this.getContainer(index).offsetHeight;
+                __classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").add(index);
+            }
+            else {
+                __classPrivateFieldGet(this, _Accordion_collapsedIndices, "f").delete(index);
+            }
+        });
+        // panel.addEventListener('resize', () => {
+        // 	console.log(panel.body.offsetHeight + panel.header.offsetHeight);
+        // 	let h = panel.body.offsetHeight + panel.header.offsetHeight;
+        // 	this.setContainerSize(index, h);
+        // });
+        panel.addEventListener('resizestop', () => {
+            this.layout();
+        });
+        render(html `
+			<div slot="header">${item.title ?? ''}</div>
+			<div slot="body" style="height: 100%; overflow: hidden; position: relative">
+				${until(this.createComponent(id ?? index))}
+			</div>
+		`, panel);
+        return panel;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.orientation = 'vertical';
+    }
+};
+_Accordion_panels = new WeakMap();
+_Accordion_collapsedIndices = new WeakMap();
+_Accordion_heights = new WeakMap();
+Accordion.styles = [...SplitContainer.styles, css `
+		:host {
+			border: 1px solid var(--og-border-color);
+		}
+
+		.item {
+			border-top: none !important;
+		}
+		
+		.item.first og-panel {
+			border-top: none;
+		}
+
+		.item og-panel {
+			border-bottom-width: 0;
+			border-left-width: 0;
+			border-right-width: 0;
+		}
+
+		.item.last og-panel {
+			border-bottom-width: 1px;
+		}
+	`];
+__decorate([
+    property({ type: Array })
+], Accordion.prototype, "items", void 0);
+Accordion = __decorate([
+    customElement(`og-accordion`)
+], Accordion);
+export { Accordion };
+//# sourceMappingURL=accordion.js.map

package/dist/ui/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/ui/accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { AcordionItem, ComponentId } from '../types';\nimport { dom } from '../common';\nimport { Panel } from './panel';\nimport { SplitContainer } from './splitContainer';\nimport { until } from 'lit/directives/until.js';\n\nconst MIN_PANEL_SIZE = 50;\n\n@customElement(`og-accordion`)\nexport class Accordion extends SplitContainer {\n\n\tstatic styles = [...SplitContainer.styles, css`\n\t\t:host {\n\t\t\tborder: 1px solid var(--og-border-color);\n\t\t}\n\n\t\t.item {\n\t\t\tborder-top: none !important;\n\t\t}\n\t\t\n\t\t.item.first og-panel {\n\t\t\tborder-top: none;\n\t\t}\n\n\t\t.item og-panel {\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-left-width: 0;\n\t\t\tborder-right-width: 0;\n\t\t}\n\n\t\t.item.last og-panel {\n\t\t\tborder-bottom-width: 1px;\n\t\t}\n\t`];\n\n\t@property({type: Array})\n\titems: AcordionItem[] = [];\n\n\t#panels = new Map<number, Panel>();\n\t#collapsedIndices = new Set<number>();\n\t#heights: number[] = [];\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.defaultLayout = false;\n\t\tthis.addEventListener('splitContainer.resize', () => {\n\t\t\tthis.#heights = [...this.containers].map(c => c.offsetHeight);\n\t\t\tthis.layout();\n\t\t});\n\t}\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tif (props.has('items')) {\n\t\t\tthis.#panels.clear();\n\t\t\tthis.#heights = [];\n\t\t\tthis.items?.forEach((item, i) => {\n\t\t\t\t// override SplitContainer collapse logic\n\t\t\t\tif (item.collapsed) this.#collapsedIndices.add(i);\n\t\t\t\titem.collapsed = false;\n\t\t\t\tthis.#heights.push(item.size);\n\t\t\t});\n\t\t}\n\t\tsuper.willUpdate(props);\n\t}\n\n\tget totalCollapsedHeight() {\n\t\treturn [...this.#collapsedIndices].reduce((acc, i) => {\n\t\t\tconst panel = this.#panels.get(i);\n\t\t\tif (!panel) return acc;\n\t\t\treturn acc + (panel.collapsed ? panel.header.offsetHeight ?? 0 : 0);\n\t\t}, 0);\n\t}\n\n\tasync fixSizes() {\n\t\tawait Promise.all([...this.#panels.values()].map(panel => panel.updateComplete));\n\t\tconst containerHeight = this.clientHeight;\n\t\tconst collapsedCount = this.#collapsedIndices.size;\n\t\tconst visibleCount = this.items.length - collapsedCount;\n\t\tlet totalCollapsedHeight = 0;\n\t\tlet totalVisibleHeight = 0;\n\t\tlet unsetHeightCount = 0;\n\t\tlet heights: number[] = new Array(this.items.length).fill(null);\n\t\tlet lastIndex: number;\n\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tconst collapsed = this.#collapsedIndices.has(i);\n\t\t\tif (collapsed) {\n\t\t\t\tconst panel = this.#panels.get(i);\n\t\t\t\tif (!panel) continue;\n\t\t\t\theights[i] = panel.header?.offsetHeight || 0;\n\t\t\t\ttotalCollapsedHeight += heights[i];\n\t\t\t} else {\n\t\t\t\theights[i] = this.#heights[i];\n\t\t\t\tif (!heights[i]) unsetHeightCount++;\n\t\t\t\ttotalVisibleHeight += heights[i] || 0;\n\t\t\t\tlastIndex = i;\n\t\t\t}\n\t\t}\n\n\t\tlet remainingHeight = containerHeight - totalCollapsedHeight - totalVisibleHeight;\n\t\tlet reset = false;\n\t\tlet addHeight = 0;\n\t\tlet remainingCount = visibleCount;\n\n\t\tif (remainingHeight > 0) {\n\t\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\t\tif (this.#collapsedIndices.has(i)) continue;\n\t\t\t\tif (!heights[i]) {\n\t\t\t\t\taddHeight = remainingHeight / unsetHeightCount\n\t\t\t\t\theights[i] = addHeight;\n\t\t\t\t\tunsetHeightCount--;\n\t\t\t\t\tremainingHeight -= addHeight;\n\t\t\t\t\ttotalVisibleHeight += addHeight;\n\t\t\t\t} else {\n\t\t\t\t\taddHeight = remainingHeight / remainingCount;\n\t\t\t\t\theights[i] += addHeight;\n\t\t\t\t\tremainingHeight -= addHeight;\n\t\t\t\t}\n\t\t\t\tremainingCount--;\n\t\t\t}\n\t\t}\n\n\t\tfor (let i = 0; i < this.items.length; i++) {\n\t\t\tif (this.#collapsedIndices.has(i)) continue;\n\t\t\tif (heights[i] < MIN_PANEL_SIZE) {\n\t\t\t\treset = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tif (reset) {\n\t\t\theights = heights.map((h, i) => this.#collapsedIndices.has(i) ? h : (totalVisibleHeight / visibleCount));\n\t\t} else if (remainingHeight > 0) {\n\t\t\theights[lastIndex] += remainingHeight;\n\t\t}\n\n\t\theights.forEach((h, i) => this.setContainerSize(i, h));\n\t}\n\n\tasync layout() {\n\t\tawait this.fixSizes();\n\t\tthis.containers.forEach((_, i) => {\n\t\t\tconst component = this.getContainerComponent(i);\n\t\t\tif (component?.layout) component.layout();\n\t\t});\n\t}\n\n\tgetComponent(index: number, id?: ComponentId) {\n\t\tlet panel = this.#panels.get(index);\n\t\tif (panel) return panel;\n\n\t\tpanel = dom.createElement<Panel>('og-panel');\n\t\tconst item = this.items[index];\n\t\tpanel.collapsible = true;\n\t\tpanel.collapsed = this.#collapsedIndices.has(index) ?? false;\n\t\tpanel.icon = item.icon;\n\t\tpanel.arrowPosition = 'left';\n\t\tthis.#panels.set(index, panel);\n\n\t\tpanel.addEventListener('resizestart', () => {\n\t\t\tif (panel.collapsed) {\n\t\t\t\tif (!this.#heights[index]) this.#heights[index] = this.getContainer(index).offsetHeight;\n\t\t\t\tthis.#collapsedIndices.add(index);\n\t\t\t} else {\n\t\t\t\tthis.#collapsedIndices.delete(index);\n\t\t\t}\n\t\t});\n\t\t\n\t\t// panel.addEventListener('resize', () => {\n\t\t// \tconsole.log(panel.body.offsetHeight + panel.header.offsetHeight);\n\t\t// \tlet h = panel.body.offsetHeight + panel.header.offsetHeight;\n\t\t// \tthis.setContainerSize(index, h);\n\t\t// });\n\t\t\n\t\tpanel.addEventListener('resizestop', () => {\n\t\t\tthis.layout();\n\t\t});\n\n\t\trender(html`\n\t\t\t<div slot=\"header\">${item.title ?? ''}</div>\n\t\t\t<div slot=\"body\" style=\"height: 100%; overflow: hidden; position: relative\">\n\t\t\t\t${until(this.createComponent(id ?? index))}\n\t\t\t</div>\n\t\t`, panel);\n\t\treturn panel;\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.orientation = 'vertical';\n\t}\n\t\n}"]}

package/dist/ui/alert.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export type AlertType = 'danger' | 'warning' | 'info' | 'success';
+export declare class AlertEvent extends Event {
+    constructor(type: string);
+}
+export declare class Alert extends LitElement {
+    static styles: import("lit").CSSResult[];
+    text: string;
+    icon: string;
+    type: AlertType;
+    closable: boolean;
+    close(dispatchEvent?: boolean): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAKvD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAC,SAAS,GAAC,MAAM,GAAC,SAAS,CAAC;AAS5D,qBAAa,UAAW,SAAQ,KAAK;gBACxB,IAAI,EAAE,MAAM;CAGxB;AAED,qBACa,KAAM,SAAQ,UAAU;IAEpC,MAAM,CAAC,MAAM,4BAwCX;IAGF,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,MAAM,CAAC;IAGb,IAAI,EAAE,SAAS,CAAC;IAGhB,QAAQ,UAAS;IAEjB,KAAK,CAAC,aAAa,CAAC,EAAE,OAAO;IAK7B,MAAM,6CAUJ;CAEF"}

package/dist/ui/alert.js

@@ -0,0 +1,101 @@
+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 { LitElement, html, css, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ColorTypes } from '../types';
+import { dom } from '../common';
+const typeMap = {
+    'danger': ColorTypes.Red,
+    'warning': ColorTypes.Yellow,
+    'info': ColorTypes.Blue,
+    'success': ColorTypes.Green
+};
+export class AlertEvent extends Event {
+    constructor(type) {
+        super(`alert.${type}`, { bubbles: true, composed: true });
+    }
+}
+let Alert = class Alert extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.closable = false;
+        this.render = () => html `
+		${this.icon ? html `
+			<og-icon .icon="${this.icon}"></og-icon>
+		` : ''}
+		<div id="text">
+			${this.text ? html `${this.text}` : html `<slot name="content"></slot>`}
+		</div>
+		${this.closable ? html `
+			<div id="close" @click="${() => this.close(true)}">&times</div>
+		` : ``}
+	`;
+    }
+    close(dispatchEvent) {
+        dom.remove(this);
+        if (dispatchEvent)
+            this.dispatchEvent(new AlertEvent('close'));
+    }
+};
+Alert.styles = [css `
+		:host {
+			font-size: var(--og-font-size);
+			padding: 5px;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: 5px;
+			border-radius: var(--og-base-radius);
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		#text {
+			flex: 1;
+		}
+
+		#close {
+			min-width: 16px;
+			height: 16px;
+			line-height: 16px;
+			flex: 0;
+			border-radius: 50%;
+			cursor: pointer;
+			text-align: center;
+		}
+
+		#close:hover {
+			background-color: #000000;
+			opacity: 0.5;
+		}
+		`, ...Array.from(Object.keys(typeMap)).map(key => css `
+			:host([type="${unsafeCSS(key)}"]) {
+				color: var(--og-colortype-${unsafeCSS(typeMap[key])}-text-color);
+				background-color: var(--og-colortype-${unsafeCSS(typeMap[key])}-background-color);
+				border: 1px solid var(--og-colortype-${unsafeCSS(typeMap[key])}-border-color);
+			}
+		`)
+];
+__decorate([
+    property({ type: String })
+], Alert.prototype, "text", void 0);
+__decorate([
+    property({ type: String })
+], Alert.prototype, "icon", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Alert.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], Alert.prototype, "closable", void 0);
+Alert = __decorate([
+    customElement(`og-alert`)
+], Alert);
+export { Alert };
+//# sourceMappingURL=alert.js.map

package/dist/ui/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/ui/alert.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAIhC,MAAM,OAAO,GAAkC;IAC9C,QAAQ,EAAE,UAAU,CAAC,GAAG;IACxB,SAAS,EAAE,UAAU,CAAC,MAAM;IAC5B,MAAM,EAAE,UAAU,CAAC,IAAI;IACvB,SAAS,EAAE,UAAU,CAAC,KAAK;CAC3B,CAAC;AAEF,MAAM,OAAO,UAAW,SAAQ,KAAK;IACpC,YAAY,IAAY;QACvB,KAAK,CAAC,SAAS,IAAI,EAAE,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;IACzD,CAAC;CACD;AAGM,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAsDN,aAAQ,GAAG,KAAK,CAAC;QAOjB,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;IAChB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;qBACC,IAAI,CAAC,IAAI;GAC3B,CAAC,CAAC,CAAC,EAAE;;KAEH,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA,8BAA8B;;IAEpE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;6BACK,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;GAChD,CAAC,CAAC,CAAC,EAAE;EACN,CAAC;IAEH,CAAC;IAjBA,KAAK,CAAC,aAAuB;QAC5B,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,aAAa;YAAE,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;IAChE,CAAC;;AAzDM,YAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiClB,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAA;kBACrC,SAAS,CAAC,GAAG,CAAC;gCACA,SAAS,CAAC,OAAO,CAAC,GAAgB,CAAC,CAAC;2CACzB,SAAS,CAAC,OAAO,CAAC,GAAgB,CAAC,CAAC;2CACpC,SAAS,CAAC,OAAO,CAAC,GAAgB,CAAC,CAAC;;GAE5E,CAAC;CACF,AAxCY,CAwCX;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mCACZ;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;mCACZ;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mCACxB;AAGhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;uCACT;AAtDL,KAAK;IADjB,aAAa,CAAC,UAAU,CAAC;GACb,KAAK,CAyEjB","sourcesContent":["import { LitElement, html, css, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ColorTypes } from '../types';\nimport { dom } from '../common';\n\nexport type AlertType = 'danger'|'warning'|'info'|'success';\n\nconst typeMap: Record<AlertType, ColorTypes> = {\n\t'danger': ColorTypes.Red,\n\t'warning': ColorTypes.Yellow,\n\t'info': ColorTypes.Blue,\n\t'success': ColorTypes.Green\n};\n\nexport class AlertEvent extends Event {\n\tconstructor(type: string) {\n\t\tsuper(`alert.${type}`, {bubbles: true, composed: true});\n\t}\n}\n\n@customElement(`og-alert`)\nexport class Alert extends LitElement {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tpadding: 5px;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tgap: 5px;\n\t\t\tborder-radius: var(--og-base-radius);\n\t\t}\n\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t#text {\n\t\t\tflex: 1;\n\t\t}\n\n\t\t#close {\n\t\t\tmin-width: 16px;\n\t\t\theight: 16px;\n\t\t\tline-height: 16px;\n\t\t\tflex: 0;\n\t\t\tborder-radius: 50%;\n\t\t\tcursor: pointer;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t#close:hover {\n\t\t\tbackground-color: #000000;\n\t\t\topacity: 0.5;\n\t\t}\n\t\t`, ...Array.from(Object.keys(typeMap)).map(key => css`\n\t\t\t:host([type=\"${unsafeCSS(key)}\"]) {\n\t\t\t\tcolor: var(--og-colortype-${unsafeCSS(typeMap[key as AlertType])}-text-color);\n\t\t\t\tbackground-color: var(--og-colortype-${unsafeCSS(typeMap[key as AlertType])}-background-color);\n\t\t\t\tborder: 1px solid var(--og-colortype-${unsafeCSS(typeMap[key as AlertType])}-border-color);\n\t\t\t}\n\t\t`)\n\t];\n\n\t@property({type: String})\n\ttext: string;\n\n\t@property({type: String})\n\ticon: string;\n\n\t@property({type: String, reflect: true})\n\ttype: AlertType;\n\n\t@property({type: Boolean})\n\tclosable = false;\n\n\tclose(dispatchEvent?: boolean) {\n\t\tdom.remove(this);\n\t\tif (dispatchEvent) this.dispatchEvent(new AlertEvent('close'));\n\t}\n\n\trender = () => html`\n\t\t${this.icon ? html`\n\t\t\t<og-icon .icon=\"${this.icon}\"></og-icon>\n\t\t` : ''}\n\t\t<div id=\"text\">\n\t\t\t${this.text ? html`${this.text}` : html`<slot name=\"content\"></slot>`}\n\t\t</div>\n\t\t${this.closable ? html`\n\t\t\t<div id=\"close\" @click=\"${() => this.close(true)}\">&times</div>\n\t\t` : ``}\n\t`;\n\t\n}"]}

package/dist/ui/baseElement.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+export declare class ComponentEvent extends Event {
+}
+export declare class BaseElement extends LitElement {
+    readonly customProperties: Record<string, unknown>;
+}
+//# sourceMappingURL=baseElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"baseElement.d.ts","sourceRoot":"","sources":["../../src/ui/baseElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,qBAAa,cAAe,SAAQ,KAAK;CAAI;AAE7C,qBAAa,WAAY,SAAQ,UAAU;IAE1C,SAAgB,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;CAE/D"}

package/dist/ui/baseElement.js

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+export class ComponentEvent extends Event {
+}
+export class BaseElement extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.customProperties = {};
+    }
+}
+//# sourceMappingURL=baseElement.js.map

package/dist/ui/baseElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseElement.js","sourceRoot":"","sources":["../../src/ui/baseElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,MAAM,OAAO,cAAe,SAAQ,KAAK;CAAI;AAE7C,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAEiB,qBAAgB,GAA4B,EAAE,CAAC;IAEhE,CAAC;CAAA","sourcesContent":["import { LitElement } from 'lit';\n\nexport class ComponentEvent extends Event { }\n\nexport class BaseElement extends LitElement {\n\n\tpublic readonly customProperties: Record<string, unknown> = {};\n\n}"]}

package/dist/ui/button.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { ColorTypes } from '../types';
+import { IconSpec } from './icon';
+export declare class Button extends LitElement {
+    static styles: import("lit").CSSResult[];
+    icon: string | IconSpec;
+    text: string;
+    color: ColorTypes;
+    caret: 'none' | 'down' | 'up';
+    disabled: boolean;
+    default: boolean;
+    state: 'checked' | 'unchecked';
+    type: 'normal' | 'toggle';
+    buttonIcon: IconSpec;
+    constructor();
+    connectedCallback(): void;
+    willUpdate(props: Map<PropertyKey, undefined>): void;
+    get hasContent(): string | boolean;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/ui/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAIlC,qBAEa,MAAO,SAAQ,UAAU;IAErC,MAAM,CAAC,MAAM,4BAAW;IAGxB,IAAI,EAAE,MAAM,GAAC,QAAQ,CAAC;IAGtB,IAAI,EAAE,MAAM,CAAQ;IAGpB,KAAK,EAAE,UAAU,CAAqB;IAGtC,KAAK,EAAE,MAAM,GAAC,MAAM,GAAC,IAAI,CAAU;IAGnC,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,KAAK,EAAE,SAAS,GAAC,WAAW,CAAQ;IAGpC,IAAI,EAAE,QAAQ,GAAC,QAAQ,CAAY;IAGnC,UAAU,EAAE,QAAQ,CAAC;;IAYrB,iBAAiB;IAKjB,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC;IAgB7C,IAAI,UAAU,qBAA2F;IAEzG,MAAM,6CAWJ;CAEF"}

package/dist/ui/button.js

@@ -0,0 +1,100 @@
+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 { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ColorTypes } from '../types';
+import { colorable } from '../themes';
+import { style } from './button.style';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { utils } from '../common';
+import { msg } from '@omegagrid/localize';
+let Button = class Button extends LitElement {
+    constructor() {
+        super();
+        this.text = null;
+        this.color = ColorTypes.Accent;
+        this.caret = 'none';
+        this.disabled = false;
+        this.default = false;
+        this.state = null;
+        this.type = 'normal';
+        this.render = () => html `
+		<div class="${classMap({ inner: true, 'has-content': this.hasContent })}">
+			${this.buttonIcon ? html `<og-icon .icon="${this.buttonIcon}"></og-icon>` : html ``}
+			${this.hasContent ? html `
+			<div class="content">${this.text == null || this.text === ''
+            ? html `<slot name="content"></slot>`
+            : html `${msg(this.text)}`}
+			</div>
+			` : html ``}
+			${this.caret == 'none' ? '' : html `<og-icon icon="caret-${this.caret}" style="margin: 0"></og-icon>`}
+		</div>
+	`;
+        this.addEventListener('click', (e) => {
+            if (this.disabled)
+                e.stopImmediatePropagation();
+            else if (this.type == 'toggle') {
+                this.state = this.state == 'checked' ? 'unchecked' : 'checked';
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.tabIndex = 1;
+    }
+    willUpdate(props) {
+        if (this.type == 'toggle' && this.state == null) {
+            this.state = 'unchecked';
+        }
+        if (props.has('icon')) {
+            if (utils.isObject(this.icon)) {
+                this.buttonIcon = this.icon;
+            }
+            else if (this.icon) {
+                this.buttonIcon = { icon: this.icon };
+            }
+            else {
+                this.buttonIcon = null;
+            }
+        }
+    }
+    get hasContent() { return this.text || (this.children.length > 0 && this.children[0].slot == 'content'); }
+};
+Button.styles = [style];
+__decorate([
+    property()
+], Button.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "caret", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "default", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "state", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Button.prototype, "type", void 0);
+__decorate([
+    state()
+], Button.prototype, "buttonIcon", void 0);
+Button = __decorate([
+    customElement(`og-button`),
+    colorable({ props: ['color', 'border', 'background'] })
+], Button);
+export { Button };
+//# sourceMappingURL=button.js.map

package/dist/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/ui/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ColorTypes } from '../types';\nimport { colorable } from '../themes';\nimport { style } from './button.style';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { IconSpec } from './icon';\nimport { utils } from '../common';\nimport { msg } from '@omegagrid/localize';\n\n@customElement(`og-button`)\n@colorable({props: ['color', 'border', 'background']})\nexport class Button extends LitElement {\n\n\tstatic styles = [style];\n\n\t@property()\n\ticon: string|IconSpec;\n\n\t@property({type: String})\n\ttext: string = null;\n\n\t@property({type: String, reflect: true})\n\tcolor: ColorTypes = ColorTypes.Accent;\n\n\t@property({type: String, reflect: true})\n\tcaret: 'none'|'down'|'up' = 'none';\n\n\t@property({type: Boolean, reflect: true})\n\tdisabled = false;\n\n\t@property({type: Boolean, reflect: true})\n\tdefault = false;\n\n\t@property({type: String, reflect: true})\n\tstate: 'checked'|'unchecked' = null;\n\n\t@property({type: String, reflect: true})\n\ttype: 'normal'|'toggle' = 'normal';\n\n\t@state()\n\tbuttonIcon: IconSpec;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('click', (e: PointerEvent) => {\n\t\t\tif (this.disabled) e.stopImmediatePropagation();\n\t\t\telse if (this.type == 'toggle') {\n\t\t\t\tthis.state = this.state == 'checked' ? 'unchecked' : 'checked';\n\t\t\t}\n\t\t});\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.tabIndex = 1;\n\t}\n\n\twillUpdate(props: Map<PropertyKey, undefined>) {\n\t\tif (this.type == 'toggle' && this.state == null) {\n\t\t\tthis.state = 'unchecked';\n\t\t}\n\n\t\tif (props.has('icon')) {\n\t\t\tif (utils.isObject(this.icon)) {\n\t\t\t\tthis.buttonIcon = this.icon as IconSpec;\n\t\t\t} else if (this.icon) {\n\t\t\t\tthis.buttonIcon = {icon: this.icon as string};\n\t\t\t} else {\n\t\t\t\tthis.buttonIcon = null;\n\t\t\t}\n\t\t}\n\t}\n\n\tget hasContent() { return this.text || (this.children.length > 0 && this.children[0].slot == 'content') }\n\n\trender = () => html`\n\t\t<div class=\"${classMap({inner: true, 'has-content': this.hasContent})}\">\n\t\t\t${this.buttonIcon ? html`<og-icon .icon=\"${this.buttonIcon}\"></og-icon>` : html``}\n\t\t\t${this.hasContent ? html`\n\t\t\t<div class=\"content\">${this.text == null || this.text === ''\n\t\t\t\t? html`<slot name=\"content\"></slot>`\n\t\t\t\t: html`${msg(this.text)}`}\n\t\t\t</div>\n\t\t\t` : html``}\n\t\t\t${this.caret == 'none' ? '' : html`<og-icon icon=\"caret-${this.caret}\" style=\"margin: 0\"></og-icon>`}\n\t\t</div>\n\t`;\n\t\n}"]}

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

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

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

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

package/dist/ui/button.style.js

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+import constants from '../constants';
+export const style = css `
+	:host {
+		box-sizing: border-box;
+		font-size: var(--og-font-size);
+		cursor: pointer;
+		display: inline-block;
+		vertical-align: middle;
+		overflow: hidden;
+		height: ${constants.BUTTON_HEIGHT}px;
+		outline: none;
+		user-select: none;
+		border-radius: var(--og-base-radius);
+	}
+
+	:host([default]) {
+		font-weight: bold;
+		text-decoration: underline;
+	}
+
+	:host([state=unchecked]) {
+		border-color: var(--og-background-color);
+		background-color: var(--og-background-color);
+		color: var(--og-text-color);
+	}
+
+	:host([disabled]), :host([disabled]:hover) {
+		background-color: gray;
+		border-color: var(--og-border-color);
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	:host(:hover) {
+		opacity: 0.8;
+	}
+
+	div.inner {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	div.content {
+		flex: 1 0;
+		white-space: nowrap;
+		overflow: hidden;
+		padding: 0 4px;
+	}
+
+	.has-content og-icon {
+		margin-left: 2px;
+	}
+
+`;
+//# sourceMappingURL=button.style.js.map