orgchart 3.6.0 → 3.8.0

package/dist/css/jquery.orgchart.min.css

@@ -1 +1 @@
-.orgchart{box-sizing:border-box;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:linear-gradient(90deg,rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%),linear-gradient(rgba(200,0,0,.15) 10%,rgba(0,0,0,0) 10%);background-size:10px 10px;border:1px dashed transparent;padding:20px 20px 0 20px}.orgchart .hidden,.orgchart~.hidden{display:none!important}.orgchart.b2t{transform:rotate(180deg)}.orgchart.l2r{position:absolute;transform:rotate(-90deg) rotateY(180deg);transform-origin:left top;text-align:center}.orgchart.r2l{position:absolute;transform:rotate(90deg);transform-origin:left top;text-align:center}.orgchart~.mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:999;text-align:center;background-color:rgba(0,0,0,.3)}.orgchart~.mask .spinner{position:absolute;top:calc(50% - 50px);left:calc(50% - 50px)}.orgchart>.spinner::before,.orgchart~.mask .spinner::before{width:100px;height:100px;border-width:10px;border-radius:50px;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .nodes{display:flex;list-style:none;padding-left:0;margin:0}.orgchart .hierarchy{position:relative}.orgchart .hierarchy::before{content:"";position:absolute;top:-11px;left:0;width:100%;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box}.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,.orgchart .hierarchy:first-child::before{left:calc(50% - 1px);width:calc(50% + 1px)}.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,.orgchart .hierarchy:last-child::before{width:calc(50% + 1px)}.orgchart .hierarchy:not(.hidden):only-child::before{width:2px}.orgchart .isAncestorsCollapsed:only-child::before,.orgchart .isAncestorsCollapsed>.node::before,.orgchart .isChildrenCollapsed>.node:not(:only-child)::after,.orgchart .isCollapsedDescendant::before,.orgchart .isCollapsedDescendant>.node::after,.orgchart .isCollapsedDescendant>.node::before,.orgchart .isCollapsedSibling .hierarchy::before,.orgchart .isCollapsedSibling::before,.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,.orgchart>.nodes>.hierarchy::before{content:none}.orgchart .node:not(:only-child)::after{content:"";position:absolute;bottom:-11px;left:calc(50% - 1px);width:2px;height:9px;background-color:rgba(217,83,79,.8)}.orgchart ul li .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart ul li .node.currentDropTarget{background-color:rgba(68,157,68,.9)}.orgchart ul li .node.selected{background-color:rgba(238,217,54,.5)}.orgchart ul li .node:hover{background-color:rgba(238,217,54,.5)}.orgchart>ul>li>ul li>.node::before{content:"";position:absolute;top:var(--top,-11px);left:calc(50% - 1px);width:2px;height:var(--height,9px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-13px);height:var(--height-cross-point,11px)}.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center}.orgchart.l2r .node,.orgchart.r2l .node{width:50px;height:140px}.orgchart .node:hover{background-color:rgba(238,217,54,.5);transition:.5s;cursor:default;z-index:20}.orgchart .node.focused{background-color:rgba(238,217,54,.5)}.orgchart .ghost-node{position:fixed;left:-10000px;top:-10000px}.orgchart .ghost-node rect{fill:#fff;stroke:#bf0000}.orgchart .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart .node>.spinner{position:absolute;top:calc(50% - 1rem);left:calc(50% - 1rem)}.orgchart .node>.spinner::before{width:2rem;height:2rem;border-width:.2rem;border-radius:1rem;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .node .title{box-sizing:border-box;padding:2px;width:130px;text-align:center;font-size:.75rem;font-weight:700;height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217,83,79,.8);color:#fff;border-radius:4px 4px 0 0}.orgchart.b2t .node .title{transform:rotate(-180deg);transform-origin:center bottom}.orgchart.l2r .node .title{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:bottom center}.orgchart.r2l .node .title{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:bottom center}.orgchart .node .title .symbol{float:left;margin-top:12px;margin-left:2px}.orgchart .node .title .symbol::before{background-color:#fff;border-color:rgba(217,83,79,.8)}.orgchart .node .title .symbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;padding:2px;height:20px;font-size:.625rem;border:1px solid rgba(217,83,79,.8);border-radius:0 0 4px 4px;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap}.orgchart.b2t .node .content{transform:rotate(180deg);transform-origin:center top}.orgchart.l2r .node .content{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:top center;width:130px}.orgchart.r2l .node .content{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:top center;width:130px}.orgchart .node .edge{position:absolute;cursor:default;transition:.2s}.orgchart .node .edge::before{border-color:rgba(68,157,68,.5)}.orgchart.noncollapsable .node .edge{display:none}.orgchart .node .edge:hover{cursor:pointer}.orgchart .edge:hover::before{border-color:#449d44}.orgchart .node .verticalEdge{width:calc(100% - 6px);width:-webkit-calc(100% - 6px);width:-moz-calc(100% - 6px);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - .3125rem)}.orgchart .node .topEdge{top:-2px}.orgchart .node .topEdge.oci-chevron-up::before{top:2px}.orgchart .node .topEdge.oci-chevron-down::before{bottom:3px}.orgchart .node .bottomEdge{bottom:-2px}.orgchart .node .bottomEdge.oci-chevron-up::before{bottom:-3px}.orgchart .node .bottomEdge.oci-chevron-down::before{bottom:1px}.orgchart .node .horizontalEdge{width:10px;height:calc(100% - 6px);height:-webkit-calc(100% - 6px);height:-moz-calc(100% - 6px);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - .3125rem)}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .toggleBtn{position:absolute;left:5px;bottom:-2px;width:1rem;height:1rem}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6)}.orgchart .node .toggleBtn:hover::before{background-color:#449d44}.oc-export-btn{margin-left:.5rem;padding:.5rem 1rem}.orgchart .node{transition:transform .3s,opacity .3s}.orgchart .slide-down{opacity:0;transform:translateY(40px)}.orgchart.l2r .node.slide-down,.orgchart.r2l .node.slide-down{transform:translateY(130px)}.orgchart .slide-up{opacity:0;transform:translateY(-40px)}.orgchart.l2r .node.slide-up,.orgchart.r2l .node.slide-up{transform:translateY(-130px)}.orgchart .slide-right{opacity:0;transform:translateX(130px)}.orgchart.l2r .node.slide-right,.orgchart.r2l .node.slide-right{transform:translateX(40px)}.orgchart .slide-left{opacity:0;transform:translateX(-130px)}.orgchart.l2r .node.slide-left,.orgchart.r2l .node.slide-left{transform:translateX(-40px)}.orgchart .nodes.vertical{display:block;padding-left:18px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:18px;text-align:left}.orgchart .nodes.vertical .node{margin-bottom:0}.orgchart .nodes.vertical .node::after,.orgchart .nodes.vertical .node::before{content:none}.orgchart .nodes.vertical>.hierarchy:first-child::before{box-sizing:border-box;top:-11px;height:35px;width:calc(50% - 2px);border-width:2px 0 0 2px}.orgchart .nodes.vertical .hierarchy{position:relative;text-align:left}.orgchart .nodes.vertical .hierarchy::after,.orgchart .nodes.vertical .hierarchy::before{box-sizing:border-box;content:'';position:absolute;left:-6px;border-color:rgba(217,83,79,.8);border-style:solid;border-width:0 0 2px 2px}.orgchart .nodes.vertical .hierarchy::before{top:-4px;height:30px;width:11px}.orgchart .nodes.vertical .hierarchy::after{top:1px;height:100%}.orgchart .nodes.vertical .hierarchy:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical .hierarchy:last-child::after{box-sizing:border-box;border-width:2px 0 0}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-chevron-up::before{content:"";display:inline-block;box-sizing:border-box;vertical-align:text-bottom;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(-135deg)}.oci-chevron-right::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(-45deg)}.oci-chevron-down::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(45deg)}.oci-chevron-left::before{content:"";display:inline-block;box-sizing:border-box;width:.625rem;height:.625rem;border-width:0 .2rem .2rem 0;border-style:solid;border-color:#000;background:0 0;transform:rotate(135deg)}.oci-leader::before{position:absolute;content:"";display:inline-block;width:.4rem;height:.4rem;border-radius:.2rem;background:#000;top:-.75rem;left:.1rem}.oci-leader::after{position:absolute;content:"";display:inline-block;width:.875rem;height:.375rem;border-radius:.25rem .25rem 0 0;background:#000;top:-.3rem;left:-.125rem}.oci-plus-square::before{content:"+";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;background-color:#000;color:#fff}.oci-plus-circle::before{content:"+";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff}.oci-minus-square::before{content:"−";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;background-color:#000;color:#fff}.oci-minus-circle::before{content:"−";display:inline-block;vertical-align:text-bottom;text-align:center;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff}.oci-arrow-circle-up::before{content:"▲";display:inline-block;text-align:center;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.875rem}.oci-arrow-circle-down::before{content:"▼";text-align:center;display:inline-block;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;font-size:.875rem}.oci-info-circle::before{content:"i";display:inline-block;vertical-align:text-bottom;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;text-align:center;font-weight:700}.oci-spinner::before{content:"";vertical-align:text-bottom;display:inline-block;box-sizing:border-box;width:1rem;height:1rem;border:.1rem solid #000;border-right-color:transparent;border-radius:.625rem;animation:oci-infinite-spinning .75s linear infinite}@keyframes oci-infinite-spinning{from{transform:rotate(0)}to{transform:rotate(360deg)}}
+.orgchart{box-sizing:border-box;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:linear-gradient(to top,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to right,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to bottom,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%),linear-gradient(to left,rgba(200,0,0,.15) 5%,rgba(0,0,0,0) 5%);background-size:10px 10px;padding:20px 20px 0 20px}.orgchart .hidden,.orgchart~.hidden{display:none!important}.orgchart.b2t{transform:rotate(180deg)}.orgchart.l2r{position:absolute;transform:rotate(-90deg) rotateY(180deg);transform-origin:left top;text-align:center}.orgchart.r2l{position:absolute;transform:rotate(90deg);transform-origin:left top;text-align:center}.orgchart~.mask{position:absolute;top:0;right:0;bottom:0;left:0;z-index:999;text-align:center;background-color:rgba(0,0,0,.3)}.orgchart~.mask .spinner{position:absolute;top:calc(50% - 50px);left:calc(50% - 50px)}.orgchart>.spinner::before,.orgchart~.mask .spinner::before{width:100px;height:100px;border-width:10px;border-radius:50px;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .nodes{display:flex;list-style:none;padding-left:0;margin:0}.orgchart .hierarchy{position:relative}.orgchart .hierarchy::before{content:"";position:absolute;top:-11px;left:0;width:100%;border-top:2px solid rgba(217,83,79,.8);box-sizing:border-box}.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before,.orgchart .hierarchy:first-child::before{left:calc(50% - 1px);width:calc(50% + 1px)}.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before,.orgchart .hierarchy:last-child::before{width:calc(50% + 1px)}.orgchart .hierarchy:not(.hidden):only-child::before{width:2px}.orgchart .isAncestorsCollapsed:only-child::before,.orgchart .isAncestorsCollapsed>.node::before,.orgchart .isChildrenCollapsed>.node:not(:only-child)::after,.orgchart .isCollapsedDescendant::before,.orgchart .isCollapsedDescendant>.node::after,.orgchart .isCollapsedDescendant>.node::before,.orgchart .isCollapsedSibling .hierarchy::before,.orgchart .isCollapsedSibling::before,.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,.orgchart>.nodes>.hierarchy::before{content:none}.orgchart .node:not(:only-child)::after{content:"";position:absolute;bottom:-12px;left:calc(50% - 1px);width:2px;height:10px;background-color:rgba(217,83,79,.8)}.orgchart ul li .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart ul li .node.currentDropTarget{background-color:rgba(68,157,68,.9)}.orgchart ul li .node.selected{background-color:rgba(238,217,54,.5)}.orgchart ul li .node:hover{background-color:rgba(238,217,54,.5)}.orgchart>ul>li>ul li>.node::before{content:"";position:absolute;top:var(--top,-12px);left:calc(50% - 1px);width:2px;height:var(--height,10px);background-color:rgba(217,83,79,.8)}.orgchart>ul>li>ul li.isSiblingsCollapsed>.node::before{top:var(--top-cross-point,-12px);height:var(--height-cross-point,10px)}.orgchart .node{box-sizing:border-box;display:inline-block;position:relative;margin:0 0 20px 0;padding:3px;border:2px dashed transparent;text-align:center}.orgchart.l2r .node,.orgchart.r2l .node{width:50px;height:140px}.orgchart .node:hover{background-color:rgba(238,217,54,.5);transition:.5s;cursor:default;z-index:20}.orgchart .node.focused{background-color:rgba(238,217,54,.5)}.orgchart .ghost-node{position:fixed;left:-10000px;top:-10000px}.orgchart .ghost-node rect{fill:#fff;stroke:#bf0000}.orgchart .node.allowedDrop{border-color:rgba(68,157,68,.9)}.orgchart .node>.spinner{position:absolute;top:calc(50% - 1rem);left:calc(50% - 1rem)}.orgchart .node>.spinner::before{width:2rem;height:2rem;border-width:.2rem;border-radius:1rem;border-top-color:rgba(68,157,68,.8);border-bottom-color:rgba(68,157,68,.8);border-left-color:rgba(68,157,68,.8)}.orgchart .node .title{box-sizing:border-box;width:130px;text-align:center;font-size:12px;font-weight:700;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:rgba(217,83,79,.8);color:#fff;border-radius:4px 4px 0 0}.orgchart.b2t .node .title{transform:rotate(-180deg);transform-origin:center bottom}.orgchart.l2r .node .title{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:bottom center}.orgchart.r2l .node .title{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:bottom center}.orgchart .node .title .parentNodeSymbol{float:left}.orgchart .node .title .parentNodeSymbol::before{color:#fff}.orgchart .node .title .parentNodeSymbol::after{background-color:#fff}.orgchart .node .content{box-sizing:border-box;width:130px;height:20px;line-height:20px;font-size:10px;border:1px solid rgba(217,83,79,.8);border-width:0 1px 1px 1px;border-radius:0 0 .25rem .25rem;text-align:center;background-color:#fff;color:#333;text-overflow:ellipsis;white-space:nowrap}.orgchart.b2t .node .content{transform:rotate(180deg);transform-origin:center top}.orgchart.l2r .node .content{transform:rotate(-90deg) translate(-45px,-45px) rotateY(180deg);transform-origin:top center;width:130px}.orgchart.r2l .node .content{transform:rotate(-90deg) translate(-45px,-45px);transform-origin:top center;width:130px}.orgchart .node .edge{position:absolute;cursor:default;transition:.2s}.orgchart .node .edge::before{border-color:rgba(68,157,68,.5)}.orgchart.noncollapsable .node .edge{display:none}.orgchart .node .edge:hover{cursor:pointer}.orgchart .edge:hover::before{border-color:#449d44}.orgchart .node .verticalEdge{width:calc(100% - 6px);height:10px;left:3px}.orgchart .node .verticalEdge::before{position:absolute;left:calc(50% - 5px)}.orgchart .node .topEdge{top:-2px}.orgchart .node .topEdge.oci-chevron-up::before{top:2px}.orgchart .node .topEdge.oci-chevron-down::before{bottom:3px}.orgchart .node .bottomEdge{bottom:-2px}.orgchart .node .bottomEdge.oci-chevron-up::before{bottom:-3px}.orgchart .node .bottomEdge.oci-chevron-down::before{bottom:1px}.orgchart .node .horizontalEdge{width:10px;height:calc(100% - 6px);top:3px}.orgchart .node .rightEdge{right:-2px}.orgchart .node .leftEdge{left:-2px}.orgchart .node .horizontalEdge::before{position:absolute;top:calc(50% - 5px)}.orgchart .node .leftEdge.oci-chevron-right::before{left:-3px}.orgchart .node .leftEdge.oci-chevron-left::before{left:1px}.orgchart .node .rightEdge.oci-chevron-left::before{right:-3px}.orgchart .node .rightEdge.oci-chevron-right::before{right:1px}.orgchart .node .toggleBtn{position:absolute;left:-2px;bottom:-2px;width:16px;height:16px}.orgchart .node .toggleBtn::before{background-color:rgba(68,157,68,.6);position:absolute;left:0;bottom:0}.orgchart .node .toggleBtn:hover::before{background-color:#449d44}.oc-export-btn{margin-left:.5rem;padding:.5rem 1rem}.orgchart .node{transition:transform .3s,opacity .3s}.orgchart .slide-down{opacity:0;transform:translateY(40px)}.orgchart.l2r .node.slide-down,.orgchart.r2l .node.slide-down{transform:translateY(130px)}.orgchart .slide-up{opacity:0;transform:translateY(-40px)}.orgchart.l2r .node.slide-up,.orgchart.r2l .node.slide-up{transform:translateY(-130px)}.orgchart .slide-right{opacity:0;transform:translateX(130px)}.orgchart.l2r .node.slide-right,.orgchart.r2l .node.slide-right{transform:translateX(40px)}.orgchart .slide-left{opacity:0;transform:translateX(-130px)}.orgchart.l2r .node.slide-left,.orgchart.r2l .node.slide-left{transform:translateX(-40px)}.orgchart .nodes.vertical{display:block;padding-left:10px}.orgchart .nodes.vertical .nodes{list-style:none;display:block;margin:0;padding-left:10px;text-align:left}.orgchart .nodes.vertical .node{margin-bottom:0}.orgchart .nodes.vertical .node::after,.orgchart .nodes.vertical .node::before{content:none}.orgchart .nodes.vertical .hierarchy{position:relative;text-align:left}.orgchart .nodes.vertical .hierarchy::after,.orgchart .nodes.vertical .hierarchy::before{box-sizing:border-box;content:'';position:absolute;left:-6px;border-color:rgba(217,83,79,.8);border-style:solid;border-width:0 0 2px 2px}.orgchart .nodes.vertical .hierarchy::before{top:0;height:26px;width:11px}.orgchart .nodes.vertical .hierarchy::after{bottom:0;height:calc(100% - 24px)}.orgchart .nodes.vertical .hierarchy:last-child::after{border-width:2px 0 0 0}.orgchart .nodes.vertical>.hierarchy:first-child::before{box-sizing:border-box;top:-11px;height:35px;width:calc(50% + 2px);border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child::after{box-sizing:border-box;top:24px;width:11px;border-width:2px 0 0 2px}.orgchart .nodes.vertical>.hierarchy:first-child:last-child::after{border-width:2px 0 0 0}.orgchart .hierarchy>.node.compact{position:static;display:grid;width:140px;height:50px;overflow:hidden;background-color:#eee}.orgchart .node.compact.even,.orgchart .node.compact.even:hover{background-color:#eee}.orgchart .node.compact.odd,.orgchart .node.compact.odd:hover{background-color:#fff}.orgchart .node.compact.even>.node.focused,.orgchart .node.compact.even>.node.selected,.orgchart .node.compact.even>.node:hover{background-color:#fff}.orgchart .node.compact.odd>.node.focused,.orgchart .node.compact.odd>.node.selected,.orgchart .node.compact.odd>.node:hover{background-color:#eee}.orgchart .hierarchy>.node.compact.looseMode{display:grid;width:unset;height:unset;overflow:unset}.orgchart .hierarchy>.node.compact::before{top:var(--top-cross-point,-10px)}.orgchart .node.compact>.node.compact{position:relative;display:grid;width:140px;height:50px;overflow:hidden}.orgchart .node.compact .node.compact.looseMode{width:unset;height:unset;overflow:unset}.orgchart .hierarchy>.node.compact>.content{position:absolute;top:25px;left:5px}.orgchart .hierarchy>.node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .hierarchy>.node.compact.looseMode>.content{top:30px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.title{margin-top:5px;margin-left:5px}.orgchart .node.compact>.node.compact>.content{position:absolute;top:23px;left:3px}.orgchart .node.compact>.node.compact.looseMode>.content{top:28px;left:8px}.orgchart .node.compact .node{margin-bottom:0}.orgchart .node.compact .node:not(:only-child)::after{content:unset}.orgchart .backToCompactSymbol,.orgchart .backToLooseSymbol{cursor:pointer}.orgchart .hierarchy>.node.compact>.backToCompactSymbol{position:absolute;top:5px;left:5px}.orgchart .hierarchy>.node.compact.looseMode>.backToCompactSymbol{top:10px;left:10px}.orgchart .node.compact>.node.compact.looseMode>.backToCompactSymbol{top:8px;left:8px}.orgchart .node.compact>.node.compact>.backToCompactSymbol{position:absolute;top:3px;left:3px}.orgchart .hierarchy>.node.compact>.backToLooseSymbol{position:absolute;top:25px;right:5px}.orgchart .node.compact>.node.compact>.backToLooseSymbol{position:absolute;top:23px;right:3px}.orgchart .node.compact .backToCompactSymbol::before{border-top-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToLooseSymbol::before{border-bottom-color:rgba(68,157,68,.6)}.orgchart .node.compact .backToCompactSymbol:hover::before{border-top-color:#449d44}.orgchart .node.compact .backToLooseSymbol:hover::before{border-bottom-color:#449d44}.oci{display:inline-block;position:relative;font-style:normal;font-family:Arial}.oci-menu::before{content:"≡";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;color:#000;font-size:1rem}.oci-chevron-up::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-right:unset;border-bottom:unset}.oci-chevron-down::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-left:unset}.oci-chevron-left::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-top:unset;border-right:unset}.oci-chevron-right::before{content:"";box-sizing:border-box;width:10px;height:10px;display:inline-block;border:3px solid #000;transform:rotate(45deg);border-left:unset;border-bottom:unset}.oci-corner-top-left::before{content:"";display:inline-block;border-top:20px solid #000;border-right:20px solid transparent}.oci-corner-top-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-top:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-right::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-left:20px solid transparent}.oci-corner-bottom-left::before{content:"";display:inline-block;box-sizing:border-box;width:0;height:0;border-bottom:20px solid #000;border-right:20px solid transparent}.oci-plus-square::before{content:"﹢";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-minus-square::before{content:"﹣";display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-up::before{content:"⬆";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-arrow-square-down::before{content:"⬇";display:inline-block;width:1rem;height:1rem;text-align:center;line-height:1rem;background-color:#000;color:#fff;font-weight:700}.oci-info-circle::before{content:"i";display:inline-block;width:1rem;height:1rem;border-radius:.5rem;background-color:#000;color:#fff;text-align:center;font-weight:700}.oci-spinner::before{content:"";vertical-align:text-bottom;display:inline-block;box-sizing:border-box;width:1rem;height:1rem;border:.1rem solid #000;border-right-color:transparent;border-radius:.625rem;animation:oci-infinite-spinning .75s linear infinite}@keyframes oci-infinite-spinning{from{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/js/jquery.orgchart.js

@@ -21,6 +21,19 @@
     this.$chartContainer = $(elem);
     this.opts = opts;
     this.defaultOptions = {
+      'icons': {
+        'theme': 'oci',
+        'parentNode': 'oci-menu',
+        'expandToUp': 'oci-chevron-up',
+        'collapseToDown': 'oci-chevron-down',
+        'collapseToLeft': 'oci-chevron-left',
+        'expandToRight': 'oci-chevron-right',
+        'backToCompact': 'oci-corner-top-left',
+        'backToLoose': 'oci-corner-bottom-right',
+        'collapsed': 'oci-plus-square',
+        'expanded': 'oci-minus-square',
+        'spinner': 'oci-spinner'
+      },
       'nodeTitle': 'name',
       'nodeId': 'id',
       'toggleSiblingsResp': false,
@@ -30,7 +43,6 @@
       'exportButtonName': 'Export',
       'exportFilename': 'OrgChart',
       'exportFileextension': 'png',
-      'parentNodeSymbol': 'oci-leader',
       'draggable': false,
       'direction': 't2b',
       'pan': false,
@@ -71,7 +83,7 @@
           this.buildHierarchy($root, this.options.ajaxURL ? data : this.attachRel(data, '00'));
         }
       } else {
-        $chart.append('<i class="oci oci-spinner spinner"></i>');
+        $chart.append(`<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`);
         $.ajax({
           'url': data,
           'dataType': 'json'
@@ -103,6 +115,20 @@
 
       return this;
     },
+    handleCompactNodes: function () {
+      // caculate the compact nodes' level which is used to add different styles
+      this.$chart.find('.node.compact')
+        .each((index, node) => {
+          $(node).addClass($(node).parents('.compact').length % 2 === 0 ? 'even' : 'odd');
+        }); // the following code snippets is used to add direction arrows for the most top compact node, however the styles is not adjusted correctly
+        // .filter((index, node) => !$(node).parent().is('.compact'))
+        // .each((index, node) => {
+        //   $(node).append(`<i class="edge verticalEdge topEdge ${this.options.icons.theme}"></i>`);
+        //   if (this.getSiblings($(node)).length) {
+        //     $(node).append(`<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`);
+        //   }
+        // });
+    },
     //
     triggerInitEvent: function () {
       var that = this;
@@ -112,6 +138,7 @@
         for (var i = 0; i < mutations.length; i++) {
           for (var j = 0; j < mutations[i].addedNodes.length; j++) {
             if (mutations[i].addedNodes[j].classList.contains('orgchart')) {
+              that.handleCompactNodes();
               if (that.options.initCompleted && typeof that.options.initCompleted === 'function') {
                 that.options.initCompleted(that.$chart);
               }
@@ -367,14 +394,21 @@
       });
       return subObj;
     },
-    //
+    // process datasource and add necessary information
     attachRel: function (data, flags) {
       var that = this;
       data.relationship = flags + (data.children && data.children.length > 0 ? 1 : 0);
+      if (this.options?.compact?.constructor === Function && this.options.compact(data)) {
+        data.compact = true;
+      }
       if (data.children) {
         data.children.forEach(function(item) {
-          if (data.isHybrid || data.isVertical) {
-            item.isVertical = true;
+          if (data.hybrid || data.vertical) { // identify all the descendant nodes except the root node of hybrid structure
+            item.vertical = true;
+          } else if (data.compact && item.children) { // identify all the compact ancestor nodes
+            item.compact = true;
+          } else if (data.compact && !item.children) { // identify all the compact descendant nodes
+            item.associatedCompact = true;
           }
           that.attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
         });
@@ -568,7 +602,7 @@
         $animatedNodes.closest('.hierarchy').addClass('isCollapsedDescendant');
       }
       if ($lowerLevel.is('.vertical') || $lowerLevel.find('.vertical').length) {
-        $animatedNodes.find('.oci-minus-square').removeClass('oci-minus-square').addClass('oci-plus-square');
+        $animatedNodes.find(this.options.icons.expanded).removeClass(this.options.icons.expanded).addClass(this.options.icons.collapsed);
       }
       this.repaint($animatedNodes.get(0));
       $animatedNodes.addClass('sliding slide-up').eq(0).one('transitionend', { 'animatedNodes': $animatedNodes, 'lowerLevel': $lowerLevel, 'node': $node }, this.hideChildrenEnd.bind(this));
@@ -647,7 +681,7 @@
       event.data.visibleNodes.removeClass('sliding');
       if (this.isInAction($node)) {
         this.switchHorizontalArrow($node);
-        $node.children('.topEdge').removeClass('oci-chevron-up').addClass('oci-chevron-down');
+        $node.children('.topEdge').removeClass(this.options.icons.expandToUp).addClass(this.options.icons.collapseToDown);
       }
     },
     //
@@ -702,7 +736,7 @@
       }
 
       $edge.addClass('hidden');
-      $edge.parent().append('<i class="oci oci-spinner spinner"></i>')
+      $edge.parent().append(`<i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i>`)
         .children().not('.spinner').css('opacity', 0.2);
       $chart.data('inAjax', true);
       $('.oc-export-btn').prop('disabled', true);
@@ -719,11 +753,16 @@
     },
     // whether the cursor is hovering over the node
     isInAction: function ($node) {
-      return $node.children('.edge').attr('class').indexOf('oci-') > -1 ? true : false;
+      return [
+        this.options.icons.expandToUp,
+        this.options.icons.collapseToDown,
+        this.options.icons.collapseToLeft,
+        this.options.icons.expandToRight
+      ].some((icon) => $node.children('.edge').attr('class').indexOf(icon) > -1);
     },
     //
     switchVerticalArrow: function ($arrow) {
-      $arrow.toggleClass('oci-chevron-up').toggleClass('oci-chevron-down');
+      $arrow.toggleClass(`${this.options.icons.expandToUp} ${this.options.icons.collapseToDown}`);
     },
     //
     switchHorizontalArrow: function ($node) {
@@ -732,24 +771,24 @@
         var $prevSib = $node.parent().prev();
         if ($prevSib.length) {
           if ($prevSib.is('.hidden')) {
-            $node.children('.leftEdge').addClass('oci-chevron-left').removeClass('oci-chevron-right');
+            $node.children('.leftEdge').addClass(opts.icons.collapseToLeft).removeClass(opts.icons.expandToRight);
           } else {
-            $node.children('.leftEdge').addClass('oci-chevron-right').removeClass('oci-chevron-left');
+            $node.children('.leftEdge').addClass(opts.icons.expandToRight).removeClass(opts.icons.collapseToLeft);
           }
         }
         var $nextSib = $node.parent().next();
         if ($nextSib.length) {
           if ($nextSib.is('.hidden')) {
-            $node.children('.rightEdge').addClass('oci-chevron-right').removeClass('oci-chevron-left');
+            $node.children('.rightEdge').addClass(opts.icons.expandToRight).removeClass(opts.icons.collapseToLeft);
           } else {
-            $node.children('.rightEdge').addClass('oci-chevron-left').removeClass('oci-chevron-right');
+            $node.children('.rightEdge').addClass(opts.icons.collapseToLeft).removeClass(opts.icons.expandToRight);
           }
         }
       } else {
         var $sibs = $node.parent().siblings();
         var sibsVisible = $sibs.length ? !$sibs.is('.hidden') : false;
-        $node.children('.leftEdge').toggleClass('oci-chevron-right', sibsVisible).toggleClass('oci-chevron-left', !sibsVisible);
-        $node.children('.rightEdge').toggleClass('oci-chevron-left', sibsVisible).toggleClass('oci-chevron-right', !sibsVisible);
+        $node.children('.leftEdge').toggleClass(opts.icons.expandToRight, sibsVisible).toggleClass(opts.icons.collapseToLeft, !sibsVisible);
+        $node.children('.rightEdge').toggleClass(opts.icons.collapseToLeft, sibsVisible).toggleClass(opts.icons.expandToRight, !sibsVisible);
       }
     },
     //
@@ -767,10 +806,10 @@
         if (event.type === 'mouseenter') {
           if ($node.children('.toggleBtn').length) {
             flag = this.getNodeState($node, 'children').visible;
-            $toggleBtn.toggleClass('oci-plus-square', !flag).toggleClass('oci-minus-square', flag);
+            $toggleBtn.toggleClass(this.options.icons.collapsed, !flag).toggleClass(this.options.icons.expanded, flag);
           }
         } else {
-          $toggleBtn.removeClass('oci-plus-square oci-minus-square');
+          $toggleBtn.removeClass(`${this.options.icons.collapsed} ${this.options.icons.expanded}`);
         }
       } else {
         var $topEdge = $node.children('.topEdge');
@@ -780,17 +819,17 @@
         if (event.type === 'mouseenter') {
           if ($topEdge.length) {
             flag = this.getNodeState($node, 'parent').visible;
-            $topEdge.toggleClass('oci-chevron-up', !flag).toggleClass('oci-chevron-down', flag);
+            $topEdge.toggleClass(this.options.icons.expandToUp, !flag).toggleClass(this.options.icons.collapseToDown, flag);
           }
           if ($bottomEdge.length) {
             flag = this.getNodeState($node, 'children').visible;
-            $bottomEdge.toggleClass('oci-chevron-down', !flag).toggleClass('oci-chevron-up', flag);
+            $bottomEdge.toggleClass(this.options.icons.collapseToDown, !flag).toggleClass(this.options.icons.expandToUp, flag);
           }
           if ($leftEdge.length) {
             this.switchHorizontalArrow($node);
           }
         } else {
-          $node.children('.edge').removeClass('oci-chevron-up oci-chevron-down oci-chevron-right oci-chevron-left');
+          $node.children('.edge').removeClass(`${this.options.icons.expandToUp} ${this.options.icons.collapseToDown} ${this.options.icons.collapseToLeft} ${this.options.icons.expandToRight}`);
         }
       }
     },
@@ -939,6 +978,19 @@
         }
       }
     },
+    // show the compact node's children in the compact mode
+    backToCompactHandler: function (event) {
+      $(event.delegateTarget).removeClass('looseMode')
+        .children('.backToCompactSymbol').addClass('hidden').end()
+        .children('.backToLooseSymbol').removeClass('hidden');
+    },
+    // show the compact node's children in the loose mode 
+    backToLooseHandler: function (event) {
+      $(event.delegateTarget)
+        .addClass('looseMode')
+        .children('.backToLooseSymbol').addClass('hidden').end()
+        .children('.backToCompactSymbol').removeClass('hidden');
+    },
     //
     expandVNodesEnd: function (event) {
       event.data.vNodes.removeClass('sliding');
@@ -954,14 +1006,14 @@
       var $descendants = $descWrapper.find('.node');
       var $children = $descWrapper.children().children('.node');
       if ($children.is('.sliding')) { return; }
-      $toggleBtn.toggleClass('oci-plus-square oci-minus-square');
+      $toggleBtn.toggleClass(`${this.options.icons.collapsed} ${this.options.icons.expanded}`);
       if ($descendants.eq(0).is('.slide-up')) {
         $descWrapper.removeClass('hidden');
         this.repaint($children.get(0));
         $children.addClass('sliding').removeClass('slide-up').eq(0).one('transitionend', { 'vNodes': $children }, this.expandVNodesEnd);
       } else {
         $descendants.addClass('sliding slide-up').eq(0).one('transitionend', { 'vNodes': $descendants }, this.collapseVNodesEnd);
-        $descendants.find('.toggleBtn').removeClass('oci-minus-square oci-plus-square');
+        $descendants.find('.toggleBtn').removeClass(`${this.options.icons.collapsed} ${this.options.icons.expanded}`);
       }
     },
     //
@@ -1122,7 +1174,7 @@
       // special process for hybrid chart
       var datasource = this.$chart.data('options').data;
       var digger = new JSONDigger(datasource, this.$chart.data('options').nodeId, 'children');
-      const hybridNode = digger.findOneNode({ 'isHybrid': true });
+      const hybridNode = digger.findOneNode({ 'hybrid': true });
       if (this.$chart.data('options').verticalLevel > 1 || hybridNode) {
         var draggedNode = digger.findNodeById($dragged.data('nodeData').id);
         var copy = Object.assign({}, draggedNode);
@@ -1138,14 +1190,14 @@
         // The folowing code snippets are used to process horizontal chart
         // firstly, deal with the hierarchy of drop zone
         if (!$dropZone.siblings('.nodes').length) { // if the drop zone is a leaf node
-          $dropZone.append('<i class="edge verticalEdge bottomEdge oci"></i>')
+          $dropZone.append(`<i class="edge verticalEdge bottomEdge ${this.options.icons.theme}"></i>`)
             .after('<ul class="nodes"></ul>')
             .siblings('.nodes').append($dragged.find('.horizontalEdge').remove().end().closest('.hierarchy'));
           if ($dropZone.children('.title').length) {
-            $dropZone.children('.title').prepend('<i class="oci '+  this.$chart.data('options').parentNodeSymbol + ' symbol"></i>');
+            $dropZone.children('.title').prepend(`<i class="${this.options.icons.theme} ${this.$chart.data('options').icons.parentNode} parentNodeSymbol"></i>`);
           }
         } else {
-          var horizontalEdges = '<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci"></i>';
+          var horizontalEdges = `<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`;
           if (!$dragged.find('.horizontalEdge').length) {
             $dragged.append(horizontalEdges);
           }
@@ -1160,7 +1212,7 @@
           $dragZone.siblings('.nodes').children('.hierarchy').find('.node:first')
             .find('.horizontalEdge').remove();
         } else if ($dragZone.siblings('.nodes').children('.hierarchy').length === 0) {
-          $dragZone.find('.bottomEdge, .symbol').remove()
+          $dragZone.find('.bottomEdge, .parentNodeSymbol').remove()
             .end().siblings('.nodes').remove();
         }
       }
@@ -1344,29 +1396,39 @@
       var nodeData = $.extend({}, data);
       delete nodeData.children;
       $nodeDiv.data('nodeData', nodeData);
-      // append 4 direction arrows or expand/collapse buttons
+      // append 4 direction arrows or expand/collapse buttons or reset buttons
       var flags = data.relationship || '';
-      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.isVertical) {
+      if ((opts.verticalLevel && level >= opts.verticalLevel) || data.vertical) {
         if (Number(flags.substr(2,1))) {
-          $nodeDiv.append('<i class="toggleBtn oci"></i>')
-            .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
+          $nodeDiv.append(`<i class="toggleBtn ${opts.icons.theme}"></i>`)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
-      } else if (data.isHybrid) {
+      } else if (data.hybrid) {
         if (Number(flags.substr(2,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge bottomEdge oci"></i>')
-            .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
+          $nodeDiv.append(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
+      } else if (data.compact) {
+        $nodeDiv.css('grid-template-columns', `repeat(${Math.floor(Math.sqrt(data.children.length + 1))}, auto)`);
+        if (Number(flags.substr(2,1))) {
+          $nodeDiv.append(`
+            <i class="${opts.icons.theme} ${opts.icons.backToCompact} backToCompactSymbol hidden"></i>
+            <i class="${opts.icons.theme} ${opts.icons.backToLoose} backToLooseSymbol"></i>
+            `)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
+        }
+      } else if (data.associatedCompact) {
+   
       } else {
         if (Number(flags.substr(0,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge topEdge oci"></i>');
+          $nodeDiv.append(`<i class="edge verticalEdge topEdge ${opts.icons.theme}"></i>`);
         }
         if(Number(flags.substr(1,1))) {
-          $nodeDiv.append('<i class="edge horizontalEdge rightEdge oci"></i>' +
-            '<i class="edge horizontalEdge leftEdge oci"></i>');
+          $nodeDiv.append(`<i class="edge horizontalEdge rightEdge ${opts.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${opts.icons.theme}"></i>`);
         }
         if(Number(flags.substr(2,1))) {
-          $nodeDiv.append('<i class="edge verticalEdge bottomEdge oci"></i>')
-            .children('.title').prepend('<i class="oci '+ opts.parentNodeSymbol + ' symbol"></i>');
+          $nodeDiv.append(`<i class="edge verticalEdge bottomEdge ${opts.icons.theme}"></i>`)
+            .children('.title').prepend(`<i class="${opts.icons.theme} ${opts.icons.parentNode} parentNodeSymbol"></i>`);
         }
       }
 
@@ -1376,6 +1438,8 @@
       $nodeDiv.on('click', '.bottomEdge', this.bottomEdgeClickHandler.bind(this));
       $nodeDiv.on('click', '.leftEdge, .rightEdge', this.hEdgeClickHandler.bind(this));
       $nodeDiv.on('click', '.toggleBtn', this.toggleVNodes.bind(this));
+      $nodeDiv.on('click', '> .backToCompactSymbol',this.backToCompactHandler.bind(this));
+      $nodeDiv.on('click', '> .backToLooseSymbol',this.backToLooseHandler.bind(this));
 
       if (opts.draggable) {
         this.bindDragDrop($nodeDiv);
@@ -1395,6 +1459,7 @@
       var that = this;
       var opts = this.options;
       var level = 0;
+      var $nodeDiv;
       if (data.level) {
         level = data.level;
       } else {
@@ -1402,23 +1467,26 @@
       }
       // Construct the node
       if (Object.keys(data).length > 2) {
-        $appendTo.append(this.createNode(data));
+        $nodeDiv = this.createNode(data);
+        $appendTo.append($nodeDiv);
       }
       // Construct the "inferior nodes"
       if (data.children && data.children.length) {
         var isHidden = level + 1 > opts.visibleLevel || (data.collapsed !== undefined && data.collapsed);
         var $nodesLayer;
-        if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.isHybrid) {
+        if ((opts.verticalLevel && (level + 1) >= opts.verticalLevel) || data.hybrid) {
           $nodesLayer = $('<ul class="nodes">');
           if (isHidden && (opts.verticalLevel && (level + 1) >= opts.verticalLevel)) {
             $nodesLayer.addClass('hidden');
           }
-          if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.isHybrid)
+          if (((opts.verticalLevel && level + 1 === opts.verticalLevel) || data.hybrid)
             && !$appendTo.closest('.vertical').length) {
               $appendTo.append($nodesLayer.addClass('vertical'));
           } else {
             $appendTo.append($nodesLayer);
           }
+        } else if (data.compact) {
+          $nodeDiv.addClass('compact');
         } else {
           $nodesLayer = $('<ul class="nodes' + (isHidden ? ' hidden' : '') + '">');
           if (Object.keys(data).length === 2) {
@@ -1432,10 +1500,14 @@
         }
         // recurse through children nodes
         $.each(data.children, function () {
-          var $nodeCell = $('<li class="hierarchy">');
-          $nodesLayer.append($nodeCell);
           this.level = level + 1;
-          that.buildHierarchy($nodeCell, this);
+          if (data.compact) {
+            that.buildHierarchy($nodeDiv, this);
+          } else {
+            var $nodeCell = $('<li class="hierarchy">');
+            $nodesLayer.append($nodeCell);
+            that.buildHierarchy($nodeCell, this);
+          }
         });
       }
     },
@@ -1446,16 +1518,16 @@
     // exposed method
     addChildren: function ($node, data) {
       this.buildChildNode($node.closest('.hierarchy'), data);
-      if (!$node.find('.symbol').length) {
-        $node.children('.title').prepend('<i class="oci '+ this.options.parentNodeSymbol + ' symbol"></i>');
+      if (!$node.find('.parentNodeSymbol').length) {
+        $node.children('.title').prepend(`<i class="${this.options.icons.theme} ${this.options.icons.parentNode} parentNodeSymbol"></i>`);
       }
       if ($node.closest('.nodes.vertical').length) {
         if (!$node.children('.toggleBtn').length) {
-          $node.append('<i class="toggleBtn oci"></i>');
+          $node.append(`<i class="toggleBtn ${this.options.icons.theme}"></i>`);
         }
       } else {
         if (!$node.children('.bottomEdge').length) {
-          $node.append('<i class="edge verticalEdge bottomEdge oci"></i>');
+          $node.append(`<i class="edge verticalEdge bottomEdge ${this.options.icons.theme}"></i>`);
         }
       }
       if (this.isInAction($node)) {
@@ -1474,7 +1546,7 @@
     addParent: function ($currentRoot, data) {
       this.buildParentNode($currentRoot, data);
       if (!$currentRoot.children('.topEdge').length) {
-        $currentRoot.children('.title').after('<i class="edge verticalEdge topEdge oci"></i>');
+        $currentRoot.children('.title').after(`<i class="edge verticalEdge topEdge ${this.options.icons.theme}"></i>`);
       }
       if (this.isInAction($currentRoot)) {
         this.switchVerticalArrow($currentRoot.children('.topEdge'));
@@ -1505,11 +1577,11 @@
       this.buildSiblingNode($node.closest('.hierarchy'), data);
       $node.closest('.nodes').data('siblingsLoaded', true);
       if (!$node.children('.leftEdge').length) {
-        $node.children('.topEdge').after('<i class="edge horizontalEdge rightEdge oci"></i><i class="edge horizontalEdge leftEdge oci"></i>');
+        $node.children('.topEdge').after(`<i class="edge horizontalEdge rightEdge ${this.options.icons.theme}"></i><i class="edge horizontalEdge leftEdge ${this.options.icons.theme}"></i>`);
       }
       if (this.isInAction($node)) {
         this.switchHorizontalArrow($node);
-        $node.children('.topEdge').removeClass('oci-chevron-up').addClass('oci-chevron-down');
+        $node.children('.topEdge').removeClass(this.options.icons.expandToUp).addClass(this.options.icons.collapseToDown);
       }
     },
     // remove node and its descendent nodes
@@ -1594,10 +1666,10 @@
       if ((!isWebkit && !isFf) || isEdge) {
         window.navigator.msSaveBlob(canvas.msToBlob(), exportFilename + '.png');
       } else {
-        var selector = '.oci-download-btn' + (that.options.chartClass !== '' ? '.' + that.options.chartClass : '');
+        var selector = '.download-btn' + (that.options.chartClass !== '' ? '.' + that.options.chartClass : '');
 
         if (!$chartContainer.find(selector).length) {
-          $chartContainer.append('<a class="oci-download-btn' + (that.options.chartClass !== '' ? ' ' + that.options.chartClass : '') + '"'
+          $chartContainer.append('<a class="download-btn' + (that.options.chartClass !== '' ? ' ' + that.options.chartClass : '') + '"'
                                  + ' download="' + exportFilename + '.png"></a>');
         }
 
@@ -1615,7 +1687,7 @@
       var $chartContainer = this.$chartContainer;
       var $mask = $chartContainer.find('.mask');
       if (!$mask.length) {
-        $chartContainer.append('<div class="mask"><i class="oci oci-spinner spinner"></i></div>');
+        $chartContainer.append(`<div class="mask"><i class="${this.options.icons.theme} ${this.options.icons.spinner} spinner"></i></div>`);
       } else {
         $mask.removeClass('hidden');
       }