wj-elements/dist/wje-orgchart.js

WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.

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);
import WJElement from "./wje-element.js";
const styles = "* {\n    margin: 0;\n    padding: 0;\n}\n\n:host {\n    position: relative;\n    .native-orgchart {\n        padding-top: var(--wje-orgchart-height-line);\n        display: flex;\n        justify-content: center;\n    }\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:host([flat]) {\n    .native-orgchart {\n        padding-top: 0;\n    }\n\n    &::before {\n        display: none;\n    }\n}\n";
class Orgchart extends WJElement {
  /**
   * Creates an instance of Orgchart.
   * @class
   */
  constructor() {
    super();
    __publicField(this, "className", "Orgchart");
    /**
     * Marks direct children that are rendered inside a flat chart.
     */
    __publicField(this, "syncFlatChildren", () => {
      var _a, _b;
      let children = new Set(((_a = this.defaultSlot) == null ? void 0 : _a.assignedElements({ flatten: true })) || []);
      (_b = this.flatChildren) == null ? void 0 : _b.forEach((child) => {
        if (!children.has(child)) child.classList.remove("flat-child");
      });
      children.forEach((child) => child.classList.toggle("flat-child", this.flat));
      this.flatChildren = children;
    });
  }
  /**
   * Sets whether the chart should omit its incoming connector spacing.
   * @param {boolean} value True when the chart should render without top connector spacing.
   */
  set flat(value) {
    this.toggleAttribute("flat", Boolean(value));
  }
  /**
   * Gets whether the chart omits its incoming connector spacing.
   * @returns {boolean} True when the chart has the flat attribute.
   */
  get flat() {
    return this.hasAttribute("flat");
  }
  /**
   * Returns the CSS styles for the component.
   * @static
   * @returns {CSSStyleSheet}
   */
  static get cssStyleSheet() {
    return styles;
  }
  /**
   * Returns attributes that trigger a redraw when they change.
   * @returns {Array<string>} Attribute names that require a new template render.
   */
  static get observedAttributes() {
    return ["flat"];
  }
  /**
   * Sets up the attributes for the component.
   */
  setupAttributes() {
    this.isShadowRoot = "open";
    this.syncAria();
  }
  /**
   * Draws the component for the org chart.
   * @returns {DocumentFragment}
   */
  draw() {
    let fragment = document.createDocumentFragment();
    let native = document.createElement("div");
    native.setAttribute("part", "native");
    native.classList.add("native-orgchart");
    let slot = document.createElement("slot");
    native.appendChild(slot);
    fragment.appendChild(native);
    this.native = native;
    this.defaultSlot = slot;
    return fragment;
  }
  /**
   * Syncs flat chart state to direct slotted children.
   */
  afterDraw() {
    this.defaultSlot.addEventListener("slotchange", this.syncFlatChildren);
    this.syncFlatChildren();
  }
  /**
   * Sync ARIA attributes on host.
   */
  syncAria() {
    if (!this.hasAttribute("role")) {
      this.setAriaState({ role: "tree" });
    }
  }
}
Orgchart.define("wje-orgchart", Orgchart);
export {
  Orgchart as default
};
//# sourceMappingURL=wje-orgchart.js.map