@ixfx/components 0.0.2

package/dist/crumb-nav.js

@@ -0,0 +1,198 @@
+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;
+};
+/* eslint-disable @typescript-eslint/unbound-method */
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/**
+ * Events
+ * * 'change': yields newly selected node and previous
+ *
+ * CSS variables
+ * * --text-highlight: red; // highlight on mouse hover
+ * * --separator: silver;   // text colour of separator character
+ * * --padding-s: 0.12ch;   // padding between items
+ */
+let CrumbNavElement = class CrumbNavElement extends LitElement {
+    constructor() {
+        super();
+        this.segments = [];
+        this.editing = false;
+        this.editPath = ``;
+        this.onclick = () => {
+            console.log(`click`);
+            this.editing = true;
+        };
+        this.segments = [
+            { label: `root`, key: `root` },
+            { label: `This PC`, key: `ThisPC` },
+            { label: `Storage (D:)`, key: `D:` },
+            { label: `Archives`, key: `Archives` },
+            { label: `Tumblr`, key: `Tumblr` },
+            { label: `whatevruk`, key: `whatevruk` },
+        ];
+    }
+    updated(_changedProperties) {
+        if (this.editing) {
+            this.shadowRoot?.querySelector(`input`)?.focus();
+            this.shadowRoot?.querySelector(`input`)?.select();
+        }
+    }
+    setSegmentsWithPath(path, separator = `/`) {
+        const split = path.split(separator);
+        let root = ``;
+        let segments = [];
+        for (const s of split) {
+            root += s + separator;
+            segments.push({
+                key: root,
+                label: s
+            });
+        }
+        ;
+        this.segments = segments;
+        this.editPath = path;
+    }
+    renderSegment(s, i) {
+        const last = i === this.segments.length - 1;
+        const caret = html `<div .data=${s} @click=${this.onCaretClick} class="caret">&rsaquo;</div>`;
+        return html `<div class="seg ${s.ensureVisible ? `chosen` : ``}" >
+      <label .data=${s} title=${s.label} @click=${this.onLabelClick}>
+      ${s.label}
+      </label>
+      ${last ? `` : caret}
+    </div>`;
+    }
+    async onCaretClick(event) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        const data = event.target.data;
+        console.log(data);
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.onNavPopup) {
+            for await (const item of this.onNavPopup(data)) {
+                console.log(item);
+            }
+            console.log(`done`);
+        }
+    }
+    onLabelClick(event) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        const data = event.target.data;
+        event.preventDefault();
+        event.stopPropagation();
+        this.dispatchEvent(new CustomEvent(`navigate`, {
+            detail: data
+        }));
+    }
+    render() {
+        if (this.editing) {
+            return html `<input @keyup=${this.onInputKeyUp} @blur=${this.onInputBlur} value=${this.editPath} type="text">`;
+        }
+        else {
+            const segs = this.segments.map((s, index) => this.renderSegment(s, index));
+            return html `${segs}`;
+        }
+    }
+    onInputKeyUp(event) {
+        const el = this.shadowRoot?.querySelector(`input`);
+        if (!el)
+            return;
+        if (event.key === `Enter`) {
+            console.log(`asf`);
+            this.editPath = el.value;
+            this.editing = false;
+        }
+        else if (event.key === `Escape`) {
+            this.editing = false;
+        }
+    }
+    onInputBlur() {
+        this.editing = false;
+    }
+    static { this.styles = css `
+  :host {
+    --text-highlight: red;
+    --separator: silver;
+    --padding: 0.5em;
+    --padding-s: 0.1em;
+    --padding-m: 0.25em;
+    --hover-bg: darkgray;
+    --hover-fg: unset;
+    display: flex;
+    width: 100%;
+    gap: var(--padding-s);
+    transition: all 2s ease-in-out;
+    cursor: text;
+  }
+
+  .seg {
+    cursor: pointer;
+    display:flex;
+    flex-wrap: nowrap;
+    align-items:center;
+    user-select: none;
+    overflow:hidden;
+  }
+
+  input {
+    appearance: none;
+    border: 0;
+    width: 100%;
+    margin:var(--padding-s);
+    padding: calc(2*var(--padding-s));
+    font:unset;
+  }
+  .seg:hover {
+    * {
+      color: var(--hover-fg);
+      background: color-mix(in srgb, var(--hover-bg) 20%, transparent);
+    }
+  }
+  .seg {
+    * {
+      transition: all 0.2s ease-in-out;
+    }
+  }
+
+  label {
+    height: 100%;
+    white-space:nowrap;
+    text-overflow: ellipsis;
+    align-content: center;
+    overflow: hidden;
+    padding: 0 var(--padding-s) 0 var(--padding-s);
+  }
+
+  label:hover,.caret:hover {
+    background: var(--hover-bg) !important;
+  }
+  
+  .seg:hover,.seg.chosen {
+    overflow:unset;
+  }
+  
+  .caret {
+    padding: var(--padding-m);
+    margin-left: var(--padding-s);
+    margin-left: var(--padding-s);
+  }
+`; }
+};
+__decorate([
+    property({ type: Object })
+], CrumbNavElement.prototype, "segments", void 0);
+__decorate([
+    property({ type: Boolean })
+], CrumbNavElement.prototype, "editing", void 0);
+__decorate([
+    property({ type: String })
+], CrumbNavElement.prototype, "editPath", void 0);
+CrumbNavElement = __decorate([
+    customElement('ixfx-crumb-nav')
+], CrumbNavElement);
+export { CrumbNavElement };
+//# sourceMappingURL=crumb-nav.js.map

package/dist/crumb-nav.js.map

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

package/dist/crumb-navigation.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, type PropertyValues } from "lit";
+import { Trees } from '@ixfx/collections';
+export type CrumbNavigationPart = {
+    label: string;
+    key: string;
+};
+/**
+ * Events
+ * * 'change': yields newly selected node and previous
+ *
+ * CSS variables
+ * * --text-highlight: red; // highlight on mouse hover
+ * * --separator: silver;   // text colour of separator character
+ * * --padding-s: 0.12ch;   // padding between items
+ */
+export declare class CrumbNavigationElement extends LitElement {
+    #private;
+    tree: Trees.TreeNode<CrumbNavigationPart>;
+    selectedNode: Trees.TreeNode<CrumbNavigationPart> | undefined;
+    constructor();
+    protected updated(_changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "ixfx-crumb-navigation": CrumbNavigationElement;
+    }
+}
+//# sourceMappingURL=crumb-navigation.d.ts.map

package/dist/crumb-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"crumb-navigation.d.ts","sourceRoot":"","sources":["../src/crumb-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEjE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ,CAAA;AAED;;;;;;;;GAQG;AACH,qBACa,sBAAuB,SAAQ,UAAU;;IAEpD,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAG1C,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAAC;;IA4F9D,SAAS,CAAC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAmD3D,MAAM;IAmDN,MAAM,CAAC,MAAM,0BAiGd;CACA;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,sBAAsB,CAAC;KACjD;CACF"}

package/dist/crumb-navigation.js

@@ -0,0 +1,307 @@
+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 { Trees } from '@ixfx/collections';
+import { join } from "lit/directives/join.js";
+/**
+ * Events
+ * * 'change': yields newly selected node and previous
+ *
+ * CSS variables
+ * * --text-highlight: red; // highlight on mouse hover
+ * * --separator: silver;   // text colour of separator character
+ * * --padding-s: 0.12ch;   // padding between items
+ */
+let CrumbNavigationElement = class CrumbNavigationElement extends LitElement {
+    constructor() {
+        super();
+        const t = Trees.Mutable.createNode({ key: `root`, label: `root` });
+        const nodeC = Trees.Mutable.addValue({ key: `c`, label: `c:` }, t);
+        const nodeUsers = Trees.Mutable.addValue({ key: `users`, label: `users` }, nodeC);
+        Trees.Mutable.addValue({ key: `guest`, label: `guest` }, nodeUsers);
+        Trees.Mutable.addValue({ key: `ch`, label: `ch` }, nodeUsers);
+        Trees.Mutable.addValue({ key: `admin`, label: `admin` }, nodeUsers);
+        Trees.Mutable.addValue({ key: `jane`, label: `jane` }, nodeUsers);
+        Trees.Mutable.addValue({ key: `barry`, label: `barry` }, nodeUsers);
+        Trees.Mutable.addValue({ key: `reallylongoptionwow`, label: `reallylongoptionwow` }, nodeUsers);
+        this.selectedNode = nodeUsers;
+        this.tree = t;
+    }
+    #previousSelectionKey = ``;
+    #onPartClick = (event) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        const part = event.target.value;
+        // Find node for clicked part
+        const n = Trees.Traverse.findAnyChildByValue(this.tree, part);
+        if (n) {
+            this.#setSelected(n);
+        }
+    };
+    /**
+     * Sets the selected node and fires event
+     * @param node
+     */
+    #setSelected(node) {
+        const previous = this.selectedNode;
+        if (previous) {
+            this.#previousSelectionKey = previous.value?.key ?? ``;
+        }
+        else {
+            this.#previousSelectionKey = ``;
+        }
+        this.selectedNode = node;
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: {
+                selected: node,
+                previous: previous
+            }
+        }));
+    }
+    #onSubPartClick = (event) => {
+        const currentlySelected = this.selectedNode;
+        if (!currentlySelected) {
+            console.warn(`Bug. No selectedNode`);
+            return;
+        }
+        // const parentNode = currentlySelected.parent;
+        // if (!parentNode) {
+        //   console.warn(`Bug. No parent node`);
+        //   console.log(currentlySelected);
+        //   return;
+        // }
+        const currentlySelectedKey = currentlySelected.value?.key;
+        if (!currentlySelectedKey) {
+            console.warn(`Bug. No key for selected value`);
+            return;
+        }
+        // Selected option
+        const li = event.target;
+        if (!li) {
+            console.warn(`Bug. No LI element`);
+            return;
+        }
+        const key = li.getAttribute(`data-key`) ?? ``;
+        if (!key) {
+            console.warn(`Bug. No data-key attribute`);
+            return;
+        }
+        // Find the node
+        for (const c of currentlySelected.childrenStore) {
+            if (c.value?.key === key) {
+                this.#setSelected(c);
+                break;
+            }
+        }
+    };
+    updated(_changedProperties) {
+        //if (!this.expanded) return;
+        // const s = this.selectedNode;
+        // if (!s) {
+        //   console.warn(`No selectedNode`);
+        //   return;
+        // }
+        // const selectedKey = s.value?.key;
+        // if (!selectedKey) {
+        //   console.warn(`No .key on selectedNode.value`);
+        //   return;
+        // }
+        if (!this.shadowRoot)
+            return;
+        const hsiElement = this.shadowRoot.querySelector(`.horiz-select-items`);
+        if (!hsiElement)
+            return;
+        const ulElement = hsiElement.querySelector(`ul`);
+        const btnExpand = this.shadowRoot.querySelector(`#btnExpand`);
+        // Show expander button only when needed
+        if (ulElement.getBoundingClientRect().width > hsiElement.getBoundingClientRect().width) {
+            btnExpand.style.display = `inline`;
+        }
+        else {
+            btnExpand.style.display = `none`;
+        }
+        // Scroll container to find selected item
+        for (const li of ulElement.querySelectorAll(`li`)) {
+            const key = li.getAttribute(`data-key`) ?? ``;
+            if (key === this.#previousSelectionKey) {
+                this.#scrollToValue(li);
+                break;
+            }
+        }
+    }
+    #scrollToValue(li) {
+        let l = li.offsetLeft;
+        const ul = li.parentElement;
+        if (!ul)
+            return;
+        l -= ul.offsetLeft;
+        const horizSelectItems = ul.parentElement;
+        if (!horizSelectItems)
+            return;
+        horizSelectItems.scroll({ left: l, top: 0, behavior: `smooth` });
+        const horizSelect = horizSelectItems.parentElement;
+        if (!horizSelect)
+            return;
+        horizSelect.style.minWidth = li.getBoundingClientRect().width + 'px';
+    }
+    render() {
+        const t = this.tree;
+        const sel = this.selectedNode ?? t;
+        // Get parents of selected node
+        let parts = [];
+        parts.push(html `<div .value=${sel.value} @click=${this.#onPartClick}>${sel.value?.label}</div>`);
+        for (const p of Trees.Traverse.parents(sel)) {
+            if (p.value === undefined)
+                continue;
+            const v = p.value;
+            parts.push(html `<div .value=${v} @click=${this.#onPartClick}>${v.label}</div>`);
+        }
+        parts.reverse();
+        // Get available options at current location
+        const currentOpt = this.#renderFinalOption();
+        return html `<div class="parts">${join(parts, html `<span class="separator">&rsaquo;</span>`)}</div>
+      ${currentOpt}`;
+    }
+    #renderFinalOption() {
+        const s = this.selectedNode;
+        if (s === undefined) {
+            console.warn(`No selectedNode`);
+            return html ``; // Part missing
+        }
+        return this.#renderOptions(s, this.#previousSelectionKey);
+    }
+    #renderOptions(node, preselectKey) {
+        if (node.childrenStore.length === 0)
+            return html ``;
+        const options = node.childrenStore.map(c => html `<li class="${c.value?.key === preselectKey ? `previous` : ``}" @click=${this.#onSubPartClick} data-key=${c.value?.key}>${c.value?.label}</li>`);
+        return html `
+    <span class="separator">&rsaquo;</span>
+    <div class="horiz-select">
+      <div class="horiz-select-items">
+        <ul>
+        ${options}
+        </ul>
+      </div>
+    <div id="pop" popover anchor="btnExpand">
+     <ul>
+        ${options}
+      </ul>
+    </div> 
+    <button popovertarget="pop" id="btnExpand">&and;</button>
+    </div>
+    `;
+    }
+    static { this.styles = css `
+  :host {
+    --text-highlight: red;
+    --separator: silver;
+    --padding-s: 0.12ch;
+    display: flex;
+    overflow: scroll;
+    width: 100%;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+  }
+  #btnExpand {
+    scale: 0.5;
+    margin:0;
+  }
+  .parts {
+    display: flex;
+  }
+  .parts > div {
+    cursor: pointer;
+    margin-right: var(--padding-s);
+
+  }
+  .parts > div:hover {
+    color: var(--text-highlight);
+  }
+  
+  .horiz-select {
+    display:flex;
+    min-width: 5ch;
+  }
+  .horiz-select-items {
+    overflow-y: scroll;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+  }
+
+  .separator {
+    margin-left: var(--padding-s);
+    margin-right: var(--padding-s);
+    color: var(--separator);
+  }
+  #pop {
+    top: anchor(bottom);
+    left: anchor(left);
+    padding: 1ch;
+  }
+  #pop {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    li {
+      cursor: pointer;
+      opacity: 0.8;
+    }
+    li.previous {
+      opacity: 0.9;
+    }
+    li:hover {
+      opacity: 1;
+    }
+  }
+
+  .horiz-select-items {
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      display: inline;
+    }
+    
+    li {
+      display: inline;
+      margin-left: var(--padding-s);
+      margin-right: var(--padding-s);
+      cursor: pointer;
+      opacity: 0.3;
+    }
+    li.previous {
+      opacity: 0.6;
+    }
+    li:hover {
+      opacity: 1;
+    }
+
+    li:not(:last-child):after {
+      content: ',';
+    }
+  }
+  ::slotted(*),option {
+    user-select: none;
+    scroll-snap-align: start;
+    border: 1px solid silver;
+    color:red;
+  }
+`; }
+};
+__decorate([
+    property({ type: Object })
+], CrumbNavigationElement.prototype, "tree", void 0);
+__decorate([
+    property({ type: Object })
+], CrumbNavigationElement.prototype, "selectedNode", void 0);
+CrumbNavigationElement = __decorate([
+    customElement('ixfx-crumb-navigation')
+], CrumbNavigationElement);
+export { CrumbNavigationElement };
+//# sourceMappingURL=crumb-navigation.js.map

package/dist/crumb-navigation.js.map

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

package/dist/data-display.d.ts

@@ -0,0 +1,15 @@
+export type FormattingOptions = {
+    readonly precision?: number;
+    readonly roundNumbers?: number;
+};
+export declare class DataDisplayComponent extends HTMLElement {
+    previousValue: Record<string, unknown> | undefined;
+    _shadow: ShadowRoot;
+    _container: HTMLElement;
+    constructor();
+    formatValue(v: unknown, options?: FormattingOptions): string;
+    displayData(o: Record<string, unknown> | unknown[]): void;
+    getOrCreate(path: string, init?: (parent: HTMLElement) => void): HTMLElement;
+    update(value: Record<string, unknown>): void;
+}
+//# sourceMappingURL=data-display.d.ts.map

package/dist/data-display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-display.d.ts","sourceRoot":"","sources":["../src/data-display.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAC/B,CAAA;AAED,qBAAa,oBAAqB,SAAQ,WAAW;IACnD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC;IACnD,OAAO,EAAE,UAAU,CAAC;IACpB,UAAU,EAAE,WAAW,CAAC;;IAyBxB,WAAW,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,GAAE,iBAAsB,GAAG,MAAM;IAchE,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAAE;IA+ClD,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,GAAG,WAAW;IAY5E,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAQtC"}

package/dist/data-display.js

@@ -0,0 +1,110 @@
+import { changedObjectDataFields } from "@ixfx/core/records";
+import { round } from "@ixfx/numbers";
+export class DataDisplayComponent extends HTMLElement {
+    constructor() {
+        super();
+        this._shadow = this.attachShadow({ mode: `open` });
+        this._container = document.createElement(`section`);
+        const style = document.createElement(`style`);
+        style.textContent = `
+    section {
+      background: white;
+      color: black;
+      border: 2px solid hsl(0deg 0.61% 90%);
+      padding: 1em;
+      font-family: monospace;
+      display:grid;
+      grid-template-cols: repeat(2, 1fr);
+    }
+    div {
+      border:1px solid black;
+    }
+    `;
+        this._shadow.append(style, this._container);
+    }
+    formatValue(v, options = {}) {
+        if (v === null)
+            return `(null)`;
+        if (v === undefined)
+            return `(undefined)`;
+        if (typeof v === `boolean`)
+            return v ? `true` : `false`;
+        if (typeof v === `string`)
+            return `"${v}"`;
+        if (typeof v === `number`) {
+            let vAsNumber = v;
+            if (options.roundNumbers !== undefined)
+                vAsNumber = round(options.roundNumbers, v);
+            if (options.precision !== undefined)
+                return vAsNumber.toFixed(options.precision);
+            return vAsNumber.toString();
+        }
+        return JSON.stringify(v);
+    }
+    displayData(o) {
+        if (o === null) {
+            this.innerHTML = ``;
+            return;
+        }
+        for (const [key, value] of Object.entries(o)) {
+            const domKey = `path-${key}`;
+            if (typeof value === `object`) {
+                const element = this.getOrCreate(domKey, (parent) => {
+                    parent.classList.add(`row`, `nested`);
+                    const label = document.createElement(`label`);
+                    label.textContent = key;
+                    const valueElement = new DataDisplayComponent();
+                    parent.append(label, valueElement);
+                });
+                const valueElement = element.querySelector(`data-display`);
+                if (valueElement !== null) {
+                    valueElement.update(value);
+                }
+            }
+            else {
+                const element = this.getOrCreate(domKey, (parent) => {
+                    parent.classList.add(`row`);
+                    const label = document.createElement(`label`);
+                    label.textContent = key;
+                    const valueElement = document.createElement(`div`);
+                    valueElement.textContent = this.formatValue(value);
+                    parent.append(label, valueElement);
+                });
+                const valueElement = element.querySelector(`div`);
+                if (valueElement === null) {
+                    console.warn(`data-display.displayData Unexpected case?`);
+                    //debugger;
+                }
+                else {
+                    valueElement.innerHTML = this.formatValue(value);
+                }
+            }
+        }
+        // const paths = getFieldPaths(o);
+        // console.log(`paths: ${ JSON.stringify(paths) }`);
+        // for (const path of paths) {
+        // }
+    }
+    getOrCreate(path, init) {
+        const element = this._shadow.getElementById(path);
+        if (element !== null)
+            return element;
+        const elementCreated = document.createElement(`div`);
+        elementCreated.id = path;
+        if (init)
+            init(elementCreated);
+        this._container.append(elementCreated);
+        return elementCreated;
+    }
+    update(value) {
+        if (this.previousValue === undefined) {
+            this.displayData(value);
+        }
+        else {
+            this.displayData(changedObjectDataFields(this.previousValue, value));
+        }
+        this.previousValue = value;
+    }
+}
+customElements.define(`data-display`, DataDisplayComponent);
+//# sourceMappingURL=data-display.js.map