@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/model-tree/tree.js

@@ -4,39 +4,61 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 ModelTree_1;
 import '@shoelace-style/shoelace/dist/components/tree/tree.js';
 import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
-import { customElement, property, state } from "lit/decorators.js";
+import '@shoelace-style/shoelace/dist/components/badge/badge.js';
+import { customElement, property } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import treeCss from "./tree.css.js";
 import { ModelTreeNodeClicked, RolodexTreeNodeClicked } from "../../events/doctor.js";
+import { countViolationsBySeverity } from "../../model/graph.js";
 import { IconColor, IconSize } from "../model-icon/model-icon.js";
 import { ExtractStatusStyleFromCodeByCode } from "../../model/extract_status.js";
 import modelSharedCss from "../model-renderer/model-shared.css.js";
 import tooltipCss from "../../css/tooltip.css.js";
-import { NodeType } from "../../model/node_type";
-let ModelTree = class ModelTree extends LitElement {
-    constructor(nodeMap, nodeIdMap, nodeIdHashMap) {
+import { NodeType } from "../../model/node_type.js";
+import { defaultIconConfig, shouldShowIcon } from "../../model/tree-icon-config.js";
+let ModelTree = ModelTree_1 = class ModelTree extends LitElement {
+    static renderFileIcon(iconType, color) {
+        return html `<pb33f-model-icon size="${IconSize.small}" icon="${iconType}" color=${color}></pb33f-model-icon>`;
+    }
+    constructor() {
         super();
+        this.iconConfig = defaultIconConfig;
+        this.isBundled = false;
+        this._childRenderLimit = 50;
         this.selectedNodes = [];
-        this.nodeMap = nodeMap;
-        this.nodeIdMap = nodeIdMap;
-        this.nodeIdHashMap = nodeIdHashMap;
         this.isRolodex = false;
         this.filteredNodes = new Map();
-        this.pendingNavigationHash = "";
+        this.pendingNavigationId = "";
         this.pendingNavigationPath = "";
         this.nodesWithChanges = new Map();
         this.expand = false;
         this.expandedNodes = new Map();
+        this.changesEnabled = false;
+        this.treeChanged = false; // determine if the selection has changed from the tree component.
+        this.childrenRendered = new Set();
+        this.showAllChildren = new Set();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.pendingExplorerTimeout !== undefined) {
+            clearTimeout(this.pendingExplorerTimeout);
+        }
+    }
+    showMoreChildren(nodeId) {
+        this.showAllChildren.add(nodeId);
+        this.requestUpdate();
     }
-    nodeClicked(nodeId, changes = []) {
+    nodeClicked(nodeId, changes = [], source) {
         this.dispatchEvent(new CustomEvent(ModelTreeNodeClicked, {
             bubbles: true,
             composed: true,
             detail: {
                 nodeId: nodeId,
                 changes: changes,
+                source: source,
             }
         }));
     }
@@ -52,10 +74,11 @@ let ModelTree = class ModelTree extends LitElement {
         }));
     }
     openNode(parentId) {
-        if (this.nodeIdHashMap.get(parentId)) {
-            const parent = this.nodeIdHashMap.get(parentId);
+        if (this.nodeMap.get(parentId)) {
+            const parent = this.nodeMap.get(parentId);
             if (parent) {
                 this.expandedNodes.set(parent.id, parent);
+                this.childrenRendered.add(parent.id);
                 this.openNode(parent.parentId);
                 this.renderRoot.querySelectorAll(`sl-tree-item#model-${CSS.escape(parent.id)}`)[0]?.setAttribute('expanded', 'true');
             }
@@ -66,6 +89,7 @@ let ModelTree = class ModelTree extends LitElement {
             const model = this.renderRoot.querySelectorAll(`sl-tree-item#model-${CSS.escape(parentId)}`)[0];
             if (model) {
                 model.setAttribute('expanded', 'true');
+                this.childrenRendered.add(parentId);
                 // check if the model has a parent
                 const nodeParent = model.getAttribute('data-parentid');
                 if (nodeParent) {
@@ -76,16 +100,25 @@ let ModelTree = class ModelTree extends LitElement {
             }
         }
     }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('node') || changedProperties.has('nodeMap')) {
+            this.childrenRendered.clear();
+            this.expandedNodes.forEach((_, nodeId) => {
+                this.childrenRendered.add(nodeId);
+            });
+            this.showAllChildren.clear();
+        }
+    }
     updated() {
-        if (this.pendingNavigationHash != "") {
-            this.explorerClicked(this.pendingNavigationHash);
+        if (this.pendingNavigationId != "") {
+            this.explorerClicked(this.pendingNavigationId);
         }
         if (this.pendingNavigationPath && this.pendingNavigationPath != "") {
             const pnp = this.pendingNavigationPath;
             this.openNodeByPath(pnp);
         }
     }
-    openNodeByPath(path) {
+    openNodeByPath(path, triggerSelection = true) {
         const treeItems = this.renderRoot?.querySelectorAll(`sl-tree-item`);
         if (treeItems) {
             let selected = null;
@@ -96,6 +129,9 @@ let ModelTree = class ModelTree extends LitElement {
                 if (item.selected) {
                     selected = item;
                     item.expanded = true;
+                    item.removeAttribute('lazy');
+                    const itemNodeId = item.id.replace('model-', '');
+                    this.childrenRendered.add(itemNodeId);
                     const parentId = item.getAttribute('data-parentid');
                     if (parentId) {
                         this.pendingNavigationPath = "";
@@ -107,34 +143,70 @@ let ModelTree = class ModelTree extends LitElement {
                 requestAnimationFrame(() => {
                     selected?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
                 });
+                if (triggerSelection && this.isRolodex) {
+                    const nodeId = selected.id.replace('model-', '');
+                    if (this.currentId !== nodeId || this.currentPath !== path) {
+                        this.currentId = nodeId;
+                        this.currentPath = path;
+                        this.selectedNodes = [selected];
+                        this.rolodexClicked(nodeId, path, []);
+                    }
+                }
             }
         }
     }
-    explorerClicked(nodeId) {
+    explorerClicked(nodeId, scrollToView = true) {
         const treeItems = this.renderRoot?.querySelectorAll(`sl-tree-item`);
         if (!treeItems) {
-            this.pendingNavigationHash = nodeId;
+            this.pendingNavigationId = nodeId;
         }
         else {
-            if (this.pendingNavigationHash != "") {
-                nodeId = this.pendingNavigationHash;
-                this.pendingNavigationHash = "";
+            if (this.pendingNavigationId != "") {
+                nodeId = this.pendingNavigationId;
+                this.pendingNavigationId = "";
             }
         }
         let selected = null;
         for (let i = 0; i < treeItems?.length; i++) {
             const item = treeItems[i];
-            item.selected = (item.id === `model-${nodeId}` || item.dataset.hashid === `${nodeId}`);
+            const wasSelected = item.selected;
+            item.selected = (item.id === `model-${nodeId}`);
             if (item.selected) {
                 selected = item;
-                item.expanded = true;
+                if (!wasSelected) {
+                    item.expanded = true;
+                }
+                item.removeAttribute('lazy');
+                const itemNodeId = item.id.replace('model-', '');
+                this.childrenRendered.add(itemNodeId);
                 const parentId = item.getAttribute('data-parentid');
                 if (parentId) {
                     this.openNode(parentId);
                 }
             }
         }
-        if (selected) {
+        if (!selected) {
+            const node = this.nodeMap.get(nodeId);
+            if (node && node.parentId) {
+                this.openNode(node.parentId);
+                requestAnimationFrame(() => {
+                    if (this.pendingExplorerTimeout !== undefined) {
+                        clearTimeout(this.pendingExplorerTimeout);
+                    }
+                    this.pendingExplorerTimeout = window.setTimeout(() => {
+                        const item = this.renderRoot?.querySelector(`sl-tree-item#model-${CSS.escape(nodeId)}`);
+                        if (item) {
+                            item.selected = true;
+                            if (scrollToView) {
+                                item.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+                            }
+                        }
+                    }, 50);
+                });
+                return;
+            }
+        }
+        if (selected && scrollToView) {
             requestAnimationFrame(() => {
                 selected?.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
             });
@@ -143,10 +215,16 @@ let ModelTree = class ModelTree extends LitElement {
     collapse(evt, node) {
         evt.stopPropagation();
         node.treeExpanded = false;
+        this.expandedNodes.delete(node.id);
     }
     expanded(evt, node) {
         evt.stopPropagation();
         node.treeExpanded = true;
+        this.expandedNodes.set(node.id, node);
+        if (!this.childrenRendered.has(node.id)) {
+            this.childrenRendered.add(node.id);
+            this.requestUpdate();
+        }
     }
     renderLabel(node, filtered = false) {
         if (filtered) {
@@ -154,39 +232,64 @@ let ModelTree = class ModelTree extends LitElement {
         }
         switch (node.type) {
             case NodeType.ROLODEX_FILE:
-                return html `<span style="color: var(--font-color)"><strong>${node.label}</strong></span>`;
+                return html `<span style="color: var(--font-color)">${node.label}</span>`;
             case NodeType.RESPONSE:
                 const label = parseInt(node.label);
                 return html `<span class="${ExtractStatusStyleFromCodeByCode(label)}">${node.label}</span>`;
             case NodeType.OPERATION:
+                const operationId = node.instance?.operationId;
                 return html `
-                    <pb33f-http-method tiny method="${node.label}"></pb33f-http-method>`;
+                    <pb33f-http-method tiny method="${node.label}"></pb33f-http-method>${operationId ? html `<span style="margin-left: 6px; color: var(--font-color-sub1)">${operationId}</span>` : ''}`;
             case NodeType.PATH_ITEM:
                 return html `
                     <pb33f-render-operation-path nowrap path="${node.label}"></pb33f-render-operation-path>`;
             default:
-                if (node.instance) {
-                    return html `<strong>${node.label}</strong>`;
-                }
                 return html `${node.label}`;
         }
     }
     buildTree(node, depth) {
         let results = [];
-        if (node.nodes && node.nodes.length > 0) {
-            // check if this is a path item, if so make sure the parameters are first.
-            if (node.type === NodeType.PATH_ITEM) {
-                const operations = node.nodes.filter(n => n.type === NodeType.OPERATION);
-                const parameters = node.nodes.filter(n => (n.type === NodeType.PARAMETER || n.type === NodeType.PARAMETERS));
-                const other = node.nodes.filter(n => n.type !== NodeType.OPERATION && (n.type !== NodeType.PARAMETER && n.type !== NodeType.PARAMETERS));
-                node.nodes = parameters.concat(operations).concat(other);
-            }
-            else {
-                node.nodes.sort((a, b) => a.label.localeCompare(b.label));
+        const isRoot = node.label?.toLowerCase() === 'document';
+        const shouldRenderChildren = isRoot || this.expand || this.childrenRendered.has(node.id);
+        if (node.nodes && shouldRenderChildren) {
+            let nodes = new Array();
+            for (let x = 0; x < node.nodes.length; x++) {
+                const y = this.nodeMap.get(node.nodes[x]);
+                if (y)
+                    nodes.push(y);
             }
-            for (let i = 0; i < node.nodes.length; i++) {
-                depth++;
-                results.push(this.buildTree(node.nodes[i], depth));
+            if (nodes.length > 0) {
+                // check if this is a path item, if so make sure the parameters are first.
+                if (node.type === NodeType.PATH_ITEM) {
+                    const operations = nodes.filter(n => n.type === NodeType.OPERATION);
+                    const parameters = nodes.filter(n => (n.type === NodeType.PARAMETER || n.type === NodeType.PARAMETERS));
+                    const other = nodes.filter(n => n.type !== NodeType.OPERATION && (n.type !== NodeType.PARAMETER && n.type !== NodeType.PARAMETERS));
+                    nodes = parameters.concat(operations).concat(other);
+                }
+                else {
+                    nodes.sort((a, b) => a.keyLine - b.keyLine);
+                }
+                const showAll = this.showAllChildren.has(node.id);
+                const limit = showAll ? nodes.length : this._childRenderLimit;
+                const nodesToRender = Math.min(nodes.length, limit);
+                for (let i = 0; i < nodesToRender; i++) {
+                    depth++;
+                    results.push(this.buildTree(nodes[i], depth));
+                }
+                if (!showAll && nodes.length > this._childRenderLimit) {
+                    const remaining = nodes.length - this._childRenderLimit;
+                    results.push(html `
+                        <sl-tree-item class="show-more-item" @click="${(e) => {
+                        e.stopPropagation();
+                        this.showMoreChildren(node.id);
+                    }}">
+                            <sl-icon name="plus-circle" style="color: var(--primary-color)"></sl-icon>
+                            <span style="color: var(--primary-color); cursor: pointer">
+                                Show ${remaining} more items...
+                            </span>
+                        </sl-tree-item>
+                    `);
+                }
             }
         }
         let expanded = node.treeExpanded;
@@ -221,114 +324,43 @@ let ModelTree = class ModelTree extends LitElement {
         }
         let warnBadge = html ``;
         let errorBadge = html ``;
-        if (this.renderedNodes && this.renderedNodes.get(node.id)) {
-            const renderedNode = this.renderedNodes.get(node.id);
-            if (renderedNode && renderedNode.results) {
-                let warnings = 0;
-                let errors = 0;
-                for (let i = 0; i < renderedNode.results.length; i++) {
-                    const result = renderedNode.results[i];
-                    if (result.ruleSeverity === 'warn') {
-                        warnings++;
-                    }
-                    if (result.ruleSeverity === 'error') {
-                        errors++;
-                    }
-                }
-                if (warnings > 0) {
-                    warnBadge = html `
-                        <sl-badge class="warn">${warnings}</sl-badge>`;
-                }
-                if (errors > 0) {
-                    errorBadge = html `
-                        <sl-badge class="err">${errors}</sl-badge>`;
-                }
+        let bundledBadge = html ``;
+        let hasIssues = false;
+        const renderedNode = this.nodeMap.get(node.id);
+        if (renderedNode) {
+            const counts = countViolationsBySeverity(renderedNode, this.violationMap);
+            if (counts.warnings > 0) {
+                warnBadge = html `
+                    <sl-badge class="warn">${counts.warnings}</sl-badge>`;
+            }
+            if (counts.errors > 0) {
+                errorBadge = html `
+                    <sl-badge class="err">${counts.errors}</sl-badge>`;
             }
+            hasIssues = counts.warnings > 0 || counts.errors > 0;
+        }
+        // Show bundled badge on root/document node
+        const isDocument = node.label?.toLowerCase() === 'document';
+        if (isDocument && this.isBundled) {
+            bundledBadge = html `<sl-badge class="bundled">BUNDLED</sl-badge>`;
         }
-        let icon = html `
-            <pb33f-model-icon size="${IconSize.small}" icon="${node.type}" color=${styleIco}></pb33f-model-icon>`;
-        if (node.openapi) {
+        const isLeaf = !node.nodes || node.nodes.length === 0;
+        const showIcon = shouldShowIcon(node.type, isLeaf, hasIssues, this.iconConfig);
+        let icon = showIcon ? html `
+            <pb33f-model-icon size="${IconSize.small}" icon="${node.type}" color=${styleIco}></pb33f-model-icon>` : html ``;
+        if (showIcon && node.openapi) {
             icon = html `
                 <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.OPENAPI}"
                                   color=${styleIco}></pb33f-model-icon>`;
         }
-        else {
-            // determine if this is something other than a JSON or YAML file by looking at the extension.
-            if (!node.label.endsWith('.json') || !node.label.endsWith('.yaml') || !node.label.endsWith('.yml')) {
+        else if (showIcon) {
+            if (!node.label.endsWith('.json') && !node.label.endsWith('.yaml') && !node.label.endsWith('.yml')) {
                 if (node.label.includes('.')) {
                     const ext = node.label.split('.').pop();
                     if (ext) {
-                        switch (ext) {
-                            case NodeType.JS:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.JS}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.GO:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.GO}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.TS:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.TS}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.CS:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.CS}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.C:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.C}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.CPP:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.CPP}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.PHP:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.PHP}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.PY:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.PY}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.HTML:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.HTML}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.MD:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.MD}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.JAVA:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.JAVA}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.RS:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.RS}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.ZIG:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.ZIG}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
-                            case NodeType.RB:
-                                icon = html `
-                                    <pb33f-model-icon size="${IconSize.small}" icon="${NodeType.RB}"
-                                                      color=${styleIco}></pb33f-model-icon>`;
-                                break;
+                        const iconType = ModelTree_1.ICON_TYPE_MAP[ext];
+                        if (iconType) {
+                            icon = ModelTree_1.renderFileIcon(iconType, styleIco);
                         }
                     }
                 }
@@ -346,28 +378,35 @@ let ModelTree = class ModelTree extends LitElement {
         if (this.expand) {
             expanded = true;
         }
+        const hasChildren = node.nodes && node.nodes.length > 0;
+        const childrenNotYetRendered = hasChildren && !this.childrenRendered.has(node.id);
         return html `
 
             <sl-tree-item id="model-${node.id}" ?expanded="${expanded}"
+                          ?lazy="${childrenNotYetRendered && !isRoot}"
                           @sl-expand="${(evt) => {
             this.expanded(evt, node);
         }}"
                           @sl-collapse="${(evt) => {
             this.collapse(evt, node);
+        }}"
+                          @sl-lazy-load="${(evt) => {
+            this.expanded(evt, node);
+            evt.target.removeAttribute('lazy');
         }}"
                           data-parentid="${node.parentId}"
                           data-hashid="${node.idHash}"
                           data-path="${node.path ? node.path : node.nodePath}">
                 <div style="display: flex">
                     ${icon}
-                    <div style="padding-left:8px; flex-grow: 4; white-space: nowrap">
+                    <div class="${showIcon && !this.isRolodex ? 'has-icon' : ''}" style="padding-left:${showIcon ? '8px' : '0'}; flex-grow: 4; white-space: nowrap">
                         ${filtered ? html `<span
-                                style="color: var(--font-color-sub1)">${this.renderLabel(node, filtered)} 
+                                style="color: var(--font-color-sub1)">${this.renderLabel(node, filtered)}
                             <sl-tooltip content="filtered item">
                                 <sl-icon name="eye-slash" style="vertical-align: middle; font-size: 0.8rem"></sl-icon>
                             </sl-tooltip>
                         </span>` : html `${this.renderLabel(node)}`}
-                        ${errorBadge} ${warnBadge} ${changes}
+                        ${bundledBadge} ${errorBadge} ${warnBadge} ${changes}
                     </div>
                 </div>
                 ${results}
@@ -376,24 +415,30 @@ let ModelTree = class ModelTree extends LitElement {
     }
     nodesSelected(treeItems) {
         this.selectedNodes = treeItems;
+        this.treeChanged = true;
         for (let i = 0; i < treeItems.length; i++) {
             const nodeId = treeItems[i].id.replace('model-', '');
             const path = treeItems[i].getAttribute('data-path');
             if (nodeId) {
                 let changes = [];
-                const n = this.nodesWithChanges.get(nodeId);
-                if (n?.timeline) {
-                    changes = n.timeline;
+                if (this.changesEnabled) {
+                    const n = this.nodesWithChanges.get(nodeId);
+                    if (n?.timeline) {
+                        changes = n.timeline;
+                    }
                 }
                 if (!this.isRolodex) {
+                    this.currentId = nodeId;
+                    this.currentNode = this.nodeMap.get(nodeId);
+                    this.currentChanges = changes;
                     this.nodeClicked(nodeId, changes);
                 }
                 else {
                     if (path && path != '') {
-                        if (this.currentHash === nodeId && this.currentPath === path) {
+                        if (this.currentId === nodeId && this.currentPath === path) {
                             return;
                         }
-                        this.currentHash = nodeId;
+                        this.currentId = nodeId;
                         this.currentPath = path;
                         this.rolodexClicked(nodeId, path, changes);
                     }
@@ -401,6 +446,9 @@ let ModelTree = class ModelTree extends LitElement {
             }
         }
     }
+    triggerTreeClick(source) {
+        this.nodeClicked(this.currentId, this.currentChanges, source);
+    }
     treeClicked(event) {
         // which tree item was actually clicked?
         const clickedItem = event.target?.closest('sl-tree-item');
@@ -408,24 +456,17 @@ let ModelTree = class ModelTree extends LitElement {
             return;
         // if the clicked item is already in selectedNodes, re-fire
         if (this.selectedNodes.some(item => item === clickedItem)) {
-            // this.nodesSelected(this.selectedNodes);
+            if (!this.treeChanged)
+                this.nodesSelected(this.selectedNodes);
         }
+        this.treeChanged = false;
     }
     render() {
         if (!this.node) {
             return html ``;
         }
         const tree = this.buildTree(this.node, 0);
-        let nodeLimitExceeded = html ``;
-        if (this.nodeLimitExceeded) {
-            nodeLimitExceeded = html `
-                <div class="node-limit-exceeded">
-                    <sl-icon name="exclamation-triangle" style="vertical-align: middle"></sl-icon>
-                    Objects exceed limit of ${this.nodeLimit}.
-                </div>`;
-        }
         return html `
-            ${nodeLimitExceeded}
             <sl-tree @click=${this.treeClicked} @sl-selection-change="${(evt) => {
             {
                 const selected = evt.detail.selection;
@@ -438,28 +479,50 @@ let ModelTree = class ModelTree extends LitElement {
     }
 };
 ModelTree.styles = [treeCss, modelSharedCss, tooltipCss];
+ModelTree.ICON_TYPE_MAP = {
+    [NodeType.JS]: NodeType.JS,
+    [NodeType.GO]: NodeType.GO,
+    [NodeType.TS]: NodeType.TS,
+    [NodeType.CS]: NodeType.CS,
+    [NodeType.C]: NodeType.C,
+    [NodeType.CPP]: NodeType.CPP,
+    [NodeType.PHP]: NodeType.PHP,
+    [NodeType.PY]: NodeType.PY,
+    [NodeType.HTML]: NodeType.HTML,
+    [NodeType.MD]: NodeType.MD,
+    [NodeType.JAVA]: NodeType.JAVA,
+    [NodeType.RS]: NodeType.RS,
+    [NodeType.ZIG]: NodeType.ZIG,
+    [NodeType.RB]: NodeType.RB
+};
 __decorate([
     property()
 ], ModelTree.prototype, "node", void 0);
-__decorate([
-    state()
-], ModelTree.prototype, "nodeMap", void 0);
-__decorate([
-    state()
-], ModelTree.prototype, "nodeIdMap", void 0);
-__decorate([
-    state()
-], ModelTree.prototype, "nodeIdHashMap", void 0);
 __decorate([
     property()
 ], ModelTree.prototype, "filteredNodes", void 0);
 __decorate([
     property({ type: Boolean })
 ], ModelTree.prototype, "expand", void 0);
+__decorate([
+    property({ type: Boolean })
+], ModelTree.prototype, "changesEnabled", void 0);
 __decorate([
     property()
 ], ModelTree.prototype, "isRolodex", void 0);
-ModelTree = __decorate([
+__decorate([
+    property()
+], ModelTree.prototype, "nodeMap", void 0);
+__decorate([
+    property()
+], ModelTree.prototype, "violationMap", void 0);
+__decorate([
+    property({ type: Object })
+], ModelTree.prototype, "iconConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], ModelTree.prototype, "isBundled", void 0);
+ModelTree = ModelTree_1 = __decorate([
     customElement("pb33f-model-tree")
 ], ModelTree);
 export { ModelTree };

package/dist/components/paginator/paginator-navigator.css.js

@@ -4,21 +4,23 @@ export default css `
         display: flex;
         justify-content: space-between;
         align-items: center;
-        background: var(--pagination-header);
-        border: 1px solid var(--secondary-color-lowalpha);
-
+        //background: var(--pagination-header);
+        border-bottom: 1px solid var(--secondary-color);
+        border-top: 1px solid var(--secondary-color);
     }
     
     .location {
         color: var(--font-color-sub1);
         font-size: 0.8rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
-    
+
     strong {
         font-family: var(--font-stack-bold), monospace;
         font-weight: normal;
     }
-    
+
     strong.current-page, strong.total {
         color: var(--primary-color);
     }
@@ -26,6 +28,8 @@ export default css `
     .result-range {
         font-size: 0.8rem;
         color: var(--font-color-sub1);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .hide {