@neovici/cosmoz-treenode-navigator 6.0.2 → 7.0.0

package/README.md

@@ -1,13 +1,11 @@
 # cosmoz-treenode-navigator
 
-
 [![Build Status](https://github.com/Neovici/cosmoz-treenode-navigator/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-treenode-navigator/actions?workflow=Github+CI)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
-cosmoz-treenode-navigator is a Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.
-
+cosmoz-treenode-navigator is a PionJS-based component that lets you navigate and search through hierarchically structured data-nodes and select one of them.
 
-It needs an object structure which looks for example like this in JSON:
+It needs an object structure which looks, for example, like this in JSON:
 
 ```json
 {
@@ -16,18 +14,14 @@ It needs an object structure which looks for example like this in JSON:
 		"children": {
 			"7": {
 				"name": "child seven",
-				"children": {
-
-				}
+				"children": {}
 			},
 			"8": {
 				"name": "child eight",
 				"children": {
 					"9": {
 						"name": "child nine",
-						"children": {
-
-						}
+						"children": {}
 					}
 				}
 			}
@@ -37,5 +31,3 @@ It needs an object structure which looks for example like this in JSON:
 ```
 
 The property names "name" and "children" are configurable in the component through the setting of "childProperty" and "comparisonProperty".
-
-

package/dist/cosmoz-treenode-button-view.d.ts

@@ -0,0 +1,2 @@
+import './cosmoz-treenode-navigator';
+//# sourceMappingURL=cosmoz-treenode-button-view.d.ts.map

package/dist/cosmoz-treenode-button-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-treenode-button-view.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"AAaA,OAAO,6BAA6B,CAAC"}

package/dist/cosmoz-treenode-button-view.js

@@ -0,0 +1,203 @@
+import { component, lift, useEffect, useMemo, useProperty, useRef, useState, } from '@pionjs/pion';
+import { html } from 'lit-html';
+import { ref } from 'lit/directives/ref.js';
+import style from './cosmoz-treenode-button-view.styles';
+import './cosmoz-treenode-navigator';
+import { useKeyDown } from './hooks/useKeyDown';
+import { getNode, getTreePathParts } from './util/helpers';
+import { when } from 'lit-html/directives/when.js';
+import { debounce$ } from '@neovici/cosmoz-utils/promise';
+const CosmozNodeButtonView = ({ tree, multiSelection = false, dialogText, buttonTextPlaceholder, searchPlaceholder, noReset = false, searchGlobalPlaceholder, searchMinLength, nodePath, }) => {
+    const dialogRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const [highlightedNode, setHighlightedNode] = useProperty('highlightedNode');
+    const [opened, setOpened] = useState(false);
+    const [nodesOnNodePath, setNodesOnNodePath] = useState([]);
+    const [selectedNodes, setSelectedNodes] = useState([]);
+    useEffect(() => {
+        if (nodePath && tree) {
+            setNodesOnNodePath(getTreePathParts(nodePath, tree));
+        }
+    }, [nodePath, tree]);
+    useEffect(() => {
+        if (dialogRef.current) {
+            searchInputRef.current = dialogRef.current
+                .querySelector('cosmoz-treenode-navigator')
+                ?.shadowRoot?.querySelector('cosmoz-input');
+        }
+    }, [dialogRef.current]);
+    const buttonLabel = useMemo(() => {
+        if (!Array.isArray(nodesOnNodePath) || nodesOnNodePath.length === 0) {
+            return buttonTextPlaceholder || '';
+        }
+        return nodesOnNodePath
+            .filter((n) => n)
+            .map((part) => part[tree.searchProperty])
+            .join(' / ');
+    }, [nodesOnNodePath, tree]);
+    const reset = () => {
+        setNodesOnNodePath([]);
+        setSelectedNodes([]);
+        setHighlightedNode(null);
+    };
+    const enableReset = !noReset && !!highlightedNode;
+    const clearItemSelection = ({ item, ev }) => {
+        setSelectedNodes(selectedNodes.filter((node) => node !== item));
+        ev.preventDefault();
+        ev.stopPropagation();
+    };
+    const getChipText = (node) => {
+        return node.name;
+    };
+    const showSelectedNodes = (multiSelection, selectedNodesLength) => {
+        return multiSelection && selectedNodesLength > 0;
+    };
+    const refit = debounce$(() => {
+        dialogRef.current?.fit?.();
+    }, 50);
+    const focusSearch = () => {
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
+    const onOpen = () => {
+        dialogRef.current?.showModal();
+        setOpened(true);
+        setTimeout(focusSearch, 0);
+    };
+    const onClose = () => {
+        setOpened(false);
+        dialogRef.current?.close();
+    };
+    useKeyDown('Escape', onClose);
+    const selectNode = () => {
+        if (!highlightedNode) {
+            return;
+        }
+        const path = highlightedNode.pathLocator;
+        const node = getNode(path, tree);
+        setNodesOnNodePath(getTreePathParts(path, tree));
+        if (multiSelection && node) {
+            if (!selectedNodes.some((n) => n.pathLocator === path)) {
+                setSelectedNodes([...selectedNodes, node]);
+            }
+        }
+        onClose();
+    };
+    return html `
+		<div class="actions" part="actions">
+			<button
+				class="actions__open-dialog"
+				type="button"
+				@click=${onOpen}
+				part="action-open"
+			>
+				${buttonLabel}
+			</button>
+			${when(enableReset, () => html ` <button
+						@click=${reset}
+						class="actions__clear"
+						part="action-reset"
+					>
+						<svg
+							width="10"
+							height="9"
+							viewBox="0 0 10 9"
+							stroke="currentColor"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<line
+								x1="8.53033"
+								y1="0.53033"
+								x2="1.53033"
+								y2="7.53033"
+								stroke-width="1.5"
+							></line>
+							<line
+								x1="8.46967"
+								y1="7.53033"
+								x2="1.46967"
+								y2="0.530331"
+								stroke-width="1.5"
+							></line>
+						</svg>
+					</button>`)}
+		</div>
+		${when(showSelectedNodes(multiSelection, selectedNodes.length), () => html `
+				<div id="chips" part="chips" class="row">
+					${selectedNodes.map((item) => html `
+							<div class="chip">
+								<span>${getChipText(item)}</span>
+								<button
+									class="chip__clear"
+									@click=${(ev) => clearItemSelection({ item, ev })}
+									type="button"
+								>
+									&times;
+								</button>
+							</div>
+						`)}
+				</div>
+			`)}
+		<dialog
+			class="dialog"
+			part="dialog"
+			${ref((el) => {
+        dialogRef.current = el;
+    })}
+		>
+			<header class="dialog-header" part="header">
+				<h1 class="dialog-heading" part="heading">${dialogText}</h1>
+			</header>
+			<main class="dialog-main" part="main">
+				<cosmoz-treenode-navigator
+					id="treeNavigator"
+					class="dialog-treenode-navigator no-padding"
+					.highlightedNode=${highlightedNode}
+					@highlighted-node-changed=${lift(setHighlightedNode)}
+					.searchPlaceholder=${searchPlaceholder}
+					.searchGlobalPlaceholder=${searchGlobalPlaceholder}
+					.searchMinLength=${searchMinLength}
+					.tree=${tree}
+					.opened=${opened}
+					@select-node=${selectNode}
+					@node-dblclicked=${selectNode}
+					@on-data-plane-changed=${refit}
+				>
+					<slot></slot>
+				</cosmoz-treenode-navigator>
+			</main>
+			<footer class="dialog-footer" part="footer">
+				<p class="dialog-footer-button-container">
+					<button
+						?disabled=${!highlightedNode?.pathLocator}
+						autofocus
+						class="dialog-footer-button"
+						part="select-button"
+						@click=${selectNode}
+					>
+						Select
+					</button>
+					<button
+						class="dialog-footer-button"
+						part="cancel-button"
+						@click=${onClose}
+					>
+						Cancel
+					</button>
+				</p>
+			</footer>
+		</dialog>
+	`;
+};
+CosmozNodeButtonView.observedAttributes = [
+    'button-text-placeholder',
+    'dialog-text',
+    'search-placeholder',
+    'search-global-placeholder',
+    'node-path',
+];
+customElements.define('cosmoz-treenode-button-view', component(CosmozNodeButtonView, {
+    styleSheets: [style],
+}));
+//# sourceMappingURL=cosmoz-treenode-button-view.js.map

package/dist/cosmoz-treenode-button-view.js.map

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

package/dist/cosmoz-treenode-button-view.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: string;
+export default _default;
+//# sourceMappingURL=cosmoz-treenode-button-view.styles.d.ts.map

package/dist/cosmoz-treenode-button-view.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-treenode-button-view.styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":";AAEA,wBAuNE"}

package/dist/cosmoz-treenode-button-view.styles.js

@@ -0,0 +1,218 @@
+import { css } from '@pionjs/pion';
+export default css `
+	h1,
+	h2 {
+		font-weight: 500;
+	}
+
+	button {
+		position: relative;
+		overflow: hidden;
+		outline: none;
+
+		cursor: pointer;
+		border-radius: 500px;
+	}
+
+	button:after {
+		content: '';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 5px;
+		height: 5px;
+		background: rgba(189, 195, 199, 0.5);
+		opacity: 0;
+		border-radius: 100%;
+		transform: scale(1, 1) translate(-50%);
+		transform-origin: 50% 50%;
+	}
+
+	@keyframes ripple {
+		0% {
+			transform: scale(0, 0);
+			opacity: 1;
+		}
+		20% {
+			transform: scale(25, 25);
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+			transform: scale(40, 40);
+		}
+	}
+
+	button:not(:disabled):active::after {
+		animation: ripple 1s ease-out;
+	}
+
+	.actions {
+		display: flex;
+	}
+
+	.actions button {
+		display: inline-block;
+
+		padding: 10px 16px 10px 16px;
+		margin: 14px 14px 12px 14px;
+
+		color: #101010;
+		font-size: 14px;
+
+		background-color: white;
+		border: 0px none rgb(16, 16, 16);
+		box-shadow: 0 2px 4px 0 #e5e5e5;
+
+		transition-behavior: normal, normal;
+		transition-delay: 0s, 0s;
+		transition-duration: 0.28s, 0.3s;
+		transition-property: box-shadow, background-color;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease;
+	}
+
+	.actions button:hover {
+		box-shadow: 0 2px 3px 0 rgb(0 0 0 / 30%);
+	}
+
+	.actions__open-dialog {
+		min-width: 180px;
+	}
+
+	.actions__clear {
+		flex-basis: 100px;
+		flex-grow: 0;
+		flex-shrink: 0;
+	}
+
+	.actions__open-dialog + .actions__clear {
+		margin-left: 0;
+	}
+
+	.open {
+		flex: auto;
+	}
+
+	.pathToNode {
+		max-width: 320px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		direction: rtl;
+		text-align: left;
+	}
+
+	/* Safari only css fix */
+
+	_:matches(x),
+	_:lang(x) + _:-webkit-full-screen-document,
+	.pathToNode span {
+		display: inline-block;
+	}
+
+	#chips {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 20px;
+		overflow-y: auto;
+		max-height: 30vh;
+	}
+
+	.chip {
+		display: flex;
+		margin: 1px 4px 1px 0;
+		padding: 0.25rem 0.45rem 0.25rem 0.5rem;
+
+		gap: 0.25rem;
+
+		border-radius: 500px;
+		background-color: #e0e0e0;
+		white-space: nowrap;
+		overflow: hidden;
+		align-items: center;
+	}
+
+	.chip .chip__clear {
+		margin: 0 0 0 0.5rem;
+
+		background: #a6a6a6;
+		border: none;
+		cursor: pointer;
+		font-size: 1rem;
+		color: white;
+		border-radius: 50%;
+	}
+
+	.chip > span {
+		color: #424242;
+		margin-left: 10px;
+		font-size: 13px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.chip iron-icon {
+		margin: 2px 4px;
+		color: #cdcdcd;
+		background-color: #a6a6a6;
+		border-radius: 500px;
+		cursor: pointer;
+		min-width: 16px;
+		width: 16px;
+		min-height: 16px;
+		height: 16px;
+	}
+
+	.dialog {
+		width: 550px;
+		min-width: 250px;
+
+		padding: 0;
+		border-radius: 10px;
+	}
+
+	.dialog::backdrop {
+		background: rgba(0, 0, 0, 0.5);
+	}
+
+	.dialog-header {
+		padding: 10px 10px 0 10px;
+	}
+
+	.dialog-heading {
+		margin-bottom: 2rem;
+		padding: 0 8px;
+		font-size: 1.25rem;
+		font-weight: normal;
+	}
+
+	.dialog-footer {
+		padding: 0 10px 10px 10px;
+		text-align: right;
+	}
+
+	.dialog-footer-button-container {
+		margin: 0;
+	}
+
+	.dialog-footer-button {
+		margin: 0 0.25rem;
+		padding: 8px 14px;
+		background: none;
+		border: 1px solid rgb(164, 171, 174);
+		font-size: 15px;
+		cursor: pointer;
+	}
+
+	.dialog-footer-button:not(:disabled):active {
+		border: 1px outset rgb(164, 171, 174);
+	}
+
+	.dialog-footer-button:disabled {
+		color: #a8a8a8;
+		background-color: #f2f2f2;
+		cursor: default;
+		user-select: none;
+	}
+`;
+//# sourceMappingURL=cosmoz-treenode-button-view.styles.js.map

package/dist/cosmoz-treenode-button-view.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-treenode-button-view.styles.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuNjB,CAAC"}

package/dist/cosmoz-treenode-navigator.d.ts

@@ -0,0 +1,2 @@
+import '@neovici/cosmoz-input';
+//# sourceMappingURL=cosmoz-treenode-navigator.d.ts.map

package/dist/cosmoz-treenode-navigator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cosmoz-treenode-navigator.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.ts"],"names":[],"mappings":"AAeA,OAAO,uBAAuB,CAAC"}