@gravionlabs/helix-core 22.1.2 → 22.1.4

package/fesm2022/gravionlabs-helix-core-organizationchart.mjs

@@ -1,18 +1,17 @@
-export * from '@gravionlabs/helix-core/types/organizationchart';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, input, booleanAttribute, inject, forwardRef, Inject, ChangeDetectionStrategy, ViewEncapsulation, Component, model, output, contentChildren, contentChild, effect, untracked, NgModule } from '@angular/core';
-import { isAttributeEquals } from '@gravionlabs/helix-core/uix/utils';
-import { SharedModule, HelixTemplate } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i2 from '@gravionlabs/helix-core/bind';
-import { BindModule, Bind } from '@gravionlabs/helix-core/bind';
-import { ChevronDownIcon, ChevronUpIcon } from '@gravionlabs/helix-core/icons';
-import { Subject } from 'rxjs';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i1 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Inject, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, contentChild, contentChildren, effect, forwardRef, inject, input, model, output, untracked } from "@angular/core";
+import { isAttributeEquals } from "@gravionlabs/helix-core/uix/utils";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i2 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import { ChevronDownIcon, ChevronUpIcon } from "@gravionlabs/helix-core/icons";
+import { Subject } from "rxjs";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/organizationchart";
+const style = `
     .h-organizationchart-table {
         border-spacing: 0;
         border-collapse: separate;
@@ -134,364 +133,749 @@ const style = /*css*/ `
         border-start-start-radius: dt('organizationchart.connector.border.radius');
     }
 `;
-
 const classes = {
-    root: ({ instance }) => ['h-organizationchart h-component', { 'h-organizationchart-preservespace': instance.preserveSpace() }],
-    table: 'h-organizationchart-table',
-    node: ({ instance }) => [
-        'h-organizationchart-node',
-        { 'h-organizationchart-node': true, 'h-organizationchart-node-selectable': instance.chart.selectionMode && instance.node.selectable !== false, 'h-organizationchart-node-selected': instance.isSelected() }
-    ],
-    nodeToggleButton: 'h-organizationchart-node-toggle-button',
-    nodeToggleButtonIcon: 'h-organizationchart-node-toggle-button-icon',
-    connectors: 'h-organizationchart-connectors',
-    connectorDown: 'h-organizationchart-connector-down',
-    connectorLeft: ({ first }) => ['h-organizationchart-connector-left', { 'h-organizationchart-connector-top': !first }],
-    connectorRight: ({ last }) => ['h-organizationchart-connector-right', { 'h-organizationchart-connector-top': !last }],
-    nodeChildren: 'h-organizationchart-node-children'
+	root: ({ instance }) => ["h-organizationchart h-component", { "h-organizationchart-preservespace": instance.preserveSpace() }],
+	table: "h-organizationchart-table",
+	node: ({ instance }) => ["h-organizationchart-node", {
+		"h-organizationchart-node": true,
+		"h-organizationchart-node-selectable": instance.chart.selectionMode && instance.node.selectable !== false,
+		"h-organizationchart-node-selected": instance.isSelected()
+	}],
+	nodeToggleButton: "h-organizationchart-node-toggle-button",
+	nodeToggleButtonIcon: "h-organizationchart-node-toggle-button-icon",
+	connectors: "h-organizationchart-connectors",
+	connectorDown: "h-organizationchart-connector-down",
+	connectorLeft: ({ first }) => ["h-organizationchart-connector-left", { "h-organizationchart-connector-top": !first }],
+	connectorRight: ({ last }) => ["h-organizationchart-connector-right", { "h-organizationchart-connector-top": !last }],
+	nodeChildren: "h-organizationchart-node-children"
 };
-class OrganizationChartStyle extends BaseStyle {
-    name = 'organizationchart';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * OrganizationChart visualizes hierarchical organization data.
- *
- * [Live Demo](https://www.primeng.org/organizationchart)
- *
- * @module organizationchartstyle
- *
- */
+var OrganizationChartStyle = class OrganizationChartStyle extends BaseStyle {
+	name = "organizationchart";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrganizationChartStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrganizationChartStyle
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OrganizationChartStyle,
+	decorators: [{ type: Injectable }]
+});
 var OrganizationChartClasses;
-(function (OrganizationChartClasses) {
-    /**
-     * Class name of the root element
-     */
-    OrganizationChartClasses["root"] = "h-organizationchart";
-    /**
-     * Class name of the table element
-     */
-    OrganizationChartClasses["table"] = "h-organizationchart-table";
-    /**
-     * Class name of the node element
-     */
-    OrganizationChartClasses["node"] = "h-organizationchart-node";
-    /**
-     * Class name of the node toggle button element
-     */
-    OrganizationChartClasses["nodeToggleButton"] = "h-organizationchart-node-toggle-button";
-    /**
-     * Class name of the node toggle button icon element
-     */
-    OrganizationChartClasses["nodeToggleButtonIcon"] = "h-organizationchart-node-toggle-button-icon";
-    /**
-     * Class name of the connectors element
-     */
-    OrganizationChartClasses["connectors"] = "h-organizationchart-connectors";
-    /**
-     * Class name of the connector down element
-     */
-    OrganizationChartClasses["connectorDown"] = "h-organizationchart-connector-down";
-    /**
-     * Class name of the connector left element
-     */
-    OrganizationChartClasses["connectorLeft"] = "h-organizationchart-connector-left";
-    /**
-     * Class name of the connector right element
-     */
-    OrganizationChartClasses["connectorRight"] = "h-organizationchart-connector-right";
-    /**
-     * Class name of the node children element
-     */
-    OrganizationChartClasses["nodeChildren"] = "h-organizationchart-node-children";
+(function(OrganizationChartClasses) {
+	OrganizationChartClasses["root"] = "h-organizationchart";
+	OrganizationChartClasses["table"] = "h-organizationchart-table";
+	OrganizationChartClasses["node"] = "h-organizationchart-node";
+	OrganizationChartClasses["nodeToggleButton"] = "h-organizationchart-node-toggle-button";
+	OrganizationChartClasses["nodeToggleButtonIcon"] = "h-organizationchart-node-toggle-button-icon";
+	OrganizationChartClasses["connectors"] = "h-organizationchart-connectors";
+	OrganizationChartClasses["connectorDown"] = "h-organizationchart-connector-down";
+	OrganizationChartClasses["connectorLeft"] = "h-organizationchart-connector-left";
+	OrganizationChartClasses["connectorRight"] = "h-organizationchart-connector-right";
+	OrganizationChartClasses["nodeChildren"] = "h-organizationchart-node-children";
 })(OrganizationChartClasses || (OrganizationChartClasses = {}));
-
-const ORGANIZATIONCHART_INSTANCE = new InjectionToken('ORGANIZATIONCHART_INSTANCE');
-class OrganizationChartNode extends BaseComponent {
-    cd;
-    node = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "node" }] : /* istanbul ignore next */ []));
-    root = input(undefined, { ...(ngDevMode ? { debugName: "root" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    first = input(undefined, { ...(ngDevMode ? { debugName: "first" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    last = input(undefined, { ...(ngDevMode ? { debugName: "last" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    collapsible = input(undefined, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    chart;
-    subscription;
-    _componentStyle = inject(OrganizationChartStyle);
-    constructor(chart, cd) {
-        super();
-        this.cd = cd;
-        this.chart = chart;
-        this.subscription = this.chart.selectionSource$.subscribe(() => {
-            this.cd.markForCheck();
-        });
-    }
-    get leaf() {
-        const node = this.node();
-        if (node) {
-            return node.leaf == false ? false : !(node.children && node.children.length);
-        }
-    }
-    get colspan() {
-        const node = this.node();
-        if (node) {
-            return node.children && node.children.length ? node.children.length * 2 : null;
-        }
-    }
-    getChildStyle(node) {
-        return {
-            visibility: !this.leaf && node.expanded ? 'inherit' : 'hidden'
-        };
-    }
-    getPTOptions(key) {
-        return this.ptm(key, {
-            context: {
-                expanded: this.node()?.expanded,
-                selectable: this.node()?.selectable !== false && this.chart.selectionMode(),
-                selected: this.isSelected(),
-                toggleable: this.collapsible() && !this.leaf,
-                active: this.isSelected()
-            }
-        });
-    }
-    getNodeOptions(lineTop, key) {
-        return this.ptm(key, {
-            context: {
-                lineTop
-            }
-        });
-    }
-    onNodeClick(event, node) {
-        this.chart.onNodeClick(event, node);
-    }
-    toggleNode(event, node) {
-        node.expanded = !node.expanded;
-        if (node.expanded)
-            this.chart.onNodeExpand.emit({ originalEvent: event, node: this.node() });
-        else
-            this.chart.onNodeCollapse.emit({ originalEvent: event, node: this.node() });
-        event.preventDefault();
-    }
-    isSelected() {
-        return this.chart.isSelected(this.node());
-    }
-    onDestroy() {
-        this.subscription.unsubscribe();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartNode, deps: [{ token: forwardRef(() => OrganizationChart) }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OrganizationChartNode, isStandalone: true, selector: "[hOrganizationChartNode]", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, last: { classPropertyName: "last", publicName: "last", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null } }, providers: [OrganizationChartStyle, { provide: PARENT_INSTANCE, useExisting: OrganizationChartNode }], usesInheritance: true, ngImport: i0, template: "@if (node()) {\n  <tbody [hBind]=\"ptm('body')\">\n    <tr [hBind]=\"ptm('row')\">\n      <td [attr.colspan]=\"colspan\" [hBind]=\"ptm('cell')\">\n        <div [class]=\"cn(cx('node'), node().styleClass)\" (click)=\"onNodeClick($event, node())\" [hBind]=\"getPTOptions('node')\">\n          @if (!chart.getTemplateForNode(node())) {\n            <div>{{ node().label }}</div>\n          }\n          @if (chart.getTemplateForNode(node())) {\n            <div>\n              <ng-container *ngTemplateOutlet=\"chart.getTemplateForNode(node()); context: { $implicit: node() }\"></ng-container>\n            </div>\n          }\n          @if (collapsible()) {\n            @if (!leaf) {\n              <a\n                tabindex=\"0\"\n                [class]=\"cx('nodeToggleButton')\"\n                (click)=\"toggleNode($event, node())\"\n                (keydown.enter)=\"toggleNode($event, node())\"\n                (keydown.space)=\"toggleNode($event, node())\"\n                [hBind]=\"getPTOptions('nodeToggleButton')\"\n                >\n                @if (!chart.togglerIconTemplate() && !chart._togglerIconTemplate) {\n                  @if (node().expanded) {\n                    <svg data-h-icon=\"chevron-down\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                  @if (!node().expanded) {\n                    <svg data-h-icon=\"chevron-up\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                }\n                @if (chart.togglerIconTemplate() || chart._togglerIconTemplate) {\n                  <span [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\">\n                    <ng-template *ngTemplateOutlet=\"chart.togglerIconTemplate() || chart._togglerIconTemplate; context: { $implicit: node().expanded }\"></ng-template>\n                  </span>\n                }\n              </a>\n            }\n          }\n        </div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n        <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      @if (node().children && node().children.length === 1) {\n        <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n          <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n        </td>\n      }\n      @if (node().children && node().children.length > 1) {\n        @for (child of node().children; track child; let first = $first; let last = $last; let index = $index) {\n          <td [class]=\"cx('connectorLeft', { first: first() })\" [hBind]=\"getNodeOptions(!(index === 0), 'connectorLeft')\">&nbsp;</td>\n          <td [class]=\"cx('connectorRight', { last: last() })\" [hBind]=\"getNodeOptions(!(index === node().children.length - 1), 'connectorRight')\">&nbsp;</td>\n        }\n      }\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('nodeChildren')\" [hBind]=\"ptm('nodeChildren')\">\n      @for (child of node().children; track child) {\n        <td colspan=\"2\" [hBind]=\"ptm('nodeCell')\">\n          <table [class]=\"cx('table')\" hOrganizationChartNode [unstyled]=\"unstyled()\" [pt]=\"pt\" [node()]=\"child\" [collapsible]=\"node().children && node().children.length > 0 && collapsible()\"></table>\n        </td>\n      }\n    </tr>\n  </tbody>\n}\n", dependencies: [{ kind: "component", type: OrganizationChartNode, selector: "[hOrganizationChartNode]", inputs: ["node", "root", "first", "last", "collapsible"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChevronDownIcon, selector: "[data-h-icon=\"chevron-down\"]" }, { kind: "component", type: ChevronUpIcon, selector: "[data-h-icon=\"chevron-up\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i2.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartNode, decorators: [{
-            type: Component,
-            args: [{ selector: '[hOrganizationChartNode]', standalone: true, imports: [CommonModule, ChevronDownIcon, ChevronUpIcon, SharedModule, BindModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Eager, providers: [OrganizationChartStyle, { provide: PARENT_INSTANCE, useExisting: OrganizationChartNode }], template: "@if (node()) {\n  <tbody [hBind]=\"ptm('body')\">\n    <tr [hBind]=\"ptm('row')\">\n      <td [attr.colspan]=\"colspan\" [hBind]=\"ptm('cell')\">\n        <div [class]=\"cn(cx('node'), node().styleClass)\" (click)=\"onNodeClick($event, node())\" [hBind]=\"getPTOptions('node')\">\n          @if (!chart.getTemplateForNode(node())) {\n            <div>{{ node().label }}</div>\n          }\n          @if (chart.getTemplateForNode(node())) {\n            <div>\n              <ng-container *ngTemplateOutlet=\"chart.getTemplateForNode(node()); context: { $implicit: node() }\"></ng-container>\n            </div>\n          }\n          @if (collapsible()) {\n            @if (!leaf) {\n              <a\n                tabindex=\"0\"\n                [class]=\"cx('nodeToggleButton')\"\n                (click)=\"toggleNode($event, node())\"\n                (keydown.enter)=\"toggleNode($event, node())\"\n                (keydown.space)=\"toggleNode($event, node())\"\n                [hBind]=\"getPTOptions('nodeToggleButton')\"\n                >\n                @if (!chart.togglerIconTemplate() && !chart._togglerIconTemplate) {\n                  @if (node().expanded) {\n                    <svg data-h-icon=\"chevron-down\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                  @if (!node().expanded) {\n                    <svg data-h-icon=\"chevron-up\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                }\n                @if (chart.togglerIconTemplate() || chart._togglerIconTemplate) {\n                  <span [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\">\n                    <ng-template *ngTemplateOutlet=\"chart.togglerIconTemplate() || chart._togglerIconTemplate; context: { $implicit: node().expanded }\"></ng-template>\n                  </span>\n                }\n              </a>\n            }\n          }\n        </div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n        <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      @if (node().children && node().children.length === 1) {\n        <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n          <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n        </td>\n      }\n      @if (node().children && node().children.length > 1) {\n        @for (child of node().children; track child; let first = $first; let last = $last; let index = $index) {\n          <td [class]=\"cx('connectorLeft', { first: first() })\" [hBind]=\"getNodeOptions(!(index === 0), 'connectorLeft')\">&nbsp;</td>\n          <td [class]=\"cx('connectorRight', { last: last() })\" [hBind]=\"getNodeOptions(!(index === node().children.length - 1), 'connectorRight')\">&nbsp;</td>\n        }\n      }\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('nodeChildren')\" [hBind]=\"ptm('nodeChildren')\">\n      @for (child of node().children; track child) {\n        <td colspan=\"2\" [hBind]=\"ptm('nodeCell')\">\n          <table [class]=\"cx('table')\" hOrganizationChartNode [unstyled]=\"unstyled()\" [pt]=\"pt\" [node()]=\"child\" [collapsible]=\"node().children && node().children.length > 0 && collapsible()\"></table>\n        </td>\n      }\n    </tr>\n  </tbody>\n}\n" }]
-        }], ctorParameters: () => [{ type: OrganizationChart, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => OrganizationChart)]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: false }] }], root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: false }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }], last: [{ type: i0.Input, args: [{ isSignal: true, alias: "last", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }] } });
-/**
- * OrganizationChart visualizes hierarchical organization data.
- * @group Components
- */
-class OrganizationChart extends BaseComponent {
-    el;
-    cd;
-    componentName = 'OrganizationChart';
-    /**
-     * An array of nested TreeNodes.
-     * @group Props
-     */
-    value = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Style class of the component.
-     * @deprecated since v20.0.0, use `class` instead.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Defines the selection mode.
-     * @group Props
-     */
-    selectionMode = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "selectionMode" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the nodes can be expanded or toggled.
-     * @group Props
-     */
-    collapsible = input(undefined, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether the space allocated by a node is preserved when hidden.
-     * @deprecated since v20.0.0.
-     * @group Props
-     */
-    preserveSpace = input(true, { ...(ngDevMode ? { debugName: "preserveSpace" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * A single treenode instance or an array to refer to the selections.
-     * @group Props
-     */
-    selection = model(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-    /**
-     * Callback to invoke when a node is selected.
-     * @param {OrganizationChartNodeSelectEvent} event - custom node select event.
-     * @group Emits
-     */
-    onNodeSelect = output();
-    /**
-     * Callback to invoke when a node is unselected.
-     * @param {OrganizationChartNodeUnSelectEvent} event - custom node unselect event.
-     * @group Emits
-     */
-    onNodeUnselect = output();
-    /**
-     * Callback to invoke when a node is expanded.
-     * @param {OrganizationChartNodeExpandEvent} event - custom node expand event.
-     * @group Emits
-     */
-    onNodeExpand = output();
-    /**
-     * Callback to invoke when a node is collapsed.
-     * @param {OrganizationChartNodeCollapseEvent} event - custom node collapse event.
-     * @group Emits
-     */
-    onNodeCollapse = output();
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    togglerIconTemplate = contentChild('togglericon', { ...(ngDevMode ? { debugName: "togglerIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    templateMap;
-    _togglerIconTemplate;
-    selectionSource = new Subject();
-    initialized;
-    selectionSource$ = this.selectionSource.asObservable();
-    _componentStyle = inject(OrganizationChartStyle);
-    bindDirectiveInstance = inject(Bind, { self: true });
-    $pcOrganizationChart = inject(ORGANIZATIONCHART_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    constructor(el, cd) {
-        super();
-        this.el = el;
-        this.cd = cd;
-        effect(() => {
-            this.selection();
-            if (this.initialized) {
-                untracked(() => this.selectionSource.next(null));
-            }
-        });
-    }
-    ngAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    get root() {
-        const value = this.value();
-        return value && value.length ? value[0] : null;
-    }
-    onAfterContentInit() {
-        if (this.templates().length) {
-            this.templateMap = {};
-        }
-        this.templates().forEach((item) => {
-            if (item.getType() === 'togglericon') {
-                this._togglerIconTemplate = item.template;
-            }
-            else {
-                this.templateMap[item.getType()] = item.template;
-            }
-        });
-        this.initialized = true;
-    }
-    getTemplateForNode(node) {
-        if (this.templateMap)
-            return node.type ? this.templateMap[node.type] : this.templateMap['default'];
-        else
-            return null;
-    }
-    onNodeClick(event, node) {
-        let eventTarget = event.target;
-        const selectionMode = this.selectionMode();
-        if (isAttributeEquals(eventTarget, 'data-pc-section', 'nodetogglebutton') || isAttributeEquals(eventTarget, 'data-pc-section', 'nodetogglebuttonicon')) {
-            return;
-        }
-        else if (selectionMode) {
-            if (node.selectable === false) {
-                return;
-            }
-            let index = this.findIndexInSelection(node);
-            let selected = index >= 0;
-            if (selectionMode === 'single') {
-                if (selected) {
-                    this.selection.set(null);
-                    this.onNodeUnselect.emit({ originalEvent: event, node: node });
-                }
-                else {
-                    this.selection.set(node);
-                    this.onNodeSelect.emit({ originalEvent: event, node: node });
-                }
-            }
-            else if (selectionMode === 'multiple') {
-                if (selected) {
-                    this.selection.set(this.selection().filter((val, i) => i != index));
-                    this.onNodeUnselect.emit({ originalEvent: event, node: node });
-                }
-                else {
-                    this.selection.set([...(this.selection() || []), node]);
-                    this.onNodeSelect.emit({ originalEvent: event, node: node });
-                }
-            }
-        }
-    }
-    findIndexInSelection(node) {
-        let index = -1;
-        const selectionMode = this.selectionMode();
-        if (selectionMode && this.selection()) {
-            if (selectionMode === 'single') {
-                index = this.selection() == node ? 0 : -1;
-            }
-            else if (selectionMode === 'multiple') {
-                for (let i = 0; i < this.selection().length; i++) {
-                    if (this.selection()[i] == node) {
-                        index = i;
-                        break;
-                    }
-                }
-            }
-        }
-        return index;
-    }
-    isSelected(node) {
-        return this.findIndexInSelection(node) != -1;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChart, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: OrganizationChart, isStandalone: true, selector: "h-organizationChart, h-organization-chart, h-organizationchart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, preserveSpace: { classPropertyName: "preserveSpace", publicName: "preserveSpace", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection: "selectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse" }, host: { properties: { "class": "cn(cx('root'), styleClass())" } }, providers: [OrganizationChartStyle, { provide: ORGANIZATIONCHART_INSTANCE, useExisting: OrganizationChart }, { provide: PARENT_INSTANCE, useExisting: OrganizationChart }], queries: [{ propertyName: "templates", predicate: HelixTemplate, isSignal: true }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"], isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i2.Bind }], ngImport: i0, template: "@if (root) {<table [class]=\"cx('table')\" [collapsible]=\"collapsible()\" hOrganizationChartNode [pt]=\"pt\" [unstyled]=\"unstyled()\" [node]=\"root\" [hBind]=\"ptm('table')\"></table>} \n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: OrganizationChartNode, selector: "[hOrganizationChartNode]", inputs: ["node", "root", "first", "last", "collapsible"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i2.Bind, selector: "[hBind]", inputs: ["hBind"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChart, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-organizationChart, h-organization-chart, h-organizationchart', standalone: true, imports: [CommonModule, OrganizationChartNode, SharedModule, BindModule], changeDetection: ChangeDetectionStrategy.Eager, providers: [OrganizationChartStyle, { provide: ORGANIZATIONCHART_INSTANCE, useExisting: OrganizationChart }, { provide: PARENT_INSTANCE, useExisting: OrganizationChart }], host: {
-                        '[class]': "cn(cx('root'), styleClass())"
-                    }, hostDirectives: [Bind], template: "@if (root) {<table [class]=\"cx('table')\" [collapsible]=\"collapsible()\" hOrganizationChartNode [pt]=\"pt\" [unstyled]=\"unstyled()\" [node]=\"root\" [hBind]=\"ptm('table')\"></table>} \n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], preserveSpace: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveSpace", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], onNodeSelect: [{ type: i0.Output, args: ["onNodeSelect"] }], onNodeUnselect: [{ type: i0.Output, args: ["onNodeUnselect"] }], onNodeExpand: [{ type: i0.Output, args: ["onNodeExpand"] }], onNodeCollapse: [{ type: i0.Output, args: ["onNodeCollapse"] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }], togglerIconTemplate: [{ type: i0.ContentChild, args: ['togglericon', { ...{ descendants: false }, isSignal: true }] }] } });
-class OrganizationChartModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartModule, imports: [OrganizationChart, OrganizationChartNode, SharedModule], exports: [OrganizationChart, OrganizationChartNode, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartModule, imports: [OrganizationChart, OrganizationChartNode, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: OrganizationChartModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [OrganizationChart, OrganizationChartNode, SharedModule],
-                    exports: [OrganizationChart, OrganizationChartNode, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const ORGANIZATIONCHART_INSTANCE = new InjectionToken("ORGANIZATIONCHART_INSTANCE");
+var OrganizationChartNode = class OrganizationChartNode extends BaseComponent {
+	cd;
+	node = input(...ngDevMode ? [void 0, { debugName: "node" }] : 	/* istanbul ignore next */ []);
+	root = input(void 0, {
+		...ngDevMode ? { debugName: "root" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	first = input(void 0, {
+		...ngDevMode ? { debugName: "first" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	last = input(void 0, {
+		...ngDevMode ? { debugName: "last" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	collapsible = input(void 0, {
+		...ngDevMode ? { debugName: "collapsible" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	chart;
+	subscription;
+	_componentStyle = inject(OrganizationChartStyle);
+	constructor(chart, cd) {
+		super();
+		this.cd = cd;
+		this.chart = chart;
+		this.subscription = this.chart.selectionSource$.subscribe(() => {
+			this.cd.markForCheck();
+		});
+	}
+	get leaf() {
+		const node = this.node();
+		if (node) return node.leaf == false ? false : !(node.children && node.children.length);
+	}
+	get colspan() {
+		const node = this.node();
+		if (node) return node.children && node.children.length ? node.children.length * 2 : null;
+	}
+	getChildStyle(node) {
+		return { visibility: !this.leaf && node.expanded ? "inherit" : "hidden" };
+	}
+	getPTOptions(key) {
+		return this.ptm(key, { context: {
+			expanded: this.node()?.expanded,
+			selectable: this.node()?.selectable !== false && this.chart.selectionMode(),
+			selected: this.isSelected(),
+			toggleable: this.collapsible() && !this.leaf,
+			active: this.isSelected()
+		} });
+	}
+	getNodeOptions(lineTop, key) {
+		return this.ptm(key, { context: { lineTop } });
+	}
+	onNodeClick(event, node) {
+		this.chart.onNodeClick(event, node);
+	}
+	toggleNode(event, node) {
+		node.expanded = !node.expanded;
+		if (node.expanded) this.chart.onNodeExpand.emit({
+			originalEvent: event,
+			node: this.node()
+		});
+		else this.chart.onNodeCollapse.emit({
+			originalEvent: event,
+			node: this.node()
+		});
+		event.preventDefault();
+	}
+	isSelected() {
+		return this.chart.isSelected(this.node());
+	}
+	onDestroy() {
+		this.subscription.unsubscribe();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrganizationChartNode,
+		deps: [{ token: forwardRef(() => OrganizationChart) }, { token: i0.ChangeDetectorRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: OrganizationChartNode,
+		isStandalone: true,
+		selector: "[hOrganizationChartNode]",
+		inputs: {
+			node: {
+				classPropertyName: "node",
+				publicName: "node",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			root: {
+				classPropertyName: "root",
+				publicName: "root",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			first: {
+				classPropertyName: "first",
+				publicName: "first",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			last: {
+				classPropertyName: "last",
+				publicName: "last",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		providers: [OrganizationChartStyle, {
+			provide: PARENT_INSTANCE,
+			useExisting: OrganizationChartNode
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: "@if (node()) {\n  <tbody [hBind]=\"ptm('body')\">\n    <tr [hBind]=\"ptm('row')\">\n      <td [attr.colspan]=\"colspan\" [hBind]=\"ptm('cell')\">\n        <div [class]=\"cn(cx('node'), node().styleClass)\" (click)=\"onNodeClick($event, node())\" [hBind]=\"getPTOptions('node')\">\n          @if (!chart.getTemplateForNode(node())) {\n            <div>{{ node().label }}</div>\n          }\n          @if (chart.getTemplateForNode(node())) {\n            <div>\n              <ng-container *ngTemplateOutlet=\"chart.getTemplateForNode(node()); context: { $implicit: node() }\"></ng-container>\n            </div>\n          }\n          @if (collapsible()) {\n            @if (!leaf) {\n              <a\n                tabindex=\"0\"\n                [class]=\"cx('nodeToggleButton')\"\n                (click)=\"toggleNode($event, node())\"\n                (keydown.enter)=\"toggleNode($event, node())\"\n                (keydown.space)=\"toggleNode($event, node())\"\n                [hBind]=\"getPTOptions('nodeToggleButton')\"\n                >\n                @if (!chart.togglerIconTemplate() && !chart._togglerIconTemplate) {\n                  @if (node().expanded) {\n                    <svg data-h-icon=\"chevron-down\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                  @if (!node().expanded) {\n                    <svg data-h-icon=\"chevron-up\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                }\n                @if (chart.togglerIconTemplate() || chart._togglerIconTemplate) {\n                  <span [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\">\n                    <ng-template *ngTemplateOutlet=\"chart.togglerIconTemplate() || chart._togglerIconTemplate; context: { $implicit: node().expanded }\"></ng-template>\n                  </span>\n                }\n              </a>\n            }\n          }\n        </div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n        <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      @if (node().children && node().children.length === 1) {\n        <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n          <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n        </td>\n      }\n      @if (node().children && node().children.length > 1) {\n        @for (child of node().children; track child; let first = $first; let last = $last; let index = $index) {\n          <td [class]=\"cx('connectorLeft', { first: first() })\" [hBind]=\"getNodeOptions(!(index === 0), 'connectorLeft')\">&nbsp;</td>\n          <td [class]=\"cx('connectorRight', { last: last() })\" [hBind]=\"getNodeOptions(!(index === node().children.length - 1), 'connectorRight')\">&nbsp;</td>\n        }\n      }\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('nodeChildren')\" [hBind]=\"ptm('nodeChildren')\">\n      @for (child of node().children; track child) {\n        <td colspan=\"2\" [hBind]=\"ptm('nodeCell')\">\n          <table [class]=\"cx('table')\" hOrganizationChartNode [unstyled]=\"unstyled()\" [pt]=\"pt\" [node()]=\"child\" [collapsible]=\"node().children && node().children.length > 0 && collapsible()\"></table>\n        </td>\n      }\n    </tr>\n  </tbody>\n}\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: OrganizationChartNode,
+				selector: "[hOrganizationChartNode]",
+				inputs: [
+					"node",
+					"root",
+					"first",
+					"last",
+					"collapsible"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i1.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: i1.NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "component",
+				type: ChevronDownIcon,
+				selector: "[data-h-icon=\"chevron-down\"]"
+			},
+			{
+				kind: "component",
+				type: ChevronUpIcon,
+				selector: "[data-h-icon=\"chevron-up\"]"
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i2.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OrganizationChartNode,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[hOrganizationChartNode]",
+			standalone: true,
+			imports: [
+				CommonModule,
+				ChevronDownIcon,
+				ChevronUpIcon,
+				SharedModule,
+				BindModule
+			],
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.Eager,
+			providers: [OrganizationChartStyle, {
+				provide: PARENT_INSTANCE,
+				useExisting: OrganizationChartNode
+			}],
+			template: "@if (node()) {\n  <tbody [hBind]=\"ptm('body')\">\n    <tr [hBind]=\"ptm('row')\">\n      <td [attr.colspan]=\"colspan\" [hBind]=\"ptm('cell')\">\n        <div [class]=\"cn(cx('node'), node().styleClass)\" (click)=\"onNodeClick($event, node())\" [hBind]=\"getPTOptions('node')\">\n          @if (!chart.getTemplateForNode(node())) {\n            <div>{{ node().label }}</div>\n          }\n          @if (chart.getTemplateForNode(node())) {\n            <div>\n              <ng-container *ngTemplateOutlet=\"chart.getTemplateForNode(node()); context: { $implicit: node() }\"></ng-container>\n            </div>\n          }\n          @if (collapsible()) {\n            @if (!leaf) {\n              <a\n                tabindex=\"0\"\n                [class]=\"cx('nodeToggleButton')\"\n                (click)=\"toggleNode($event, node())\"\n                (keydown.enter)=\"toggleNode($event, node())\"\n                (keydown.space)=\"toggleNode($event, node())\"\n                [hBind]=\"getPTOptions('nodeToggleButton')\"\n                >\n                @if (!chart.togglerIconTemplate() && !chart._togglerIconTemplate) {\n                  @if (node().expanded) {\n                    <svg data-h-icon=\"chevron-down\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                  @if (!node().expanded) {\n                    <svg data-h-icon=\"chevron-up\" [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\" />\n                  }\n                }\n                @if (chart.togglerIconTemplate() || chart._togglerIconTemplate) {\n                  <span [class]=\"cx('nodeToggleButtonIcon')\" [hBind]=\"getPTOptions('nodeToggleButtonIcon')\">\n                    <ng-template *ngTemplateOutlet=\"chart.togglerIconTemplate() || chart._togglerIconTemplate; context: { $implicit: node().expanded }\"></ng-template>\n                  </span>\n                }\n              </a>\n            }\n          }\n        </div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n        <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n      </td>\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('connectors')\" [hBind]=\"ptm('connectors')\">\n      @if (node().children && node().children.length === 1) {\n        <td [hBind]=\"ptm('lineCell')\" [attr.colspan]=\"colspan\">\n          <div [hBind]=\"ptm('connectorDown')\" [class]=\"cx('connectorDown')\"></div>\n        </td>\n      }\n      @if (node().children && node().children.length > 1) {\n        @for (child of node().children; track child; let first = $first; let last = $last; let index = $index) {\n          <td [class]=\"cx('connectorLeft', { first: first() })\" [hBind]=\"getNodeOptions(!(index === 0), 'connectorLeft')\">&nbsp;</td>\n          <td [class]=\"cx('connectorRight', { last: last() })\" [hBind]=\"getNodeOptions(!(index === node().children.length - 1), 'connectorRight')\">&nbsp;</td>\n        }\n      }\n    </tr>\n    <tr [ngStyle]=\"getChildStyle(node())\" [class]=\"cx('nodeChildren')\" [hBind]=\"ptm('nodeChildren')\">\n      @for (child of node().children; track child) {\n        <td colspan=\"2\" [hBind]=\"ptm('nodeCell')\">\n          <table [class]=\"cx('table')\" hOrganizationChartNode [unstyled]=\"unstyled()\" [pt]=\"pt\" [node()]=\"child\" [collapsible]=\"node().children && node().children.length > 0 && collapsible()\"></table>\n        </td>\n      }\n    </tr>\n  </tbody>\n}\n"
+		}]
+	}],
+	ctorParameters: () => [{
+		type: OrganizationChart,
+		decorators: [{
+			type: Inject,
+			args: [forwardRef(() => OrganizationChart)]
+		}]
+	}, { type: i0.ChangeDetectorRef }],
+	propDecorators: {
+		node: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "node",
+				required: false
+			}]
+		}],
+		root: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "root",
+				required: false
+			}]
+		}],
+		first: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "first",
+				required: false
+			}]
+		}],
+		last: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "last",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}]
+	}
+});
+var OrganizationChart = class OrganizationChart extends BaseComponent {
+	el;
+	cd;
+	componentName = "OrganizationChart";
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : 	/* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	selectionMode = input(...ngDevMode ? [void 0, { debugName: "selectionMode" }] : 	/* istanbul ignore next */ []);
+	collapsible = input(void 0, {
+		...ngDevMode ? { debugName: "collapsible" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	preserveSpace = input(true, {
+		...ngDevMode ? { debugName: "preserveSpace" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selection = model(void 0, ...ngDevMode ? [{ debugName: "selection" }] : 	/* istanbul ignore next */ []);
+	onNodeSelect = output();
+	onNodeUnselect = output();
+	onNodeExpand = output();
+	onNodeCollapse = output();
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	togglerIconTemplate = contentChild("togglericon", {
+		...ngDevMode ? { debugName: "togglerIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	templateMap;
+	_togglerIconTemplate;
+	selectionSource = new Subject();
+	initialized;
+	selectionSource$ = this.selectionSource.asObservable();
+	_componentStyle = inject(OrganizationChartStyle);
+	bindDirectiveInstance = inject(Bind, { self: true });
+	$pcOrganizationChart = inject(ORGANIZATIONCHART_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	constructor(el, cd) {
+		super();
+		this.el = el;
+		this.cd = cd;
+		effect(() => {
+			this.selection();
+			if (this.initialized) untracked(() => this.selectionSource.next(null));
+		});
+	}
+	ngAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	get root() {
+		const value = this.value();
+		return value && value.length ? value[0] : null;
+	}
+	onAfterContentInit() {
+		if (this.templates().length) this.templateMap = {};
+		this.templates().forEach((item) => {
+			if (item.getType() === "togglericon") this._togglerIconTemplate = item.template;
+			else this.templateMap[item.getType()] = item.template;
+		});
+		this.initialized = true;
+	}
+	getTemplateForNode(node) {
+		if (this.templateMap) return node.type ? this.templateMap[node.type] : this.templateMap["default"];
+		else return null;
+	}
+	onNodeClick(event, node) {
+		let eventTarget = event.target;
+		const selectionMode = this.selectionMode();
+		if (isAttributeEquals(eventTarget, "data-pc-section", "nodetogglebutton") || isAttributeEquals(eventTarget, "data-pc-section", "nodetogglebuttonicon")) return;
+		else if (selectionMode) {
+			if (node.selectable === false) return;
+			let index = this.findIndexInSelection(node);
+			let selected = index >= 0;
+			if (selectionMode === "single") if (selected) {
+				this.selection.set(null);
+				this.onNodeUnselect.emit({
+					originalEvent: event,
+					node
+				});
+			} else {
+				this.selection.set(node);
+				this.onNodeSelect.emit({
+					originalEvent: event,
+					node
+				});
+			}
+			else if (selectionMode === "multiple") if (selected) {
+				this.selection.set(this.selection().filter((val, i) => i != index));
+				this.onNodeUnselect.emit({
+					originalEvent: event,
+					node
+				});
+			} else {
+				this.selection.set([...this.selection() || [], node]);
+				this.onNodeSelect.emit({
+					originalEvent: event,
+					node
+				});
+			}
+		}
+	}
+	findIndexInSelection(node) {
+		let index = -1;
+		const selectionMode = this.selectionMode();
+		if (selectionMode && this.selection()) {
+			if (selectionMode === "single") index = this.selection() == node ? 0 : -1;
+			else if (selectionMode === "multiple") {
+				for (let i = 0; i < this.selection().length; i++) if (this.selection()[i] == node) {
+					index = i;
+					break;
+				}
+			}
+		}
+		return index;
+	}
+	isSelected(node) {
+		return this.findIndexInSelection(node) != -1;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrganizationChart,
+		deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: OrganizationChart,
+		isStandalone: true,
+		selector: "h-organizationChart, h-organization-chart, h-organizationchart",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsible: {
+				classPropertyName: "collapsible",
+				publicName: "collapsible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			preserveSpace: {
+				classPropertyName: "preserveSpace",
+				publicName: "preserveSpace",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selection: {
+				classPropertyName: "selection",
+				publicName: "selection",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			selection: "selectionChange",
+			onNodeSelect: "onNodeSelect",
+			onNodeUnselect: "onNodeUnselect",
+			onNodeExpand: "onNodeExpand",
+			onNodeCollapse: "onNodeCollapse"
+		},
+		host: { properties: { "class": "cn(cx('root'), styleClass())" } },
+		providers: [
+			OrganizationChartStyle,
+			{
+				provide: ORGANIZATIONCHART_INSTANCE,
+				useExisting: OrganizationChart
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: OrganizationChart
+			}
+		],
+		queries: [{
+			propertyName: "templates",
+			predicate: HelixTemplate,
+			isSignal: true
+		}, {
+			propertyName: "togglerIconTemplate",
+			first: true,
+			predicate: ["togglericon"],
+			isSignal: true
+		}],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i2.Bind }],
+		ngImport: i0,
+		template: "@if (root) {<table [class]=\"cx('table')\" [collapsible]=\"collapsible()\" hOrganizationChartNode [pt]=\"pt\" [unstyled]=\"unstyled()\" [node]=\"root\" [hBind]=\"ptm('table')\"></table>} \n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "component",
+				type: OrganizationChartNode,
+				selector: "[hOrganizationChartNode]",
+				inputs: [
+					"node",
+					"root",
+					"first",
+					"last",
+					"collapsible"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i2.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.Eager
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OrganizationChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-organizationChart, h-organization-chart, h-organizationchart",
+			standalone: true,
+			imports: [
+				CommonModule,
+				OrganizationChartNode,
+				SharedModule,
+				BindModule
+			],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			providers: [
+				OrganizationChartStyle,
+				{
+					provide: ORGANIZATIONCHART_INSTANCE,
+					useExisting: OrganizationChart
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: OrganizationChart
+				}
+			],
+			host: { "[class]": "cn(cx('root'), styleClass())" },
+			hostDirectives: [Bind],
+			template: "@if (root) {<table [class]=\"cx('table')\" [collapsible]=\"collapsible()\" hOrganizationChartNode [pt]=\"pt\" [unstyled]=\"unstyled()\" [node]=\"root\" [hBind]=\"ptm('table')\"></table>} \n"
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		collapsible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsible",
+				required: false
+			}]
+		}],
+		preserveSpace: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "preserveSpace",
+				required: false
+			}]
+		}],
+		selection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selection",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectionChange"]
+		}],
+		onNodeSelect: [{
+			type: i0.Output,
+			args: ["onNodeSelect"]
+		}],
+		onNodeUnselect: [{
+			type: i0.Output,
+			args: ["onNodeUnselect"]
+		}],
+		onNodeExpand: [{
+			type: i0.Output,
+			args: ["onNodeExpand"]
+		}],
+		onNodeCollapse: [{
+			type: i0.Output,
+			args: ["onNodeCollapse"]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}],
+		togglerIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["togglericon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}]
+	}
+});
+var OrganizationChartModule = class OrganizationChartModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrganizationChartModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrganizationChartModule,
+		imports: [
+			OrganizationChart,
+			OrganizationChartNode,
+			SharedModule
+		],
+		exports: [
+			OrganizationChart,
+			OrganizationChartNode,
+			SharedModule
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: OrganizationChartModule,
+		imports: [
+			OrganizationChart,
+			OrganizationChartNode,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: OrganizationChartModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				OrganizationChart,
+				OrganizationChartNode,
+				SharedModule
+			],
+			exports: [
+				OrganizationChart,
+				OrganizationChartNode,
+				SharedModule
+			]
+		}]
+	}]
+});
 export { OrganizationChart, OrganizationChartClasses, OrganizationChartModule, OrganizationChartNode, OrganizationChartStyle };
-//# sourceMappingURL=gravionlabs-helix-core-organizationchart.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-organizationchart.mjs.map