@omegagrid/tree 0.10.2 → 0.10.4

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+import { IconSpec } from "@omegagrid/core";
+import { NodeModel } from "./model";
+import { TemplateResult } from "lit-html";
+export declare enum SelectMode {
+    None = "none",
+    Single = "single",
+    Multiple = "multiple",
+    MultipleLevels = "multipleLevels"
+}
+export declare enum ItemPropertyType {
+    Numeric = "n",
+    Text = "t",
+    Date = "d",
+    Boolean = "b"
+}
+export type ItemProperty = {
+    name: string;
+    type: ItemPropertyType;
+    format: string;
+};
+export type ItemTypeOptions = {
+    folderIcon?: string;
+    openFolderIcon?: string;
+};
+export type FolderOptions = {
+    openIcon?: IconSpec | string;
+    closedIcon?: IconSpec | string;
+};
+export type TreeAdapterParams = {
+    parent?: NodeModel;
+    parentKey?: string;
+    offset?: number;
+    filter?: string;
+};
+export type NodePlaceholder = {
+    placeholder: true;
+    parent: NodeModel;
+    loading?: boolean;
+    element?: HTMLElement;
+};
+export type TreeNodeRenderer = (div: HTMLDivElement, node: NodeModel) => string | TemplateResult<1> | void;
+//# 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,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,oBAAY,UAAU;IACrB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,cAAc,mBAAmB;CACjC;AAED,oBAAY,gBAAgB;IAC3B,OAAO,MAAM;IACb,IAAI,MAAM;IACV,IAAI,MAAM;IACV,OAAO,MAAM;CACb;AAED,MAAM,MAAM,YAAY,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,MAAM,CAAA;CACd,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;CACvB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC3B,QAAQ,CAAC,EAAE,QAAQ,GAAC,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,QAAQ,GAAC,MAAM,CAAA;CAC5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC/B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CAEhB,CAAA;AAED,MAAM,MAAM,eAAe,GAAG;IAC7B,WAAW,EAAE,IAAI,CAAC;IAClB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,SAAS,KAAK,MAAM,GAAC,cAAc,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC"}

package/dist/types.js

@@ -0,0 +1,15 @@
+export var SelectMode;
+(function (SelectMode) {
+    SelectMode["None"] = "none";
+    SelectMode["Single"] = "single";
+    SelectMode["Multiple"] = "multiple";
+    SelectMode["MultipleLevels"] = "multipleLevels";
+})(SelectMode || (SelectMode = {}));
+export var ItemPropertyType;
+(function (ItemPropertyType) {
+    ItemPropertyType["Numeric"] = "n";
+    ItemPropertyType["Text"] = "t";
+    ItemPropertyType["Date"] = "d";
+    ItemPropertyType["Boolean"] = "b";
+})(ItemPropertyType || (ItemPropertyType = {}));
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAIA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACrB,2BAAa,CAAA;IACb,+BAAiB,CAAA;IACjB,mCAAqB,CAAA;IACrB,+CAAiC,CAAA;AAClC,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB;AAED,MAAM,CAAN,IAAY,gBAKX;AALD,WAAY,gBAAgB;IAC3B,iCAAa,CAAA;IACb,8BAAU,CAAA;IACV,8BAAU,CAAA;IACV,iCAAa,CAAA;AACd,CAAC,EALW,gBAAgB,KAAhB,gBAAgB,QAK3B","sourcesContent":["import { IconSpec } from \"@omegagrid/core\";\nimport { NodeModel } from \"./model\";\nimport { TemplateResult } from \"lit-html\";\n\nexport enum SelectMode {\n\tNone = 'none',\n\tSingle = 'single',\n\tMultiple = 'multiple',\n\tMultipleLevels = 'multipleLevels'\n}\n\nexport enum ItemPropertyType {\n\tNumeric = 'n',\n\tText = 't',\n\tDate = 'd',\n\tBoolean = 'b',\n}\n\nexport type ItemProperty = {\n\tname: string,\n\ttype: ItemPropertyType,\n\tformat: string\n};\n\nexport type ItemTypeOptions = {\n\tfolderIcon?: string,\n\topenFolderIcon?: string\n};\n\nexport type FolderOptions = {\n\topenIcon?: IconSpec|string,\n\tclosedIcon?: IconSpec|string\n};\n\nexport type TreeAdapterParams = {\n\tparent?: NodeModel,\n\tparentKey?: string,\n\toffset?: number,\n\tfilter?: string,\n\t//selectedValues?: SerializedValue[]\n}\n\nexport type NodePlaceholder = {\n\tplaceholder: true,\n\tparent: NodeModel,\n\tloading?: boolean,\n\telement?: HTMLElement\n}\n\nexport type TreeNodeRenderer = (div: HTMLDivElement, node: NodeModel) => string|TemplateResult<1>|void;"]}

package/dist/ui/dropdown.d.ts

@@ -0,0 +1,68 @@
+import { Button, Dropdown, Tooltip, Input } from "@omegagrid/core";
+import { TreeModel, TreeSource } from "../model/treeModel";
+import { SelectedItemParams, TreeSelectionModel, SerializedValue } from "../model/selectionModel";
+import { TreeDropdownOptions } from "../options";
+import { TreeAdapter } from "../model/treeAdapter";
+import { Tree, TreeEvent } from "./tree";
+import { NodeModel } from "../model";
+export declare class TreeDropdown extends Dropdown {
+    static styles: import("lit").CSSResult[];
+    options: TreeDropdownOptions;
+    model: TreeModel;
+    adapter: TreeAdapter;
+    selection: TreeSelectionModel;
+    maxHeight: number;
+    maxWidth: number;
+    value: SerializedValue[];
+    cross: boolean;
+    caption: string;
+    placeholder: string;
+    buttonInput: boolean;
+    preventInputEnter: boolean;
+    dynamicWidth: boolean;
+    selectedItems: Map<string, SelectedItemParams>;
+    button: Button;
+    input: Input;
+    contentDiv: HTMLDivElement;
+    searchTerm: string;
+    _tree: Tree;
+    _renderDropdown: boolean;
+    _firstOpen: boolean;
+    _autoHighlight: boolean;
+    originalWidth: number;
+    _debounceWidthUpdate: {
+        (this: unknown, ...args: [] & any[]): Promise<void>;
+        cancel: (reason?: any) => void;
+    };
+    _onTreeRender: () => void;
+    get hasCrossButton(): boolean;
+    get tree(): Tree;
+    tooltip: Tooltip;
+    _onChange(e: TreeEvent): void;
+    open(): Promise<void>;
+    willUpdate(changedProps: Map<PropertyKey, unknown>): Promise<void>;
+    filter(term: string): Promise<void>;
+    clearFilter(): Promise<void>;
+    focus(): void;
+    constructor();
+    connectedCallback(): void;
+    setSourceData(sourceData: TreeSource, options?: Partial<TreeDropdownOptions>): void;
+    updateOptions(options: Partial<TreeDropdownOptions>): void;
+    adjustWidth(): void;
+    clearSelection(dispatchEvent?: boolean): Promise<void>;
+    _onMouseOver: () => void;
+    _onMouseOut: () => void;
+    getSelectionItems(): [NodeModel, [number, boolean][], boolean][];
+    getButtonContentHtml(): string | import("lit-html").TemplateResult<1>;
+    getSelectionHtml(): import("lit-html").TemplateResult<1>;
+    getSelectionText(): string;
+    _debounceFilter: {
+        (this: unknown, ...args: [term: string] & any[]): Promise<void>;
+        cancel: (reason?: any) => void;
+    };
+    _onInput: (e: InputEvent) => Promise<void>;
+    _onInputKeyDown: (e: KeyboardEvent) => void;
+    _onInputBlur: () => string;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAO,KAAK,EAAqB,MAAM,iBAAiB,CAAC;AAE3F,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAClG,OAAO,EAAe,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAE9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAIzC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAKrC,qBACa,YAAa,SAAQ,QAAQ;IAEzC,MAAM,CAAC,MAAM,4BAA+B;IAG5C,OAAO,EAAE,mBAAmB,CAAiB;IAG7C,KAAK,EAAE,SAAS,CAAC;IAGjB,OAAO,EAAE,WAAW,CAAC;IAGrB,SAAS,EAAE,kBAAkB,CAAwC;IAGrE,SAAS,SAAO;IAGhB,QAAQ,SAAO;IAGf,KAAK,EAAE,eAAe,EAAE,CAAC;IAGzB,KAAK,UAAS;IAGd,OAAO,EAAE,MAAM,CAAC;IAGhB,WAAW,EAAE,MAAM,CAAC;IAGpB,WAAW,UAAS;IAGpB,iBAAiB,UAAS;IAG1B,YAAY,UAAS;IAGrB,aAAa,kCAAyC;IAGtD,MAAM,EAAE,MAAM,CAAC;IAGf,KAAK,EAAE,KAAK,CAAC;IAGb,UAAU,EAAE,cAAc,CAAC;IAG3B,UAAU,SAAM;IAEhB,KAAK,EAAE,IAAI,CAAC;IACZ,eAAe,UAAQ;IACvB,UAAU,UAAQ;IAClB,cAAc,UAAQ;IACtB,aAAa,SAAK;IAElB,oBAAoB;;uBAvEZ,CAAC;MA2EN;IAEH,aAAa,aAEZ;IAED,IAAI,cAAc,YAEjB;IAED,IAAI,IAAI,SAaP;IAED,OAAO,UAA4C;IAEnD,SAAS,CAAC,CAAC,EAAE,SAAS;IAYhB,IAAI;IAKJ,UAAU,CAAC,YAAY,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAiClD,MAAM,CAAC,IAAI,EAAE,MAAM;IAQnB,WAAW;IAOjB,KAAK;;IAmBL,iBAAiB;IASjB,aAAa,CAAC,UAAU,EAAE,UAAU,EAAE,OAAO,GAAE,OAAO,CAAC,mBAAmB,CAAQ;IAMlF,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,mBAAmB,CAAC;IAKnD,WAAW;IAaL,cAAc,CAAC,aAAa,UAAQ;IAQ1C,YAAY,aASX;IAED,WAAW,aAEV;IAED,iBAAiB,IAAK,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE;IAgBjE,oBAAoB;IA2BpB,gBAAgB;IAehB,gBAAgB;IAOhB,eAAe;;uBAnTP,CAAC;MAsTD;IAER,QAAQ,GAAU,GAAG,UAAU,mBAK9B;IAED,eAAe,GAAI,GAAG,aAAa,UAmBlC;IAED,YAAY,eAAoD;IAEhE,MAAM,6CAqCJ;CACF"}

package/dist/ui/dropdown.js

@@ -0,0 +1,383 @@
+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 { Dropdown, dom, ListSelectTrigger } from "@omegagrid/core";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { TreeModel } from "../model/treeModel";
+import { TreeSelectionModel } from "../model/selectionModel";
+import { initOptions } from "../options";
+import { html } from "lit";
+import { Tree, TreeEvent } from "./tree";
+import { map } from 'lit/directives/map.js';
+import { join } from 'lit/directives/join.js';
+import { debounce } from "ts-debounce";
+import { NodeModel } from "../model";
+import { style } from "./dropdown.style";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import { html as htmlUtils } from "@omegagrid/core";
+let TreeDropdown = class TreeDropdown extends Dropdown {
+    get hasCrossButton() {
+        return this.cross && ((this.selection.count > 0 && this.options.allowEmpty) || this.searchTerm !== '');
+    }
+    get tree() {
+        if (this._tree)
+            return this._tree;
+        this._tree = new Tree();
+        this._tree.disableAutoload = true;
+        this._tree.model = this.adapter ? null : this.model;
+        this._tree.adapter = this.adapter;
+        this._tree.selection = this.selection;
+        this._tree.options = this.options;
+        this._tree.maxHeight = this.maxHeight;
+        this._tree.addEventListener('change', (e) => this._onChange(e));
+        this._tree.addEventListener('render', this._onTreeRender);
+        this._tree.slot = 'inner-content';
+        return this._tree;
+    }
+    _onChange(e) {
+        this._autoHighlight = false; // prevent autoscroll after manual selection
+        this.selectedItems = null;
+        this.selectedItems = e.component.selection.items;
+        this.value = e.component.selection.serialize();
+        if (this.options.autoClose)
+            this.close();
+        this.dispatchEvent(new TreeEvent(e.type, { component: e.component, node: e.node }));
+        // if (this.input) {
+        // 	setTimeout(() => this.input.focus(), 1000);
+        // }
+    }
+    async open() {
+        if (this.tree.parentElement != this.dropdown)
+            this.dropdown.appendChild(this._tree);
+        await super.open();
+    }
+    async willUpdate(changedProps) {
+        if (this.buttonInput) {
+            this.options.search = false;
+        }
+        if (changedProps.has('value')) {
+            this.selection.setItems(this.value);
+            this.selectedItems = null;
+            this.selectedItems = this.selection.items;
+            if (this.isOpen && this.tree) {
+                if (this._autoHighlight) {
+                    this.tree.highlightFirstSelectedNode();
+                }
+                else {
+                    this._autoHighlight = true;
+                }
+                this.tree.renderItems(true);
+            }
+        }
+        if (this._tree) {
+            if (changedProps.has('adapter'))
+                this._tree.adapter = this.adapter;
+            if (changedProps.has('model'))
+                this._tree.model = this.model;
+        }
+        if (changedProps.has('adapter') && this.adapter) {
+            this._firstOpen = true; // force to reload data after opening dropdown
+            this.options = initOptions(await this.adapter.getOptions(), this.options);
+        }
+        this._renderDropdown = true;
+    }
+    async filter(term) {
+        if (this.input)
+            this.searchTerm = term;
+        await this.updateComplete;
+        if (this.input)
+            this.input.value = term;
+        await this.tree.updateComplete;
+        this.tree.filter(term);
+    }
+    async clearFilter() {
+        if (this.input)
+            this.searchTerm = '';
+        await this.updateComplete;
+        if (this.input)
+            this.input.value = '';
+        this.tree.clearFilter();
+    }
+    focus() {
+        if (this.buttonInput)
+            this.input?.focus();
+        else
+            super.focus();
+    }
+    constructor() {
+        super();
+        this.options = initOptions();
+        this.selection = new TreeSelectionModel(this.options);
+        this.maxHeight = 300;
+        this.maxWidth = 400;
+        this.cross = false;
+        this.buttonInput = false;
+        this.preventInputEnter = false;
+        this.dynamicWidth = false;
+        this.selectedItems = new Map();
+        this.searchTerm = '';
+        this._renderDropdown = true;
+        this._firstOpen = true;
+        this._autoHighlight = true;
+        this.originalWidth = 0;
+        this._debounceWidthUpdate = debounce(() => {
+            if (!this.dropdown || !this.dropdown.isConnected)
+                return;
+            if (this.dynamicWidth)
+                this.adjustWidth();
+            dom.fixElementPosition(this.dropdown);
+        });
+        this._onTreeRender = () => {
+            this._debounceWidthUpdate();
+        };
+        this.tooltip = dom.createElement('og-tooltip');
+        this._onMouseOver = () => {
+            if (this.contentDiv && this.contentDiv.scrollWidth > this.contentDiv.clientWidth) {
+                if (!this.tooltip.parentElement) {
+                    document.body.appendChild(this.tooltip);
+                    dom.setSize(this.tooltip, { w: this.button.offsetWidth });
+                }
+                this.tooltip.content = this.getSelectionHtml();
+                this.tooltip.attachTo(this.button, 'bottom');
+            }
+        };
+        this._onMouseOut = () => {
+            this.tooltip.deatach();
+        };
+        this._debounceFilter = debounce((term) => {
+            this.tree.filter(term);
+            this.dispatchEvent(new TreeEvent('tree.filter'));
+        }, 300);
+        this._onInput = async (e) => {
+            if (!this.isOpen)
+                await this.open();
+            const value = e.target.value;
+            this._debounceFilter(value);
+            this.searchTerm = value;
+        };
+        this._onInputKeyDown = (e) => {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.tree.list.moveDown();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.tree.list.moveUp();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.preventInputEnter)
+                        return;
+                    if (this.tree.list.selectedIndex > -1) {
+                        this.tree.list.select(this.tree.list.selectedIndex, ListSelectTrigger.Enter);
+                        setTimeout(() => this.input.focus(), 100);
+                    }
+                    break;
+            }
+        };
+        this._onInputBlur = () => this.input.value = this.getSelectionText();
+        this.render = () => html `
+		${this.buttonInput ? html `
+			<og-input
+				@input="${this._onInput}"
+				@keydown="${this._onInputKeyDown}"
+				@blur="${this._onInputBlur}"
+				.value="${this.getSelectionText()}">
+			</og-input>
+		` : ''}
+
+		<og-button
+			?disabled="${this.disabled}"
+			@mousedown="${this._onMousedown}"
+			@mouseenter="${this._onMouseOver}"
+			@mouseleave="${this._onMouseOut}"
+			color="${this.color}"
+			class="main"
+			style="flex: 1" 
+			.caret="${this.noCaret ? 'none' : this.openDirection}">
+			${this.buttonInput ? '' : html `
+				<div class="content" slot="content">
+					${this.getButtonContentHtml()}
+				</div>
+			`}
+		</og-button>
+
+		${this.hasCrossButton ? html `
+			<og-button
+				class="cross"
+				?disabled="${this.disabled}"
+				@mousedown="${() => this.clearSelection(true)}"
+				icon="xmark"
+				color="red">
+			</og-button>
+		` : ``}
+
+		${this.renderDropdown()}
+	`;
+        this.addEventListener('dropdown.open', async () => {
+            this.focus();
+            if (this.adapter && (this._firstOpen || this.options.alwaysRefresh)) {
+                await this.tree.loadData();
+            }
+            this._firstOpen = false;
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasUpdated) {
+            if (this.value)
+                this.selection.setItems(this.value);
+            this.selectedItems = this.selection.items;
+        }
+    }
+    setSourceData(sourceData, options = null) {
+        if (options)
+            this.updateOptions(options);
+        this.model = new TreeModel(sourceData, this.options);
+        if (this._tree)
+            this._tree.model = this.model;
+    }
+    updateOptions(options) {
+        Object.assign(this.options, options ?? {});
+        this.requestUpdate();
+    }
+    adjustWidth() {
+        if (this.tree?.list && this.dropdown) {
+            this.originalWidth = this.originalWidth || this.dropdown.offsetWidth;
+            dom.setSize(this.dropdown, { w: Math.min(this.originalWidth, this.maxWidth) });
+            const width = this.tree.list.calculateViewportMaxItemWidth();
+            if (width > this.dropdown.offsetWidth) {
+                dom.setSize(this.dropdown, { w: Math.min(width, this.maxWidth) });
+                this.layout();
+            }
+        }
+    }
+    async clearSelection(dispatchEvent = false) {
+        this.selection.clear();
+        await this.clearFilter();
+        this.requestUpdate();
+        if (dispatchEvent)
+            this.dispatchEvent(new TreeEvent('change', { component: this.tree }));
+        this.tree?.renderItems(true);
+    }
+    getSelectionItems() {
+        const model = this.tree?.model ?? this.model;
+        return Array.from(this.selectedItems).map(([key, item]) => {
+            const red = item.levels.has(0) && item.levels.get(0) == false;
+            const levels = [...item.levels.entries()].filter(item2 => item2[0] > 0);
+            const node = model?.nodeMap.has(key) ? model.nodeMap.get(key) : new NodeModel(this.tree.model, {
+                k: key,
+                v: item?.value ?? key
+            });
+            if (levels.length < item.levels.size && levels.length > 0) {
+                levels.unshift([0, item.levels.get(0)]);
+            }
+            return [node, levels, red];
+        });
+    }
+    getButtonContentHtml() {
+        if (this.options?.textRenderer) {
+            return this.options.textRenderer(this.selectedItems);
+        }
+        const items = this.getSelectionItems();
+        const caption = this.caption ? html `<div class="caption">${this.caption}</div>` : null;
+        const placeholder = this.placeholder ? html `<div class="placeholder">${this.placeholder}</div>` : null;
+        return items.length > 0 ? html `${caption ? html `${caption}:` : ``}${join(map(items, ([node, levels, red]) => html `
+			<div class="itm">
+				${node && node.icon ? html `<og-icon .icon="${node.icon}"></og-icon>` : null}
+				${red
+            ? html `<div style="color:#ff0000">${node.value}</div>`
+            : html `<div>${node.value}</div>`}
+				${levels.length > 0
+            ? html `${map(levels, level => html `
+						<og-icon class="lvl" icon="circle-${level[0]}">${level[0]}</og-icon>
+					`)}` : ``}
+			</div>
+		`), html `<div class="sep">,</div>`)}` : (caption
+            ? html `${caption}${placeholder ? html `: ${placeholder}` : ``}`
+            : (placeholder ? html `${placeholder}` : html `&nbsp;`));
+    }
+    getSelectionHtml() {
+        const items = this.getSelectionItems();
+        if (items.length === 0)
+            null;
+        return html `${unsafeHTML(items.map(([node, levels, red]) => [
+            node && node.icon ? `<og-icon icon="${node.icon}"></og-icon>` : ``,
+            red
+                ? `<span style="color:#ff0000">${node.value}</span>`
+                : `<span>${node.value}</span>`,
+            levels.length > 0
+                ? levels.map(level => `<og-icon class="lvl" icon="circle-${level[0]}">${level[0]}</og-icon>`).join('')
+                : ``
+        ].join('')).join(', '))}`;
+    }
+    getSelectionText() {
+        return this.getSelectionItems().map(([node, levels]) => htmlUtils.escapeHTML(node.value) + (levels.length > 0
+            ? ` (${levels.map(level => level[0]).join(',')})`
+            : '')).join(',');
+    }
+};
+TreeDropdown.styles = [...Dropdown.styles, style];
+__decorate([
+    property({ type: Object })
+], TreeDropdown.prototype, "options", void 0);
+__decorate([
+    property({ type: Object })
+], TreeDropdown.prototype, "model", void 0);
+__decorate([
+    property({ type: Object })
+], TreeDropdown.prototype, "adapter", void 0);
+__decorate([
+    property({ type: Object })
+], TreeDropdown.prototype, "selection", void 0);
+__decorate([
+    property({ type: Number })
+], TreeDropdown.prototype, "maxHeight", void 0);
+__decorate([
+    property({ type: Number })
+], TreeDropdown.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: Array })
+], TreeDropdown.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TreeDropdown.prototype, "cross", void 0);
+__decorate([
+    property({ type: String })
+], TreeDropdown.prototype, "caption", void 0);
+__decorate([
+    property({ type: String })
+], TreeDropdown.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeDropdown.prototype, "buttonInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeDropdown.prototype, "preventInputEnter", void 0);
+__decorate([
+    property({ type: Boolean })
+], TreeDropdown.prototype, "dynamicWidth", void 0);
+__decorate([
+    state()
+], TreeDropdown.prototype, "selectedItems", void 0);
+__decorate([
+    query('og-button')
+], TreeDropdown.prototype, "button", void 0);
+__decorate([
+    query('og-input')
+], TreeDropdown.prototype, "input", void 0);
+__decorate([
+    query('.content')
+], TreeDropdown.prototype, "contentDiv", void 0);
+__decorate([
+    state()
+], TreeDropdown.prototype, "searchTerm", void 0);
+TreeDropdown = __decorate([
+    customElement('og-tree-dropdown')
+], TreeDropdown);
+export { TreeDropdown };
+//# sourceMappingURL=dropdown.js.map

package/dist/ui/dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"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","sourcesContent":["import { Button, Dropdown, Tooltip, dom, Input, ListSelectTrigger } from \"@omegagrid/core\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { TreeModel, TreeSource } from \"../model/treeModel\";\nimport { SelectedItemParams, TreeSelectionModel, SerializedValue } from \"../model/selectionModel\";\nimport { initOptions, TreeDropdownOptions } from \"../options\";\nimport { html } from \"lit\";\nimport { TreeAdapter } from \"../model/treeAdapter\";\nimport { Tree, TreeEvent } from \"./tree\";\nimport { map } from 'lit/directives/map.js';\nimport { join } from 'lit/directives/join.js';\nimport { debounce } from \"ts-debounce\";\nimport { NodeModel } from \"../model\";\nimport { style } from \"./dropdown.style\";\nimport { unsafeHTML } from \"lit-html/directives/unsafe-html.js\";\nimport { html as htmlUtils } from \"@omegagrid/core\";\n\n@customElement('og-tree-dropdown')\nexport class TreeDropdown extends Dropdown {\n\n\tstatic styles = [...Dropdown.styles, style];\n\n\t@property({type: Object})\n\toptions: TreeDropdownOptions = initOptions();\n\n\t@property({type: Object})\n\tmodel: TreeModel;\n\n\t@property({type: Object})\n\tadapter: TreeAdapter;\n\n\t@property({type: Object})\n\tselection: TreeSelectionModel = new TreeSelectionModel(this.options);\n\n\t@property({type: Number})\n\tmaxHeight = 300;\n\n\t@property({type: Number})\n\tmaxWidth = 400;\n\n\t@property({type: Array})\n\tvalue: SerializedValue[];\n\n\t@property({type: Boolean, reflect: true})\n\tcross = false;\n\t\n\t@property({type: String})\n\tcaption: string;\n\n\t@property({type: String})\n\tplaceholder: string;\n\n\t@property({type: Boolean})\n\tbuttonInput = false;\n\n\t@property({type: Boolean})\n\tpreventInputEnter = false;\n\n\t@property({type: Boolean})\n\tdynamicWidth = false;\n\n\t@state()\n\tselectedItems = new Map<string, SelectedItemParams>();\n\n\t@query('og-button')\n\tbutton: Button;\n\n\t@query('og-input')\n\tinput: Input;\n\n\t@query('.content')\n\tcontentDiv: HTMLDivElement;\n\n\t@state()\n\tsearchTerm = '';\n\n\t_tree: Tree;\n\t_renderDropdown = true;\n\t_firstOpen = true;\n\t_autoHighlight = true;\n\toriginalWidth = 0;\n\n\t_debounceWidthUpdate = debounce(() => {\n\t\tif (!this.dropdown || !this.dropdown.isConnected) return;\n\t\tif (this.dynamicWidth) this.adjustWidth();\n\t\tdom.fixElementPosition(this.dropdown);\n\t});\n\n\t_onTreeRender = () => {\n\t\tthis._debounceWidthUpdate();\n\t}\n\n\tget hasCrossButton() { \n\t\treturn this.cross && ((this.selection.count > 0 && this.options.allowEmpty) || this.searchTerm !== '');\n\t}\n\n\tget tree() {\n\t\tif (this._tree) return this._tree;\n\t\tthis._tree = new Tree();\n\t\tthis._tree.disableAutoload = true;\n\t\tthis._tree.model = this.adapter ? null : this.model;\n\t\tthis._tree.adapter = this.adapter;\n\t\tthis._tree.selection = this.selection;\n\t\tthis._tree.options = this.options;\n\t\tthis._tree.maxHeight = this.maxHeight;\n\t\tthis._tree.addEventListener('change', (e: TreeEvent) => this._onChange(e));\n\t\tthis._tree.addEventListener('render', this._onTreeRender);\n\t\tthis._tree.slot = 'inner-content';\n\t\treturn this._tree;\n\t}\n\n\ttooltip = dom.createElement<Tooltip>('og-tooltip');\n\n\t_onChange(e: TreeEvent) {\n\t\tthis._autoHighlight = false; // prevent autoscroll after manual selection\n\t\tthis.selectedItems = null;\n\t\tthis.selectedItems = e.component.selection.items;\n\t\tthis.value = e.component.selection.serialize();\n\t\tif (this.options.autoClose) this.close();\n\t\tthis.dispatchEvent(new TreeEvent(e.type, {component: e.component, node: e.node}));\n\t\t// if (this.input) {\n\t\t// \tsetTimeout(() => this.input.focus(), 1000);\n\t\t// }\n\t}\n\n\tasync open() {\n\t\tif (this.tree.parentElement != this.dropdown) this.dropdown.appendChild(this._tree);\n\t\tawait super.open();\n\t}\n\n\tasync willUpdate(changedProps: Map<PropertyKey, unknown>) {\n\t\tif (this.buttonInput) {\n\t\t\tthis.options.search = false;\n\t\t}\n\n\t\tif (changedProps.has('value')) {\n\t\t\tthis.selection.setItems(this.value);\n\t\t\tthis.selectedItems = null;\n\t\t\tthis.selectedItems = this.selection.items;\n\n\t\t\tif (this.isOpen && this.tree) {\n\t\t\t\tif (this._autoHighlight) {\n\t\t\t\t\tthis.tree.highlightFirstSelectedNode();\n\t\t\t\t} else {\n\t\t\t\t\tthis._autoHighlight = true;\n\t\t\t\t}\n\t\t\t\tthis.tree.renderItems(true);\n\t\t\t}\n\t\t}\n\n\t\tif (this._tree) {\n\t\t\tif (changedProps.has('adapter')) this._tree.adapter = this.adapter;\n\t\t\tif (changedProps.has('model')) this._tree.model = this.model;\n\t\t}\n\n\t\tif (changedProps.has('adapter') && this.adapter) {\n\t\t\tthis._firstOpen = true; // force to reload data after opening dropdown\n\t\t\tthis.options = initOptions(await this.adapter.getOptions(), this.options);\n\t\t}\n\n\t\tthis._renderDropdown = true;\n\t}\n\n\tasync filter(term: string) {\n\t\tif (this.input) this.searchTerm = term;\n\t\tawait this.updateComplete;\n\t\tif (this.input) this.input.value = term;\n\t\tawait this.tree.updateComplete;\n\t\tthis.tree.filter(term);\n\t}\n\n\tasync clearFilter() {\n\t\tif (this.input) this.searchTerm = '';\n\t\tawait this.updateComplete;\n\t\tif (this.input) this.input.value = '';\n\t\tthis.tree.clearFilter();\n\t}\n\n\tfocus() {\n\t\tif (this.buttonInput) this.input?.focus();\n\t\telse super.focus();\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis.addEventListener('dropdown.open', async () => {\n\t\t\tthis.focus();\n\t\t\t\n\t\t\tif (this.adapter && (this._firstOpen || this.options.alwaysRefresh)) {\n\t\t\t\tawait this.tree.loadData();\n\t\t\t}\n\n\t\t\tthis._firstOpen = false;\n\t\t});\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\n\t\tif (!this.hasUpdated) {\n\t\t\tif (this.value) this.selection.setItems(this.value);\n\t\t\tthis.selectedItems = this.selection.items;\n\t\t}\n\t}\n\n\tsetSourceData(sourceData: TreeSource, options: Partial<TreeDropdownOptions> = null) {\n\t\tif (options) this.updateOptions(options);\n\t\tthis.model = new TreeModel(sourceData, this.options);\n\t\tif (this._tree) this._tree.model = this.model;\n\t}\n\n\tupdateOptions(options: Partial<TreeDropdownOptions>) {\n\t\tObject.assign(this.options, options ?? {});\n\t\tthis.requestUpdate();\n\t}\n\n\tadjustWidth() {\n\t\tif (this.tree?.list && this.dropdown) {\n\t\t\tthis.originalWidth = this.originalWidth || this.dropdown.offsetWidth;\n\t\t\tdom.setSize(this.dropdown, {w: Math.min(this.originalWidth, this.maxWidth)});\n\t\t\t\n\t\t\tconst width = this.tree.list.calculateViewportMaxItemWidth();\n\t\t\tif (width > this.dropdown.offsetWidth) {\n\t\t\t\tdom.setSize(this.dropdown, {w: Math.min(width, this.maxWidth)});\n\t\t\t\tthis.layout();\n\t\t\t}\n\t\t}\n\t}\n\n\tasync clearSelection(dispatchEvent = false) {\n\t\tthis.selection.clear();\n\t\tawait this.clearFilter();\n\t\tthis.requestUpdate();\n\t\tif (dispatchEvent) this.dispatchEvent(new TreeEvent('change', {component: this.tree}));\n\t\tthis.tree?.renderItems(true);\n\t}\n\n\t_onMouseOver = () => {\n\t\tif (this.contentDiv && this.contentDiv.scrollWidth > this.contentDiv.clientWidth) {\n\t\t\tif (!this.tooltip.parentElement) {\n\t\t\t\tdocument.body.appendChild(this.tooltip);\n\t\t\t\tdom.setSize(this.tooltip, {w: this.button.offsetWidth});\n\t\t\t}\n\t\t\tthis.tooltip.content = this.getSelectionHtml();\n\t\t\tthis.tooltip.attachTo(this.button, 'bottom');\n\t\t}\n\t}\n\n\t_onMouseOut = () => {\n\t\tthis.tooltip.deatach();\n\t}\n\n\tgetSelectionItems() : [NodeModel, [number, boolean][], boolean][] {\n\t\tconst model = this.tree?.model ?? this.model;\n\t\treturn Array.from(this.selectedItems).map(([key, item]) => {\n\t\t\tconst red = item.levels.has(0) && item.levels.get(0) == false;\n\t\t\tconst levels = [...item.levels.entries()].filter(item2 => item2[0] > 0);\n\t\t\tconst node = model?.nodeMap.has(key) ? model.nodeMap.get(key) : new NodeModel(this.tree.model, {\n\t\t\t\tk: key, \n\t\t\t\tv: item?.value ?? key\n\t\t\t});\n\t\t\tif (levels.length < item.levels.size && levels.length > 0) {\n\t\t\t\tlevels.unshift([0, item.levels.get(0)]);\n\t\t\t}\n\t\t\treturn [node, levels, red] as [NodeModel, [number, boolean][], boolean];\n\t\t});\n\t}\n\n\tgetButtonContentHtml() {\n\t\tif (this.options?.textRenderer) {\n\t\t\treturn this.options.textRenderer(this.selectedItems);\n\t\t}\n\n\t\tconst items = this.getSelectionItems();\n\t\tconst caption = this.caption ? html`<div class=\"caption\">${this.caption}</div>` : null;\n\t\tconst placeholder = this.placeholder ? html`<div class=\"placeholder\">${this.placeholder}</div>` : null;\n\t\treturn items.length > 0 ? html`${caption ? html`${caption}:` : ``}${join(map(items, ([node, levels, red]) => html`\n\t\t\t<div class=\"itm\">\n\t\t\t\t${node && node.icon ? html`<og-icon .icon=\"${node.icon}\"></og-icon>` : null}\n\t\t\t\t${red \n\t\t\t\t\t? html`<div style=\"color:#ff0000\">${node.value}</div>` \n\t\t\t\t\t: html`<div>${node.value}</div>`\n\t\t\t\t}\n\t\t\t\t${levels.length > 0 \n\t\t\t\t\t? html`${map(levels, level => html`\n\t\t\t\t\t\t<og-icon class=\"lvl\" icon=\"circle-${level[0]}\">${level[0]}</og-icon>\n\t\t\t\t\t`)}` : ``\n\t\t\t\t}\n\t\t\t</div>\n\t\t`), html`<div class=\"sep\">,</div>`)}` : (caption \n\t\t\t? html`${caption}${placeholder ? html`: ${placeholder}` : ``}` \n\t\t\t: (placeholder ? html`${placeholder}` : html`&nbsp;`)\n\t\t);\n\t}\n\n\tgetSelectionHtml() {\n\t\tconst items = this.getSelectionItems();\n\t\tif (items.length === 0) null;\n\n\t\treturn html`${unsafeHTML(items.map(([node, levels, red]) => [\n\t\t\tnode && node.icon ? `<og-icon icon=\"${node.icon}\"></og-icon>` : ``,\n\t\t\tred \n\t\t\t\t? `<span style=\"color:#ff0000\">${node.value}</span>` \n\t\t\t\t: `<span>${node.value}</span>`,\n\t\t\tlevels.length > 0 \n\t\t\t\t? levels.map(level => `<og-icon class=\"lvl\" icon=\"circle-${level[0]}\">${level[0]}</og-icon>`).join('') \n\t\t\t\t: ``\n\t\t].join('')).join(', '))}`;\n\t}\n\n\tgetSelectionText() {\n\t\treturn this.getSelectionItems().map(([node, levels]) => htmlUtils.escapeHTML(node.value) + (levels.length > 0 \n\t\t\t? ` (${levels.map(level => level[0]).join(',')})`\n\t\t\t: ''\n\t\t)).join(',');\n\t}\n\n\t_debounceFilter = debounce((term: string) => {\n\t\tthis.tree.filter(term);\n\t\tthis.dispatchEvent(new TreeEvent('tree.filter'));\n\t}, 300);\n\n\t_onInput = async (e: InputEvent) => {\n\t\tif (!this.isOpen) await this.open();\n\t\tconst value = (e.target as Input).value;\n\t\tthis._debounceFilter(value);\n\t\tthis.searchTerm = value;\n\t}\n\n\t_onInputKeyDown = (e: KeyboardEvent) => {\n\t\tswitch (e.key) {\n\t\t\tcase 'ArrowDown':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.tree.list.moveDown();\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowUp':\n\t\t\t\te.preventDefault();\n\t\t\t\tthis.tree.list.moveUp();\n\t\t\t\tbreak;\n\t\t\tcase 'Enter':\n\t\t\t\te.preventDefault();\n\t\t\t\tif (this.preventInputEnter) return;\n\t\t\t\tif (this.tree.list.selectedIndex > -1) {\n\t\t\t\t\tthis.tree.list.select(this.tree.list.selectedIndex, ListSelectTrigger.Enter);\n\t\t\t\t\tsetTimeout(() => this.input.focus(), 100);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\t_onInputBlur = () => this.input.value = this.getSelectionText();\n\n\trender = () => html`\n\t\t${this.buttonInput ? html`\n\t\t\t<og-input\n\t\t\t\t@input=\"${this._onInput}\"\n\t\t\t\t@keydown=\"${this._onInputKeyDown}\"\n\t\t\t\t@blur=\"${this._onInputBlur}\"\n\t\t\t\t.value=\"${this.getSelectionText()}\">\n\t\t\t</og-input>\n\t\t` : ''}\n\n\t\t<og-button\n\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t@mousedown=\"${this._onMousedown}\"\n\t\t\t@mouseenter=\"${this._onMouseOver}\"\n\t\t\t@mouseleave=\"${this._onMouseOut}\"\n\t\t\tcolor=\"${this.color}\"\n\t\t\tclass=\"main\"\n\t\t\tstyle=\"flex: 1\" \n\t\t\t.caret=\"${this.noCaret ? 'none' : this.openDirection}\">\n\t\t\t${this.buttonInput ? '' : html`\n\t\t\t\t<div class=\"content\" slot=\"content\">\n\t\t\t\t\t${this.getButtonContentHtml()}\n\t\t\t\t</div>\n\t\t\t`}\n\t\t</og-button>\n\n\t\t${this.hasCrossButton ? html`\n\t\t\t<og-button\n\t\t\t\tclass=\"cross\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t@mousedown=\"${() => this.clearSelection(true)}\"\n\t\t\t\ticon=\"xmark\"\n\t\t\t\tcolor=\"red\">\n\t\t\t</og-button>\n\t\t` : ``}\n\n\t\t${this.renderDropdown()}\n\t`;\n}\n"]}

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

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

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

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

package/dist/ui/dropdown.style.js

@@ -0,0 +1,68 @@
+import { css } from "lit";
+export const style = css `
+	og-input {
+		flex: 1;
+		border: 1px solid var(--og-accent-color);
+		outline: none;
+		background-color: var(--og-background-color);
+		border-right-width: 0;
+		color: var(--og-text-color);
+		min-height: 100%;
+	}
+
+	:host([cross]) og-button.main, og-input {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+
+	:host {
+		overflow: hidden;
+	}
+
+	og-button.cross {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+	}
+
+	og-input+og-button {
+		flex: 0;
+		max-width: 14px;
+	}
+
+	og-input {
+		border: none;
+	}
+
+	.cross {
+		flex: 0;
+		max-width: 14px;
+		min-width: 14px;
+		border: 1px solid var(--og-accent-color);
+		border-top-right-radius: calc(var(--og-base-radius) * 0.75);
+		border-bottom-right-radius: calc(var(--og-base-radius) * 0.75);
+		border: none;
+	}
+
+	.caption, .placeholder {
+		color: var(--og-text-color-2);
+		opacity: 0.7;
+	}
+
+	.content {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.content .itm {
+		margin-left: 2px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.content .itm .lvl:first-of-type {
+		margin-left: 2px;
+	}
+	
+`;
+//# sourceMappingURL=dropdown.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.style.js","sourceRoot":"","sources":["../../src/ui/dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiEvB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport const style = css`\n\tog-input {\n\t\tflex: 1;\n\t\tborder: 1px solid var(--og-accent-color);\n\t\toutline: none;\n\t\tbackground-color: var(--og-background-color);\n\t\tborder-right-width: 0;\n\t\tcolor: var(--og-text-color);\n\t\tmin-height: 100%;\n\t}\n\n\t:host([cross]) og-button.main, og-input {\n\t\tborder-top-right-radius: 0;\n\t\tborder-bottom-right-radius: 0;\n\t}\n\n\t:host {\n\t\toverflow: hidden;\n\t}\n\n\tog-button.cross {\n\t\tborder-top-left-radius: 0;\n\t\tborder-bottom-left-radius: 0;\n\t}\n\n\tog-input+og-button {\n\t\tflex: 0;\n\t\tmax-width: 14px;\n\t}\n\n\tog-input {\n\t\tborder: none;\n\t}\n\n\t.cross {\n\t\tflex: 0;\n\t\tmax-width: 14px;\n\t\tmin-width: 14px;\n\t\tborder: 1px solid var(--og-accent-color);\n\t\tborder-top-right-radius: calc(var(--og-base-radius) * 0.75);\n\t\tborder-bottom-right-radius: calc(var(--og-base-radius) * 0.75);\n\t\tborder: none;\n\t}\n\n\t.caption, .placeholder {\n\t\tcolor: var(--og-text-color-2);\n\t\topacity: 0.7;\n\t}\n\n\t.content {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\t.content .itm {\n\t\tmargin-left: 2px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t}\n\n\t.content .itm .lvl:first-of-type {\n\t\tmargin-left: 2px;\n\t}\n\t\n`;\n"]}