wj-elements 0.1.70 → 0.1.72

package/dist/wje-dialog.js

@@ -97,9 +97,8 @@ class Dialog extends WJElement {
     this.onClose();
   }
   afterDraw(context, store, params) {
-    this.button = document.querySelector(`[dialog=${params.trigger}]`);
     if (params.trigger) {
-      event.addListener(this.button, params.trigger, null, this.onOpen);
+      event.addListener(document, params.trigger, null, this.onOpen);
     }
   }
   beforeOpen() {

package/dist/wje-input.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement, { event } from "./wje-element.js";
-const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n  --wje-input-font-family: var(--wje-font-family);\n  --wje-input-background-color: var(--wje-background);\n  --wje-input-color: var(--wje-color);\n  --wje-input-color-invalid: var(--wje-color-danger);\n  --wje-input-border-color: var(--wje-border-color);\n  --wje-input-border-color-focus: var(--wje-color-primary);\n  --wje-input-border-width: 1px;\n  --wje-input-border-style: solid;\n  --wje-input-border-radius: 4px;\n  --wje-input-margin-bottom: .5rem;\n  --wje-input-line-height: 20px;\n  --wje-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wje-input-margin-bottom);\n  display: block;\n\n  .wrapper {\n    display: flex;\n    width: 100%;\n  }\n  .native-input {\n    .input-wrapper {\n      width: 100%;\n      position: relative;\n    }\n    &.default {\n      background-color: var(--wje-input-background-color);\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      border-width: var(--wje-input-border-width);\n      border-style: var(--wje-input-border-style);\n      border-color: var(--wje-input-border-color);\n      padding-inline: 0;\n      padding-top: .25rem;\n      padding-bottom: .25rem;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      .input-wrapper {\n        margin-inline: .5rem;\n      }\n      &.focused {\n        border-color: var(--wje-input-border-color-focus) !important;\n        label {\n          opacity: 0.67;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      input {\n        border: none;\n        height: 25px;\n        min-height: 25px;\n        padding: 0;\n        margin-top: -4px;\n        background: none;\n        box-shadow: none;\n        width: 100%;\n      }\n      label {\n        margin: 0;\n        display: block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\n        &.fade {\n          opacity: 0.5;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-left: none;\n        border-top: none;\n        border-bottom: none;\n      }\n\n      ::slotted([slot="end"]) {\n        border-right: none;\n        border-top: none;\n        border-bottom: none;\n      }\n    }\n    &.standard {\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      padding-inline: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      &.focused {\n        input {\n          border-color: var(--wje-input-border-color-focus) !important;\n        }\n      }\n      input {\n        background-color: var(--wje-input-background-color);\n        display: block;\n        min-height: 32px;\n        padding-inline: .5rem;\n        padding-top: 0;\n        padding-bottom: 0;\n        /*background: none;*/\n        box-shadow: none;\n        width: 100%;\n        box-sizing: border-box;\n        border-radius: var(--wje-input-border-radius);\n        border-width: var(--wje-input-border-width);\n        border-style: var(--wje-input-border-style);\n        border-color: var(--wje-input-border-color);\n      }\n      label {\n        margin: 0;\n        display: inline-block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\n      }\n      .input-wrapper {\n        &:hover .clear {\n          visibility: visible;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-right: none;\n        border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n      }\n\n      ::slotted([slot="end"]) {\n        border-left: none;\n        border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n      }\n\n      &.has-start input{\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      &.has-end input{\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .error-message {\n        position: static;\n\n        background: transparent;\n        padding: 0.25rem 0;\n        left: auto;\n        transform: none;\n        color: var(--wje-input-color-invalid);\n        font-size: 12px;\n        line-height: normal;\n      }\n    }\n  }\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wje-input-color-invalid);\n  content: "*";\n  font-family: var(--wje-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) {\n  .error-message {\n    display: block;\n  }\n  .default {\n    label {\n      opacity: 1 !important;\n      color: var(--wje-input-color-invalid) !important;\n      animation-name: shake;\n      animation-duration: 0.4s;\n      animation-iteration-count: 1;\n    }\n  }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  padding-inline: var(--wje-input-slot-padding-inline);\n}\n\nslot[name="start"], slot[name="end"] {\n  display: flex;\n}\n\nslot[name="error"] {\n  display: none;\n  margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n  display: block;\n}\n\ninput {\n  background-color: var(--wje-input-background-color);\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  font-family: var(--wjinput-font-family);\n  color: var(--wje-input-color);\n  appearance: none;\n  outline: 0;\n  padding: .25rem .5rem;\n  line-height: var(--wje-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: .25rem .5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%,\n  41% {\n    transform: translateX(-4px);\n  }\n  25%,\n  58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n}';
+const styles = '/*\n[ WJ Input ]\n*/\n\n:host {\n  --wje-input-font-family: var(--wje-font-family);\n  --wje-input-background-color: var(--wje-background);\n  --wje-input-color: var(--wje-color);\n  --wje-input-color-invalid: var(--wje-color-danger);\n  --wje-input-border-color: var(--wje-border-color);\n  --wje-input-border-color-focus: var(--wje-color-primary);\n  --wje-input-border-width: 1px;\n  --wje-input-border-style: solid;\n  --wje-input-border-radius: 4px;\n  --wje-input-margin-bottom: .5rem;\n  --wje-input-line-height: 20px;\n  --wje-input-slot-padding-inline: .5rem;\n  width: 100%;\n  margin-bottom: var(--wje-input-margin-bottom);\n  display: block;\n\n  .wrapper {\n    display: flex;\n    width: 100%;\n  }\n  .native-input {\n    .input-wrapper {\n      width: 100%;\n      position: relative;\n    }\n    &.default {\n      background-color: var(--wje-input-background-color);\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      border-width: var(--wje-input-border-width);\n      border-style: var(--wje-input-border-style);\n      border-color: var(--wje-input-border-color);\n      padding-inline: 0;\n      padding-top: .25rem;\n      padding-bottom: .25rem;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      .input-wrapper {\n        margin-inline: .5rem;\n      }\n      &.focused {\n        border-color: var(--wje-input-border-color-focus) !important;\n        label {\n          opacity: 0.67;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      input {\n        border: none;\n        height: 25px;\n        min-height: 25px;\n        padding: 0;\n        margin-top: -4px;\n        background: none;\n        box-shadow: none;\n        width: 100%;\n      }\n      label {\n        margin: 0;\n        display: block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\n        &.fade {\n          opacity: 0.5;\n          font-size: 12px;\n          letter-spacing: normal;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-left: none;\n        border-top: none;\n        border-bottom: none;\n      }\n\n      ::slotted([slot="end"]) {\n        border-right: none;\n        border-top: none;\n        border-bottom: none;\n      }\n    }\n    &.standard {\n      font-family: var(--wje-input-font-family);\n      position: relative;\n      border-radius: var(--wje-input-border-radius);\n      padding-inline: 0;\n      padding-top: 0;\n      padding-bottom: 0;\n      transition: background-color 0.2s ease;\n      cursor: text;\n      &.focused {\n        input {\n          border-color: var(--wje-input-border-color-focus) !important;\n        }\n      }\n      input {\n        background-color: var(--wje-input-background-color);\n        display: block;\n        min-height: 32px;\n        padding-inline: .5rem;\n        padding-top: 0;\n        padding-bottom: 0;\n        /*background: none;*/\n        box-shadow: none;\n        width: 100%;\n        box-sizing: border-box;\n        border-radius: var(--wje-input-border-radius);\n        border-width: var(--wje-input-border-width);\n        border-style: var(--wje-input-border-style);\n        border-color: var(--wje-input-border-color);\n      }\n      label {\n        margin: 0;\n        display: inline-block;\n        opacity: 1;\n        cursor: text;\n        transition: opacity 0.2s ease;\n        line-height: var(--wje-input-line-height);\n      }\n      .input-wrapper {\n        &:hover .clear {\n          visibility: visible;\n        }\n      }\n      ::slotted([slot="start"]) {\n        border-right: none;\n        border-radius: var(--wje-input-border-radius) 0 0 var(--wje-input-border-radius);\n      }\n\n      ::slotted([slot="end"]) {\n        border-left: none;\n        border-radius: 0 var(--wje-input-border-radius) var(--wje-input-border-radius) 0;\n      }\n\n      &.has-start input{\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      &.has-end input{\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n      .error-message {\n        position: static;\n\n        background: transparent;\n        padding: 0.25rem 0;\n        left: auto;\n        transform: none;\n        color: var(--wje-input-color-invalid);\n        font-size: 12px;\n        line-height: normal;\n      }\n    }\n  }\n}\n\n.clear {\n  visibility: hidden;\n  position: absolute;\n  right: 0;\n  top: 3px;\n  --wje-padding-top: .25rem;\n  --wje-padding-start: .25rem;\n  --wje-padding-end: .25rem;\n  --wje-padding-bottom: .25rem;\n  --wje-button-margin-inline: 0 .25rem;\n}\n\n:host([required]) .input-wrapper::after {\n  color: var(--wje-input-color-invalid);\n  content: "*";\n  font-family: var(--wje-force-mac-font-family);\n  font-size: 20px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n:host([required]) .standard .input-wrapper::after {\n  top: 0;\n}\n\n:host([invalid]) {\n  .error-message {\n    display: block;\n  }\n  .default {\n    label {\n      opacity: 1 !important;\n      color: var(--wje-input-color-invalid) !important;\n      animation-name: shake;\n      animation-duration: 0.4s;\n      animation-iteration-count: 1;\n    }\n  }\n}\n\n::slotted([slot="start"]), ::slotted([slot="end"]) {\n  display: flex;\n  align-items: center;\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  padding-inline: var(--wje-input-slot-padding-inline);\n}\n\nslot[name="start"], slot[name="end"] {\n  display: flex;\n}\n\nslot[name="error"] {\n  display: none;\n  margin-inline: .5rem;\n}\n\n:host([invalid]) slot[name="error"] {\n  display: block;\n}\n\ninput {\n  background-color: var(--wje-input-background-color);\n  border-width: var(--wje-input-border-width);\n  border-style: var(--wje-input-border-style);\n  border-color: var(--wje-input-border-color);\n  font-family: var(--wje-input-font-family);\n  color: var(--wje-input-color);\n  appearance: none;\n  outline: 0;\n  padding: .25rem .5rem;\n  line-height: var(--wje-input-line-height);\n  font-size: 14px;\n  font-weight: normal;\n  vertical-align: middle;\n  min-height: 32px;\n}\n\n.error-message {\n  display: none;\n  position: absolute;\n  width: auto;\n  max-width: 100%;\n  min-width: auto;\n  border-radius: 50px;\n  background: black;\n  padding: .25rem .5rem;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  color: white;\n  font-size: 12px;\n  line-height: normal;\n}\n\n@keyframes shake {\n  8%,\n  41% {\n    transform: translateX(-4px);\n  }\n  25%,\n  58% {\n    transform: translateX(4px);\n  }\n  75% {\n    transform: translateX(-2px);\n  }\n  92% {\n    transform: translateX(2px);\n  }\n  0%,\n  100% {\n    transform: translateX(0);\n  }\n}';
 class Input extends WJElement {
   /**
    * Constructor for the Input class.

package/dist/wje-master.js

@@ -61,39 +61,40 @@ import { default as default50 } from "./wje-menu-label.js";
 import { default as default51 } from "./wje-option.js";
 import { default as default52 } from "./wje-options.js";
 import { default as default53 } from "./wje-orgchart.js";
-import { default as default54 } from "./wje-orgchart-item.js";
+import { default as default54 } from "./wje-orgchart-group.js";
+import { default as default55 } from "./wje-orgchart-item.js";
 import "./wje-popup.js";
-import { default as default55 } from "./wje-progress-bar.js";
-import { default as default56 } from "./wje-qr-code.js";
-import { default as default57 } from "./wje-radio.js";
-import { default as default58 } from "./wje-radio-group.js";
-import { default as default59 } from "./wje-rate.js";
-import { default as default60 } from "./wje-relative-time.js";
-import { default as default61 } from "./wje-reorder.js";
-import { default as default62 } from "./wje-reorder-dropzone.js";
-import { default as default63 } from "./wje-reorder-handle.js";
-import { default as default64 } from "./wje-reorder-item.js";
-import { default as default65 } from "./wje-route.js";
-import { default as default66 } from "./wje-routerx.js";
-import { default as default67 } from "./wje-router-link.js";
-import { default as default68 } from "./wje-router-outlet.js";
-import { default as default69 } from "./wje-row.js";
-import { default as default70 } from "./wje-select.js";
-import { default as default71 } from "./wje-slider.js";
-import { default as default72 } from "./wje-split-view.js";
-import { default as default73 } from "./wje-status.js";
-import { default as default74 } from "./wje-tab.js";
-import { default as default75 } from "./wje-tab-group.js";
-import { default as default76 } from "./wje-tab-panel.js";
-import { default as default77 } from "./wje-textarea.js";
-import { default as default78 } from "./wje-thumbnail.js";
-import { default as default79 } from "./wje-toast.js";
-import { default as default80 } from "./wje-toggle.js";
-import { default as default81 } from "./wje-toolbar.js";
-import { default as default82 } from "./wje-toolbar-action.js";
-import { default as default83 } from "./wje-tooltip.js";
-import { default as default84 } from "./wje-visually-hidden.js";
-import { default as default85 } from "./wje-sliding-container.js";
+import { default as default56 } from "./wje-progress-bar.js";
+import { default as default57 } from "./wje-qr-code.js";
+import { default as default58 } from "./wje-radio.js";
+import { default as default59 } from "./wje-radio-group.js";
+import { default as default60 } from "./wje-rate.js";
+import { default as default61 } from "./wje-relative-time.js";
+import { default as default62 } from "./wje-reorder.js";
+import { default as default63 } from "./wje-reorder-dropzone.js";
+import { default as default64 } from "./wje-reorder-handle.js";
+import { default as default65 } from "./wje-reorder-item.js";
+import { default as default66 } from "./wje-route.js";
+import { default as default67 } from "./wje-routerx.js";
+import { default as default68 } from "./wje-router-link.js";
+import { default as default69 } from "./wje-router-outlet.js";
+import { default as default70 } from "./wje-row.js";
+import { default as default71 } from "./wje-select.js";
+import { default as default72 } from "./wje-slider.js";
+import { default as default73 } from "./wje-split-view.js";
+import { default as default74 } from "./wje-status.js";
+import { default as default75 } from "./wje-tab.js";
+import { default as default76 } from "./wje-tab-group.js";
+import { default as default77 } from "./wje-tab-panel.js";
+import { default as default78 } from "./wje-textarea.js";
+import { default as default79 } from "./wje-thumbnail.js";
+import { default as default80 } from "./wje-toast.js";
+import { default as default81 } from "./wje-toggle.js";
+import { default as default82 } from "./wje-toolbar.js";
+import { default as default83 } from "./wje-toolbar-action.js";
+import { default as default84 } from "./wje-tooltip.js";
+import { default as default85 } from "./wje-visually-hidden.js";
+import { default as default86 } from "./wje-sliding-container.js";
 import { P } from "./popup.element-DvPGL_NN.js";
 function formatDate(input, format) {
   let date;
@@ -5096,6 +5097,7 @@ class Stepper extends WJElement {
           this.setStepDone(step, badge);
       });
       this.setStepActive(this.headerSteps[stepIndex], null, stepIndex);
+      this.setContentActive(stepIndex);
       this.currentStep = stepIndex;
       this.prev.disabled = this.currentStep === 0;
       this.next.disabled = this.currentStep === this.steps.length - 1;
@@ -5118,6 +5120,16 @@ class Stepper extends WJElement {
     badge.innerHTML = stepIndex + 1;
     badge.setAttribute("color", this.active);
   }
+  setContentActive(stepIndex) {
+    var _a2;
+    (_a2 = this.steps) == null ? void 0 : _a2.forEach((step, index) => {
+      if (index === stepIndex) {
+        step.style.display = "block";
+      } else {
+        step.style.display = "none";
+      }
+    });
+  }
   setStepDone(nav, badge = null) {
     nav.setAttribute("done", "");
     const checkIcon = document.createElement("wje-icon");
@@ -5309,43 +5321,44 @@ export {
   default51 as Option,
   default52 as Options,
   default53 as Orgchart,
-  default54 as OrgchartItem,
+  default54 as OrgchartGroup,
+  default55 as OrgchartItem,
   P as Popup,
-  default55 as ProgressBar,
-  default56 as QrCode,
-  default57 as Radio,
-  default58 as RadioGroup,
-  default59 as Rate,
-  default60 as RelativeTime,
-  default61 as Reorder,
-  default62 as ReorderDropzone,
-  default63 as ReorderHandle,
-  default64 as ReorderItem,
-  default65 as Route,
-  default67 as RouterLink,
-  default68 as RouterOutlet,
-  default66 as Routerx,
-  default69 as Row,
-  default70 as Select,
-  default71 as Slider,
-  default85 as SlidingContainer,
-  default72 as SplitView,
-  default73 as Status,
+  default56 as ProgressBar,
+  default57 as QrCode,
+  default58 as Radio,
+  default59 as RadioGroup,
+  default60 as Rate,
+  default61 as RelativeTime,
+  default62 as Reorder,
+  default63 as ReorderDropzone,
+  default64 as ReorderHandle,
+  default65 as ReorderItem,
+  default66 as Route,
+  default68 as RouterLink,
+  default69 as RouterOutlet,
+  default67 as Routerx,
+  default70 as Row,
+  default71 as Select,
+  default72 as Slider,
+  default86 as SlidingContainer,
+  default73 as SplitView,
+  default74 as Status,
   Step,
   Stepper,
-  default74 as Tab,
-  default75 as TabGroup,
-  default76 as TabPanel,
-  default77 as Textarea,
-  default78 as Thumbnail,
+  default75 as Tab,
+  default76 as TabGroup,
+  default77 as TabPanel,
+  default78 as Textarea,
+  default79 as Thumbnail,
   Timeline,
   TimelineItem,
-  default79 as Toast,
-  default80 as Toggle,
-  default81 as Toolbar,
-  default82 as ToolbarAction,
-  default83 as Tooltip,
-  default84 as VisuallyHidden,
+  default80 as Toast,
+  default81 as Toggle,
+  default82 as Toolbar,
+  default83 as ToolbarAction,
+  default84 as Tooltip,
+  default85 as VisuallyHidden,
   WJElement,
   b as bindRouterLinks,
   defaultStoreActions,

package/dist/wje-orgchart-group.js

@@ -0,0 +1,64 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import WJElement from "./wje-element.js";
+const styles = ":host {\n    --wje-orgchart-group-width: auto;\n    --wje-orgchart-group-border-radius: var(--wje-border-radius-large);\n    --wje-orgchart-group-height-line: 10px;\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-group-height-line) 0 0 0;\n    transition: all 0.5s;\n\n    &::before, &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: var(--wje-orgchart-group-height-line);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n        padding: .25rem 0;\n    }\n\n    wje-card h4 {\n        margin: 0;\n    }\n    wje-card .items {\n        display: flex;\n    }\n\n    .orgchart-group {\n        display: flex;\n        flex-direction: column;\n        wje-card {\n            margin: 0 auto;\n            width: var(--wje-orgchart-group-width);\n        }\n    }\n}\n\n:host(:only-child)::after, :host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0 var(--wje-orgchart-group-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n    border-radius: var(--wje-orgchart-group-border-radius) 0 0 0;\n}";
+class OrgchartGroup extends WJElement {
+  /**
+   * Creates an instance of OrgchartGroup.
+   *
+   * @constructor
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "OrgchartGroup");
+  }
+  /**
+   * Returns the CSS styles for the component.
+   *
+   * @static
+   * @returns {CSSStyleSheet}
+   */
+  static get cssStyleSheet() {
+    return styles;
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Draws the component.
+   *
+   * @param {Object} context - The context for drawing.
+   * @param {Object} store - The store for drawing.
+   * @param {Object} params - The parameters for drawing.
+   * @returns {DocumentFragment}
+   */
+  draw(context, store, params) {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("orgchart-group");
+    let card = document.createElement("wje-card");
+    let title = document.createElement("h4");
+    title.innerHTML = this.getAttribute("title") || "";
+    let items = document.createElement("div");
+    items.classList.add("items");
+    let slot = document.createElement("slot");
+    items.appendChild(slot);
+    card.appendChild(title);
+    card.appendChild(items);
+    native.appendChild(card);
+    fragment.appendChild(native);
+    return fragment;
+  }
+}
+OrgchartGroup.define("wje-orgchart-group", OrgchartGroup);
+export {
+  OrgchartGroup as default
+};

package/dist/wje-orgchart-item.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = ".orgchart-item {\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--wje-color-contrast-3);\n    border-radius: var(--wje-border-radius-large);\n    padding: .5rem;\n    p {\n        margin: 0;\n    }\n}";
+const styles = ":host {\n    --wje-orgchart-item-width: 75px;\n    --wje-orgchart-item-border-radius: var(--wje-border-radius-large);\n    --wje-orgchart-item-height-line: 10px;\n    width: var(--wje-orgchart-item-width);\n    box-sizing: border-box;\n\n    .orgchart-item {\n        display: flex;\n        flex-direction: column;\n\n        wje-card {\n            margin: 0 auto;\n            padding-inline: .25rem;\n            width: var(--wje-orgchart-item-width);\n            box-sizing: border-box;\n            &::part(native) {\n                border-radius: var(--wje-orgchart-border-radius) !important;\n                box-sizing: border-box;\n            }\n        }\n    }\n}\n\n/* ak nie je parent-group */\n:host(:not(.parent-group)) {\n    text-align: center;\n    list-style-type: none;\n    position: relative;\n    padding: var(--wje-orgchart-item-height-line) 0 0 0;\n    transition: all 0.5s;\n    width: auto;\n\n    &::before, &::after {\n        content: '';\n        position: absolute;\n        top: 0;\n        right: 50%;\n        border-top: 1px solid var(--wje-border-color);\n        width: 50%;\n        height: var(--wje-orgchart-item-height-line);\n    }\n\n    &::after {\n        right: auto;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n    }\n\n    wje-card::part(native) {\n        box-sizing: border-box;\n    }\n}\n\n:host(:hover){\n    wje-card::part(native) {\n        background: var(--wje-color-contrast-3);\n        /*color: #000;*/\n    }\n}\n\n:host(.highlight){\n    wje-card::part(native) {\n        background: var(--wje-color-complete-2);\n        /*color: #000;*/\n    }\n}\n\n\n:host(:only-child)::after, :host(:only-child)::before {\n    display: none;\n}\n\n:host(:only-child) {\n    padding-top: 0;\n}\n\n:host(:first-child)::before,\n:host(:last-child)::after {\n    border: 0 none;\n}\n\n:host(:last-child)::before {\n    border-right: 1px solid var(--wje-border-color);\n    border-radius: 0 var(--wje-orgchart-item-border-radius) 0 0;\n}\n\n:host(:first-child)::after {\n    border-radius: var(--wje-orgchart-item-border-radius) 0 0 0;\n}";
 class OrgchartItem extends WJElement {
   /**
    * Creates an instance of OrgchartItem.
@@ -31,6 +31,11 @@ class OrgchartItem extends WJElement {
   setupAttributes() {
     this.isShadowRoot = "open";
   }
+  beforeDraw() {
+    if (this.parentElement && this.parentElement.tagName === "WJE-ORGCHART-GROUP") {
+      this.classList.add("parent-group");
+    }
+  }
   /**
    * Draws the component.
    *
@@ -44,8 +49,13 @@ class OrgchartItem extends WJElement {
     let native = document.createElement("div");
     native.setAttribute("part", "native");
     native.classList.add("orgchart-item");
+    let card = document.createElement("wje-card");
     let slot = document.createElement("slot");
-    native.appendChild(slot);
+    let child = document.createElement("slot");
+    child.setAttribute("name", "child");
+    card.appendChild(slot);
+    native.appendChild(card);
+    native.appendChild(child);
     fragment.appendChild(native);
     return fragment;
   }

package/dist/wje-orgchart.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import WJElement from "./wje-element.js";
-const styles = '#orgChartView {\n    margin: 10px\n}\n\ndiv#UpToManager,\ndiv.manager_undefined,\ndiv.manager_true {\n    border: solid #dcdee0 2px;\n    border-radius: 10px !important;\n}\n\ndiv#UpToManager,\n.topPerson .nestedPerson div.manager_undefined,\n.topPerson .nestedPerson div.manager_true {\n    cursor: pointer;\n}\n\n.topPerson div.manager_undefined,\n.topPerson div.manager_true {\n    cursor: default;\n}\n\nspan.link:hover {\n    text-decoration: underline;\n    cursor: pointer;\n}\n\n\nbody, table {\n    font-size: 16px;\n    color: #1D252C;\n}\n\nthead th {\n    font-size: 20px;\n}\n\nthead td {\n    font-size: 12px;\n    font-style: italic;\n}\n\n.suppressPointerEvents * {\n    pointer-events: none;\n}\n\n#UpToManager {\n    width: 500px;\n    font-weight: bold;\n    font-size: 20px;\n    background-color: #f3f3f4;\n    min-height: 20px;\n}\n\n/*#UpToManager.survived_false {*/\n/*    background-color: red;*/\n/*}*/\n\n\n.manager {\n    margin: -10px;\n    padding-top: 10px;\n    height: 35px;\n}\n\n/* OrgChart CSS Base: Reference https://www.cssscript.com/responsive-hierarchical-organization-chart-pure-css/ */\nol.organizational-chart,\nol.organizational-chart ol,\nol.organizational-chart li,\nol.organizational-chart li > div {\n  position: relative;\n}\n\nol.organizational-chart,\nol.organizational-chart ol {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\nol.organizational-chart {\n    text-align: center;\n}\n\nol.organizational-chart ol {\n    padding-top: 1em;\n}\n\n/* the connector line */\nol.organizational-chart ol:before,\nol.organizational-chart ol:after,\nol.organizational-chart li:before,\nol.organizational-chart li:after,\nol.organizational-chart > li > div:before,\nol.organizational-chart > li > div:after {\n    /* all connectors */\n    background-color: #b7a6aa;\n    content: "";\n    position: absolute;\n}\n\nol.organizational-chart ol > li {\n    padding: 1em 0 0 1em;\n}\n\nol.organizational-chart > li ol:before {\n    height: 1.2em;\n    left: 50%;\n    top: 0;\n    width: 3px;\n}\n\nol.organizational-chart > li ol:after {\n    /* horizontal connector */\n    height: 3px;\n    left: 3px;\n    top: 1em;\n    width: 50%;\n}\n\nol.organizational-chart > li ol > li:not(:last-of-type):before {\n    height: 3px;\n    left: 0;\n    top: 2em;\n    width: 1em;\n}\n\nol.organizational-chart > li ol > li:not(:last-of-type):after {\n    height: 100%;\n    left: 0;\n    top: 0;\n    width: 3px;\n}\n\nol.organizational-chart > li ol > li:last-of-type:before {\n    height: 3px;\n    left: 0;\n    top: 2em;\n    width: 1em;\n}\n\nol.organizational-chart > li ol > li:last-of-type:after {\n    height: 2em;\n    left: 0;\n    top: 0;\n    width: 3px;\n}\n\nol.organizational-chart li > div {\n    background-color: #fff;\n    border-radius: 3px;\n    min-height: 2em;\n    padding: 0.5em;\n}\n\n/*** PRIMARY ***/\nol.organizational-chart > li > div {\n\n    background-color: #8dccad;\n    margin-right: 1em;\n}\n\n\nol.organizational-chart > li > div + div {\n    margin-top: 1em;\n}\n\nol.organizational-chart > li > div + div:after {\n    right: -1em;\n    top: -1em;\n    width: 3px;\n}\n\n/*** SECONDARY ***/\nol.organizational-chart > li > ol:before {\n    /* descender */\n    left: inherit;\n}\n\nol.organizational-chart > li > ol:after {\n    /* horizontal connector */\n    left: 0;\n}\n\n\nol.organizational-chart > li > ol > li > div {\n    background-color: #f3f3f4;\n}\n\n/* topPerson ol.organizational-chart */\n/*ol.organizational-chart > li.topPerson > div.survived_false {*/\n/*    background-color: red;*/\n/*}*/\n/*\n        ol.organizational-chart > li.topPerson > ol > li > div.survived_false,\n        ol.organizational-chart > li.topPerson > ol > li > ol > li > div.survived_false,\n        ol.organizational-chart > li.topPerson > ol > li > ol > li > ol > li > div.survived_false,\n        ol.organizational-chart > li.topPerson > ol > li > ol > li > ol > li > ol > li > div.survived_false {\n            background-color: red;\n        }\n\n  */\n/* topPerson ol.organizational-chart */\nol.organizational-chart > li > div.contractor_true,\nol.organizational-chart > li > ol > li > div.contractor_true,\nol.organizational-chart > li > ol > li > ol > li > div.contractor_true,\nol.organizational-chart > li > ol > li > ol > li > ol > li > div.contractor_true,\nol.organizational-chart > li > ol > li > ol > li > ol > li > ol > li > div.contractor_true {\n    background-color: #c2c2c2;\n}\n\n/*** TERTIARY ***/\nol.organizational-chart > li > ol > li > ol > li > div {\n    background-color: #f3f3f4;\n}\n\n/*** QUATERNARY ***/\nol.organizational-chart > li > ol > li > ol > li > ol > li > div {\n    background-color: #f3f3f4;\n}\n\n/*** QUINARY ***/\nol.organizational-chart > li > ol > li > ol > li > ol > li > ol > li > div {\n    background-color: #f3f3f4;\n}\n\n\n/* OrgChart CSS Response Screen: Reference https://www.cssscript.com/responsive-hierarchical-organization-chart-pure-css/ */\n\n@media only screen and (max-width: 64em) {\n    .largePhoto {\n        width: 100px !important;\n        height: 100px !important;\n    }\n}\n\n@media only screen and (min-width: 64em) {\n    ol.organizational-chart {\n        margin-left: -1em;\n        margin-right: -1em;\n    }\n\n    ol.organizational-chart li div.topPersonDiv {\n        width: 500px;\n    }\n\n    #UpToManager {\n        width: 500px;\n    }\n\n    /* PRIMARY */\n    ol.organizational-chart > li > div {\n        display: inline-block;\n        float: none;\n        margin: 0 1em 1em 1em;\n        vertical-align: bottom;\n    }\n\n    ol.organizational-chart > li > div:only-of-type {\n        margin-bottom: 0;\n    }\n\n    ol.organizational-chart > li > div:before,\n    ol.organizational-chart > li > div:after {\n        bottom: -1em !important;\n        top: inherit !important;\n    }\n\n    ol.organizational-chart > li > div:before {\n        /* right side horizontal connector */\n        height: 1em !important;\n        left: 50% !important;\n        width: 3px !important;\n    }\n\n    ol.organizational-chart > li > div:only-of-type:after {\n        display: none;\n    }\n\n    ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after,\n    ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {\n        bottom: -1em;\n        height: 3px;\n        width: calc(50% + 1em + 3px);\n    }\n\n    ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after {\n        left: calc(50% + 3px);\n    }\n\n    ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {\n        left: calc(-1em - 3px);\n    }\n\n    ol.organizational-chart > li > div + div:not(:last-of-type):after {\n        height: 3px;\n        left: -2em;\n        width: calc(100% + 4em);\n    }\n\n    /* SECONDARY */\n    ol.organizational-chart > li > ol {\n        display: flex;\n        flex-wrap: nowrap;\n    }\n\n    ol.organizational-chart > li > ol:before,\n    ol.organizational-chart > li > ol > li:before {\n        height: 1em !important;\n        left: 50% !important;\n        top: 0 !important;\n        width: 3px !important;\n    }\n\n    ol.organizational-chart > li > ol:after {\n        display: none;\n    }\n\n    ol.organizational-chart > li > ol > li {\n        flex-grow: 1;\n        padding-left: 1em;\n        padding-right: 1em;\n        padding-top: 1em;\n    }\n\n    ol.organizational-chart > li > ol > li:only-of-type {\n        padding-top: 0;\n    }\n\n    ol.organizational-chart > li > ol > li:only-of-type:before,\n    ol.organizational-chart > li > ol > li:only-of-type:after {\n        display: none;\n    }\n\n    ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after,\n    ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {\n        height: 3px;\n        top: 0;\n        width: 50%;\n    }\n\n    ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after {\n        left: 50%;\n    }\n\n    ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {\n        left: 0;\n    }\n\n    ol.organizational-chart > li > ol > li + li:not(:last-of-type):after {\n        height: 3px;\n        left: 0;\n        top: 0;\n        width: 100%;\n    }\n}\n\nol.level_3,\nol.level_4,\nol.level_5 {\n    display: none;\n}\n\n.center {\n    text-align: center;\n}\n\n.left {\n    text-align: left;\n}\n\n.largePhoto {\n    margin: 1em 0 1em 2em;\n}\n\n\n.orgChartViewContainer {\n    position: absolute;\n    left: 20px;\n    top: 110px;\n    height: 600px;\n    margin-top: -50px;\n    overflow: hidden;\n}\n\n\nol.organizational-chart li div.topPersonDiv {\n    padding: 2px;\n    margin: 0;\n}\n\n\n.organizational-chart {\n    margin-top: 150px;\n}\n\n#orgChartView {\n    top: 85px;\n    position: relative;\n}\n\n#searchArea {\n    margin-top: 0;\n}\n\n.jobTitle,\nol.organizational-chart li div.nestedPersonDiv .jobTitle {\n    font-size: 12px;\n    font-style: italic;\n    font-weight: normal;\n}\n\ndiv.nestedSearchDiv {\n    padding: 2px;\n    min-height: 53px;\n    margin: 10px;\n    width: 400px;\n    background-color: white;\n    cursor: pointer;\n}\n\nol.organizational-chart li div.nestedPersonDiv {\n    padding: 2px;\n    min-height: 53px;\n}\n\n.smallPhoto {\n    float: left;\n    border-radius: 50px;\n    margin: 2px;\n}\n\n#searchArea {\n    position: absolute;\n    margin: 0 20px;\n    background-color: #d881fe;\n    z-index: 2;\n    padding: 15px;\n    border-radius: 20px;\n}\n\n#detailView {\n    font-size: 90%;\n    width: 90%;\n\n}\n\n#detailView table {\n    font-size: 90%;\n\n\n}\n\n#detailView .largePhoto {\n    height: 100px;\n    width: 100px;\n}\n    ';
+const styles = "\n\n* {margin: 0; padding: 0;}\n\n:host {\n    --wje-orgchart-height-line: 10px;\n    --wje-orgchart-border-radius: var(--wje-border-radius-large);\n\n    position: relative;\n    .native-orgchart {\n        padding-top: var(--wje-orgchart-height-line);\n        display: flex;\n        /*column-gap: .5rem;*/\n    }\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 50%;\n        border-left: 1px solid var(--wje-border-color);\n        width: 0;\n        height: var(--wje-orgchart-height-line);\n    }\n}\n\n";
 class Orgchart extends WJElement {
   /**
    * Creates an instance of Orgchart.
@@ -15,257 +15,6 @@ class Orgchart extends WJElement {
   constructor() {
     super();
     __publicField(this, "className", "Orgchart");
-    __publicField(this, "getCookieValue", (name) => {
-      var _a;
-      return ((_a = document.cookie.match("(^|;)\\s*" + name + "\\s*=\\s*([^;]+)")) == null ? void 0 : _a.pop()) || "";
-    });
-    __publicField(this, "upTemplate", (person) => {
-      console.log("PERSON:", person);
-      return `<div class="manager">${person["Reports To Full Name"]}</div>`;
-    });
-    //
-    //     hide() {
-    //         document.getElementById('detailView').style.display = "none";
-    //     }
-    //
-    //     showDetails(person_id) {
-    //         let oldMaxDepth = this.maxDepth;
-    //         this.maxDepth = 1;
-    //         document.getElementById('detailView').style.display = "block";
-    //         document.getElementById('detailView').innerHTML = this.render(this.ORGCHART_DATA[person_id], personTemplate);
-    //         this.maxDepth = oldMaxDepth;
-    //     }
-    //
-    //     search(sText, sType) {
-    //         if (sText.length === 0) {
-    //             return;
-    //         }
-    //         const people = this.ORGCHART_DATA;
-    //         const searchString = new RegExp(sText, "i");
-    //         const oMatches = {};
-    //         switch (sType) {
-    //             case "name" :
-    //                 searchName(searchString);
-    //                 break;
-    //
-    //             case "team" :
-    //                 searchTeam(searchString);
-    //                 break;
-    //
-    //             case "title" :
-    //                 searchJobTitle(searchString);
-    //                 break;
-    //         }
-    //         showResults();
-    //
-    //         function showResults() {
-    //             document.getElementById("searchResults").innerHTML = "";
-    //             for (let person in oMatches) {
-    //                 document.getElementById("searchResults").innerHTML += this.render(oMatches [person], searchResultTemplate);
-    //             }
-    //         }
-    //
-    //         function searchTeam(searchString) {
-    //             let iMatches = 0;
-    //
-    //             for (const person_id in people) {
-    //                 const person = people[person_id];
-    //                 if (searchString.test(person["Department"]) || searchString.test(person["Division"]) || searchString.test(person["Teams"])) {
-    //                     if (iMatches < 20) {
-    //                         iMatches++;
-    //                         oMatches[person_id] = person;
-    //                     } else {
-    //                         break;
-    //                     }
-    //                 }
-    //             }
-    //             return iMatches;
-    //         }
-    //
-    //         function searchJobTitle() {
-    //             let iMatches = 0;
-    //             for (const person_id in people) {
-    //                 const person = people[person_id];
-    //                 if (searchString.test(person["Job Title"])) {
-    //                     if (iMatches < 20) {
-    //                         iMatches++;
-    //                         oMatches[person_id] = person;
-    //                     } else {
-    //                         break;
-    //                     }
-    //                 }
-    //             }
-    //             return iMatches;
-    //         }
-    //
-    //         function isInList(aList) {
-    //             let results = false;
-    //             if (aList) {
-    //                 for (let i = 0; aList.length > i; i++) {
-    //
-    //                     const sListItem = aList[i];
-    //                     if (searchString.test(sListItem)) {
-    //                         results = true;
-    //                         break;
-    //                     }
-    //                 }
-    //             }
-    //             return results;
-    //         }
-    //
-    //         function searchName() {
-    //             let iMatches = 0;
-    //             for (const person_id in people) {
-    //                 const person = people[person_id];
-    //                 if (searchString.test(person["First name"]) ||
-    //                   searchString.test(person["Preferred first name"]) ||
-    //                   searchString.test(person["Last name"]) ||
-    //                   searchString.test(person["id"]) ||
-    //                   searchString.test((person["First name"] + " " + person["Last name"])) ||
-    //                   searchString.test((person["Preferred first name"] + " " + person["Last name"]))
-    //                 ) {
-    //                     if (iMatches < 20) {
-    //                         iMatches++;
-    //                         oMatches[person_id] = person;
-    //                     } else {
-    //                         break;
-    //                     }
-    //                 }
-    //             }
-    //             return iMatches;
-    //         }
-    //     }
-    //
-    //     showSearchResults() {
-    //         const oSearchResults = document.getElementById('searchResults');
-    //         oSearchResults.style.display = 'block';
-    //         if (event.keyCode === 13) {
-    //             oSearchResults.children[0].onmouseover(null);
-    //             this.hideSearchResults();
-    //         }
-    //     }
-    //
-    //     previewPerson(person_id) {
-    //         const person = this.ORGCHART_DATA[person_id];
-    //         if (person) {
-    //             this.initializeLevels(person);
-    //             this.makeRoot(person.id, true);
-    //             this.hide();
-    //         }
-    //     }
-    //
-    //     showSearch() {
-    //         this.native.getElementById('searchArea').style.display = 'block';
-    //     }
-    //
-    //     hideSearchResults() {
-    //         document.getElementById('searchResults').style.display = 'none';
-    //         const newHash = "person=" + this.lastUnsavedId;
-    //         if (newHash && newHash !== "person=null" && ("#" + newHash) !== (document.location.hash)) {
-    //             this.lastHash = "#" + newHash;
-    //             document.location.hash = newHash;
-    //         }
-    //         setTimeout(function() {
-    //             document.getElementById('searchResults').style.display = 'none';
-    //         }, 10);  // does this need to be async?
-    //     }
-    //
-    __publicField(this, "personTemplate", (person) => {
-      this.htmlTemplate`
-            <!--suppress ALL -->
-            <li class="topPerson">
-            <div id="${this.initializeLevels(person)}"
-             class="topPersonDiv manager_${person.directs && person.directs.length > 0}
-                 survived_${this.isCurrentEmployee(person.id)}
-                 contractor_${this.isContractor(person.id)}
-                 ">
-            <table border="0" cellpadding="0" cellspacing="0" width="100%">
-                <thead>
-                <tr>
-                    <th colspan="3" class="center">
-                        ${this.getFullName(person.id)}
-                    </th>
-                </tr>
-                <tr>
-                    <td colspan="3" class="center" class="center">
-                        ${person["Job Title"]}
-                    </td>
-                </tr>
-                </thead>
-                <tbody>
-
-                <tr>
-                    <td rowspan="3" width="1"><img src="${this.getPhotoUrl(person.id, "medium")}"
-                                                   class="largePhoto"
-                                                   height="200"
-                                                   width="200"
-                                                   alt="a photograph of ${this.getFullName(person.id)}"  onerror="this.hideImage(this)"/>
-                    </td>
-                    <td rowspan="3" width="5%">&nbsp;</td>
-                </tr>
-
-                <tr>
-                    <td>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="left">
-
-                        <div title="${person["Start date"]}">
-                            Higher Standards for
-                        </div>
-                        ${this.getRelativeTime(person["Start date"])}
-
-                        <div>Department:
-                            ${person["Department"]}
-                        </div>
-
-                        ${person["Division"] ? `
-                        <div>Division:
-                           ${person["Division"]}
-                        </div>` : ``}
-
-
-
-                        <div>Email:
-                            <a href="mailto:${person.Email}" target="_blank" rel="noreferrer">${person.Email}</a>
-                        </div>
-                        ${person["Mobile phone"] ? `
-                        <div>Phone:
-                           ${person["Mobile phone"]}
-                        </div>` : ``}
-                        <div>Location:
-                            ${person["Office Locations"]}
-                        </div>
-
-
-
-                        <div>&nbsp;</div>
-
-
-                        <!--												<div>Email</div>-->
-                        <!--												<div>Phone</div>-->
-                        <!--												<div>Employment Status</div>-->
-                        <!--												<div>End Date</div>-->
-                        <!--												<div>GitHub</div>-->
-                        <!--												<div>Jira</div>-->
-                        <!--												<div>OpsGenie</div>-->
-                        <!--												<div>Blameless</div>-->
-
-
-                    </td>
-
-                </tr>
-                </tbody>
-
-
-            </table>
-
-
-        </div>
-        ${person.directs && person.level < this.maxDepth ? `<ol class="level_${person.level}"> ${this.orgchartRender(person.directs.map((person_id) => this.ORGCHART_DATA[person_id]), this.nestedPersonTemplate)} </ol>` : ""}
-    </li>`;
-    });
   }
   /**
    * Returns the CSS styles for the component.
@@ -294,42 +43,9 @@ class Orgchart extends WJElement {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
-    native.classList.add("orgchart");
-    native.innerHTML = `<div id="searchArea">
-                <form name="SearchForm">
-                    <label>
-                      Search:
-                      <input type="text" placeholder="Search" name="searchText" id="searchText"></label>
-                    <label>For:
-                    <select name="type">
-                      <option value="name" selected="selected">Name</option>
-                      <option value="team">Team</option>
-                      <option value="title">Job Title</option>
-                    </select>
-                    </label>
-                    <button >Search</button>
-                    <div id="searchResults">
-                      <div></div>
-                    </div>
-                </form>
-            </div>
-            <div id="orgChartView">
-                <div class="orgChartViewContainer">
-                    <div id="detailView"></div>
-                </div>
-                <ol class="organizational-chart">
-                    <li>
-                        <div id="UpToManager"></div>
-                        <ol class="organizational-chart" id="root">
-                            <li>
-                                <div>
-                                  <h1>Org Chart</h1>
-                                </div>
-                            </li>
-                        </ol>
-                    </li>
-                </ol>
-            </div>`;
+    native.classList.add("native-orgchart");
+    let slot = document.createElement("slot");
+    native.appendChild(slot);
     fragment.appendChild(native);
     this.native = native;
     return fragment;
@@ -343,270 +59,7 @@ class Orgchart extends WJElement {
    * @returns {DocumentFragment}
    */
   afterDraw(context, store, params) {
-    this.orgchartInit();
-    this.maxDepth = 3;
-    this.lastUnsavedId = null;
-    this.lastHash = document.location.hash;
   }
-  //     submitForm(logData) {
-  //         const sLogData = this.encode(logData);
-  //         const sRemoteUrl = "https://acklenx.com/orgchart.png?" + sLogData;
-  //         document.getElementById("visitor").src = sRemoteUrl;
-  //     }
-  //
-  //     encode(data) {
-  //         return Object.keys(data).map((key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])).join("&");
-  //     }
-  orgchartInit() {
-    this.loadExternalDataset();
-    this.loadPerson();
-    this.native.querySelector("#searchText").focus();
-  }
-  loadExternalDataset() {
-    new URLSearchParams(window.location.search);
-    let sExternalDataUrl = "/demo/assets/data/orgchart.json";
-    {
-      var data = this.getData(sExternalDataUrl);
-      this.ORGCHART_DATA = JSON.parse(data);
-    }
-  }
-  getData(sUrl = "demo/assets/data/orgchart.json", fCallback) {
-    let responseBody = "";
-    const xhttp = new XMLHttpRequest();
-    xhttp.onreadystatechange = function() {
-      if (this.readyState == 4 && this.status == 200) {
-        responseBody = xhttp.responseText;
-      }
-    };
-    xhttp.open("GET", sUrl, false);
-    xhttp.send();
-    return responseBody;
-  }
-  getVisitorId() {
-    let visitorId = this.getCookieValue("visitor");
-    if (!visitorId) {
-      visitorId = "visitor_" + Math.floor(Math.random() * 1e7);
-      document.cookie = "visitor=" + visitorId + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict; Secure";
-    }
-    return visitorId;
-  }
-  htmlTemplate(literals, ...vars) {
-    let raw = literals.raw, result = "", i = 1, len = arguments.length, str, variable;
-    while (i < len) {
-      str = raw[i - 1];
-      variable = vars[i - 1];
-      result += str + variable;
-      i++;
-    }
-    result += raw[raw.length - 1];
-    return result;
-  }
-  orgchartRender(data, template) {
-    if (!template) {
-      return;
-    }
-    if (typeof data === "string") {
-      return template(data);
-    } else if (typeof data === "object" && !Array.isArray(data)) {
-      console.log("DATA:", data, template(data));
-      return template(data);
-    } else if (Array.isArray(data)) {
-      return data.map((item) => template(item)).join("");
-    }
-  }
-  loadPerson(person_id, removeFromHistory) {
-    this.native.querySelector("#orgChartView").style.display = "block";
-    if (!person_id || !this.ORGCHART_DATA[person_id]) {
-      person_id = this.getStartingPersonFromUrl();
-      if (!person_id) {
-        person_id = Object.keys(this.ORGCHART_DATA)[0];
-      }
-    }
-    if (!removeFromHistory) {
-      document.location.hash = "person=" + person_id;
-      this.lastUnsavedId = null;
-    } else {
-      this.lastUnsavedId = person_id;
-    }
-    document.title = "OrgChart:" + this.getFullName(person_id);
-    this.native.querySelector("#root").innerHTML = this.personTemplate(this.ORGCHART_DATA[person_id]);
-    this.native.querySelector("#UpToManager").innerHTML = this.orgchartRender(this.ORGCHART_DATA[person_id], this.upTemplate);
-    this.setUpToManagerColor(this.ORGCHART_DATA[person_id]);
-    this.lastHash = document.location.hash;
-    this.context.querySelector(".manager").addEventListener("click", () => {
-      this.makeRoot(person_id);
-    });
-  }
-  setUpToManagerColor(person) {
-    const bIsCurrentEmployee = this.isCurrentEmployee(person["Reports To ID"]);
-    this.native.querySelector("#UpToManager").classList.remove("survived_true");
-    this.native.querySelector("#UpToManager").classList.remove("survived_false");
-    this.native.querySelector("#UpToManager").classList.add("survived_" + bIsCurrentEmployee);
-  }
-  getStartingPersonFromUrl() {
-    let startingPerson = null;
-    let sUrl = document.location.hash;
-    let person_id = sUrl.match(/person=([^&]*)/gi);
-    if (person_id && person_id[0]) {
-      person_id = person_id[0].replace("person=", "");
-      if (this.ORGCHART_DATA[person_id]) {
-        startingPerson = person_id;
-      }
-    }
-    return startingPerson;
-  }
-  //
-  //     hideImage(oImage) {
-  //         oImage.style.display = 'none';
-  //     }
-  initializeLevels(person) {
-    if (!person.level) {
-      person.level = 1;
-    }
-    if (person.directs) {
-      for (let i = 0; person.directs.length > i; i++) {
-        const directReport = this.ORGCHART_DATA[person.directs[i]];
-        directReport.level = person.level + 1;
-      }
-    }
-    return "";
-  }
-  makeRoot(person_id, removeFromHistory) {
-    if (person_id) {
-      let root = this.ORGCHART_DATA[person_id];
-      if (root.level === 1) {
-        root = this.ORGCHART_DATA[this.ORGCHART_DATA[person_id].id];
-        if (!root) {
-          root = this.ORGCHART_DATA[person_id];
-        }
-      }
-      root.level = null;
-      this.loadPerson(person_id, removeFromHistory);
-      document.body.scrollTop = 0;
-      document.documentElement.scrollTop = 0;
-    }
-  }
-  getFullName(person_id) {
-    const person = this.ORGCHART_DATA[person_id];
-    return (person["Preferred first name"] || person["First name"] || person.name) + " " + person["Last name"];
-  }
-  getPhotoUrl(person_id, sSizePath) {
-    sSizePath = "";
-    return "./photos/" + sSizePath + person_id + ".jpg";
-  }
-  isCurrentEmployee(person_id) {
-    let isCurrentEmployee = true;
-    const person = this.ORGCHART_DATA[person_id];
-    if (person) {
-      const endDate = person["End date"];
-      if (endDate) {
-        isCurrentEmployee = false;
-      }
-    }
-    return isCurrentEmployee;
-  }
-  isContractor(person_id) {
-    let isCurrentEmployee = false;
-    const person = this.ORGCHART_DATA[person_id];
-    const type = person["Employee type"];
-    if (type === "Contractor") {
-      isCurrentEmployee = true;
-    }
-    return isCurrentEmployee;
-  }
-  //     getRole(person) {
-  //         let sRole = "";
-  //         let sTeam = person["Teams"];
-  //         if (person.directs && person.directs.length > 0 && sTeam && sTeam !== "") {
-  //             if (sTeam === "CTO Team") {
-  //                 sRole = person["Job Title"].replace(/^VP,? /, "");
-  //             } else {
-  //                 sRole = sTeam;
-  //             }
-  //         } else {
-  //             sRole += person["Job Title"];
-  //         }
-  //         return sRole;
-  //     }
-  getRelativeTime(date) {
-    const startDate = new Date(date);
-    const ago = (/* @__PURE__ */ new Date() - startDate) / 26298e5;
-    let yearsAgo = ago / 12;
-    let sYearsAgo = "";
-    if (yearsAgo >= 1) {
-      sYearsAgo = Math.floor(yearsAgo) + " Year";
-      if (sYearsAgo !== "1 Year") {
-        sYearsAgo += "s";
-      }
-      let monthsAgo = Math.floor(ago % 12) + " month";
-      if (monthsAgo !== "1 month") {
-        monthsAgo += "s";
-      }
-      sYearsAgo += " " + monthsAgo;
-    } else {
-      let monthsAgo = ago % 12;
-      let sMonthsAgo = Math.floor(monthsAgo) + " month";
-      if (monthsAgo >= 1) {
-        if (sMonthsAgo !== "1 month") {
-          sMonthsAgo += "s";
-        }
-        sYearsAgo += sMonthsAgo;
-      } else {
-        let daysAgo = (/* @__PURE__ */ new Date() - startDate) / 864e5;
-        let sDaysAgo = Math.ceil(daysAgo) + " day";
-        if (sDaysAgo !== "1 day") {
-          sDaysAgo += "s";
-        }
-        sYearsAgo += sDaysAgo;
-      }
-    }
-    return sYearsAgo;
-  }
-  // nestedPersonTemplate = ( person ) => {
-  //     htmlTemplate`
-  //     <!--suppress ALL -->
-  //     <li class="nestedPerson">
-  //         <div onclick="${this.initializeLevels( person ) };this.makeRoot( '${ person.id }' ); this.hide();"
-  //              onmouseover="this.showDetails( '${ person.id }' ); this.hideSearchResults();"
-  //              onmouseout="this.hide()"
-  //              class="manager_${ person.directs && person.directs.length > 0 }
-  //                  survived_${this.isCurrentEmployee( person.id ) }
-  //                  contractor_${this.isContractor( person.id ) }
-  //                  suppressPointerEvents nestedPersonDiv">
-  //
-  //             <img src="${this.getPhotoUrl( person.id, '50x50' ) }"
-  //                  alt="Small photograph of ${this.getFullName( person.id ) }"
-  //                  class="smallPhoto"
-  //                  height="50" width="50"
-  //                  onerror="this.hideImage(this)"/>
-  //
-  //             <strong>${this.getFullName( person.id ) }</strong>
-  //             <br/>
-  //             <span class="jobTitle" title="${ person[ 'Job Title' ] }">${this.getRole( person ) }</span>
-  //
-  //         </div>
-  //         ${ person.directs && person.level < this.maxDepth ? `<ol class="level_${ person.level }"> ${this.render( person.directs.map( person_id => this.ORGCHART_DATA[ person_id ] ), this.nestedPersonTemplate ) } </ol>` : "" }
-  //     </li>`;
-  // }
-  //
-  // searchResultTemplate = ( person ) => {
-  //     htmlTemplate`
-  //     <!--suppress HtmlDeprecatedAttribute -->
-  //     <div onmouseover="this.previewPerson( '${ person.id }' )"
-  //          class="nestedSearchDiv manager_${ person.directs && person.directs.length > 0 } suppressPointerEvents"
-  //          onclick="this.hideSearchResults();">
-  //
-  //         <img src="${this.getPhotoUrl( person.id, 'thumbnail' ) }"
-  //              alt="Small photograph of ${this.getFullName( person.id ) }"
-  //              class="smallPhoto"
-  //              height="50" width="50" onerror="this.hideImage(this)" />
-  //
-  //         <strong>${this.getFullName( person.id ) }</strong>
-  //         <br/>
-  //         <span class="jobTitle" >${ person[ "Job Title" ] }</span>
-  //     </div>
-  //     `;
-  // }
 }
 Orgchart.define("wje-orgchart", Orgchart);
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "wj-elements",
   "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "homepage": "https://github.com/lencys/wj-elements",
   "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
   "license": "MIT",

package/dist/wje-orgchartItem.js

@@ -1,4 +0,0 @@
-import { default as default2 } from "./wje-orgchart-item.js";
-export {
-  default2 as default
-};