@omegagrid/tree 0.10.2 → 0.10.4

package/dist/ui/index.d.ts

@@ -0,0 +1,6 @@
+export * from './dropdown';
+export * from './levels';
+export * from './search';
+export * from './tree';
+export * from './menu';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,6 @@
+export * from './dropdown';
+export * from './levels';
+export * from './search';
+export * from './tree';
+export * from './menu';
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC","sourcesContent":["export * from './dropdown';\nexport * from './levels';\nexport * from './search';\nexport * from './tree';\nexport * from './menu';"]}

package/dist/ui/levels.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare class LevelSelectEvent extends Event {
+    readonly level: number;
+    constructor(level: number);
+}
+export default class Levels extends LitElement {
+    static styles: import("lit").CSSResult[];
+    count: number;
+    selection: Map<number, boolean>;
+    firstUpdated(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=levels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"levels.d.ts","sourceRoot":"","sources":["../../src/ui/levels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAO5C,qBAAa,gBAAiB,SAAQ,KAAK;aACd,KAAK,EAAE,MAAM;gBAAb,KAAK,EAAE,MAAM;CAGzC;AAGD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAE7C,MAAM,CAAC,MAAM,4BAiBV;IAGH,KAAK,EAAE,MAAM,CAAC;IAGd,SAAS,uBAA8B;IAEvC,YAAY;IAOZ,MAAM,6CAIJ;CACF"}

package/dist/ui/levels.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { range } from 'lit/directives/range.js';
+import { map } from 'lit/directives/map.js';
+import { dom } from "@omegagrid/core";
+import { classMap } from 'lit/directives/class-map.js';
+export class LevelSelectEvent extends Event {
+    constructor(level) {
+        super('levelselect', { bubbles: false, cancelable: true, composed: true });
+        this.level = level;
+    }
+}
+let Levels = class Levels extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selection = new Map();
+        this.render = () => html `
+		${map(range(1, this.count + 1), i => html `
+			<div class="${classMap({ level: true, selected: this.selection.has(i) && this.selection.get(i) })}" data-level=${i}>${i}</div>
+		`)}
+	`;
+    }
+    firstUpdated() {
+        dom.on(this, 'mousedown', '.level', (e, elm) => {
+            e.stopPropagation();
+            this.dispatchEvent(new LevelSelectEvent(parseInt(elm.dataset.level)));
+        });
+    }
+};
+Levels.styles = [css `
+		:host {
+			display: flex;
+			flex-direction: row;
+		}
+
+		div {
+			width: 15px;
+			border: 1px solid var(--og-accent-color);
+			text-align: center;
+			cursor: pointer;
+		}
+
+		div.selected {
+			background-color: var(--og-accent-color);
+			color: #ffffff;
+		}
+	`];
+__decorate([
+    property({ type: Number })
+], Levels.prototype, "count", void 0);
+__decorate([
+    property({ type: Object })
+], Levels.prototype, "selection", void 0);
+Levels = __decorate([
+    customElement('og-tree-levels')
+], Levels);
+export default Levels;
+//# sourceMappingURL=levels.js.map

package/dist/ui/levels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"levels.js","sourceRoot":"","sources":["../../src/ui/levels.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,OAAO,gBAAiB,SAAQ,KAAK;IAC1C,YAA4B,KAAa;QACxC,KAAK,CAAC,aAAa,EAAE,EAAC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;QAD9C,UAAK,GAAL,KAAK,CAAQ;IAEzC,CAAC;CACD;AAGc,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAyBd,cAAS,GAAG,IAAI,GAAG,EAAmB,CAAC;QASvC,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;IAChB,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;iBAC1B,QAAQ,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC;GACrH,CAAC;EACF,CAAC;IACH,CAAC;IAZA,YAAY;QACX,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;YAC9C,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QACvE,CAAC,CAAC,CAAC;IACJ,CAAC;;AA9BM,aAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;EAiBnB,CAAC,AAjBW,CAiBV;AAGH;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;qCACX;AAGd;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCACc;AAzBnB,MAAM;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACX,MAAM,CAuC1B;eAvCoB,MAAM","sourcesContent":["import { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { range } from 'lit/directives/range.js';\nimport { map } from 'lit/directives/map.js';\nimport { dom } from \"@omegagrid/core\";\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport class LevelSelectEvent extends Event {\n\tconstructor(public readonly level: number) {\n\t\tsuper('levelselect', {bubbles: false, cancelable: true, composed: true});\n\t}\n}\n\n@customElement('og-tree-levels')\nexport default class Levels 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}\n\n\t\tdiv {\n\t\t\twidth: 15px;\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\ttext-align: center;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\tdiv.selected {\n\t\t\tbackground-color: var(--og-accent-color);\n\t\t\tcolor: #ffffff;\n\t\t}\n\t`];\n\n\t@property({type: Number})\n\tcount: number;\n\n\t@property({type: Object})\n\tselection = new Map<number, boolean>();\n\n\tfirstUpdated() {\n\t\tdom.on(this, 'mousedown', '.level', (e, elm) => {\n\t\t\te.stopPropagation();\n\t\t\tthis.dispatchEvent(new LevelSelectEvent(parseInt(elm.dataset.level)));\n\t\t});\n\t}\n\n\trender = () => html`\n\t\t${map(range(1, this.count + 1), i => html`\n\t\t\t<div class=\"${classMap({level: true, selected: this.selection.has(i) && this.selection.get(i)})}\" data-level=${i}>${i}</div>\n\t\t`)}\n\t`;\n}"]}

package/dist/ui/menu.d.ts

@@ -0,0 +1,14 @@
+import { MenuPosition } from "@omegagrid/core";
+import { Tree } from "./tree";
+export declare class TreeMenu extends Tree {
+    static styles: import("lit").CSSResult[];
+    private _autoHide;
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(): Promise<void>;
+    updateWidth(): Promise<void>;
+    _hideEvent: () => void;
+    open(elm: HTMLElement, position?: MenuPosition): Promise<void>;
+    openAt(x: number, y: number): Promise<void>;
+}
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../src/ui/menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,qBACa,QAAS,SAAQ,IAAI;IAEjC,MAAM,CAAC,MAAM,4BASV;IAEH,OAAO,CAAC,SAAS,CAAS;;IAM1B,iBAAiB;IAIX,YAAY;IAWZ,WAAW;IAWjB,UAAU,aAKT;IAEK,IAAI,CAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,GAAE,YAAqB;IAgBtD,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;CAYjC"}

package/dist/ui/menu.js

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { dom } from "@omegagrid/core";
+import { css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { Tree } from "./tree";
+let TreeMenu = class TreeMenu extends Tree {
+    constructor() {
+        super();
+        this._autoHide = false;
+        this._hideEvent = () => {
+            if (!this.list.container?.isScrolling) {
+                dom.hideElement(this);
+                document.body.removeEventListener('mousedown', this._hideEvent);
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    async firstUpdated() {
+        super.firstUpdated();
+        this.addEventListener('select', () => {
+            if (this._autoHide)
+                dom.hideElement(this);
+        });
+        // this.addEventListener('mouseup', (e: MouseEvent) => {
+        // 	e.stopPropagation();
+        // });
+    }
+    async updateWidth() {
+        await this.list.updateComplete;
+        let maxWidth = 0;
+        this.list.items.forEach(item => {
+            let w = 0;
+            for (const ch of item.children)
+                w += ch.offsetWidth;
+            maxWidth = Math.max(maxWidth, w, item.offsetWidth);
+        });
+        dom.setSize(this, { w: maxWidth });
+    }
+    async open(elm, position = 'left') {
+        this._autoHide = true;
+        if (this.parentElement != document.body)
+            document.body.appendChild(this);
+        dom.showElement(this);
+        await this.updateWidth();
+        const offset = dom.getElementOffset(elm, this.parentElement);
+        dom.setPosition(this, {
+            t: offset.top + elm.offsetHeight,
+            l: position == 'left' ? offset.left : (offset.left + elm.offsetWidth - this.offsetWidth)
+        });
+        dom.fixElementPosition(this);
+        this.list.select(0);
+        this.list.focus();
+        document.body.addEventListener('mousedown', this._hideEvent);
+    }
+    async openAt(x, y) {
+        this._autoHide = true;
+        if (this.parentElement != document.body)
+            document.body.appendChild(this);
+        dom.showElement(this);
+        await this.updateWidth();
+        dom.setPosition(this, { l: x, t: y });
+        dom.fixElementPosition(this);
+        this.list.select(0);
+        this.list.focus();
+        document.body.addEventListener('mousedown', this._hideEvent);
+    }
+};
+TreeMenu.styles = [css `
+		:host {
+			font-size: var(--og-font-size);
+			font-family: var(--og-font-family);
+			display: block;
+			border: 1px solid var(--og-accent-color);
+			background: var(--og-background-color);
+			color: var(--og-text-color);
+		}
+	`];
+TreeMenu = __decorate([
+    customElement('og-tree-menu')
+], TreeMenu);
+export { TreeMenu };
+//# sourceMappingURL=menu.js.map

package/dist/ui/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../src/ui/menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { dom, MenuPosition } from \"@omegagrid/core\";\nimport { css } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\nimport { Tree } from \"./tree\";\n\n@customElement('og-tree-menu')\nexport class TreeMenu extends Tree {\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid var(--og-accent-color);\n\t\t\tbackground: var(--og-background-color);\n\t\t\tcolor: var(--og-text-color);\n\t\t}\n\t`];\n\n\tprivate _autoHide = false;\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t}\n\n\tasync firstUpdated() {\n\t\tsuper.firstUpdated();\n\t\tthis.addEventListener('select', () => {\n\t\t\tif (this._autoHide) dom.hideElement(this);\n\t\t});\n\n\t\t// this.addEventListener('mouseup', (e: MouseEvent) => {\n\t\t// \te.stopPropagation();\n\t\t// });\n\t}\n\n\tasync updateWidth() {\n\t\tawait this.list.updateComplete;\n\t\tlet maxWidth = 0;\n\t\tthis.list.items.forEach(item => {\n\t\t\tlet w = 0;\n\t\t\tfor (const ch of item.children) w += (ch as HTMLElement).offsetWidth;\n\t\t\tmaxWidth = Math.max(maxWidth, w, item.offsetWidth);\n\t\t});\n\t\tdom.setSize(this, {w: maxWidth});\n\t}\n\n\t_hideEvent = () => {\n\t\tif (!this.list.container?.isScrolling) {\n\t\t\tdom.hideElement(this);\n\t\t\tdocument.body.removeEventListener('mousedown', this._hideEvent);\n\t\t}\n\t}\n\n\tasync open(elm: HTMLElement, position: MenuPosition = 'left') {\n\t\tthis._autoHide = true;\n\t\tif (this.parentElement != document.body) document.body.appendChild(this);\n\t\tdom.showElement(this);\n\t\tawait this.updateWidth();\n\t\tconst offset = dom.getElementOffset(elm, this.parentElement);\n\t\tdom.setPosition(this, {\n\t\t\tt: offset.top + elm.offsetHeight,\n\t\t\tl: position == 'left' ? offset.left : (offset.left + elm.offsetWidth - this.offsetWidth)\n\t\t});\n\t\tdom.fixElementPosition(this);\n\t\tthis.list.select(0);\n\t\tthis.list.focus();\n\t\tdocument.body.addEventListener('mousedown', this._hideEvent);\n\t}\n\n\tasync openAt(x: number, y: number) {\n\t\tthis._autoHide = true;\n\t\tif (this.parentElement != document.body) document.body.appendChild(this);\n\t\tdom.showElement(this);\n\t\tawait this.updateWidth();\n\t\tdom.setPosition(this, {l: x, t: y});\n\t\tdom.fixElementPosition(this);\n\t\tthis.list.select(0);\n\t\tthis.list.focus();\n\t\tdocument.body.addEventListener('mousedown', this._hideEvent);\n\t}\n\n}"]}

package/dist/ui/search.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+import { Tree } from "./tree";
+export declare class TreeSearchEvent extends Event {
+    readonly component: Search;
+    constructor(type: string, component: Search);
+}
+export default class Search extends LitElement {
+    searchInput: HTMLInputElement;
+    tree: Tree;
+    static styles: import("lit").CSSResult[];
+    debounceKeyUp: {
+        (this: unknown, ...args: [e: KeyboardEvent] & any[]): Promise<Promise<void>>;
+        cancel: (reason?: any) => void;
+    };
+    _onKeyDown: (e: KeyboardEvent) => void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=search.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../src/ui/search.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAK5C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,qBAAa,eAAgB,SAAQ,KAAK;aAGxB,SAAS,EAAE,MAAM;gBADjC,IAAI,EAAE,MAAM,EACI,SAAS,EAAE,MAAM;CAIlC;AAGD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,UAAU;IAG7C,WAAW,EAAE,gBAAgB,CAAC;IAG9B,IAAI,EAAE,IAAI,CAAC;IAEX,MAAM,CAAC,MAAM,4BAuBV;IAEH,aAAa;;uBA/BP,CAAC;MAmCmD;IAE1D,UAAU,GAAI,GAAG,aAAa,UAgB7B;IAED,MAAM,6CAUJ;CACF"}

package/dist/ui/search.js

@@ -0,0 +1,92 @@
+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 { ListSelectTrigger, utils } from "@omegagrid/core";
+import { css, html, LitElement } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { msg } from '@omegagrid/localize';
+import { debounce } from "ts-debounce";
+import constants from "../constants";
+export class TreeSearchEvent extends Event {
+    constructor(type, component) {
+        super(`${type}`, { bubbles: false, cancelable: true, composed: false });
+        this.component = component;
+    }
+}
+let Search = class Search extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.debounceKeyUp = debounce(async (e) => {
+            if (utils.isControlCharacter(e.key))
+                return;
+            await this.tree.filter(this.searchInput.value);
+            this.dispatchEvent(new TreeSearchEvent('search', this));
+        }, constants.SEARCH_DEBOUNCE_DELAY, { isImmediate: false });
+        this._onKeyDown = (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();
+                    this.tree.list.select(this.tree.list.selectedIndex, ListSelectTrigger.Enter);
+                    setTimeout(() => this.searchInput.focus(), 100);
+                    break;
+            }
+        };
+        this.render = () => html `
+		<og-icon icon="search"></og-icon>
+
+		<input id="searchInput"
+			autocomplete="off"
+			spellcheck="false"
+			type="text"
+			placeholder="${msg('Search')}"
+			@keydown="${this._onKeyDown}"
+			@keyup="${this.debounceKeyUp}">
+	`;
+    }
+};
+Search.styles = [css `
+		:host {
+			display: flex;
+			flex-direction: row;
+			box-sizing: border-box;
+			align-items: center;
+		}
+
+		og-icon {
+			height: 100%;
+			margin: 0 2px;
+			flex: 0;
+		}
+
+		input {
+			font-size: var(--og-font-size);
+			font-family: var(--og-font-family);
+			width: 100%;
+			background-color: var(--og-background-color);
+			outline: none;
+			border: none;
+			color: var(--og-text-color);
+		}
+	`];
+__decorate([
+    query('#searchInput')
+], Search.prototype, "searchInput", void 0);
+__decorate([
+    property({ type: Object })
+], Search.prototype, "tree", void 0);
+Search = __decorate([
+    customElement('og-tree-search')
+], Search);
+export default Search;
+//# sourceMappingURL=search.js.map

package/dist/ui/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.js","sourceRoot":"","sources":["../../src/ui/search.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,SAAS,MAAM,cAAc,CAAC;AAGrC,MAAM,OAAO,eAAgB,SAAQ,KAAK;IACzC,YACC,IAAY,EACI,SAAiB;QAEjC,KAAK,CAAC,GAAG,IAAI,EAAE,EAAE,EAAC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAC,CAAC,CAAC;QAFtD,cAAS,GAAT,SAAS,CAAQ;IAGlC,CAAC;CACD;AAGc,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAiCd,kBAAa,GAAG,QAAQ,CAAC,KAAK,EAAE,CAAgB,EAAE,EAAE;YACnD,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC;gBAAE,OAAO;YAC5C,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC/C,IAAI,CAAC,aAAa,CAAC,IAAI,eAAe,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;QACzD,CAAC,EAAE,SAAS,CAAC,qBAAqB,EAAE,EAAC,WAAW,EAAE,KAAK,EAAC,CAAC,CAAC;QAE1D,eAAU,GAAG,CAAC,CAAgB,EAAE,EAAE;YACjC,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;gBACf,KAAK,WAAW;oBACf,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAC1B,MAAM;gBACP,KAAK,SAAS;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACxB,MAAM;gBACP,KAAK,OAAO;oBACX,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBAC7E,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;oBAChD,MAAM;YACR,CAAC;QACF,CAAC,CAAA;QAED,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;kBAOF,GAAG,CAAC,QAAQ,CAAC;eAChB,IAAI,CAAC,UAAU;aACjB,IAAI,CAAC,aAAa;EAC7B,CAAC;IACH,CAAC;;AA5DO,aAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;EAuBnB,CAAC,AAvBW,CAuBV;AA5BH;IADC,KAAK,CAAC,cAAc,CAAC;2CACQ;AAG9B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCACd;AANS,MAAM;IAD1B,aAAa,CAAC,gBAAgB,CAAC;GACX,MAAM,CAoE1B;eApEoB,MAAM","sourcesContent":["import { ListSelectTrigger, utils } from \"@omegagrid/core\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property, query } from \"lit/decorators.js\";\nimport { msg } from '@omegagrid/localize';\nimport { debounce } from \"ts-debounce\";\nimport constants from \"../constants\";\nimport { Tree } from \"./tree\";\n\nexport class TreeSearchEvent extends Event {\n\tconstructor(\n\t\ttype: string,\n\t\tpublic readonly component: Search,\n\t) {\n\t\tsuper(`${type}`, {bubbles: false, cancelable: true, composed: false});\n\t}\n}\n\n@customElement('og-tree-search')\nexport default class Search extends LitElement {\n\n\t@query('#searchInput')\n\tsearchInput: HTMLInputElement;\n\n\t@property({type: Object})\n\ttree: Tree;\n\n\tstatic styles = [css`\n\t\t:host {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tbox-sizing: border-box;\n\t\t\talign-items: center;\n\t\t}\n\n\t\tog-icon {\n\t\t\theight: 100%;\n\t\t\tmargin: 0 2px;\n\t\t\tflex: 0;\n\t\t}\n\n\t\tinput {\n\t\t\tfont-size: var(--og-font-size);\n\t\t\tfont-family: var(--og-font-family);\n\t\t\twidth: 100%;\n\t\t\tbackground-color: var(--og-background-color);\n\t\t\toutline: none;\n\t\t\tborder: none;\n\t\t\tcolor: var(--og-text-color);\n\t\t}\n\t`];\n\n\tdebounceKeyUp = debounce(async (e: KeyboardEvent) => {\n\t\tif (utils.isControlCharacter(e.key)) return;\n\t\tawait this.tree.filter(this.searchInput.value);\n\t\tthis.dispatchEvent(new TreeSearchEvent('search', this));\n\t}, constants.SEARCH_DEBOUNCE_DELAY, {isImmediate: false});\n\n\t_onKeyDown = (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\tthis.tree.list.select(this.tree.list.selectedIndex, ListSelectTrigger.Enter);\n\t\t\t\tsetTimeout(() => this.searchInput.focus(), 100);\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t<og-icon icon=\"search\"></og-icon>\n\n\t\t<input id=\"searchInput\"\n\t\t\tautocomplete=\"off\"\n\t\t\tspellcheck=\"false\"\n\t\t\ttype=\"text\"\n\t\t\tplaceholder=\"${msg('Search')}\"\n\t\t\t@keydown=\"${this._onKeyDown}\"\n\t\t\t@keyup=\"${this.debounceKeyUp}\">\n\t`;\n}\n"]}

package/dist/ui/tree.d.ts

@@ -0,0 +1,86 @@
+import { List, log, ListPointerEvent } from '@omegagrid/core';
+import { Options } from '../options';
+import { TreeModel, TreeSource } from '../model/treeModel';
+import { LitElement } from 'lit';
+import Levels, { LevelSelectEvent } from './levels';
+import { TreeSelectionModel, SerializedValue } from '../model/selectionModel';
+import { NodeModel } from '../model/nodeModel';
+import { TreeAdapter } from '../model/treeAdapter';
+import { FilterModel } from '../model/filterModel';
+import Search from './search';
+import { TreeAdapterParams } from '../types';
+export declare class TreeEvent extends Event {
+    component: Tree;
+    node: NodeModel;
+    constructor(type: string, args?: Partial<TreeEvent>);
+}
+export declare class TreePointerEvent extends PointerEvent {
+    tree: Tree;
+    node: NodeModel;
+    constructor(type: string, e: PointerEvent, args?: Partial<TreePointerEvent>);
+}
+export declare class TreeDropEvent extends DragEvent {
+    tree: Tree;
+    node: NodeModel;
+    constructor(type: string, e: DragEvent, args?: Partial<TreeDropEvent>);
+}
+export declare class Tree extends LitElement {
+    static styles: import("lit").CSSResult[];
+    model: TreeModel;
+    adapter: TreeAdapter;
+    options: Options;
+    selection: TreeSelectionModel;
+    logger: log.Logger;
+    maxHeight: number;
+    itemHeight: number;
+    value: SerializedValue[];
+    disableAutoload: boolean;
+    list: List;
+    searchBar: Search;
+    globalTreeLevels: Levels;
+    loading: boolean;
+    noMatches: boolean;
+    filtering: FilterModel;
+    awaitFilter: boolean;
+    currentFilter: string;
+    loadingNodes: Set<string>;
+    pendingHighlight: string;
+    get size(): number;
+    get hasGlobalLevels(): boolean;
+    _lastDragItem: HTMLElement;
+    _onDragover: (e: DragEvent) => void;
+    _onDrop: (e: DragEvent) => void;
+    _onDragLeave: () => void;
+    constructor();
+    destroy(): void;
+    connectedCallback(): void;
+    setSourceData(sourceData: TreeSource, options?: Partial<Options>): void;
+    setValue(values: SerializedValue[]): void;
+    loadData(params?: TreeAdapterParams): Promise<void>;
+    loadMore(parent: NodeModel): Promise<void>;
+    refresh(): Promise<void>;
+    keyActions: {
+        ArrowRight: () => void;
+        ArrowLeft: () => void;
+    };
+    willUpdate(props: Map<PropertyKey, unknown>): void;
+    updated(changedProps: Map<PropertyKey, unknown>): void;
+    firstUpdated(): Promise<void>;
+    _onGlobalLevelSelect: (e: LevelSelectEvent) => Promise<void>;
+    _onSearch: () => void;
+    toggleNode(node: NodeModel, level: number, dispatchEvent?: boolean): void;
+    updateNodeLoadState(node: NodeModel, newNodeCount: number): void;
+    toggleNodeCollapse(node: NodeModel, dispatchEvent?: boolean): Promise<void>;
+    toggleTreeCollapse(node?: NodeModel, dispatchEvent?: boolean): void;
+    _onListRender: () => void;
+    _onListMenu: (e: ListPointerEvent) => void;
+    get itemStyle(): (string | import("lit").CSSResultOrNative)[];
+    render(): Iterable<string | import("lit-html").TemplateResult<1>>;
+    highlightNode(key: string): Promise<void>;
+    highlightFirstSelectedNode(): void;
+    renderItems(all?: boolean): void;
+    clearSelection(): void;
+    filter(term?: string): Promise<void>;
+    clearFilter(): Promise<void>;
+}
+//# sourceMappingURL=tree.d.ts.map

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

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