@operato/data-tree - npm Package Compare versions

+8

-0

CHANGELOG.md

		@@ -6,2 +6,10 @@ # Change Log

		## [9.0.0](https://github.com/hatiolab/operato/compare/v9.0.0-beta.92...v9.0.0) (2025-06-30)

		Note: Version bump only for package @operato/data-tree





		## [9.0.0-beta.56](https://github.com/hatiolab/operato/compare/v9.0.0-beta.55...v9.0.0-beta.56) (2025-03-30)
		@@ -8,0 +16,0 @@

+3

-3

package.json

		{
		"name": "@operato/data-tree",
		"version": "9.0.0-beta.56",
		"version": "9.0.0",
		"description": "User interface for tree structure data",
		@@ -53,3 +53,3 @@ "author": "heartyoh",
		"dependencies": {
		"@operato/styles": "^9.0.0-beta.47",
		"@operato/styles": "^9.0.0",
		"i18next": "^24.2.1",
		@@ -92,3 +92,3 @@ "lit": "^3.1.2",
		},
		"gitHead": "85283116443ffef074f4d12a570339ef215e9bb4"
		"gitHead": "0bc5364428dab277009469a253396ddbf0cec46f"
		}

-3

dist/src/index.d.ts

		export * from './ox-tree.js';
		export * from './ox-tree-vertical.js';
		export * from './ox-tree-horizontal.js';

-4

dist/src/index.js

		export * from './ox-tree.js';
		export * from './ox-tree-vertical.js';
		export * from './ox-tree-horizontal.js';
		//# sourceMappingURL=index.js.map

-1

dist/src/index.js.map

{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA","sourcesContent":["export * from './ox-tree.js'\nexport * from './ox-tree-vertical.js'\nexport * from './ox-tree-horizontal.js'\n"]}

-21

dist/src/ox-tree-horizontal.d.ts

		import { LitElement, TemplateResult } from 'lit';
		type TreeItem = {
		[key: string]: any;
		__status__?: {
		[state: string]: boolean \| string;
		};
		};
		export declare class TreeViewHorizontal extends LitElement {
		static styles: import("lit").CSSResult[];
		data?: TreeItem \| TreeItem[];
		selected?: TreeItem;
		idProperty: string;
		labelProperty: string;
		descriptionProperty?: string;
		childrenProperty: string;
		render(): TemplateResult<1>;
		renderItem(item: TreeItem): TemplateResult;
		onClickSelect(e: MouseEvent): void;
		onClickSelectConfirm(e: MouseEvent): void;
		}
		export {};

-262

dist/src/ox-tree-horizontal.js

		import { __decorate } from "tslib";
		import { html, css, LitElement, nothing } from 'lit';
		import { customElement, property } from 'lit/decorators.js';
		import { ScrollbarStyles } from '@operato/styles';
		let TreeViewHorizontal = class TreeViewHorizontal extends LitElement {
		constructor() {
		super(...arguments);
		this.idProperty = 'id';
		this.labelProperty = 'label';
		this.childrenProperty = 'children';
		}
		render() {
		if (!this.data)
		return html ``;
		const dataArray = Array.isArray(this.data) ? this.data : [this.data];
		return html `
		${dataArray.map(root => html `
		<ul root>
		${this.renderItem(root)}
		</ul>
		`)}
		`;
		}
		renderItem(item) {
		var _a;
		const id = item[this.idProperty];
		const label = item[this.labelProperty];
		const children = item[this.childrenProperty];
		const expandable = children && children.length > 0;
		const selected = id === ((_a = this.selected) === null \|\| _a === void 0 ? void 0 : _a[this.idProperty]);
		return html `
		<li .item=${item}>
		<span
		?selected=${selected}
		@click=${this.onClickSelect.bind(this)}
		@dblclick=${this.onClickSelectConfirm.bind(this)}
		>
		<div header>${id}</div>
		<div label>${label}</div>
		${this.descriptionProperty ? html ` <div description>${item[this.descriptionProperty]} </div>` : nothing}
		</span>

		${expandable
		? html `
		<ul>
		${children.map(child => this.renderItem(child))}
		</ul>
		`
		: html ``}
		</li>
		`;
		}
		onClickSelect(e) {
		var _a;
		e.stopPropagation();
		const target = e.target;
		this.selected = (_a = target.closest('li')) === null \|\| _a === void 0 ? void 0 : _a.item;
		this.dispatchEvent(new CustomEvent('select', {
		detail: this.selected
		}));
		}
		onClickSelectConfirm(e) {
		var _a;
		e.stopPropagation();
		const target = e.target;
		this.selected = (_a = target.closest('li')) === null \|\| _a === void 0 ? void 0 : _a.item;
		this.dispatchEvent(new CustomEvent('select-confirm', {
		detail: this.selected
		}));
		}
		};
		TreeViewHorizontal.styles = [
		ScrollbarStyles,
		css `
		:host {
		display: block;
		overflow: auto;
		padding: 1em;
		}

		ul,
		li {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		}

		ul[root] {
		margin: 0 0 1em;
		text-align: left;
		}

		ul[root]:before {
		display: none;
		}

		ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		}

		ul {
		width: 100%;
		}

		li {
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
		}

		li:before,
		li:after {
		content: '';
		position: absolute;
		left: -1em;
		border-left: 1px solid #666;
		}

		li:before {
		top: 0;
		bottom: 50%;
		}

		li:after {
		top: 50%;
		bottom: 0;
		border-top: 1px solid #666;
		width: 1em;
		}

		ul[root] > li:after {
		content: none;
		}

		li:first-child:before {
		top: 50%;
		}

		li:last-child:after {
		bottom: 50%;
		}

		li > ul {
		padding-left: 2em;
		position: relative;
		}

		li > ul:before {
		content: '';
		position: absolute;
		top: 0;
		bottom: -2px;
		left: 0;
		border-bottom: 1px solid #666;
		}

		code,
		span {
		border: solid 0.1em #666;
		border-radius: 0.2em;
		display: inline-block;
		margin: 0.3em 0;
		position: relative;
		min-width: 120px;
		background-color: #f9f9f9;
		}

		span[selected] {
		color: var(--md-sys-color-on-tertiary);
		background-color: var(--md-sys-color-tertiary);
		}

		ul:before,
		code:before,
		span:before {
		content: '';
		width: 1em;
		top: 50%;
		position: absolute;
		transform: translateY(-50%);
		}

		ul:before {
		left: -1em;
		}

		code:before,
		span:before {
		left: -1.1em;
		}

		ul[root] > li {
		margin-left: 0;
		}

		ul[root] > li:before,
		ul[root] > li:after,
		ul[root] > li > code:before,
		ul[root] > li > span:before {
		outline: none;
		}

		span {
		display: inline-block;
		background-color: var(--md-sys-color-surface);

		div[header] {
		font-weight: bold;
		font-size: 0.8em;
		color: var(--md-sys-color-on-primary, #fff);
		background-color: var(--md-sys-color-primary, #333);
		padding: 0.5em 1em;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}

		div[label] {
		font-size: 1em;
		background-color: transparent;
		padding: 0.5em;
		text-align: left;
		}

		div[description] {
		font-size: 0.8em;
		background-color: transparent;
		padding: 0.5em;
		text-align: left;
		}
		}
		`
		];
		__decorate([
		property({ type: Object })
		], TreeViewHorizontal.prototype, "data", void 0);
		__decorate([
		property({ type: Object })
		], TreeViewHorizontal.prototype, "selected", void 0);
		__decorate([
		property({ type: String, attribute: 'id-property' })
		], TreeViewHorizontal.prototype, "idProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'label-property' })
		], TreeViewHorizontal.prototype, "labelProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'description-property' })
		], TreeViewHorizontal.prototype, "descriptionProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'children-property' })
		], TreeViewHorizontal.prototype, "childrenProperty", void 0);
		TreeViewHorizontal = __decorate([
		customElement('ox-tree-horizontal')
		], TreeViewHorizontal);
		export { TreeViewHorizontal };
		//# sourceMappingURL=ox-tree-horizontal.js.map

-1

dist/src/ox-tree-horizontal.js.map

-21

dist/src/ox-tree-vertical.d.ts

		import { LitElement, TemplateResult } from 'lit';
		type TreeItem = {
		[key: string]: any;
		__status__?: {
		[state: string]: boolean \| string;
		};
		};
		export declare class TreeViewVertical extends LitElement {
		static styles: import("lit").CSSResult[];
		data?: TreeItem \| TreeItem[];
		selected?: TreeItem;
		idProperty: string;
		labelProperty: string;
		descriptionProperty?: string;
		childrenProperty: string;
		render(): TemplateResult<1>;
		renderItem(item: TreeItem): TemplateResult;
		onClickSelect(e: MouseEvent): void;
		onClickSelectConfirm(e: MouseEvent): void;
		}
		export {};

-229

dist/src/ox-tree-vertical.js

		/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */
		import { __decorate } from "tslib";
		import { html, css, LitElement, nothing } from 'lit';
		import { customElement, property } from 'lit/decorators.js';
		import { ScrollbarStyles } from '@operato/styles';
		let TreeViewVertical = class TreeViewVertical extends LitElement {
		constructor() {
		super(...arguments);
		this.idProperty = 'id';
		this.labelProperty = 'label';
		this.childrenProperty = 'children';
		}
		render() {
		if (!this.data)
		return html ``;
		const dataArray = Array.isArray(this.data) ? this.data : [this.data];
		return html `
		${dataArray.map(root => html `
		<ul root>
		${this.renderItem(root)}
		</ul>
		`)}
		`;
		}
		renderItem(item) {
		var _a;
		const id = item[this.idProperty];
		const label = item[this.labelProperty];
		const children = item[this.childrenProperty];
		const expandable = children && children.length > 0;
		const selected = id === ((_a = this.selected) === null \|\| _a === void 0 ? void 0 : _a[this.idProperty]);
		return html `
		<li .item=${item}>
		<span
		?selected=${selected}
		@click=${this.onClickSelect.bind(this)}
		@dblclick=${this.onClickSelectConfirm.bind(this)}
		>
		<div header>${id}</div>
		<div label>${label}</div>
		${this.descriptionProperty ? html ` <div description>${item[this.descriptionProperty]} </div>` : nothing}
		</span>

		${expandable
		? html `
		<ul>
		${children.map(child => this.renderItem(child))}
		</ul>
		`
		: html ``}
		</li>
		`;
		}
		onClickSelect(e) {
		var _a;
		e.stopPropagation();
		const target = e.target;
		this.selected = (_a = target.closest('li')) === null \|\| _a === void 0 ? void 0 : _a.item;
		this.dispatchEvent(new CustomEvent('select', {
		detail: this.selected
		}));
		}
		onClickSelectConfirm(e) {
		var _a;
		e.stopPropagation();
		const target = e.target;
		this.selected = (_a = target.closest('li')) === null \|\| _a === void 0 ? void 0 : _a.item;
		this.dispatchEvent(new CustomEvent('select-confirm', {
		detail: this.selected
		}));
		}
		};
		TreeViewVertical.styles = [
		ScrollbarStyles,
		css `
		:host {
		display: block;
		overflow: auto;
		}

		ul,
		li {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
		}

		ul[root] {
		margin: 0 0 1em;
		text-align: center;
		}

		ul[root]:before,
		ul[root]:after {
		display: none;
		}

		ul {
		display: table;
		}

		ul {
		width: 100%;
		}

		li {
		display: table-cell;
		padding: 1em 0;
		vertical-align: top;
		}

		li:before {
		outline: solid 1px #666;
		content: '';
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		}

		li:first-child:before {
		left: 50%;
		}

		li:last-child:before {
		right: 50%;
		}

		code,
		span {
		border: solid 0.1em #666;
		border-radius: 0.2em;
		display: inline-block;
		margin: 0 0.2em 1em;
		position: relative;
		min-width: 120px;
		}

		span[selected] {
		color: var(--md-sys-color-on-tertiary);
		background-color: var(--md-sys-color-tertiary);
		}

		ul:before,
		code:before,
		span:before {
		outline: solid 1px #666;
		content: '';
		height: 1em;
		left: 50%;
		position: absolute;
		}

		ul:before {
		top: -1em;
		}

		code:before,
		span:before {
		top: -1.1em;
		}

		ul[root] > li {
		margin-top: 0;
		}

		ul[root] > li:before,
		ul[root] > li:after,
		ul[root] > li > code:before,
		ul[root] > li > span:before {
		outline: none;
		}

		span {
		display: inline-block;
		background-color: var(--md-sys-color-surface);

		div[header] {
		font-weight: bold;
		font-size: 0.8em;
		color: var(--md-sys-color-on-primary, #fff);
		background-color: var(--md-sys-color-primary, #333);
		padding: 0.5em 1em;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		}

		div[label] {
		font-size: 1em;
		background-color: transparent;
		padding: 0.5em;
		text-align: left;
		}

		div[description] {
		font-size: 0.8em;
		background-color: transparent;
		padding: 0.5em;
		text-align: left;
		}
		}
		`
		];
		__decorate([
		property({ type: Object })
		], TreeViewVertical.prototype, "data", void 0);
		__decorate([
		property({ type: Object })
		], TreeViewVertical.prototype, "selected", void 0);
		__decorate([
		property({ type: String, attribute: 'id-property' })
		], TreeViewVertical.prototype, "idProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'label-property' })
		], TreeViewVertical.prototype, "labelProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'description-property' })
		], TreeViewVertical.prototype, "descriptionProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'children-property' })
		], TreeViewVertical.prototype, "childrenProperty", void 0);
		TreeViewVertical = __decorate([
		customElement('ox-tree-vertical')
		], TreeViewVertical);
		export { TreeViewVertical };
		//# sourceMappingURL=ox-tree-vertical.js.map

-1

dist/src/ox-tree-vertical.js.map

-39

dist/src/ox-tree.d.ts

		import { LitElement, TemplateResult } from 'lit';
		type TreeItem = {
		[key: string]: any;
		__status__?: {
		[state: string]: boolean \| string;
		};
		};
		export declare class OxTree extends LitElement {
		static styles: import("lit").CSSResult[];
		data?: TreeItem;
		selected?: TreeItem;
		idProperty: string;
		labelProperty: string;
		childrenProperty: string;
		direction: 'ltr' \| 'rtl';
		labelExtends: boolean;
		checkable: boolean;
		render(): TemplateResult<1>;
		renderItem(item: TreeItem): TemplateResult;
		onPointerDown(e: MouseEvent): void;
		onClickExpander(e: MouseEvent): void;
		onClickItem(e: MouseEvent): void;
		walkTreeCheckedUpdate(item: TreeItem, checked?: string): void;
		updateCheckedAll(item: TreeItem): void;
		findNodeBounds(nodeId: string): {
		left: number;
		top: number;
		width: number;
		height: number;
		} \| undefined;
		findNodeSelfBounds(nodeId: string): {
		left: number;
		top: number;
		width: number;
		height: number;
		} \| undefined;
		private findNodePath;
		}
		export {};

-367

dist/src/ox-tree.js

		import { __decorate } from "tslib";
		import { LitElement, css, html, nothing } from 'lit';
		import { customElement, property } from 'lit/decorators.js';
		let OxTree = class OxTree extends LitElement {
		constructor() {
		super(...arguments);
		this.idProperty = 'id';
		this.labelProperty = 'label';
		this.childrenProperty = 'children';
		this.direction = 'ltr';
		this.labelExtends = false;
		this.checkable = false;
		}
		render() {
		return this.data
		? html `
		<ul class="root">
		${this.renderItem(this.data)}
		</ul>
		`
		: html ``;
		}
		renderItem(item) {
		const { __status__ = {} } = item;
		const id = item[this.idProperty];
		const label = item[this.labelProperty];
		const children = item[this.childrenProperty];
		const expandable = children && children.length > 0;
		const { collapsed, checked } = __status__;
		const selected = this.selected !== undefined &&
		this.selected !== null &&
		id !== undefined &&
		id !== null &&
		id === this.selected[this.idProperty];
		return html `
		<li checked=${checked} ?collapsed=${collapsed} ?leaf=${!expandable} .item=${item} data-id=${id} draggable="true">
		<div self @pointerdown=${this.onPointerDown.bind(this)}>
		${expandable ? html ` <span expander @click=${this.onClickExpander.bind(this)}></span> ` : html ``}
		${this.checkable ? html `<span checkbox @click=${this.onClickItem.bind(this)}></span>` : nothing}

		<span label ?selected=${selected}>${label}</span>
		${this.labelExtends ? html `<span label-extends></span>` : nothing}
		</div>
		${expandable && !collapsed
		? html `
		<ul>
		${children.map(child => this.renderItem(child))}
		</ul>
		`
		: html ``}
		</li>
		`;
		}
		onPointerDown(e) {
		var _a;
		e.stopPropagation();
		const target = e.target;
		this.selected = (_a = target.closest('li')) === null \|\| _a === void 0 ? void 0 : _a.item;
		this.dispatchEvent(new CustomEvent('select', {
		detail: this.selected
		}));
		}
		onClickExpander(e) {
		e.stopPropagation();
		const target = e.target;
		const itemElement = target.closest('li');
		const collapsed = !itemElement.hasAttribute('collapsed');
		var item = itemElement.item;
		item.__status__ = {
		...item.__status__,
		collapsed
		};
		requestAnimationFrame(() => {
		this.dispatchEvent(new CustomEvent(collapsed ? 'collapsed' : 'expanded', {
		detail: item
		}));
		});
		this.requestUpdate();
		}
		onClickItem(e) {
		e.stopPropagation();
		const target = e.target;
		const itemElement = target.closest('li');
		var item = itemElement.item;
		var checked = itemElement.getAttribute('checked') \|\| '';
		this.walkTreeCheckedUpdate(item, checked == '' \|\| checked == 'unchecked' ? 'checked' : 'unchecked');
		this.updateCheckedAll(this.data);
		this.requestUpdate();
		}
		walkTreeCheckedUpdate(item, checked = '') {
		const { __status__ } = item;
		const children = item[this.childrenProperty];
		children === null \|\| children === void 0 ? void 0 : children.forEach(child => this.walkTreeCheckedUpdate(child, checked));
		item.__status__ = {
		...__status__,
		checked
		};
		}
		updateCheckedAll(item) {
		const { __status__ } = item;
		const children = item[this.childrenProperty];
		if (!children \|\| children.length == 0) {
		return;
		}
		children.forEach(child => this.updateCheckedAll(child));
		var checked = '';
		children.forEach(child => {
		const { __status__ = {} } = child;
		if (__status__.checked == 'half-checked') {
		checked = 'half-checked';
		}
		else if (__status__.checked == 'checked') {
		checked = checked == 'checked' \|\| checked == '' ? 'checked' : 'half-checked';
		}
		else {
		checked = checked == 'unchecked' \|\| checked == '' ? 'unchecked' : 'half-checked';
		}
		});
		item.__status__ = {
		...__status__,
		checked
		};
		}
		findNodeBounds(nodeId) {
		const nodePath = this.findNodePath(this.data, nodeId);
		if (nodePath.length === 0) {
		return;
		}
		let nodeElement = null;
		for (let i = nodePath.length - 1; i >= 0; i--) {
		nodeElement = this.renderRoot.querySelector(`li[data-id="${nodePath[i][this.idProperty]}"]`);
		if (nodeElement) {
		break;
		}
		}
		if (!nodeElement) {
		return;
		}
		return nodeElement.getBoundingClientRect();
		}
		findNodeSelfBounds(nodeId) {
		const nodePath = this.findNodePath(this.data, nodeId);
		if (nodePath.length === 0) {
		return;
		}
		let nodeElement = null;
		for (let i = nodePath.length - 1; i >= 0; i--) {
		nodeElement = this.renderRoot.querySelector(`li[data-id="${nodePath[i][this.idProperty]}"]`);
		if (nodeElement) {
		break;
		}
		}
		if (!nodeElement) {
		return;
		}
		const selfElement = nodeElement.querySelector('div[self]');
		return selfElement === null \|\| selfElement === void 0 ? void 0 : selfElement.getBoundingClientRect();
		}
		findNodePath(root, nodeId, path = []) {
		if (!root)
		return [];
		if (root[this.idProperty] === nodeId) {
		return [...path, root];
		}
		const children = root[this.childrenProperty];
		if (children) {
		for (const child of children) {
		const foundPath = this.findNodePath(child, nodeId, [...path, root]);
		if (foundPath.length > 0) {
		return foundPath;
		}
		}
		}
		return [];
		}
		};
		OxTree.styles = [
		css `
		ul {
		list-style: none;
		padding-left: 18px;
		padding-right: 0;
		overflow: hidden;
		position: relative;
		}

		:host([direction='rtl']) ul {
		padding-right: 18px;
		padding-left: 0;
		}

		ul.root {
		padding-left: 0 !important;
		padding-right: 0 !important;
		}

		li {
		cursor: pointer;
		overflow: hidden;
		}

		div[self] {
		display: flex;
		align-items: center;
		gap: 4px;
		}

		:host([direction='rtl']) div[self] {
		flex-direction: row-reverse;
		}

		span[expander] {
		display: inline-block;
		vertical-align: middle;
		width: 12px;
		height: 20px;
		cursor: pointer;
		position: relative;
		}

		span[expander]::before {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -25%);
		content: ' ';
		border: 4px solid transparent;
		border-top: 6px solid var(--md-sys-color-on-primary-container, #001848);
		}

		li[collapsed] > div[self] > span[expander]::before {
		transform: translate(-25%, -50%) rotate(-90deg);
		}

		:host([direction='rtl']) li[collapsed] > div[self] > span[expander]::before {
		transform: translate(-75%, -50%) rotate(90deg);
		}

		li[leaf] {
		padding-left: 18px;
		}

		span[label-extends] {
		position: relative;
		flex: 1;
		}

		span[label-extends]::after {
		content: '';
		position: absolute;
		top: calc(50% - 1px);
		right: 0;
		width: calc(100% - 12px);
		height: 0;
		border-bottom: 1px dashed gray;
		}

		:host([direction='rtl']) span[label-extends]::after {
		left: 0;
		}

		:host([direction='rtl']) li[leaf] {
		padding-left: 0;
		padding-right: 18px;
		}

		span[checkbox] {
		display: inline-block;
		vertical-align: middle;
		width: 12px;
		height: 20px;
		cursor: pointer;
		position: relative;
		}

		span[checkbox]::before {
		cursor: pointer;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		content: ' ';
		display: block;
		width: 10px;
		height: 10px;
		border: 1px solid var(--md-sys-color-on-primary-container, #001848);
		border-radius: 2px;
		}

		span[label] {
		padding: 0 4px;
		border-radius: 2px;
		}

		span[label][selected] {
		background-color: var(--md-sys-color-on-primary-container, #001848);
		color: var(--md-sys-color-primary-container, #fff);
		}

		li[checked='checked'] > div[self] > span[checkbox]::before {
		background-color: var(--md-sys-color-on-primary-container, #001848);
		border-color: var(--md-sys-color-on-primary-container, #001848);
		}

		li[checked='checked'] > div[self] > span[checkbox]::after {
		position: absolute;
		content: ' ';
		display: block;
		top: 50%;
		left: 50%;
		width: 3px;
		height: 7px;
		border: 2px solid #fff;
		border-top: none;
		border-left: none;
		-webkit-transform: translate(-50%, -50%) rotate(45deg);
		-ms-transform: translate(-50%, -50%) rotate(45deg);
		transform: translate(-50%, -50%) rotate(45deg);
		}

		li[checked='half-checked'] > div[self] > span[checkbox]::before {
		background-color: var(--md-sys-color-on-primary-container, #001848);
		border-color: var(--md-sys-color-on-primary-container, #001848);
		}

		li[checked='half-checked'] > div[self] > span[checkbox]::after {
		position: absolute;
		content: ' ';
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 10px;
		height: 2px;
		background-color: var(--md-sys-color-surface);
		}
		`
		];
		__decorate([
		property({ type: Object })
		], OxTree.prototype, "data", void 0);
		__decorate([
		property({ type: Object })
		], OxTree.prototype, "selected", void 0);
		__decorate([
		property({ type: String, attribute: 'id-property' })
		], OxTree.prototype, "idProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'label-property' })
		], OxTree.prototype, "labelProperty", void 0);
		__decorate([
		property({ type: String, attribute: 'children-property' })
		], OxTree.prototype, "childrenProperty", void 0);
		__decorate([
		property({ type: String })
		], OxTree.prototype, "direction", void 0);
		__decorate([
		property({ type: Boolean, attribute: 'label-extends' })
		], OxTree.prototype, "labelExtends", void 0);
		__decorate([
		property({ type: Boolean })
		], OxTree.prototype, "checkable", void 0);
		OxTree = __decorate([
		customElement('ox-tree')
		], OxTree);
		export { OxTree };
		//# sourceMappingURL=ox-tree.js.map

-1

dist/src/ox-tree.js.map

-28

dist/stories/data-tree-horizontal.stories.d.ts

		import '../src/ox-tree-horizontal.js';
		import '@material/web/icon/icon.js';
		import { TemplateResult } from 'lit';
		declare const _default: {
		title: string;
		component: string;
		argTypes: {
		data: {
		control: string;
		};
		};
		};
		export default _default;
		interface Story<T> {
		(args: T): TemplateResult;
		args?: Partial<T>;
		argTypes?: Record<string, unknown>;
		}
		type TreeItem = {
		[key: string]: any;
		__status__?: {
		[state: string]: boolean \| string;
		};
		};
		interface ArgTypes {
		data: Array<TreeItem>;
		}
		export declare const Regular: Story<ArgTypes>;

-213

dist/stories/data-tree-horizontal.stories.js

		import '../src/ox-tree-horizontal.js';
		import '@material/web/icon/icon.js';
		import { html } from 'lit';
		export default {
		title: 'ox-tree-horizontal',
		component: 'ox-tree-horizontal',
		argTypes: {
		data: { control: 'object' }
		}
		};
		const Template = ({ data }) => html `
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>

		<link href="/themes/app-theme.css" rel="stylesheet" />
		<link href="/themes/light.css" rel="stylesheet" />
		<link href="/themes/dark.css" rel="stylesheet" />
		<link href="/themes/spacing.css" rel="stylesheet" />
		<link href="/themes/grist-theme.css" rel="stylesheet" />
		<link href="/themes/form-theme.css" rel="stylesheet" />

		<style>
		ox-tree-horizontal {
		height: 1000px;
		}
		</style>

		<div>
		<ox-tree-horizontal .data=${data} description-property="description"></ox-tree-horizontal>
		</div>
		`;
		export const Regular = Template.bind({});
		Regular.args = {
		data: [
		{
		id: 'H000',
		label: 'Home',
		children: [
		{
		id: 'H001',
		label: 'About us',
		children: [
		{
		id: 'H101',
		label: 'Our history',
		children: [
		{
		id: 'H111',
		label: 'Founder',
		description: 'long long founder history'
		}
		]
		},
		{
		id: 'H102',
		label: 'Our board',
		children: [
		{
		id: 'H121',
		label: 'Brad Whiteman'
		},
		{
		id: 'H122',
		label: 'Cynthia Tolken'
		},
		{
		id: 'H123',
		label: 'Bobby Founderson'
		}
		]
		}
		]
		},
		{
		id: 'H002',
		label: 'Our products',
		children: [
		{
		id: 'H201',
		label: 'The Widget 2000™',
		children: [
		{
		id: 'H211',
		label: 'Order form'
		}
		]
		},
		{
		id: 'H202',
		label: 'The McGuffin V2',
		children: [
		{
		id: 'H221',
		label: 'Order form'
		}
		]
		}
		]
		},
		{
		id: 'H003',
		label: 'Contact us',
		children: [
		{
		id: 'H301',
		label: 'Social media',
		children: [
		{
		id: 'H311',
		label: 'Facebook'
		}
		]
		}
		]
		}
		]
		},
		{
		id: 'H000',
		label: 'Home',
		children: [
		{
		id: 'H001',
		label: 'About us',
		children: [
		{
		id: 'H101',
		label: 'Our history',
		children: [
		{
		id: 'H111',
		label: 'Founder',
		description: 'long long founder history'
		}
		]
		},
		{
		id: 'H102',
		label: 'Our board',
		children: [
		{
		id: 'H121',
		label: 'Brad Whiteman'
		},
		{
		id: 'H122',
		label: 'Cynthia Tolken'
		},
		{
		id: 'H123',
		label: 'Bobby Founderson'
		}
		]
		}
		]
		},
		{
		id: 'H002',
		label: 'Our products',
		children: [
		{
		id: 'H201',
		label: 'The Widget 2000™',
		children: [
		{
		id: 'H211',
		label: 'Order form'
		}
		]
		},
		{
		id: 'H202',
		label: 'The McGuffin V2',
		children: [
		{
		id: 'H221',
		label: 'Order form'
		}
		]
		}
		]
		},
		{
		id: 'H003',
		label: 'Contact us',
		children: [
		{
		id: 'H301',
		label: 'Social media',
		children: [
		{
		id: 'H311',
		label: 'Facebook'
		}
		]
		}
		]
		}
		]
		}
		]
		};
		//# sourceMappingURL=data-tree-horizontal.stories.js.map

-1

dist/stories/data-tree-horizontal.stories.js.map

{"version":3,"file":"data-tree-horizontal.stories.js","sourceRoot":"","sources":["../../stories/data-tree-horizontal.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/ox-tree-horizontal.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-tree-horizontal',\n component: 'ox-tree-horizontal',\n argTypes: {\n data: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ntype TreeItem = {\n [key: string]: any\n __status__?: { [state: string]: boolean | string }\n}\n\ninterface ArgTypes {\n data: Array<TreeItem>\n}\n\nconst Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-tree-horizontal {\n height: 1000px;\n }\n </style>\n\n <div>\n <ox-tree-horizontal .data=${data} description-property=\"description\"></ox-tree-horizontal>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n data: [\n {\n id: 'H000',\n label: 'Home',\n children: [\n {\n id: 'H001',\n label: 'About us',\n children: [\n {\n id: 'H101',\n label: 'Our history',\n children: [\n {\n id: 'H111',\n label: 'Founder',\n description: 'long long founder history'\n }\n ]\n },\n {\n id: 'H102',\n label: 'Our board',\n children: [\n {\n id: 'H121',\n label: 'Brad Whiteman'\n },\n {\n id: 'H122',\n label: 'Cynthia Tolken'\n },\n {\n id: 'H123',\n label: 'Bobby Founderson'\n }\n ]\n }\n ]\n },\n {\n id: 'H002',\n label: 'Our products',\n children: [\n {\n id: 'H201',\n label: 'The Widget 2000™',\n children: [\n {\n id: 'H211',\n label: 'Order form'\n }\n ]\n },\n {\n id: 'H202',\n label: 'The McGuffin V2',\n children: [\n {\n id: 'H221',\n label: 'Order form'\n }\n ]\n }\n ]\n },\n {\n id: 'H003',\n label: 'Contact us',\n children: [\n {\n id: 'H301',\n label: 'Social media',\n children: [\n {\n id: 'H311',\n label: 'Facebook'\n }\n ]\n }\n ]\n }\n ]\n },\n {\n id: 'H000',\n label: 'Home',\n children: [\n {\n id: 'H001',\n label: 'About us',\n children: [\n {\n id: 'H101',\n label: 'Our history',\n children: [\n {\n id: 'H111',\n label: 'Founder',\n description: 'long long founder history'\n }\n ]\n },\n {\n id: 'H102',\n label: 'Our board',\n children: [\n {\n id: 'H121',\n label: 'Brad Whiteman'\n },\n {\n id: 'H122',\n label: 'Cynthia Tolken'\n },\n {\n id: 'H123',\n label: 'Bobby Founderson'\n }\n ]\n }\n ]\n },\n {\n id: 'H002',\n label: 'Our products',\n children: [\n {\n id: 'H201',\n label: 'The Widget 2000™',\n children: [\n {\n id: 'H211',\n label: 'Order form'\n }\n ]\n },\n {\n id: 'H202',\n label: 'The McGuffin V2',\n children: [\n {\n id: 'H221',\n label: 'Order form'\n }\n ]\n }\n ]\n },\n {\n id: 'H003',\n label: 'Contact us',\n children: [\n {\n id: 'H301',\n label: 'Social media',\n children: [\n {\n id: 'H311',\n label: 'Facebook'\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}\n"]}

-28

dist/stories/data-tree-vertical.stories.d.ts

		import '../src/ox-tree-vertical.js';
		import '@material/web/icon/icon.js';
		import { TemplateResult } from 'lit';
		declare const _default: {
		title: string;
		component: string;
		argTypes: {
		data: {
		control: string;
		};
		};
		};
		export default _default;
		interface Story<T> {
		(args: T): TemplateResult;
		args?: Partial<T>;
		argTypes?: Record<string, unknown>;
		}
		type TreeItem = {
		[key: string]: any;
		__status__?: {
		[state: string]: boolean \| string;
		};
		};
		interface ArgTypes {
		data: Array<TreeItem>;
		}
		export declare const Regular: Story<ArgTypes>;

-213

dist/stories/data-tree-vertical.stories.js

		import '../src/ox-tree-vertical.js';
		import '@material/web/icon/icon.js';
		import { html } from 'lit';
		export default {
		title: 'ox-tree-vertical',
		component: 'ox-tree-vertical',
		argTypes: {
		data: { control: 'object' }
		}
		};
		const Template = ({ data }) => html `
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>

		<link href="/themes/app-theme.css" rel="stylesheet" />
		<link href="/themes/light.css" rel="stylesheet" />
		<link href="/themes/dark.css" rel="stylesheet" />
		<link href="/themes/spacing.css" rel="stylesheet" />
		<link href="/themes/grist-theme.css" rel="stylesheet" />
		<link href="/themes/form-theme.css" rel="stylesheet" />

		<style>
		ox-tree-vertical {
		height: 500px;
		}
		</style>

		<div>
		<ox-tree-vertical .data=${data} description-property="description"></ox-tree-vertical>
		</div>
		`;
		export const Regular = Template.bind({});
		Regular.args = {
		data: [
		{
		id: 'H000',
		label: 'Home',
		children: [
		{
		id: 'H001',
		label: 'About us',
		children: [
		{
		id: 'H101',
		label: 'Our history',
		children: [
		{
		id: 'H111',
		label: 'Founder',
		description: 'long long founder history'
		}
		]
		},
		{
		id: 'H102',
		label: 'Our board',
		children: [
		{
		id: 'H121',
		label: 'Brad Whiteman'
		},
		{
		id: 'H122',
		label: 'Cynthia Tolken'
		},
		{
		id: 'H123',
		label: 'Bobby Founderson'
		}
		]
		}
		]
		},
		{
		id: 'H002',
		label: 'Our products',
		children: [
		{
		id: 'H201',
		label: 'The Widget 2000™',
		children: [
		{
		id: 'H211',
		label: 'Order form'
		}
		]
		},
		{
		id: 'H202',
		label: 'The McGuffin V2',
		children: [
		{
		id: 'H221',
		label: 'Order form'
		}
		]
		}
		]
		},
		{
		id: 'H003',
		label: 'Contact us',
		children: [
		{
		id: 'H301',
		label: 'Social media',
		children: [
		{
		id: 'H311',
		label: 'Facebook'
		}
		]
		}
		]
		}
		]
		},
		{
		id: 'H000',
		label: 'Home',
		children: [
		{
		id: 'H001',
		label: 'About us',
		children: [
		{
		id: 'H101',
		label: 'Our history',
		children: [
		{
		id: 'H111',
		label: 'Founder',
		description: 'long long founder history'
		}
		]
		},
		{
		id: 'H102',
		label: 'Our board',
		children: [
		{
		id: 'H121',
		label: 'Brad Whiteman'
		},
		{
		id: 'H122',
		label: 'Cynthia Tolken'
		},
		{
		id: 'H123',
		label: 'Bobby Founderson'
		}
		]
		}
		]
		},
		{
		id: 'H002',
		label: 'Our products',
		children: [
		{
		id: 'H201',
		label: 'The Widget 2000™',
		children: [
		{
		id: 'H211',
		label: 'Order form'
		}
		]
		},
		{
		id: 'H202',
		label: 'The McGuffin V2',
		children: [
		{
		id: 'H221',
		label: 'Order form'
		}
		]
		}
		]
		},
		{
		id: 'H003',
		label: 'Contact us',
		children: [
		{
		id: 'H301',
		label: 'Social media',
		children: [
		{
		id: 'H311',
		label: 'Facebook'
		}
		]
		}
		]
		}
		]
		}
		]
		};
		//# sourceMappingURL=data-tree-vertical.stories.js.map

-1

dist/stories/data-tree-vertical.stories.js.map

{"version":3,"file":"data-tree-vertical.stories.js","sourceRoot":"","sources":["../../stories/data-tree-vertical.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import '../src/ox-tree-vertical.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-tree-vertical',\n component: 'ox-tree-vertical',\n argTypes: {\n data: { control: 'object' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ntype TreeItem = {\n [key: string]: any\n __status__?: { [state: string]: boolean | string }\n}\n\ninterface ArgTypes {\n data: Array<TreeItem>\n}\n\nconst Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n <style>\n ox-tree-vertical {\n height: 500px;\n }\n </style>\n\n <div>\n <ox-tree-vertical .data=${data} description-property=\"description\"></ox-tree-vertical>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n data: [\n {\n id: 'H000',\n label: 'Home',\n children: [\n {\n id: 'H001',\n label: 'About us',\n children: [\n {\n id: 'H101',\n label: 'Our history',\n children: [\n {\n id: 'H111',\n label: 'Founder',\n description: 'long long founder history'\n }\n ]\n },\n {\n id: 'H102',\n label: 'Our board',\n children: [\n {\n id: 'H121',\n label: 'Brad Whiteman'\n },\n {\n id: 'H122',\n label: 'Cynthia Tolken'\n },\n {\n id: 'H123',\n label: 'Bobby Founderson'\n }\n ]\n }\n ]\n },\n {\n id: 'H002',\n label: 'Our products',\n children: [\n {\n id: 'H201',\n label: 'The Widget 2000™',\n children: [\n {\n id: 'H211',\n label: 'Order form'\n }\n ]\n },\n {\n id: 'H202',\n label: 'The McGuffin V2',\n children: [\n {\n id: 'H221',\n label: 'Order form'\n }\n ]\n }\n ]\n },\n {\n id: 'H003',\n label: 'Contact us',\n children: [\n {\n id: 'H301',\n label: 'Social media',\n children: [\n {\n id: 'H311',\n label: 'Facebook'\n }\n ]\n }\n ]\n }\n ]\n },\n {\n id: 'H000',\n label: 'Home',\n children: [\n {\n id: 'H001',\n label: 'About us',\n children: [\n {\n id: 'H101',\n label: 'Our history',\n children: [\n {\n id: 'H111',\n label: 'Founder',\n description: 'long long founder history'\n }\n ]\n },\n {\n id: 'H102',\n label: 'Our board',\n children: [\n {\n id: 'H121',\n label: 'Brad Whiteman'\n },\n {\n id: 'H122',\n label: 'Cynthia Tolken'\n },\n {\n id: 'H123',\n label: 'Bobby Founderson'\n }\n ]\n }\n ]\n },\n {\n id: 'H002',\n label: 'Our products',\n children: [\n {\n id: 'H201',\n label: 'The Widget 2000™',\n children: [\n {\n id: 'H211',\n label: 'Order form'\n }\n ]\n },\n {\n id: 'H202',\n label: 'The McGuffin V2',\n children: [\n {\n id: 'H221',\n label: 'Order form'\n }\n ]\n }\n ]\n },\n {\n id: 'H003',\n label: 'Contact us',\n children: [\n {\n id: 'H301',\n label: 'Social media',\n children: [\n {\n id: 'H311',\n label: 'Facebook'\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}\n"]}

-35

dist/stories/data-tree.stories.d.ts

		import '../src/ox-tree.js';
		import '@material/web/icon/icon.js';
		import { TemplateResult } from 'lit';
		declare const _default: {
		title: string;
		component: string;
		argTypes: {
		data: {
		control: string;
		};
		reverse: {
		control: string;
		};
		checkable: {
		control: string;
		};
		labelExtends: {
		control: string;
		};
		};
		};
		export default _default;
		interface Story<T> {
		(args: T): TemplateResult;
		args?: Partial<T>;
		argTypes?: Record<string, unknown>;
		}
		interface ArgTypes {
		reverse: boolean;
		checkable: boolean;
		labelExtends: boolean;
		data: object;
		}
		export declare const Regular: Story<ArgTypes>;
		export declare const Reverse: Story<ArgTypes>;

-129

dist/stories/data-tree.stories.js

		import '../src/ox-tree.js';
		import '@material/web/icon/icon.js';
		import { html } from 'lit';
		export default {
		title: 'ox-tree',
		component: 'ox-tree',
		argTypes: {
		data: { control: 'object' },
		reverse: { control: 'boolean' },
		checkable: { control: 'boolean' },
		labelExtends: { control: 'boolean' }
		}
		};
		const Template = ({ data, reverse, checkable, labelExtends }) => html `
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>
		<link
		href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
		rel="stylesheet"
		/>

		<link href="/themes/app-theme.css" rel="stylesheet" />
		<link href="/themes/light.css" rel="stylesheet" />
		<link href="/themes/dark.css" rel="stylesheet" />
		<link href="/themes/spacing.css" rel="stylesheet" />
		<link href="/themes/grist-theme.css" rel="stylesheet" />
		<link href="/themes/form-theme.css" rel="stylesheet" />

		<ox-tree
		.data=${data}
		direction=${reverse ? 'rtl' : 'ltr'}
		?checkable=${checkable}
		?label-extends=${labelExtends}
		></ox-tree>
		`;
		export const Regular = Template.bind({});
		Regular.args = {
		data: {
		id: '0',
		label: 'AAAAA',
		children: [
		{
		id: '1-1',
		label: 'AAAAA-1',
		children: [
		{
		id: '1-1-1',
		label: 'AAAAA-2'
		}
		]
		},
		{
		id: '1-2',
		label: 'BBBBB-1',
		children: [
		{
		id: '1-2-1',
		label: 'BBBBB-2'
		},
		{
		id: '1-2-2',
		label: 'BBBBB-21'
		}
		]
		},
		{
		id: '1-3',
		label: 'CCCCC-1',
		children: [
		{
		id: '1-3-1',
		label: 'CCCCC-2'
		}
		]
		}
		]
		}
		};
		export const Reverse = Template.bind({});
		Reverse.args = {
		reverse: true,
		data: {
		id: '0',
		label: 'AAAAA',
		children: [
		{
		id: '1-1',
		label: 'AAAAA-1',
		children: [
		{
		id: '1-1-1',
		label: 'AAAAA-2'
		}
		]
		},
		{
		id: '1-2',
		label: 'BBBBB-1',
		children: [
		{
		id: '1-2-1',
		label: 'BBBBB-2'
		},
		{
		id: '1-2-2',
		label: 'BBBBB-21'
		}
		]
		},
		{
		id: '1-3',
		label: 'CCCCC-1',
		children: [
		{
		id: '1-3-1',
		label: 'CCCCC-2'
		}
		]
		}
		]
		}
		};
		//# sourceMappingURL=data-tree.stories.js.map

-1

dist/stories/data-tree.stories.js.map

{"version":3,"file":"data-tree.stories.js","sourceRoot":"","sources":["../../stories/data-tree.stories.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAC1B,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC3B,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/B,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QACjC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACrC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;YAsBpF,IAAI;gBACA,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;iBACtB,SAAS;qBACL,YAAY;;CAEhC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE;QACJ,EAAE,EAAE,GAAG;QACP,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR;gBACE,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE;oBACR;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,SAAS;qBACjB;iBACF;aACF;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE;oBACR;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,SAAS;qBACjB;oBACD;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,UAAU;qBAClB;iBACF;aACF;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE;oBACR;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,SAAS;qBACjB;iBACF;aACF;SACF;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,IAAI;IACb,IAAI,EAAE;QACJ,EAAE,EAAE,GAAG;QACP,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR;gBACE,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE;oBACR;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,SAAS;qBACjB;iBACF;aACF;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE;oBACR;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,SAAS;qBACjB;oBACD;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,UAAU;qBAClB;iBACF;aACF;YACD;gBACE,EAAE,EAAE,KAAK;gBACT,KAAK,EAAE,SAAS;gBAChB,QAAQ,EAAE;oBACR;wBACE,EAAE,EAAE,OAAO;wBACX,KAAK,EAAE,SAAS;qBACjB;iBACF;aACF;SACF;KACF;CACF,CAAA","sourcesContent":["import '../src/ox-tree.js'\nimport '@material/web/icon/icon.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-tree',\n component: 'ox-tree',\n argTypes: {\n data: { control: 'object' },\n reverse: { control: 'boolean' },\n checkable: { control: 'boolean' },\n labelExtends: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n reverse: boolean\n checkable: boolean\n labelExtends: boolean\n data: object\n}\n\nconst Template: Story<ArgTypes> = ({ data, reverse, checkable, labelExtends }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n <ox-tree\n .data=${data}\n direction=${reverse ? 'rtl' : 'ltr'}\n ?checkable=${checkable}\n ?label-extends=${labelExtends}\n ></ox-tree>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n data: {\n id: '0',\n label: 'AAAAA',\n children: [\n {\n id: '1-1',\n label: 'AAAAA-1',\n children: [\n {\n id: '1-1-1',\n label: 'AAAAA-2'\n }\n ]\n },\n {\n id: '1-2',\n label: 'BBBBB-1',\n children: [\n {\n id: '1-2-1',\n label: 'BBBBB-2'\n },\n {\n id: '1-2-2',\n label: 'BBBBB-21'\n }\n ]\n },\n {\n id: '1-3',\n label: 'CCCCC-1',\n children: [\n {\n id: '1-3-1',\n label: 'CCCCC-2'\n }\n ]\n }\n ]\n }\n}\n\nexport const Reverse = Template.bind({})\nReverse.args = {\n reverse: true,\n data: {\n id: '0',\n label: 'AAAAA',\n children: [\n {\n id: '1-1',\n label: 'AAAAA-1',\n children: [\n {\n id: '1-1-1',\n label: 'AAAAA-2'\n }\n ]\n },\n {\n id: '1-2',\n label: 'BBBBB-1',\n children: [\n {\n id: '1-2-1',\n label: 'BBBBB-2'\n },\n {\n id: '1-2-2',\n label: 'BBBBB-21'\n }\n ]\n },\n {\n id: '1-3',\n label: 'CCCCC-1',\n children: [\n {\n id: '1-3-1',\n label: 'CCCCC-2'\n }\n ]\n }\n ]\n }\n}\n"]}

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

@operato/data-tree - npm Package Compare versions

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes