tree-element 0.1.0

package/src/scrollHandler.ts

@@ -0,0 +1,55 @@
+import type { PositionInfo } from "./mouseUtils";
+import type { ScrollParent } from "./scrollHandler/scrollParent";
+
+import createScrollParent from "./scrollHandler/createScrollParent";
+
+interface ScrollHandlerParams {
+    refreshHitAreas: () => void;
+    treeElement: HTMLElement;
+}
+
+export default class ScrollHandler {
+    private refreshHitAreas: () => void;
+    private scrollParent?: ScrollParent;
+    private treeElement: HTMLElement;
+
+    constructor({ refreshHitAreas, treeElement }: ScrollHandlerParams) {
+        this.refreshHitAreas = refreshHitAreas;
+        this.scrollParent = undefined;
+        this.treeElement = treeElement;
+    }
+
+    public checkScrolling(positionInfo: PositionInfo): void {
+        this.checkVerticalScrolling(positionInfo);
+        this.checkHorizontalScrolling(positionInfo);
+    }
+
+    public getScrollLeft(): number {
+        return this.getScrollParent().getScrollLeft();
+    }
+
+    public scrollToY(top: number): void {
+        this.getScrollParent().scrollToY(top);
+    }
+
+    public stopScrolling() {
+        this.getScrollParent().stopScrolling();
+    }
+
+    private checkHorizontalScrolling(positionInfo: PositionInfo): void {
+        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
+    }
+
+    private checkVerticalScrolling(positionInfo: PositionInfo): void {
+        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
+    }
+
+    private getScrollParent(): ScrollParent {
+        this.scrollParent ??= createScrollParent(
+            this.treeElement,
+            this.refreshHitAreas,
+        );
+
+        return this.scrollParent;
+    }
+}

package/src/selectNodeHandler.ts

@@ -0,0 +1,192 @@
+import type { GetNodeById, GetNodeElementForNode, OpenParents, TriggerEvent } from "./methodTypes";
+import type { Node, NodeId } from "./node";
+import type { OnCanSelectNode } from "./options";
+
+export interface SelectNodeOptions {
+    mustSetFocus?: boolean;
+    mustToggle?: boolean;
+}
+
+interface SelectNodeHandlerParameters {
+    getNodeById: GetNodeById;
+    getNodeElementForNode: GetNodeElementForNode;
+    getOnCanSelectNode: () => OnCanSelectNode | undefined;
+    getSelectable: () => boolean;
+    openParents: OpenParents;
+    saveState: () => void;
+    triggerEvent: TriggerEvent;
+}
+
+export default class SelectNodeHandler {
+    private getNodeById: GetNodeById;
+    private getNodeElementForNode: GetNodeElementForNode;
+    private getOnCanSelectNode: () => OnCanSelectNode | undefined;
+    private getSelectable: () => boolean;
+    private openParents: OpenParents;
+    private saveState: () => void;
+    private selectedNodes: Set<NodeId>;
+    private selectedSingleNode: Node | null;
+    private triggerEvent: TriggerEvent;
+
+    constructor({ getNodeById, getNodeElementForNode, getOnCanSelectNode, getSelectable, openParents, saveState, triggerEvent }: SelectNodeHandlerParameters) {
+        this.getNodeById = getNodeById;
+        this.getNodeElementForNode = getNodeElementForNode;
+        this.getOnCanSelectNode = getOnCanSelectNode;
+        this.getSelectable = getSelectable;
+        this.openParents = openParents;
+        this.saveState = saveState;
+        this.selectedNodes = new Set<NodeId>();
+        this.selectedSingleNode = null;
+        this.triggerEvent = triggerEvent;
+    }
+
+    public addToSelection(node: Node): void {
+        if (node.id != null) {
+            this.selectedNodes.add(node.id);
+        } else {
+            this.selectedSingleNode = node;
+        }
+    }
+
+    public clear(): void {
+        this.selectedNodes.clear();
+        this.selectedSingleNode = null;
+    }
+
+    public getSelectedNode(): false | Node {
+        const selectedNodes = this.getSelectedNodes();
+
+        if (selectedNodes.length) {
+            return selectedNodes[0] ?? false;
+        } else {
+            return false;
+        }
+    }
+
+    public getSelectedNodes(): Node[] {
+        if (this.selectedSingleNode) {
+            return [this.selectedSingleNode];
+        } else {
+            const selectedNodes: Node[] = [];
+
+            this.selectedNodes.forEach((id) => {
+                const node = this.getNodeById(id);
+                if (node) {
+                    selectedNodes.push(node);
+                }
+            });
+
+            return selectedNodes;
+        }
+    }
+
+    public getSelectedNodesUnder(parent: Node): Node[] {
+        if (this.selectedSingleNode) {
+            if (parent.isParentOf(this.selectedSingleNode)) {
+                return [this.selectedSingleNode];
+            } else {
+                return [];
+            }
+        } else {
+            const selectedNodes: Node[] = [];
+
+            this.selectedNodes.forEach((id) => {
+                const node = this.getNodeById(id);
+                if (node && parent.isParentOf(node)) {
+                    selectedNodes.push(node);
+                }
+            });
+
+            return selectedNodes;
+        }
+    }
+
+    public isNodeSelected(node: Node): boolean {
+        if (node.id != null) {
+            return this.selectedNodes.has(node.id);
+        } else if (this.selectedSingleNode) {
+            return this.selectedSingleNode.element === node.element;
+        } else {
+            return false;
+        }
+    }
+
+    public removeFromSelection(node: Node, includeChildren = false): void {
+        if (node.id == null) {
+            if (
+                this.selectedSingleNode &&
+                node.element === this.selectedSingleNode.element
+            ) {
+                this.selectedSingleNode = null;
+            }
+        } else {
+            this.selectedNodes.delete(node.id);
+
+            if (includeChildren) {
+                node.iterate(() => {
+                    if (node.id != null) {
+                        this.selectedNodes.delete(node.id);
+                    }
+                    return true;
+                });
+            }
+        }
+    }
+
+    /* Select a single node.
+    * Renders the changed elements.
+    * Deselects if the node is currently selected (if the mustToggle is on).
+    * Deselects the previously selected node.
+    * Check if the node is selectable.
+    * Saves the state.
+    * Options:
+      * mustSetFocus: set the focus to the selected node
+      * mustToggle: support deselecting the selected node
+    */
+    public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {
+        const defaultOptions = { mustSetFocus: true, mustToggle: true };
+        const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };
+
+        const canSelect = (): boolean => {
+            if (!this.getSelectable()) {
+                return false;
+            }
+
+            const onCanSelectNode = this.getOnCanSelectNode();
+            return onCanSelectNode ? onCanSelectNode(node) : true;
+        };
+
+        if (!canSelect()) {
+            return;
+        }
+
+        const deselectCurrentNode = (deselectedNode: Node) => {
+            this.removeFromSelection(deselectedNode);
+            this.getNodeElementForNode(deselectedNode).deselect();
+        };
+
+        if (this.isNodeSelected(node)) {
+            if (selectOptions.mustToggle) {
+                deselectCurrentNode(node);
+                this.triggerEvent("tree.deselect", { node });
+            }
+        } else {
+            const deselectedNode = this.getSelectedNode();
+
+            if (deselectedNode) {
+                deselectCurrentNode(deselectedNode);
+            }
+
+            this.addToSelection(node);
+            this.openParents(node);
+            this.getNodeElementForNode(node).select(selectOptions.mustSetFocus);
+
+            this.triggerEvent("tree.select", {
+                deselectedNode: deselectedNode || null,
+                node,
+            });
+        }
+
+        this.saveState();
+    }
+}

package/src/setDefaultOptions.ts

@@ -0,0 +1,79 @@
+import type { TreeElementOptions } from "./options";
+
+import { DEFAULT_CLASS_PREFIX } from "./classNames";
+import { Node } from "./node";
+
+const defaults: TreeElementOptions = {
+  animationSpeed: "fast",
+  autoEscape: true,
+  autoOpen: false, // true / false / int (open n levels starting at 0)
+  buttonLeft: true,
+  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes
+  // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
+  // http://www.fileformat.info/info/unicode/char/25ba/index.htm
+  closedIcon: undefined,
+  commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
+  data: undefined,
+  dataFilter: undefined,
+  dataUrl: undefined,
+  dragAndDrop: false,
+  keyboardSupport: true,
+  nodeClass: Node,
+  onCanMove: undefined, // Can this node be moved?
+  onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
+  onCanSelectNode: undefined,
+  onCreateLi: undefined,
+  onDragMove: undefined,
+  onDragStop: undefined,
+  onGetStateFromStorage: undefined,
+  onIsMoveHandle: undefined,
+  onSetStateFromStorage: undefined,
+  openedIcon: undefined,
+  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
+  // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
+  // http://www.fileformat.info/info/unicode/char/25bc/index.htm
+  rtl: undefined, // right-to-left support; true / false (default)
+  saveState: false, // true / false / string (local storage key; the default key is "tree")
+  selectable: true,
+  showEmptyFolder: false,
+  slide: true, // must display slide animation?
+  startDndDelay: 300, // The delay for starting dnd (in milliseconds)
+  tabIndex: 0,
+  treeClassName: undefined, // the class of the root element; the default is classPrefix
+  useContextMenu: true,
+};
+
+const setDefaultOptions = (htmlElement: HTMLElement, inputOptions: Partial<TreeElementOptions>): TreeElementOptions => {
+  const options = { ...defaults, ...inputOptions };
+
+  options.dataUrl ??= htmlElement.dataset.url;
+  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
+  options.closedIcon ??= getDefaultClosedIcon(options);
+  options.openedIcon ??= "&#x25bc;";
+
+  return options;
+}
+
+const getDefaultClosedIcon = (options: TreeElementOptions): string => {
+  if (options.rtl) {
+    // triangle to the left
+    return "&#x25c0;";
+  } else {
+    // triangle to the right
+    return "&#x25ba;";
+  }
+}
+
+const getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {
+  const dataRtl = htmlElement.dataset.rtl;
+
+  if (dataRtl == "") {
+    return true;
+  } else if (dataRtl === "false") {
+    return false;
+  } else {
+    return Boolean(dataRtl);
+  }
+}
+
+export default setDefaultOptions;

package/src/triggerCustomEvent.ts

@@ -0,0 +1,14 @@
+// Trigger a CustomEvent. Return if the event is processed (true) or cancelled (false).
+const triggerCustomEvent = (element: HTMLElement, eventName: string, values?: Record<string, unknown>): boolean => {
+  const event = new CustomEvent(eventName, {
+    bubbles: true,
+    cancelable: true,
+    detail: values,
+  });
+
+  element.dispatchEvent(event);
+
+  return !event.defaultPrevented;
+}
+
+export default triggerCustomEvent;

package/src/util.ts

@@ -0,0 +1,5 @@
+export const isInt = (n: unknown): boolean =>
+    typeof n === "number" && n % 1 === 0;
+
+export const getBoolString = (value: unknown): string =>
+    value ? "true" : "false";

package/src/version.ts

@@ -0,0 +1,4 @@
+// Generated by config/generateVersion.mjs. Do not edit.
+const version = "0.1.0";
+
+export default version;

package/tree_element.css

@@ -0,0 +1,195 @@
+ul.tree-element {
+  list-style: none outside;
+  margin-left: 0;
+  margin-bottom: 0;
+  padding: 0;
+
+  &.tree-element-dnd {
+    touch-action: none;
+  }
+
+  ul.tree-element-common {
+    list-style: none outside;
+    margin-left: 12px;
+    margin-right: 0;
+    margin-bottom: 0;
+    padding: 0;
+    display: block;
+  }
+
+  li.tree-element-closed > ul.tree-element-common {
+    display: none;
+  }
+
+  li.tree-element-common {
+    clear: both;
+    list-style-type: none;
+  }
+
+  .tree-element-toggler {
+    border-bottom: none;
+    color: #333;
+    text-decoration: none;
+    vertical-align: middle;
+
+    &:hover {
+      color: #000;
+      text-decoration: none;
+    }
+
+    &.tree-element-closed {
+      background-position: 0 0;
+    }
+
+    &.tree-element-toggler-left {
+      margin-right: 0.5em;
+    }
+
+    &.tree-element-toggler-right {
+      margin-left: 0.5em;
+    }
+  }
+
+  .tree-element-element {
+    cursor: pointer;
+    position: relative;
+    display: flex;
+
+    &:has(.tree-element-title-button-right) {
+      display: block;
+    }
+  }
+
+  .tree-element-title {
+    color: #1c4257;
+    vertical-align: middle;
+  }
+
+  .tree-element-title-button-left {
+    margin-left: 1.5em;
+
+    &.tree-element-title-folder {
+      margin-left: 0;
+    }
+  }
+
+  li.tree-element-folder {
+    margin-bottom: 4px;
+
+    &.tree-element-closed {
+      margin-bottom: 1px;
+    }
+  }
+
+  li.tree-element-ghost {
+    position: relative;
+    z-index: 10;
+    margin-right: 10px;
+
+    span {
+      display: block;
+    }
+
+    span.tree-element-circle {
+      border: solid 2px #0000ff;
+      border-radius: 100px;
+      height: 8px;
+      width: 8px;
+      position: absolute;
+      top: -4px;
+      left: -6px;
+      box-sizing: border-box;
+    }
+
+    span.tree-element-line {
+      background-color: #0000ff;
+      height: 2px;
+      padding: 0;
+      position: absolute;
+      top: -1px;
+      left: 2px;
+      width: 100%;
+    }
+
+    &.tree-element-inside {
+      margin-left: 48px;
+    }
+  }
+
+  span.tree-element-border {
+    position: absolute;
+    display: block;
+    left: -2px;
+    top: 0;
+    border: solid 2px #0000ff;
+    border-radius: 6px;
+    margin: 0;
+    box-sizing: content-box;
+  }
+
+  li.tree-element-selected > .tree-element-element,
+  li.tree-element-selected > .tree-element-element:hover {
+    background-color: #97bdd6;
+    background: linear-gradient(#bee0f5, #89afca);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+  }
+
+  .tree-element-moving > .tree-element-element .tree-element-title {
+    outline: dashed 1px #0000ff;
+  }
+}
+
+ul.tree-element.tree-element-rtl {
+  direction: rtl;
+
+  ul.tree-element-common {
+    margin-left: 0;
+    margin-right: 12px;
+  }
+
+  .tree-element-toggler {
+    margin-left: 0.5em;
+    margin-right: 0;
+  }
+
+  .tree-element-title {
+    margin-left: 0;
+    margin-right: 1.5em;
+
+    &.tree-element-title-folder {
+      margin-right: 0;
+    }
+  }
+
+  li.tree-element-ghost {
+    margin-right: 0;
+    margin-left: 10px;
+
+    span.tree-element-circle {
+      right: -6px;
+    }
+
+    span.tree-element-line {
+      right: 2px;
+    }
+
+    &.tree-element-inside {
+      margin-left: 0;
+      margin-right: 48px;
+    }
+  }
+
+  span.tree-element-border {
+    right: -2px;
+  }
+}
+
+span.tree-element-dragging {
+  color: #fff;
+  background: #000;
+  opacity: 0.6;
+  cursor: pointer;
+  padding: 2px 8px;
+}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy90cmVlX2VsZW1lbnQucG9zdGNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJ0cmVlX2VsZW1lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsidWwudHJlZS1lbGVtZW50IHtcbiAgbGlzdC1zdHlsZTogbm9uZSBvdXRzaWRlO1xuICBtYXJnaW4tbGVmdDogMDtcbiAgbWFyZ2luLWJvdHRvbTogMDtcbiAgcGFkZGluZzogMDtcblxuICAmLnRyZWUtZWxlbWVudC1kbmQge1xuICAgIHRvdWNoLWFjdGlvbjogbm9uZTtcbiAgfVxuXG4gIHVsLnRyZWUtZWxlbWVudC1jb21tb24ge1xuICAgIGxpc3Qtc3R5bGU6IG5vbmUgb3V0c2lkZTtcbiAgICBtYXJnaW4tbGVmdDogMTJweDtcbiAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgbGkudHJlZS1lbGVtZW50LWNsb3NlZCA+IHVsLnRyZWUtZWxlbWVudC1jb21tb24ge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cblxuICBsaS50cmVlLWVsZW1lbnQtY29tbW9uIHtcbiAgICBjbGVhcjogYm90aDtcbiAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gIH1cblxuICAudHJlZS1lbGVtZW50LXRvZ2dsZXIge1xuICAgIGJvcmRlci1ib3R0b206IG5vbmU7XG4gICAgY29sb3I6ICMzMzM7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiAjMDAwO1xuICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIH1cblxuICAgICYudHJlZS1lbGVtZW50LWNsb3NlZCB7XG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDA7XG4gICAgfVxuXG4gICAgJi50cmVlLWVsZW1lbnQtdG9nZ2xlci1sZWZ0IHtcbiAgICAgIG1hcmdpbi1yaWdodDogMC41ZW07XG4gICAgfVxuXG4gICAgJi50cmVlLWVsZW1lbnQtdG9nZ2xlci1yaWdodCB7XG4gICAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gICAgfVxuICB9XG5cbiAgLnRyZWUtZWxlbWVudC1lbGVtZW50IHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGZsZXg7XG5cbiAgICAmOmhhcygudHJlZS1lbGVtZW50LXRpdGxlLWJ1dHRvbi1yaWdodCkge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuICB9XG5cbiAgLnRyZWUtZWxlbWVudC10aXRsZSB7XG4gICAgY29sb3I6ICMxYzQyNTc7XG4gICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgfVxuXG4gIC50cmVlLWVsZW1lbnQtdGl0bGUtYnV0dG9uLWxlZnQge1xuICAgIG1hcmdpbi1sZWZ0OiAxLjVlbTtcblxuICAgICYudHJlZS1lbGVtZW50LXRpdGxlLWZvbGRlciB7XG4gICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICB9XG4gIH1cblxuICBsaS50cmVlLWVsZW1lbnQtZm9sZGVyIHtcbiAgICBtYXJnaW4tYm90dG9tOiA0cHg7XG5cbiAgICAmLnRyZWUtZWxlbWVudC1jbG9zZWQge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMXB4O1xuICAgIH1cbiAgfVxuXG4gIGxpLnRyZWUtZWxlbWVudC1naG9zdCB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHotaW5kZXg6IDEwO1xuICAgIG1hcmdpbi1yaWdodDogMTBweDtcblxuICAgIHNwYW4ge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuXG4gICAgc3Bhbi50cmVlLWVsZW1lbnQtY2lyY2xlIHtcbiAgICAgIGJvcmRlcjogc29saWQgMnB4ICMwMDAwZmY7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMDBweDtcbiAgICAgIGhlaWdodDogOHB4O1xuICAgICAgd2lkdGg6IDhweDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogLTRweDtcbiAgICAgIGxlZnQ6IC02cHg7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIH1cblxuICAgIHNwYW4udHJlZS1lbGVtZW50LWxpbmUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwMDBmZjtcbiAgICAgIGhlaWdodDogMnB4O1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogLTFweDtcbiAgICAgIGxlZnQ6IDJweDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgIH1cblxuICAgICYudHJlZS1lbGVtZW50LWluc2lkZSB7XG4gICAgICBtYXJnaW4tbGVmdDogNDhweDtcbiAgICB9XG4gIH1cblxuICBzcGFuLnRyZWUtZWxlbWVudC1ib3JkZXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBsZWZ0OiAtMnB4O1xuICAgIHRvcDogMDtcbiAgICBib3JkZXI6IHNvbGlkIDJweCAjMDAwMGZmO1xuICAgIGJvcmRlci1yYWRpdXM6IDZweDtcbiAgICBtYXJnaW46IDA7XG4gICAgYm94LXNpemluZzogY29udGVudC1ib3g7XG4gIH1cblxuICBsaS50cmVlLWVsZW1lbnQtc2VsZWN0ZWQgPiAudHJlZS1lbGVtZW50LWVsZW1lbnQsXG4gIGxpLnRyZWUtZWxlbWVudC1zZWxlY3RlZCA+IC50cmVlLWVsZW1lbnQtZWxlbWVudDpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzk3YmRkNjtcbiAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoI2JlZTBmNSwgIzg5YWZjYSk7XG4gICAgdGV4dC1zaGFkb3c6IDAgMXB4IDAgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjcpO1xuICB9XG5cbiAgLnRyZWUtZWxlbWVudC1tb3ZpbmcgPiAudHJlZS1lbGVtZW50LWVsZW1lbnQgLnRyZWUtZWxlbWVudC10aXRsZSB7XG4gICAgb3V0bGluZTogZGFzaGVkIDFweCAjMDAwMGZmO1xuICB9XG59XG5cbnVsLnRyZWUtZWxlbWVudC50cmVlLWVsZW1lbnQtcnRsIHtcbiAgZGlyZWN0aW9uOiBydGw7XG5cbiAgdWwudHJlZS1lbGVtZW50LWNvbW1vbiB7XG4gICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgbWFyZ2luLXJpZ2h0OiAxMnB4O1xuICB9XG5cbiAgLnRyZWUtZWxlbWVudC10b2dnbGVyIHtcbiAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gICAgbWFyZ2luLXJpZ2h0OiAwO1xuICB9XG5cbiAgLnRyZWUtZWxlbWVudC10aXRsZSB7XG4gICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgbWFyZ2luLXJpZ2h0OiAxLjVlbTtcblxuICAgICYudHJlZS1lbGVtZW50LXRpdGxlLWZvbGRlciB7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgfVxuICB9XG5cbiAgbGkudHJlZS1lbGVtZW50LWdob3N0IHtcbiAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgbWFyZ2luLWxlZnQ6IDEwcHg7XG5cbiAgICBzcGFuLnRyZWUtZWxlbWVudC1jaXJjbGUge1xuICAgICAgcmlnaHQ6IC02cHg7XG4gICAgfVxuXG4gICAgc3Bhbi50cmVlLWVsZW1lbnQtbGluZSB7XG4gICAgICByaWdodDogMnB4O1xuICAgIH1cblxuICAgICYudHJlZS1lbGVtZW50LWluc2lkZSB7XG4gICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICAgIG1hcmdpbi1yaWdodDogNDhweDtcbiAgICB9XG4gIH1cblxuICBzcGFuLnRyZWUtZWxlbWVudC1ib3JkZXIge1xuICAgIHJpZ2h0OiAtMnB4O1xuICB9XG59XG5cbnNwYW4udHJlZS1lbGVtZW50LWRyYWdnaW5nIHtcbiAgY29sb3I6ICNmZmY7XG4gIGJhY2tncm91bmQ6ICMwMDA7XG4gIG9wYWNpdHk6IDAuNjtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiAycHggOHB4O1xufVxuIl19 */