@ruc-lib/org-chart 2.0.3 → 3.1.0

package/{fesm2020 → fesm2022}/ruc-lib-org-chart.mjs

@@ -1,421 +1,403 @@
-import * as i0 from '@angular/core';
-import { Component, Input, ViewChild, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { ButtonModule } from 'primeng/button';
-import * as i4 from 'primeng/organizationchart';
-import { OrganizationChartModule } from 'primeng/organizationchart';
+import * as i6 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i7 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i8 from '@angular/material/button';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i9 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import * as i0 from '@angular/core';
+import { ViewChild, Input, Component } from '@angular/core';
 import { jsPDF } from 'jspdf';
 import html2canvas from 'html2canvas';
-import * as i2 from 'primeng/api';
-import * as i6 from '@angular/material/form-field';
-import { BrowserModule } from '@angular/platform-browser';
+import * as i7 from 'primeng/organizationchart';
+import { OrganizationChartModule } from 'primeng/organizationchart';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i9 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i8 from 'primeng/api';
 
-const downloadChart = (chartContainer, format) => {
-    if (!chartContainer) {
-        console.error('Chart container not found!');
-        return;
-    }
-    // Capture the chart container as an image (either PNG or JPEG)
-    if (format === 'pdf') {
-        createPDF(chartContainer);
-    }
-    else {
-        captureElementAsImage(chartContainer, format)
-            .then((imgData) => {
-            downloadImage(imgData, format); // Download as PNG or JPEG
-        })
-            .catch(handleCanvasError);
-    }
-};
-// Capture the element as an image and return a promise
-const captureElementAsImage = (element, format) => {
-    return new Promise((resolve, reject) => {
-        html2canvas(element, {
-            useCORS: true,
-            scrollX: 0,
-            scrollY: -window.scrollY,
-            logging: false,
-            backgroundColor: null,
-        })
-            .then((canvas) => {
-            const imgData = canvas.toDataURL(`image/${format}`);
-            resolve(imgData);
-        })
-            .catch((error) => reject(error));
-    });
-};
-// Downloads the org chart as a PDF document.
-const createPDF = (element) => {
-    html2canvas(element, {
-        useCORS: true,
-        scale: 4,
-        scrollX: 0,
-        scrollY: -window.scrollY,
-        logging: false,
-        backgroundColor: null,
-    })
-        .then((canvas) => {
-        const imgData = canvas.toDataURL('image/png'); // Capture as PNG (or you can use JPEG)
-        const pdf = new jsPDF('p', 'mm', 'a4'); // Standard A4 page size
-        // Get the dimensions of the PDF page
-        const pdfWidth = pdf.internal.pageSize.width;
-        const pdfHeight = pdf.internal.pageSize.height;
-        const canvasWidth = canvas.width;
-        const canvasHeight = canvas.height;
-        const aspectRatio = canvasWidth / canvasHeight;
-        let imgWidth = pdfWidth;
-        let imgHeight = pdfWidth / aspectRatio;
-        // If the image height exceeds the PDF page height, adjust it
-        if (imgHeight > pdfHeight) {
-            imgHeight = pdfHeight;
-            imgWidth = pdfHeight * aspectRatio;
-        }
-        // Add the image to the PDF
-        pdf.addImage(imgData, 'PNG', 0, 20, imgWidth, imgHeight); // Fit image on PDF page
-        pdf.save('organization-chart.pdf'); // Download the PDF
-    })
-        .catch(handleCanvasError);
-};
-// Download the captured image in the required format (PNG/JPEG)
-const downloadImage = (imgData, format) => {
-    const link = document.createElement('a');
-    link.href = imgData;
-    link.download = `organization-chart.${format}`;
-    link.click();
-};
-// Error handler for any issues during canvas generation or file creation
-const handleCanvasError = (error) => {
-    console.error('Error generating file:', error);
-};
-const checkPropsType = (props) => {
-    if (props.isDisplayHambergerMenu !== undefined && typeof props.isDisplayHambergerMenu !== 'boolean') {
-        console.error('Error: isDisplayHambergerMenu should be a boolean.');
-    }
-    if (props.isDisplaySearchBar !== undefined && typeof props.isDisplaySearchBar !== 'boolean') {
-        console.error('Error: isDisplaySearchBar should be a boolean.');
-    }
-    if (!['portrait', 'triangle', 'landscape'].includes(props.nodeTemplate)) {
-        console.error('Error: nodeTemplate should be "portrait", "triangle", or "landscape".');
-    }
-    if (!Array.isArray(props.hambergerMenuList)) {
-        console.error('Error: hambergerMenuList should be an array.');
-    }
-    else {
-        props.hambergerMenuList.forEach(item => {
-            if (typeof item.label !== 'string') {
-                console.error('Error: hambergerMenuList label should be a string.');
-            }
-            if (typeof item.id !== 'number') {
-                console.error('Error: hambergerMenuList id should be a number.');
-            }
-        });
-    }
-    // Check if greyNodeStyle is of type CustomNodeStyle
-    const greyNodeStyle = props.greyNodeStyle;
-    if (greyNodeStyle) {
-        if (greyNodeStyle.backgroundColor && typeof greyNodeStyle.backgroundColor !== 'string') {
-            console.error('Error: greyNodeStyle.backgroundColor should be a string.');
-        }
-        if (greyNodeStyle.color && typeof greyNodeStyle.color !== 'string') {
-            console.error('Error: greyNodeStyle.color should be a string.');
-        }
-        if (greyNodeStyle.padding && typeof greyNodeStyle.padding !== 'string') {
-            console.error('Error: greyNodeStyle.padding should be a string.');
-        }
-        if (greyNodeStyle.borderRadius && typeof greyNodeStyle.borderRadius !== 'string') {
-            console.error('Error: greyNodeStyle.borderRadius should be a string.');
-        }
-    }
-    // Check if orgData is an array of OrgDataItem objects
-    if (!Array.isArray(props.orgData)) {
-        console.error('Error: orgData should be an array.');
-    }
-    else {
-        props.orgData.forEach(item => checkOrgDataItem(item));
-    }
-};
-const checkOrgDataItem = (item) => {
-    if (item.label !== undefined && typeof item.label !== 'string') {
-        console.error('Error: OrgDataItem label should be a string.');
-    }
-    if (item.expanded !== undefined && typeof item.expanded !== 'boolean') {
-        console.error('Error: OrgDataItem expanded should be a boolean.');
-    }
-    if (item.description !== undefined && typeof item.description !== 'string') {
-        console.error('Error: OrgDataItem description should be a string.');
-    }
-    if (item.customNodeStyle !== undefined) {
-        const customNodeStyle = item.customNodeStyle;
-        if (customNodeStyle.backgroundColor && typeof customNodeStyle.backgroundColor !== 'string') {
-            console.error('Error: customNodeStyle.backgroundColor should be a string.');
-        }
-        if (customNodeStyle.color && typeof customNodeStyle.color !== 'string') {
-            console.error('Error: customNodeStyle.color should be a string.');
-        }
-        if (customNodeStyle.padding && typeof customNodeStyle.padding !== 'string') {
-            console.error('Error: customNodeStyle.padding should be a string.');
-        }
-        if (customNodeStyle.borderRadius && typeof customNodeStyle.borderRadius !== 'string') {
-            console.error('Error: customNodeStyle.borderRadius should be a string.');
-        }
-    }
-    if (item.data) {
-        if (item.data.image !== undefined && typeof item.data.image !== 'string') {
-            console.error('Error: OrgDataItem data.image should be a string.');
-        }
-        if (item.data.name !== undefined && typeof item.data.name !== 'string') {
-            console.error('Error: OrgDataItem data.name should be a string.');
-        }
-        if (typeof item.data.title !== 'string') {
-            console.error('Error: OrgDataItem data.title should be a string.');
-        }
-    }
-    if (item.children && Array.isArray(item.children)) {
-        item.children.forEach(child => checkOrgDataItem(child)); // Recursive call for children
-    }
-    if (item.originalStyle) {
-        const originalStyle = item.originalStyle;
-        if (originalStyle.backgroundColor && typeof originalStyle.backgroundColor !== 'string') {
-            console.error('Error: originalStyle.backgroundColor should be a string.');
-        }
-        if (originalStyle.color && typeof originalStyle.color !== 'string') {
-            console.error('Error: originalStyle.color should be a string.');
-        }
-        if (originalStyle.padding && typeof originalStyle.padding !== 'string') {
-            console.error('Error: originalStyle.padding should be a string.');
-        }
-        if (originalStyle.borderRadius && typeof originalStyle.borderRadius !== 'string') {
-            console.error('Error: originalStyle.borderRadius should be a string.');
-        }
-    }
+const downloadChart = (chartContainer, format) => {
+    if (!chartContainer) {
+        console.error('Chart container not found!');
+        return;
+    }
+    // Capture the chart container as an image (either PNG or JPEG)
+    if (format === 'pdf') {
+        createPDF(chartContainer);
+    }
+    else {
+        captureElementAsImage(chartContainer, format)
+            .then((imgData) => {
+            downloadImage(imgData, format); // Download as PNG or JPEG
+        })
+            .catch(handleCanvasError);
+    }
+};
+// Capture the element as an image and return a promise
+const captureElementAsImage = (element, format) => {
+    return new Promise((resolve, reject) => {
+        html2canvas(element, {
+            useCORS: true,
+            scrollX: 0,
+            scrollY: -window.scrollY,
+            logging: false,
+            backgroundColor: null,
+        })
+            .then((canvas) => {
+            const imgData = canvas.toDataURL(`image/${format}`);
+            resolve(imgData);
+        })
+            .catch((error) => reject(error));
+    });
+};
+// Downloads the org chart as a PDF document.
+const createPDF = (element) => {
+    html2canvas(element, {
+        useCORS: true,
+        scale: 4,
+        scrollX: 0,
+        scrollY: -window.scrollY,
+        logging: false,
+        backgroundColor: null,
+    })
+        .then((canvas) => {
+        const imgData = canvas.toDataURL('image/png'); // Capture as PNG (or you can use JPEG)
+        const pdf = new jsPDF('p', 'mm', 'a4'); // Standard A4 page size
+        // Get the dimensions of the PDF page
+        const pdfWidth = pdf.internal.pageSize.width;
+        const pdfHeight = pdf.internal.pageSize.height;
+        const canvasWidth = canvas.width;
+        const canvasHeight = canvas.height;
+        const aspectRatio = canvasWidth / canvasHeight;
+        let imgWidth = pdfWidth;
+        let imgHeight = pdfWidth / aspectRatio;
+        // If the image height exceeds the PDF page height, adjust it
+        if (imgHeight > pdfHeight) {
+            imgHeight = pdfHeight;
+            imgWidth = pdfHeight * aspectRatio;
+        }
+        // Add the image to the PDF
+        pdf.addImage(imgData, 'PNG', 0, 20, imgWidth, imgHeight); // Fit image on PDF page
+        pdf.save('organization-chart.pdf'); // Download the PDF
+    })
+        .catch(handleCanvasError);
+};
+// Download the captured image in the required format (PNG/JPEG)
+const downloadImage = (imgData, format) => {
+    const link = document.createElement('a');
+    link.href = imgData;
+    link.download = `organization-chart.${format}`;
+    link.click();
+};
+// Error handler for any issues during canvas generation or file creation
+const handleCanvasError = (error) => {
+    console.error('Error generating file:', error);
+};
+const checkPropsType = (props) => {
+    if (props.isDisplayHambergerMenu !== undefined && typeof props.isDisplayHambergerMenu !== 'boolean') {
+        console.error('Error: isDisplayHambergerMenu should be a boolean.');
+    }
+    if (props.isDisplaySearchBar !== undefined && typeof props.isDisplaySearchBar !== 'boolean') {
+        console.error('Error: isDisplaySearchBar should be a boolean.');
+    }
+    if (!['portrait', 'triangle', 'landscape'].includes(props.nodeTemplate)) {
+        console.error('Error: nodeTemplate should be "portrait", "triangle", or "landscape".');
+    }
+    if (!Array.isArray(props.hambergerMenuList)) {
+        console.error('Error: hambergerMenuList should be an array.');
+    }
+    else {
+        props.hambergerMenuList.forEach(item => {
+            if (typeof item.label !== 'string') {
+                console.error('Error: hambergerMenuList label should be a string.');
+            }
+            if (typeof item.id !== 'number') {
+                console.error('Error: hambergerMenuList id should be a number.');
+            }
+        });
+    }
+    // Check if greyNodeStyle is of type CustomNodeStyle
+    const greyNodeStyle = props.greyNodeStyle;
+    if (greyNodeStyle) {
+        if (greyNodeStyle.backgroundColor && typeof greyNodeStyle.backgroundColor !== 'string') {
+            console.error('Error: greyNodeStyle.backgroundColor should be a string.');
+        }
+        if (greyNodeStyle.color && typeof greyNodeStyle.color !== 'string') {
+            console.error('Error: greyNodeStyle.color should be a string.');
+        }
+        if (greyNodeStyle.padding && typeof greyNodeStyle.padding !== 'string') {
+            console.error('Error: greyNodeStyle.padding should be a string.');
+        }
+        if (greyNodeStyle.borderRadius && typeof greyNodeStyle.borderRadius !== 'string') {
+            console.error('Error: greyNodeStyle.borderRadius should be a string.');
+        }
+    }
+    // Check if orgData is an array of OrgDataItem objects
+    if (!Array.isArray(props.orgData)) {
+        console.error('Error: orgData should be an array.');
+    }
+    else {
+        props.orgData.forEach(item => checkOrgDataItem(item));
+    }
+};
+const checkOrgDataItem = (item) => {
+    if (item.label !== undefined && typeof item.label !== 'string') {
+        console.error('Error: OrgDataItem label should be a string.');
+    }
+    if (item.expanded !== undefined && typeof item.expanded !== 'boolean') {
+        console.error('Error: OrgDataItem expanded should be a boolean.');
+    }
+    if (item.description !== undefined && typeof item.description !== 'string') {
+        console.error('Error: OrgDataItem description should be a string.');
+    }
+    if (item.customNodeStyle !== undefined) {
+        const customNodeStyle = item.customNodeStyle;
+        if (customNodeStyle.backgroundColor && typeof customNodeStyle.backgroundColor !== 'string') {
+            console.error('Error: customNodeStyle.backgroundColor should be a string.');
+        }
+        if (customNodeStyle.color && typeof customNodeStyle.color !== 'string') {
+            console.error('Error: customNodeStyle.color should be a string.');
+        }
+        if (customNodeStyle.padding && typeof customNodeStyle.padding !== 'string') {
+            console.error('Error: customNodeStyle.padding should be a string.');
+        }
+        if (customNodeStyle.borderRadius && typeof customNodeStyle.borderRadius !== 'string') {
+            console.error('Error: customNodeStyle.borderRadius should be a string.');
+        }
+    }
+    if (!item.data || typeof item.data.title !== 'string') {
+        console.error('Error: OrgDataItem data.title should be a string.');
+    }
+    else {
+        if (item.data.image !== undefined && typeof item.data.image !== 'string') {
+            console.error('Error: OrgDataItem data.image should be a string.');
+        }
+        if (item.data.name !== undefined && typeof item.data.name !== 'string') {
+            console.error('Error: OrgDataItem data.name should be a string.');
+        }
+    }
+    if (item.children && Array.isArray(item.children)) {
+        item.children.forEach(child => checkOrgDataItem(child)); // Recursive call for children
+    }
+    if (item.originalStyle) {
+        const originalStyle = item.originalStyle;
+        if (originalStyle.backgroundColor && typeof originalStyle.backgroundColor !== 'string') {
+            console.error('Error: originalStyle.backgroundColor should be a string.');
+        }
+        if (originalStyle.color && typeof originalStyle.color !== 'string') {
+            console.error('Error: originalStyle.color should be a string.');
+        }
+        if (originalStyle.padding && typeof originalStyle.padding !== 'string') {
+            console.error('Error: originalStyle.padding should be a string.');
+        }
+        if (originalStyle.borderRadius && typeof originalStyle.borderRadius !== 'string') {
+            console.error('Error: originalStyle.borderRadius should be a string.');
+        }
+    }
 };
 
-/** Displays an organizational chart with nodes and relationships (Org Chart Component)  */
-class OrgChartComponent {
-    constructor() {
-        this.searchText = '';
-        this.hoveredNode = null;
-    }
-    /** Initializes the component  */
-    ngOnInit() {
-        let updatedJson = this.addDefaultKeysIfNotAvailable(this.rucInputData);
-        this.rucInputData.orgData = this.updateRucInputData(updatedJson.orgData);
-        checkPropsType(this.rucInputData); // To check rucInputData is in correct format or not 
-        this.expandAllNodes();
-    }
-    /** add default property for grey nodes if user does not provided */
-    addDefaultKeysIfNotAvailable(orgData) {
-        if (!orgData.hasOwnProperty('greyNodeStyle')) {
-            orgData.greyNodeStyle = {
-                backgroundColor: '#d3d3d3',
-                color: '#808080',
-            };
-        }
-        return orgData;
-    }
-    /** manipulate input json as If customNodeStyle exists, create originalStyle for node and its children  */
-    updateRucInputData(data) {
-        return data.map((node) => {
-            node['type'] = 'person';
-            if (node.customNodeStyle) {
-                node.originalStyle = { ...node.customNodeStyle };
-            }
-            if (node.children && node.children.length > 0) {
-                node['type'] = 'person';
-                node.children = this.updateRucInputData(node.children); // Recursive call
-            }
-            return node;
-        });
-    }
-    /** Expands all nodes in the org chart */
-    expandAllNodes() {
-        this.rucInputData.orgData = this.expandNodes(this.rucInputData.orgData);
-    }
-    /** Recursively expands all nodes in the given array
-     * @param nodes Nodes to expand @returns Expanded nodes */
-    expandNodes(nodes) {
-        return nodes.map((node) => ({
-            ...node,
-            expanded: true,
-            children: node.children ? this.expandNodes(node.children) : [],
-        }));
-    }
-    /** Collapses all nodes in the org chart   */
-    collapseAllNodes() {
-        this.rucInputData.orgData = this.collapseNodes(this.rucInputData.orgData);
-    }
-    /** Recursively collapses all nodes in the given array
-     * @param nodes Nodes to collapse @returns Collapsed nodes  */
-    collapseNodes(nodes) {
-        return nodes.map((node) => ({
-            ...node,
-            expanded: false,
-            children: node.children ? this.collapseNodes(node.children) : [],
-        }));
-    }
-    /** Gets the background color of a node based on search text
-      @param node Node to check @returns Whether the node matches the search text */
-    getBackgroungColorOfNode(node) {
-        return (!this.searchText ||
-            node.data.title.toLowerCase().includes(this.searchText.toLowerCase()) ||
-            node.data.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
-            node.label?.toLowerCase().includes(this.searchText.toLowerCase()));
-    }
-    /** Handles node hover event @param node Hovered node */
-    onNodeHover(node) {
-        if (this.searchText)
-            return;
-        this.hoveredNode = node;
-        this.updateNodeStyles();
-    }
-    /** Handles node leave event */
-    onNodeLeave() {
-        this.hoveredNode = null;
-        this.resetNodeStyles();
-    }
-    /**   Updates node styles based on the hovered node */
-    updateNodeStyles() {
-        this.applyStyles(this.rucInputData.orgData, true);
-    }
-    /**   Resets node styles to their original state */
-    resetNodeStyles() {
-        this.applyStyles(this.rucInputData.orgData, false);
-    }
-    /** Applies grey node style to non-matching nodes @param nodes Nodes to apply styles to */
-    applyGreyNodes(nodes) {
-        nodes.forEach((node) => {
-            const isMatching = this.searchText
-                ? node.data?.title.includes(this.searchText)
-                : false;
-            node.customNodeStyle = isMatching
-                ? node.customNodeStyle || node.originalStyle
-                : {
-                    ...node.originalStyle,
-                    backgroundColor: this.rucInputData.greyNodeStyle.backgroundColor,
-                    color: this.rucInputData.greyNodeStyle.color,
-                };
-            if (node.children) {
-                this.applyGreyNodes(node.children);
-            }
-        });
-    }
-    /** Applies styles to nodes based on the hovered node
-     * @param nodes Nodes to apply styles @param isHovered Whether the node is hovered */
-    applyStyles(nodes, isHovered) {
-        nodes.forEach((node) => {
-            if (isHovered) {
-                node.customNodeStyle =
-                    node === this.hoveredNode ||
-                        this.isParent(node, this.hoveredNode) ||
-                        this.isChild(node, this.hoveredNode)
-                        ? node.customNodeStyle || node.originalStyle
-                        : {
-                            ...node.originalStyle,
-                            backgroundColor: this.rucInputData.greyNodeStyle.backgroundColor,
-                            color: this.rucInputData.greyNodeStyle.color,
-                        };
-            }
-            else {
-                node.customNodeStyle = node.originalStyle;
-            }
-            if (node.children) {
-                this.applyStyles(node.children, isHovered);
-            }
-        });
-    }
-    /**  Use the downloadChart utility method */
-    downloadChart(format) {
-        const chartContainer = this.orgChart.el.nativeElement;
-        downloadChart(chartContainer, format); // Calls the utility function
-    }
-    /** Handles menu click event @param id Menu item ID  */
-    onMenuClick(id, event) {
-        event.preventDefault();
-        event.stopPropagation();
-        switch (id) {
-            case 1:
-                this.downloadChart('pdf');
-                break;
-            case 2:
-                this.downloadChart('png');
-                break;
-            case 3:
-                this.downloadChart('jpeg');
-                break;
-            case 4:
-                this.expandAllNodes();
-                break;
-            case 5:
-                this.collapseAllNodes();
-                break;
-            default:
-                console.warn(`Unknown menu item ID: ${id}. Please enter valid id.`);
-                break;
-        }
-    }
-    /** Gets tooltip data for a node @param node Node to get tooltip data */
-    getTooltipData(node) {
-        return node.description || '';
-    }
-    /** Checks if a node is a parent of another node.
-     * @param currentNode The current node to check.
-     * @param hoveredNode The node to check for parentage.
-     * @returns Whether the current node is a parent of the hovered node. */
-    isParent(currentNode, hoveredNode) {
-        return hoveredNode && currentNode.children?.includes(hoveredNode);
-    }
-    /** Checks if a node is a child of another node.
-     * @param node The node to check for child status
-     * @param target The node to check for parentage.
-     * @returns Whether the node is a child of the target node.*/
-    isChild(node, target) {
-        return target && target.children?.includes(node);
-    }
-}
-OrgChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-OrgChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OrgChartComponent, selector: "uxp-org-chart", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, viewQueries: [{ propertyName: "orgChart", first: true, predicate: ["orgChart"], descendants: true }], ngImport: i0, template: "<div class={{customTheme}}>\r\n  <div class=\"container\">\r\n    <!-- Hamburger Menu -->\r\n    <button *ngIf=\"rucInputData.isDisplayHambergerMenu === true\" mat-icon-button [matMenuTriggerFor]=\"menu\" \r\n      class=\"left hamburger-button\">\r\n      <mat-icon>menu</mat-icon>\r\n    </button>\r\n  \r\n    <!-- Menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <button *ngFor=\"let menu of rucInputData.hambergerMenuList\" mat-menu-item (click)=\"onMenuClick(menu.id, $event);\" \r\n      [id]=\"'menu-item-' + menu.id\">\r\n        {{ menu.label }}\r\n      </button>\r\n    </mat-menu>\r\n  \r\n    <!-- Search Bar -->\r\n    <mat-form-field *ngIf=\"rucInputData.isDisplaySearchBar === true\" class=\"search-box right\" \r\n      >\r\n      <mat-label>Search</mat-label>\r\n      <input matInput placeholder=\"Type to search...\" [(ngModel)]=\"searchText\" />\r\n      <mat-icon matSuffix>search</mat-icon>\r\n    </mat-form-field>\r\n  </div>\r\n  \r\n  \r\n  <div class=\"org-chart-container \" id=\"org-chart-data\">\r\n  <p-organizationChart #orgChart class=\"org-chart\" [value]=\"this.rucInputData.orgData\" selectionMode=\"multiple\"\r\n    [(selection)]=\"selectedNodes\">\r\n    <ng-template let-node pTemplate=\"person\">\r\n      <div *ngIf=\"this.rucInputData.nodeTemplate === 'portrait'\"  class=\"flex flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n        [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\"> \r\n        <div class=\"flex flex-col items-center\"  >\r\n          <span><img  *ngIf=\"node.data.image\" [src]=\"node.data.image\" class=\"portraitImageDimension\" /></span>\r\n          <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n          <div>{{ node.data.title }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  \r\n      <div *ngIf=\"this.rucInputData.nodeTemplate === 'triangle'\"  class=\"flex trianlge-up flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n        [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\"> \r\n        <div class=\"flex flex-col items-center\"  >\r\n          <div *ngIf=\"!node.data.image\" class=\"triangleImageDimension\">\r\n          </div>\r\n          <img *ngIf=\"node.data.image\" [src]=\"node.data.image\" class=\"triangleImageDimension\" />\r\n          <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n          <div>{{ node.data.title }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    <div *ngIf=\"this.rucInputData.nodeTemplate === 'landscape'\">\r\n      <div class=\"card borderSolidGrey\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\"\r\n      (mouseenter)=\"onNodeHover(node)\"\r\n      [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n        <div class=\"body\" >\r\n          <div class=\"icon\">\r\n            <img *ngIf=\"node.data.image\" [src]=\"node.data.image\" class=\"landscapeImageDimension\" />\r\n          </div>\r\n          <div class=\"content\">\r\n              <div>{{node.data.name}}</div>\r\n              <div>{{node.data.title}}</div>\r\n          </div>\r\n        </div> \r\n      </div>\r\n    </div>\r\n    </ng-template>\r\n  </p-organizationChart>\r\n  </div>\r\n  \r\n</div>", styles: [".org-chart-container{overflow-x:auto}.nodeContent{border:none;padding:1.5em;border-radius:\"8px\";background-color:none;color:#000}.card{display:flex;width:250px;height:100px;padding:24px;align-self:stretch;align-items:flex-start}.card .body{width:100%;display:flex}.card .body .icon{width:64px;height:64px}.trianlge-up{width:220px;background-color:#980104;clip-path:polygon(50% 0%,0% 100%,100% 100%)}mat-form-field{margin:10px}::ng-deep .p-organizationchart .p-organizationchart-node-content{border:none;background:none;color:#495057;padding:0!important}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler{background-color:#dee2e6;cursor:pointer}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{top:.2rem}.container{display:flex;justify-content:space-between;width:100%}.container .left{margin-right:auto}.container .right{margin-left:auto}mat-icon-button{margin-right:10px}.mat-form-field{margin-left:10px}.borderSolidGrey{border:1px solid lightgray}.landscapeImageDimension{width:3em;height:3em}.portraitImageDimension,.triangleImageDimension{margin-bottom:4px;width:3em;height:3em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.OrganizationChart, selector: "p-organizationChart", inputs: ["value", "style", "styleClass", "selectionMode", "preserveSpace", "selection"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse"] }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i7.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i7.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OrgChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'uxp-org-chart', template: "<div class={{customTheme}}>\r\n  <div class=\"container\">\r\n    <!-- Hamburger Menu -->\r\n    <button *ngIf=\"rucInputData.isDisplayHambergerMenu === true\" mat-icon-button [matMenuTriggerFor]=\"menu\" \r\n      class=\"left hamburger-button\">\r\n      <mat-icon>menu</mat-icon>\r\n    </button>\r\n  \r\n    <!-- Menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      <button *ngFor=\"let menu of rucInputData.hambergerMenuList\" mat-menu-item (click)=\"onMenuClick(menu.id, $event);\" \r\n      [id]=\"'menu-item-' + menu.id\">\r\n        {{ menu.label }}\r\n      </button>\r\n    </mat-menu>\r\n  \r\n    <!-- Search Bar -->\r\n    <mat-form-field *ngIf=\"rucInputData.isDisplaySearchBar === true\" class=\"search-box right\" \r\n      >\r\n      <mat-label>Search</mat-label>\r\n      <input matInput placeholder=\"Type to search...\" [(ngModel)]=\"searchText\" />\r\n      <mat-icon matSuffix>search</mat-icon>\r\n    </mat-form-field>\r\n  </div>\r\n  \r\n  \r\n  <div class=\"org-chart-container \" id=\"org-chart-data\">\r\n  <p-organizationChart #orgChart class=\"org-chart\" [value]=\"this.rucInputData.orgData\" selectionMode=\"multiple\"\r\n    [(selection)]=\"selectedNodes\">\r\n    <ng-template let-node pTemplate=\"person\">\r\n      <div *ngIf=\"this.rucInputData.nodeTemplate === 'portrait'\"  class=\"flex flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n        [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\"> \r\n        <div class=\"flex flex-col items-center\"  >\r\n          <span><img  *ngIf=\"node.data.image\" [src]=\"node.data.image\" class=\"portraitImageDimension\" /></span>\r\n          <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n          <div>{{ node.data.title }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  \r\n      <div *ngIf=\"this.rucInputData.nodeTemplate === 'triangle'\"  class=\"flex trianlge-up flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n        [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\"> \r\n        <div class=\"flex flex-col items-center\"  >\r\n          <div *ngIf=\"!node.data.image\" class=\"triangleImageDimension\">\r\n          </div>\r\n          <img *ngIf=\"node.data.image\" [src]=\"node.data.image\" class=\"triangleImageDimension\" />\r\n          <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n          <div>{{ node.data.title }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    <div *ngIf=\"this.rucInputData.nodeTemplate === 'landscape'\">\r\n      <div class=\"card borderSolidGrey\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\"\r\n      (mouseenter)=\"onNodeHover(node)\"\r\n      [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n        <div class=\"body\" >\r\n          <div class=\"icon\">\r\n            <img *ngIf=\"node.data.image\" [src]=\"node.data.image\" class=\"landscapeImageDimension\" />\r\n          </div>\r\n          <div class=\"content\">\r\n              <div>{{node.data.name}}</div>\r\n              <div>{{node.data.title}}</div>\r\n          </div>\r\n        </div> \r\n      </div>\r\n    </div>\r\n    </ng-template>\r\n  </p-organizationChart>\r\n  </div>\r\n  \r\n</div>", styles: [".org-chart-container{overflow-x:auto}.nodeContent{border:none;padding:1.5em;border-radius:\"8px\";background-color:none;color:#000}.card{display:flex;width:250px;height:100px;padding:24px;align-self:stretch;align-items:flex-start}.card .body{width:100%;display:flex}.card .body .icon{width:64px;height:64px}.trianlge-up{width:220px;background-color:#980104;clip-path:polygon(50% 0%,0% 100%,100% 100%)}mat-form-field{margin:10px}::ng-deep .p-organizationchart .p-organizationchart-node-content{border:none;background:none;color:#495057;padding:0!important}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler{background-color:#dee2e6;cursor:pointer}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{top:.2rem}.container{display:flex;justify-content:space-between;width:100%}.container .left{margin-right:auto}.container .right{margin-left:auto}mat-icon-button{margin-right:10px}.mat-form-field{margin-left:10px}.borderSolidGrey{border:1px solid lightgray}.landscapeImageDimension{width:3em;height:3em}.portraitImageDimension,.triangleImageDimension{margin-bottom:4px;width:3em;height:3em}\n"] }]
-        }], propDecorators: { rucInputData: [{
-                type: Input
-            }], customTheme: [{
-                type: Input
-            }], orgChart: [{
-                type: ViewChild,
-                args: ['orgChart', { static: false }]
+class RuclibOrgChartComponent {
+    constructor() {
+        this.searchText = '';
+        this.hoveredNode = null;
+    }
+    /** Initializes the component  */
+    ngOnInit() {
+        const updatedJson = this.addDefaultKeysIfNotAvailable(this.rucInputData);
+        this.rucInputData.orgData = this.updateRucInputData(updatedJson.orgData);
+        checkPropsType(this.rucInputData); // To check rucInputData is in correct format or not
+        this.expandAllNodes();
+    }
+    /** add default property for grey nodes if user does not provided */
+    addDefaultKeysIfNotAvailable(orgData) {
+        if (!orgData.hasOwnProperty('greyNodeStyle')) {
+            orgData.greyNodeStyle = {
+                backgroundColor: '#d3d3d3',
+                color: '#808080',
+            };
+        }
+        return orgData;
+    }
+    /** manipulate input json as If customNodeStyle exists, create originalStyle for node and its children  */
+    updateRucInputData(data) {
+        return data.map((node) => {
+            node['type'] = 'person';
+            if (node.customNodeStyle) {
+                node.originalStyle = { ...node.customNodeStyle };
+            }
+            if (node.children && node.children.length > 0) {
+                node['type'] = 'person';
+                node.children = this.updateRucInputData(node.children); // Recursive call
+            }
+            return node;
+        });
+    }
+    /** Expands all nodes in the org chart */
+    expandAllNodes() {
+        this.rucInputData.orgData = this.expandNodes(this.rucInputData.orgData);
+    }
+    /** Recursively expands all nodes in the given array
+     * @param nodes Nodes to expand @returns Expanded nodes */
+    expandNodes(nodes) {
+        return nodes.map((node) => ({
+            ...node,
+            expanded: true,
+            children: node.children ? this.expandNodes(node.children) : [],
+        }));
+    }
+    /** Collapses all nodes in the org chart   */
+    collapseAllNodes() {
+        this.rucInputData.orgData = this.collapseNodes(this.rucInputData.orgData);
+    }
+    /** Recursively collapses all nodes in the given array
+     * @param nodes Nodes to collapse @returns Collapsed nodes  */
+    collapseNodes(nodes) {
+        return nodes.map((node) => ({
+            ...node,
+            expanded: false,
+            children: node.children ? this.collapseNodes(node.children) : [],
+        }));
+    }
+    /** Gets the background color of a node based on search text
+      @param node Node to check @returns Whether the node matches the search text */
+    getBackgroungColorOfNode(node) {
+        return (!this.searchText ||
+            node.data.title.toLowerCase().includes(this.searchText.toLowerCase()) ||
+            node.data.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
+            node.label?.toLowerCase().includes(this.searchText.toLowerCase()));
+    }
+    /** Handles node hover event @param node Hovered node */
+    onNodeHover(node) {
+        if (this.searchText)
+            return;
+        this.hoveredNode = node;
+        this.updateNodeStyles();
+    }
+    /** Handles node leave event */
+    onNodeLeave() {
+        this.hoveredNode = null;
+        this.resetNodeStyles();
+    }
+    /**   Updates node styles based on the hovered node */
+    updateNodeStyles() {
+        this.applyStyles(this.rucInputData.orgData, true);
+    }
+    /**   Resets node styles to their original state */
+    resetNodeStyles() {
+        this.applyStyles(this.rucInputData.orgData, false);
+    }
+    /** Applies grey node style to non-matching nodes @param nodes Nodes to apply styles to */
+    applyGreyNodes(nodes) {
+        nodes.forEach((node) => {
+            const isMatching = this.searchText
+                ? node.data?.title.includes(this.searchText)
+                : false;
+            node.customNodeStyle = isMatching
+                ? node.customNodeStyle || node.originalStyle
+                : {
+                    ...node.originalStyle,
+                    backgroundColor: this.rucInputData.greyNodeStyle.backgroundColor,
+                    color: this.rucInputData.greyNodeStyle.color,
+                };
+            if (node.children) {
+                this.applyGreyNodes(node.children);
+            }
+        });
+    }
+    /** Applies styles to nodes based on the hovered node
+     * @param nodes Nodes to apply styles @param isHovered Whether the node is hovered */
+    applyStyles(nodes, isHovered) {
+        nodes.forEach((node) => {
+            if (isHovered) {
+                node.customNodeStyle =
+                    node === this.hoveredNode ||
+                        this.isParent(node, this.hoveredNode) ||
+                        this.isChild(node, this.hoveredNode)
+                        ? node.customNodeStyle || node.originalStyle
+                        : {
+                            ...node.originalStyle,
+                            backgroundColor: this.rucInputData.greyNodeStyle.backgroundColor,
+                            color: this.rucInputData.greyNodeStyle.color,
+                        };
+            }
+            else {
+                node.customNodeStyle = node.originalStyle;
+            }
+            if (node.children) {
+                this.applyStyles(node.children, isHovered);
+            }
+        });
+    }
+    /**  Use the downloadChart utility method */
+    downloadChart(format) {
+        const chartContainer = this.orgChart.el.nativeElement;
+        downloadChart(chartContainer, format); // Calls the utility function
+    }
+    /** Handles menu click event @param id Menu item ID  */
+    onMenuClick(id, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        switch (id) {
+            case 1:
+                this.downloadChart('pdf');
+                break;
+            case 2:
+                this.downloadChart('png');
+                break;
+            case 3:
+                this.downloadChart('jpeg');
+                break;
+            case 4:
+                this.expandAllNodes();
+                break;
+            case 5:
+                this.collapseAllNodes();
+                break;
+            default:
+                console.warn(`Unknown menu item ID: ${id}. Please enter valid id.`);
+                break;
+        }
+    }
+    /** Gets tooltip data for a node @param node Node to get tooltip data */
+    getTooltipData(node) {
+        return node.description || '';
+    }
+    /** Checks if a node is a parent of another node.
+     * @param currentNode The current node to check.
+     * @param hoveredNode The node to check for parentage.
+     * @returns Whether the current node is a parent of the hovered node. */
+    isParent(currentNode, hoveredNode) {
+        return hoveredNode && currentNode.children?.includes(hoveredNode);
+    }
+    /** Checks if a node is a child of another node.
+     * @param node The node to check for child status
+     * @param target The node to check for parentage.
+     * @returns Whether the node is a child of the target node.*/
+    isChild(node, target) {
+        return target && target.children?.includes(node);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibOrgChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibOrgChartComponent, isStandalone: true, selector: "uxp-ruclib-org-chart", inputs: { rucInputData: "rucInputData", customTheme: "customTheme" }, viewQueries: [{ propertyName: "orgChart", first: true, predicate: ["orgChart"], descendants: true }], ngImport: i0, template: "<div class={{customTheme}}>\r\n  <div class=\"container\">\r\n    <!-- Hamburger Menu -->\r\n    @if (rucInputData.isDisplayHambergerMenu === true) {\r\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\"\r\n        class=\"left hamburger-button\">\r\n        <mat-icon>menu</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <!-- Menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      @for (menu of rucInputData.hambergerMenuList; track menu) {\r\n        <button mat-menu-item (click)=\"onMenuClick(menu.id, $event);\"\r\n          [id]=\"'menu-item-' + menu.id\">\r\n          {{ menu.label }}\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n\r\n    <!-- Search Bar -->\r\n    @if (rucInputData.isDisplaySearchBar === true) {\r\n      <mat-form-field class=\"search-box right\"\r\n        >\r\n        <mat-label>Search</mat-label>\r\n        <input matInput placeholder=\"Type to search...\" [(ngModel)]=\"searchText\" />\r\n        <mat-icon matSuffix>search</mat-icon>\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"org-chart-container \" id=\"org-chart-data\">\r\n    <p-organizationChart #orgChart class=\"org-chart\" [value]=\"this.rucInputData.orgData\" selectionMode=\"multiple\"\r\n      [(selection)]=\"selectedNodes\">\r\n      <ng-template let-node pTemplate=\"person\">\r\n        @if (this.rucInputData.nodeTemplate === 'portrait') {\r\n          <div  class=\"flex flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n            [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n            <div class=\"flex flex-col items-center\"  >\r\n              <span>@if (node.data.image) {\r\n                <img  [src]=\"node.data.image\" class=\"portraitImageDimension\" />\r\n              }</span>\r\n              <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n              <div>{{ node.data.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (this.rucInputData.nodeTemplate === 'triangle') {\r\n          <div  class=\"flex trianlge-up flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n            [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n            <div class=\"flex flex-col items-center\"  >\r\n              @if (!node.data.image) {\r\n                <div class=\"triangleImageDimension\">\r\n                </div>\r\n              }\r\n              @if (node.data.image) {\r\n                <img [src]=\"node.data.image\" class=\"triangleImageDimension\" />\r\n              }\r\n              <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n              <div>{{ node.data.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (this.rucInputData.nodeTemplate === 'landscape') {\r\n          <div>\r\n            <div class=\"card borderSolidGrey\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\"\r\n              (mouseenter)=\"onNodeHover(node)\"\r\n              [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n              <div class=\"body\" >\r\n                <div class=\"icon\">\r\n                  @if (node.data.image) {\r\n                    <img [src]=\"node.data.image\" class=\"landscapeImageDimension\" />\r\n                  }\r\n                </div>\r\n                <div class=\"content\">\r\n                  <div>{{node.data.name}}</div>\r\n                  <div>{{node.data.title}}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n    </p-organizationChart>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".org-chart-container{overflow-x:auto}.nodeContent{border:none;padding:1.5em;border-radius:\"8px\";background-color:none;color:#000}.card{display:flex;width:250px;height:100px;padding:24px;align-self:stretch;align-items:flex-start}.card .body{width:100%;display:flex}.card .body .icon{width:64px;height:64px}.trianlge-up{width:220px;background-color:#980104;clip-path:polygon(50% 0%,0% 100%,100% 100%)}mat-form-field{margin:10px}::ng-deep .p-organizationchart .p-organizationchart-node-content{border:none;background:none;color:#495057;padding:0!important}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler{background-color:#dee2e6;cursor:pointer}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{top:.2rem}.container{display:flex;justify-content:space-between;width:100%}.container .left{margin-right:auto}.container .right{margin-left:auto}mat-icon-button{margin-right:10px}.mat-form-field{margin-left:10px}.borderSolidGrey{border:1px solid lightgray}.landscapeImageDimension{width:3em;height:3em}.portraitImageDimension,.triangleImageDimension{margin-bottom:4px;width:3em;height:3em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: OrganizationChartModule }, { kind: "component", type: i7.OrganizationChart, selector: "p-organizationChart", inputs: ["value", "style", "styleClass", "selectionMode", "collapsible", "preserveSpace", "selection"], outputs: ["selectionChange", "onNodeSelect", "onNodeUnselect", "onNodeExpand", "onNodeCollapse"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibOrgChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-org-chart', imports: [CommonModule, MatIconModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatMenuModule, OrganizationChartModule, FormsModule], template: "<div class={{customTheme}}>\r\n  <div class=\"container\">\r\n    <!-- Hamburger Menu -->\r\n    @if (rucInputData.isDisplayHambergerMenu === true) {\r\n      <button mat-icon-button [matMenuTriggerFor]=\"menu\"\r\n        class=\"left hamburger-button\">\r\n        <mat-icon>menu</mat-icon>\r\n      </button>\r\n    }\r\n\r\n    <!-- Menu -->\r\n    <mat-menu #menu=\"matMenu\">\r\n      @for (menu of rucInputData.hambergerMenuList; track menu) {\r\n        <button mat-menu-item (click)=\"onMenuClick(menu.id, $event);\"\r\n          [id]=\"'menu-item-' + menu.id\">\r\n          {{ menu.label }}\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n\r\n    <!-- Search Bar -->\r\n    @if (rucInputData.isDisplaySearchBar === true) {\r\n      <mat-form-field class=\"search-box right\"\r\n        >\r\n        <mat-label>Search</mat-label>\r\n        <input matInput placeholder=\"Type to search...\" [(ngModel)]=\"searchText\" />\r\n        <mat-icon matSuffix>search</mat-icon>\r\n      </mat-form-field>\r\n    }\r\n  </div>\r\n\r\n\r\n  <div class=\"org-chart-container \" id=\"org-chart-data\">\r\n    <p-organizationChart #orgChart class=\"org-chart\" [value]=\"this.rucInputData.orgData\" selectionMode=\"multiple\"\r\n      [(selection)]=\"selectedNodes\">\r\n      <ng-template let-node pTemplate=\"person\">\r\n        @if (this.rucInputData.nodeTemplate === 'portrait') {\r\n          <div  class=\"flex flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n            [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n            <div class=\"flex flex-col items-center\"  >\r\n              <span>@if (node.data.image) {\r\n                <img  [src]=\"node.data.image\" class=\"portraitImageDimension\" />\r\n              }</span>\r\n              <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n              <div>{{ node.data.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (this.rucInputData.nodeTemplate === 'triangle') {\r\n          <div  class=\"flex trianlge-up flex-col nodeContent\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\" (mouseenter)=\"onNodeHover(node)\"\r\n            [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n            <div class=\"flex flex-col items-center\"  >\r\n              @if (!node.data.image) {\r\n                <div class=\"triangleImageDimension\">\r\n                </div>\r\n              }\r\n              @if (node.data.image) {\r\n                <img [src]=\"node.data.image\" class=\"triangleImageDimension\" />\r\n              }\r\n              <div class=\"font-bold mb-2\">{{ node.data.name }}</div>\r\n              <div>{{ node.data.title }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n        @if (this.rucInputData.nodeTemplate === 'landscape') {\r\n          <div>\r\n            <div class=\"card borderSolidGrey\" [ngStyle]=\"getBackgroungColorOfNode(node) ? node.customNodeStyle : rucInputData.greyNodeStyle\"\r\n              (mouseenter)=\"onNodeHover(node)\"\r\n              [title]=\"getTooltipData(node)\" (mouseleave)=\"onNodeLeave()\">\r\n              <div class=\"body\" >\r\n                <div class=\"icon\">\r\n                  @if (node.data.image) {\r\n                    <img [src]=\"node.data.image\" class=\"landscapeImageDimension\" />\r\n                  }\r\n                </div>\r\n                <div class=\"content\">\r\n                  <div>{{node.data.name}}</div>\r\n                  <div>{{node.data.title}}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        }\r\n      </ng-template>\r\n    </p-organizationChart>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".org-chart-container{overflow-x:auto}.nodeContent{border:none;padding:1.5em;border-radius:\"8px\";background-color:none;color:#000}.card{display:flex;width:250px;height:100px;padding:24px;align-self:stretch;align-items:flex-start}.card .body{width:100%;display:flex}.card .body .icon{width:64px;height:64px}.trianlge-up{width:220px;background-color:#980104;clip-path:polygon(50% 0%,0% 100%,100% 100%)}mat-form-field{margin:10px}::ng-deep .p-organizationchart .p-organizationchart-node-content{border:none;background:none;color:#495057;padding:0!important}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler{background-color:#dee2e6;cursor:pointer}::ng-deep .p-organizationchart .p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon{top:.2rem}.container{display:flex;justify-content:space-between;width:100%}.container .left{margin-right:auto}.container .right{margin-left:auto}mat-icon-button{margin-right:10px}.mat-form-field{margin-left:10px}.borderSolidGrey{border:1px solid lightgray}.landscapeImageDimension{width:3em;height:3em}.portraitImageDimension,.triangleImageDimension{margin-bottom:4px;width:3em;height:3em}\n"] }]
+        }], propDecorators: { rucInputData: [{
+                type: Input
+            }], customTheme: [{
+                type: Input
+            }], orgChart: [{
+                type: ViewChild,
+                args: ['orgChart', { static: false }]
             }] } });
 
-class RuclibOrgChartModule {
-}
-RuclibOrgChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibOrgChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuclibOrgChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibOrgChartModule, declarations: [OrgChartComponent], imports: [CommonModule, ButtonModule, BrowserModule, FormsModule, OrganizationChartModule, MatInputModule, MatMenuModule, MatButtonModule, MatIconModule], exports: [OrgChartComponent] });
-RuclibOrgChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibOrgChartModule, imports: [CommonModule, ButtonModule, BrowserModule, FormsModule, OrganizationChartModule, MatInputModule, MatMenuModule, MatButtonModule, MatIconModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibOrgChartModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, ButtonModule, BrowserModule, FormsModule, OrganizationChartModule, MatInputModule, MatMenuModule, MatButtonModule, MatIconModule],
-                    declarations: [OrgChartComponent],
-                    exports: [OrgChartComponent]
-                }]
-        }] });
-
-// export * from './services/org-chart.service';
-
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { OrgChartComponent, RuclibOrgChartModule };
+export { RuclibOrgChartComponent };
 //# sourceMappingURL=ruc-lib-org-chart.mjs.map