From bee86061aa1f168a64a171687c7977e6765ccc02 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 26 Apr 2024 01:54:53 +0300
Subject: [PATCH] Refactored org chart

---
 .../style/OrganizationChartStyle.js           | 16 +++++-----
 .../primeone/base/organizationchart/index.js  | 30 +++++++++----------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/components/lib/organizationchart/style/OrganizationChartStyle.js b/components/lib/organizationchart/style/OrganizationChartStyle.js
index 95823b802..80c9d0fa1 100644
--- a/components/lib/organizationchart/style/OrganizationChartStyle.js
+++ b/components/lib/organizationchart/style/OrganizationChartStyle.js
@@ -3,14 +3,14 @@ import BaseStyle from 'primevue/base/style';
 const classes = {
     root: 'p-organizationchart p-component',
     table: 'p-organizationchart-table',
-    node: ({ instance }) => ['p-organizationchart-node-content', { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
-    nodeToggler: 'p-node-toggler',
-    nodeTogglerIcon: 'p-node-toggler-icon',
-    lines: 'p-organizationchart-lines',
-    lineDown: 'p-organizationchart-line-down',
-    lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }],
-    lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }],
-    nodes: 'p-organizationchart-nodes'
+    node: ({ instance }) => ['p-organizationchart-node', { 'p-organizationchart-node-selectable': instance.selectable, 'p-highlight': instance.selected }],
+    nodeToggler: 'p-organizationchart-node-toggle-button',
+    nodeTogglerIcon: 'p-organizationchart-node-toggle-button-icon',
+    lines: 'p-organizationchart-connectors',
+    lineDown: 'p-organizationchart-connector-down',
+    lineLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
+    lineRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
+    nodes: 'p-organizationchart-node-children'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/organizationchart/index.js b/components/lib/themes/primeone/base/organizationchart/index.js
index 86b06db9b..9280f39aa 100644
--- a/components/lib/themes/primeone/base/organizationchart/index.js
+++ b/components/lib/themes/primeone/base/organizationchart/index.js
@@ -12,7 +12,7 @@ export default {
     padding: 0 0.75rem;
 }
 
-.p-organizationchart-node-content {
+.p-organizationchart-node {
     display: inline-block;
     position: relative;
     border: 1px solid ${dt('organizationchart.node.border.color')};
@@ -23,21 +23,21 @@ export default {
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
 }
 
-.p-organizationchart-node-content:has(.p-node-toggler) {
+.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
     padding: 0.75rem 1rem 1.25rem 1rem;
 }
 
-.p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
+.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-highlight):hover {
     background: ${dt('organizationchart.node.hover.background')};
     color: ${dt('organizationchart.node.hover.color')};
 }
 
-.p-organizationchart-node-content.p-highlight {
+.p-organizationchart-node.p-highlight {
     background: ${dt('highlight.background')};
     color: ${dt('highlight.color')};
 }
 
-.p-organizationchart-node-content .p-node-toggler {
+.p-organizationchart-node-toggle-button {
     position: absolute;
     bottom: -0.75rem;
     margin-left: -0.75rem;
@@ -59,51 +59,51 @@ export default {
     transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
 }
 
-.p-organizationchart-node-content .p-node-toggler:focus-visible {
+.p-organizationchart-node-toggle-button:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};
 }
 
-.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
+.p-organizationchart-node-toggle-button-icon {
     position: relative;
     top: 1px;
 }
 
-.p-organizationchart-line-down {
+.p-organizationchart-connector-down {
     margin: 0 auto;
     height: 20px;
     width: 1px;
     background: ${dt('organizationchart.connector.color')};
 }
 
-.p-organizationchart-line-right {
+.p-organizationchart-connector-right {
     border-radius: 0;
     border-left: 1px solid ${dt('organizationchart.connector.color')};
     border-top-left-radius: ${dt('rounded.base')};
 }
 
-.p-organizationchart-line-left {
+.p-organizationchart-connector-left {
     border-radius: 0;
     border-right: 1px solid ${dt('organizationchart.connector.color')};
 }
 
-.p-organizationchart-line-top {
+.p-organizationchart-connector-top {
     border-top: 1px solid ${dt('organizationchart.connector.color')};
 }
 
-.p-organizationchart-selectable-node {
+.p-organizationchart-node-selectable {
     cursor: pointer;
 }
 
-.p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-left) {
+.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
     border-right: 0 none;
 }
 
-.p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) {
+.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
     border-top-right-radius: ${dt('rounded.base')};
 }
 
-.p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) {
+.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
     border-left: 1px solid ${dt('organizationchart.connector.color')};
     border-top-left-radius: ${dt('rounded.base')};
 }