@sme.up/ketchup 6.0.0 → 6.2.0

package/dist/collection/components/{kup-form-editor/kup-form-editor.js → kup-dashboard/kup-dashboard.js}

@@ -1,13 +1,16 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, State, Event, Watch, } from '@stencil/core';
 import { FButton } from '../../f-components/f-button/f-button';
+import { FCheckbox } from '../../f-components/f-checkbox/f-checkbox';
+import { FTextField } from '../../f-components/f-text-field/f-text-field';
+import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { KupDragEffect } from '../../managers/kup-interact/kup-interact-declarations';
-import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { KupLanguageDashboard, KupLanguageGeneric, } from '../../managers/kup-language/kup-language-declarations';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { KupFormEditorDragTypes, KupFormEditorLabels, KupFormEditorProps, } from './kup-form-editor-declarations';
-export class KupFormEditor {
+import { KupDashboardProps, } from './kup-dashboard-declarations';
+export class KupDashboard {
   constructor() {
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
@@ -27,9 +30,14 @@ export class KupFormEditor {
     this.customStyle = '';
     /**
      * The data of the component.
-     * @default false
+     * @default null
      */
     this.data = null;
+    /**
+     * Enable drag & drop of the section.
+     * @default false
+     */
+    this.enableDesign = false;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -37,10 +45,6 @@ export class KupFormEditor {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
-    /**
-     * Draggable type of Form (Components or Sections).
-     */
-    this.dragType = KupFormEditorDragTypes.Components;
     /**
      * Internal data of the component.
      */
@@ -72,7 +76,7 @@ export class KupFormEditor {
    * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
    */
   async getProps(descriptions) {
-    return getProps(this, KupFormEditorProps, descriptions);
+    return getProps(this, KupDashboardProps, descriptions);
   }
   /**
    * This method is used to trigger a new render of the component.
@@ -85,15 +89,21 @@ export class KupFormEditor {
    * @param {GenericObject} props - Object containing props that will be set to the component.
    */
   async setProps(props) {
-    setProps(this, KupFormEditorProps, props);
+    setProps(this, KupDashboardProps, props);
   }
   /*-------------------------------------------------*/
   /*           P r i v a t e   M e t h o d s         */
   /*-------------------------------------------------*/
+  buildGuid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+      var r = (Math.random() * 16) | 0, v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
   buildHeader() {
     const clearButtonProp = {
       icon: 'cancel',
-      label: KupFormEditorLabels.Reset,
+      label: this.kupManager.language.translate(KupLanguageDashboard.RESET),
       secondary: true,
       onClick: () => {
         this.resetData();
@@ -101,41 +111,24 @@ export class KupFormEditor {
     };
     const saveButtonProp = {
       icon: 'save',
-      label: KupFormEditorLabels.Save,
+      label: this.kupManager.language.translate(KupLanguageDashboard.SAVE),
       onClick: () => this.onKupSave(),
     };
-    const selRadioProp = [
-      {
-        label: KupFormEditorLabels.Components,
-        value: KupFormEditorDragTypes.Components,
-        checked: this.dragType == KupFormEditorDragTypes.Components,
-      },
-      {
-        label: KupFormEditorLabels.Sections,
-        value: KupFormEditorDragTypes.Sections,
-        checked: this.dragType == KupFormEditorDragTypes.Sections,
-      },
-    ];
     return (h("div", { class: "header" },
-      h("kup-radio", { data: selRadioProp, "onKup-radio-change": (ev) => {
-          this.dragType = ev.detail
-            .value;
-          this.resetData(this.internalData);
-        } }),
-      h(FButton, Object.assign({}, clearButtonProp)),
-      h(FButton, Object.assign({}, saveButtonProp))));
+      this.enableDesign ? (h(FButton, Object.assign({}, clearButtonProp))) : undefined,
+      this.enableDesign ? (h(FButton, Object.assign({}, saveButtonProp))) : undefined));
   }
   buildForm(form, parent) {
     const classes = {
       form: true,
       'layout-column': form && form.layout == 'column',
       'layout-row': form && form.layout == 'row',
-      'form-dropzone': form &&
-        this.dragType == KupFormEditorDragTypes.Sections &&
+      'form-dropzone': this.enableDesign &&
+        form &&
         form.sections != null &&
         form.sections.length > 0,
     };
-    return form ? (h("div", { class: classes, ref: (el) => {
+    return form ? (h("div", { class: classes, style: this.getGridStyle(form), ref: (el) => {
         if (!el)
           return;
         const kel = el;
@@ -143,6 +136,14 @@ export class KupFormEditor {
       } }, form.sections.map((section) => this.buildSection(section, form)))) : (h("div", null, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA)));
   }
   buildSectionHeader(section, parent) {
+    const dimTextFieldProp = {
+      value: section.dim,
+      label: this.kupManager.language.translate(KupLanguageDashboard.DIMENSION),
+      onChange: (e) => {
+        const { target } = e;
+        section.dim = target.value;
+      },
+    };
     const addButtonProp = {
       icon: 'add',
       slim: true,
@@ -154,12 +155,7 @@ export class KupFormEditor {
           id: section.id + (section.sections.length + 1),
           loaded: section.loaded,
           layout: section.layout,
-          components: [],
         };
-        if (section.components) {
-          section.components.forEach((x) => newSec.components.push(x));
-          section.components.splice(0);
-        }
         section.sections.push(newSec);
         this.resetData(this.internalData);
       },
@@ -174,97 +170,66 @@ export class KupFormEditor {
         this.resetData(this.internalData);
       },
     };
+    const loadedCheckBoxProp = {
+      checked: section.loaded,
+      label: this.kupManager.language.translate(KupLanguageDashboard.LOADED),
+      onChange: () => {
+        section.loaded = !section.loaded;
+        this.refresh();
+      },
+    };
+    const columnCheckBoxProp = {
+      checked: section.layout == 'column',
+      label: this.kupManager.language.translate(KupLanguageDashboard.VERTICAL),
+      onChange: () => {
+        section.layout = section.layout == 'column' ? 'row' : 'column';
+        this.refresh();
+      },
+    };
     return (h("div", { class: "section-header" },
       h("div", null,
         section.id,
-        ' ',
-        section.dim ? '(' + section.dim + ')' : undefined,
-        " -",
-        ' ',
+        " - ",
         section.layout),
       h("div", null,
         h("div", { class: "section-header-actions" },
-          h("kup-switch", { checked: section.loaded, label: KupFormEditorLabels.Loaded, "onKup-switch-change": (ev) => {
-              section.loaded = ev.detail.value == 'on';
-            } }),
-          h("kup-switch", { checked: section.layout == 'column', label: KupFormEditorLabels.Column, "onKup-switch-change": (ev) => {
-              section.layout =
-                ev.detail.value == 'on' ? 'column' : 'row';
-              this.resetData(this.internalData);
-            } }),
+          h(FTextField, Object.assign({}, dimTextFieldProp)),
+          h(FCheckbox, Object.assign({}, loadedCheckBoxProp)),
+          h(FCheckbox, Object.assign({}, columnCheckBoxProp)),
           h(FButton, Object.assign({}, addButtonProp)),
-          h(FButton, Object.assign({}, removeButtonProp)),
-          section.components && section.components.length > 0 ? (h("kup-image", { resource: "widgets", sizeX: "24px", sizeY: "24px" })) : undefined))));
+          h(FButton, Object.assign({}, removeButtonProp))))));
   }
   buildSection(section, parent) {
     const classes = {
       section: true,
-      'section-draggable': this.dragType == KupFormEditorDragTypes.Sections,
-      'section-dropzone': !section.sections ||
-        section.sections.length == 0 ||
-        this.dragType == KupFormEditorDragTypes.Sections,
+      'section-draggable': this.enableDesign,
+      'section-dropzone': this.enableDesign,
     };
     const bodyClasses = {
       'section-body': true,
       'layout-column': section && section.layout == 'column',
       'layout-row': section && section.layout == 'row',
     };
-    let bodyStyles = {};
-    if (section.sections) {
-      let gridTemplate = '';
-      section.sections.forEach((childSection) => {
-        if (!childSection.dim)
-          gridTemplate += ' 1fr';
-        else
-          gridTemplate +=
-            childSection.dim.indexOf('%') < 0
-              ? ' ' + childSection.dim + 'px'
-              : ' ' + childSection.dim;
-      });
-      if (section.layout == 'column')
-        bodyStyles['gridTemplateRows'] = gridTemplate;
-      if (section.layout == 'row')
-        bodyStyles['gridTemplateColumns'] = gridTemplate;
-    }
     return (h("div", { class: classes, ref: (el) => {
         if (!el)
           return;
         const kel = el;
         kel.kupData = { parent: parent, section: section };
       } },
-      this.dragType == KupFormEditorDragTypes.Sections
+      this.enableDesign
         ? this.buildSectionHeader(section, parent)
         : undefined,
-      h("div", { class: bodyClasses, style: bodyStyles },
-        this.dragType == KupFormEditorDragTypes.Components &&
-          section.components
-          ? section.components.map((component) => component.type == 'SCH' ? (this.buildForm(component, section)) : (h("div", { class: "component component-draggable", ref: (el) => {
-              if (!el)
-                return;
-              const kel = el;
-              kel.kupData = {
-                section: section,
-                componnent: component,
-              };
-            } },
-            component.id,
-            " - ",
-            component.type,
-            h("kup-switch", { checked: component.loaded, label: KupFormEditorLabels.Loaded, "onKup-switch-change": (ev) => {
-                component.loaded =
-                  ev.detail.value == 'on';
-              } }))))
-          : undefined,
-        section.sections
+      h("div", { class: bodyClasses, style: this.getGridStyle(section) },
+        !this.enableDesign &&
+          section.loaded &&
+          (!section.sections || section.sections.length == 0) ? (h("slot", { name: section.id })) : undefined,
+        section.sections && (section.loaded || this.enableDesign)
           ? section.sections.map((childSection) => this.buildSection(childSection, section))
           : undefined)));
   }
   didRenderInteractables() {
     try {
       const items = [];
-      this.rootElement.shadowRoot
-        .querySelectorAll('.component-draggable')
-        .forEach((x) => items.push(x));
       this.rootElement.shadowRoot
         .querySelectorAll('.section-draggable')
         .forEach((x) => items.push(x));
@@ -286,7 +251,6 @@ export class KupFormEditor {
       items.forEach((item) => {
         this.kupManager.interact.dropzone(item, null, null, {
           drop: (ev) => {
-            ev.currentTarget.appendChild(ev.relatedTarget);
             this.dropped(ev.currentTarget, ev.relatedTarget);
           },
         });
@@ -297,44 +261,51 @@ export class KupFormEditor {
     }
   }
   dropped(parent, child) {
-    if (this.dragType == KupFormEditorDragTypes.Components) {
-      const idx = child.kupData.section.components.indexOf(child.kupData.componnent);
-      child.kupData.section.components.splice(idx, 1);
-      parent.kupData.section.components.push(child.kupData.componnent);
-      child.kupData.section = parent.kupData.section;
+    const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
+    child.kupData.parent.sections.splice(idx, 1);
+    if (parent.kupData.form) {
+      // form is the target of drop.
+      if (!parent.kupData.form.sections)
+        parent.kupData.form.sections = [];
+      parent.kupData.form.sections.push(child.kupData.section);
+      child.kupData.parent = parent.kupData.form;
     }
-    else if (this.dragType == KupFormEditorDragTypes.Sections) {
-      const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
-      child.kupData.parent.sections.splice(idx, 1);
-      if (parent.kupData.form) {
-        // il nuovo target è la form.
-        if (!parent.kupData.form.sections)
-          parent.kupData.form.sections = [];
-        parent.kupData.form.sections.push(child.kupData.section);
-        child.kupData.parent = parent.kupData.form;
+    else if (parent.kupData.section) {
+      // section is the target of drop.
+      if (!parent.kupData.section.sections ||
+        parent.kupData.section.sections.length == 0) {
+        // if the section target of drop doesn't contains other sections, i create a wrapper that will contain target section and dragged section.
+        const newSec = JSON.parse(JSON.stringify(parent.kupData.section));
+        newSec.dim = null;
+        child.kupData.section.dim = null;
+        parent.kupData.section.id = this.buildGuid();
+        parent.kupData.section.sections = [];
+        parent.kupData.section.sections.push(newSec);
       }
-      else if (parent.kupData.section) {
-        // il nuovo target è la section.
-        if (!parent.kupData.section.sections)
-          parent.kupData.section.sections = [];
-        if (parent.kupData.section.components &&
-          parent.kupData.section.components.length > 0) {
-          // devo creare una section contenitore e sposare i components
-          const newSec = {
-            id: parent.kupData.section.id + '1',
-            loaded: parent.kupData.section.loaded,
-            layout: parent.kupData.section.layout,
-            components: [],
-          };
-          parent.kupData.section.components.forEach((x) => newSec.components.push(x));
-          parent.kupData.section.components.splice(0);
-          parent.kupData.section.sections.push(newSec);
-        }
-        parent.kupData.section.sections.push(child.kupData.section);
-        child.kupData.parent = parent.kupData.section;
-      }
-      this.resetData(this.internalData);
+      parent.kupData.section.sections.push(child.kupData.section);
+      child.kupData.parent = parent.kupData.section;
+    }
+    this.resetData(this.internalData);
+  }
+  getGridStyle(entity) {
+    let bodyStyles = {};
+    if (!this.enableDesign && entity.sections) {
+      let gridTemplate = '';
+      entity.sections.forEach((childSection) => {
+        if (!childSection.dim)
+          gridTemplate += ' 1fr';
+        else
+          gridTemplate +=
+            childSection.dim.indexOf('%') < 0
+              ? ' ' + childSection.dim + 'px'
+              : ' ' + childSection.dim;
+      });
+      if (entity.layout == 'column')
+        bodyStyles['gridTemplateRows'] = gridTemplate;
+      if (entity.layout == 'row')
+        bodyStyles['gridTemplateColumns'] = gridTemplate;
     }
+    return bodyStyles;
   }
   resetData(form = null) {
     if (form)
@@ -349,7 +320,6 @@ export class KupFormEditor {
     }, 250);
   }
   unregisterInteractables() {
-    this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.component-draggable')));
     this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.section-dropzone')));
     this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.section-draggable')));
     this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.form-dropzone')));
@@ -377,6 +347,14 @@ export class KupFormEditor {
   }
   componentDidRender() {
     this.kupManager.debug.logRender(this, true);
+    const root = this.rootElement.shadowRoot;
+    if (root) {
+      const fields = root.querySelectorAll('.f-text-field');
+      if (fields)
+        fields.forEach((f) => {
+          FTextFieldMDC(f);
+        });
+    }
     this.didRenderInteractables();
   }
   render() {
@@ -392,13 +370,13 @@ export class KupFormEditor {
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
   }
-  static get is() { return "kup-form-editor"; }
+  static get is() { return "kup-dashboard"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["kup-form-editor.scss"]
+    "$": ["kup-dashboard.scss"]
   }; }
   static get styleUrls() { return {
-    "$": ["kup-form-editor.css"]
+    "$": ["kup-dashboard.css"]
   }; }
   static get properties() { return {
     "customStyle": {
@@ -429,12 +407,12 @@ export class KupFormEditor {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "KupForm",
-        "resolved": "KupForm",
+        "original": "KupDataDashboard",
+        "resolved": "KupDataDashboard",
         "references": {
-          "KupForm": {
+          "KupDataDashboard": {
             "location": "import",
-            "path": "./kup-form-editor-declarations"
+            "path": "./kup-dashboard-declarations"
           }
         }
       },
@@ -443,11 +421,32 @@ export class KupFormEditor {
       "docs": {
         "tags": [{
             "name": "default",
-            "text": "false"
+            "text": "null"
           }],
         "text": "The data of the component."
       },
       "defaultValue": "null"
+    },
+    "enableDesign": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }],
+        "text": "Enable drag & drop of the section."
+      },
+      "attribute": "enable-design",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -455,7 +454,7 @@ export class KupFormEditor {
   }; }
   static get events() { return [{
       "method": "kupSave",
-      "name": "kup-formeditor-save",
+      "name": "kup-dashboard-save",
       "bubbles": true,
       "cancelable": false,
       "composed": true,
@@ -464,12 +463,12 @@ export class KupFormEditor {
         "text": ""
       },
       "complexType": {
-        "original": "KupFormEditorEventPayload",
-        "resolved": "KupFormEditorEventPayload",
+        "original": "KupDashboardEventPayload",
+        "resolved": "KupDashboardEventPayload",
         "references": {
-          "KupFormEditorEventPayload": {
+          "KupDashboardEventPayload": {
             "location": "import",
-            "path": "./kup-form-editor-declarations"
+            "path": "./kup-dashboard-declarations"
           }
         }
       }

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -3338,20 +3338,21 @@ export class KupDataTable {
     }
     let groupChips = null;
     if (this.isGrouping()) {
-      const chipsData = this.groups.map((group) => {
+      const chipsData = [];
+      for (let index = 0; index < this.groups.length; index++) {
+        const group = this.groups[index];
         const column = getColumnByName(this.getColumns(), group.column);
         if (column) {
-          const a = {
+          chipsData.push({
             value: column.title,
             id: column.name,
             checked: true,
-          };
-          return a;
+          });
         }
         else {
-          return null;
+          this.kupManager.debug.logMessage(this, "Grouped for a non-existent column! (" + group.column + ")", KupDebugCategory.WARNING);
         }
-      });
+      }
       if (chipsData.length > 0) {
         const props = {
           data: chipsData,

package/dist/collection/components/kup-drawer/kup-drawer.css

@@ -37,15 +37,13 @@
 }
 
 .backdrop {
+  background: var(--kup_drawer_backdrop);
+  display: none;
+  height: 100%;
+  left: 0;
   position: fixed;
   top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
-  background: var(--kup_drawer_backdrop);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--kup_drawer_transition) ease-in;
   z-index: var(--kup-drawer-zindex);
 }
 
@@ -87,8 +85,7 @@
   left: 0;
 }
 :host([kup-opened]) .backdrop {
-  opacity: 1;
-  pointer-events: all;
+  display: block;
 }
 
 /*-------------------------------------------------*/

package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js

@@ -326,6 +326,7 @@ export class KupDropdownButton {
         ? true
         : false,
       styling: this.styling ? this.styling : FButtonStyling.RAISED,
+      title: this.rootElement.title,
     };
     if (!this.dropdownOnly) {
       buttons.push(h(FButton, Object.assign({}, props, { icon: this.icon ? this.icon : null, label: this.label ? this.label : null, trailingIcon: this.trailingIcon ? true : false, wrapperClass: "dropdown-button__primary-action", onClick: () => this.onKupClick(), onBlur: () => this.onKupBlur(), onFocus: () => this.onKupFocus() })));

package/dist/collection/components/kup-family-tree/kup-family-tree-declarations.js

@@ -0,0 +1,12 @@
+/**
+ * Props of the kup-family-tree component.
+ * Used to export every prop in an object.
+ */
+export var KupFamilyTreeProps;
+(function (KupFamilyTreeProps) {
+  KupFamilyTreeProps["autofit"] = "The component's initial render will fit the container.";
+  KupFamilyTreeProps["collapsible"] = "Nodes can be expanded/collapsed.";
+  KupFamilyTreeProps["customStyle"] = "Custom style of the component.";
+  KupFamilyTreeProps["data"] = "Actual data of the component";
+  KupFamilyTreeProps["layout"] = "Layout of the boxes.";
+})(KupFamilyTreeProps || (KupFamilyTreeProps = {}));

package/dist/collection/components/kup-family-tree/kup-family-tree.css

@@ -0,0 +1,101 @@
+/**
+* //TODO: Handle height properly once understood whether to use kup-box or not
+* @prop --kup-familytree-item-background-color: Sets the background color of the items.
+* @prop --kup-familytree-item-color: Sets the color of the items.
+* @prop --kup-familytree-item-height: Sets the height of the items.
+* @prop --kup-familytree-item-h-padding: Sets the horizontal padding of items.
+* @prop --kup-familytree-item-v-padding: Sets the vertical padding of items.
+* @prop --kup-familytree-item-width: Sets the width of the items.
+* @prop --kup-familytree-lines-color: Sets the color of the lines.
+*/
+:host {
+  --kup_familytree_item_background_color: var(
+    --kup-familytree-item-background-color,
+    var(--kup-primary-color)
+  );
+  --kup_familytree_item_color: var(
+    --kup-familytree-item-color,
+    var(--kup-text-on-primary-color)
+  );
+  --kup_familytree_item_height: var(--kup-familytree-item-height, 40px);
+  --kup_familytree_item_h_padding: var(--kup-familytree-item-h-padding, 8px);
+  --kup_familytree_item_v_padding: var(--kup-familytree-item-v-padding, 10px);
+  --kup_familytree_item_width: var(--kup-familytree-item-width, 120px);
+  --kup_familytree_lines_color: var(
+    --kup-familytree-lines-color,
+    var(--kup-border-color)
+  );
+  display: block;
+  overflow: hidden;
+}
+
+.family-tree {
+  display: flex;
+  transform: scale(var(--kup_familytree_scale, 1));
+  transform-origin: 0px 0px;
+}
+.family-tree__node {
+  border-collapse: collapse;
+  margin: auto;
+}
+.family-tree__node__staff {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 0;
+  transform: translateX(calc( ( var(--kup_familytree_item_width) + (var(--kup_familytree_item_h_padding) * 2) ) / 2 )) translateY(calc( 0px - ( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) ) ));
+}
+.family-tree__node__staff__item {
+  padding: var(--kup_familytree_item_v_padding);
+  text-align: left;
+}
+.family-tree__node__staff__item:before {
+  border-top: 2px solid var(--kup_familytree_lines_color);
+  content: "";
+  position: absolute;
+  transform: translateX(calc(100% + 2px)) translateY(calc(var(--kup_familytree_item_height) / 2));
+  width: var(--kup_familytree_item_h_padding);
+}
+.family-tree__node td {
+  vertical-align: top;
+  padding: 0;
+}
+.family-tree__line--left {
+  border-left: 2px solid var(--kup_familytree_lines_color);
+}
+.family-tree__line--placeholder {
+  height: calc(var(--kup_familytree_item_height) / 2);
+}
+.family-tree__line--staff {
+  height: calc( var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) );
+}
+.family-tree__line--right {
+  border-right: 2px solid var(--kup_familytree_lines_color);
+}
+.family-tree__line--top {
+  border-top: 2px solid var(--kup_familytree_lines_color);
+}
+.family-tree__line--vertical {
+  background-color: var(--kup_familytree_lines_color);
+  margin-left: auto;
+  margin-right: auto;
+  width: 2px;
+}
+.family-tree__item {
+  display: flex;
+}
+.family-tree__item__wrapper {
+  margin: auto;
+}
+.family-tree__item__wrapper kup-box {
+  margin: 0 auto;
+  overflow: hidden;
+  padding: 0 18px;
+  width: var(--kup_familytree_item_width);
+  z-index: 1;
+}
+.family-tree__item__wrapper .f-button {
+  width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}