wj-elements 0.1.136 → 0.1.138

package/dist/wje-options.js

@@ -0,0 +1,355 @@
+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, { event } from "./wje-element.js";
+import { I as InfiniteScroll } from "./infinite-scroll.element-XVJukzjy.js";
+import { L as List } from "./list.element-Ce1vIm1O.js";
+import Option from "./wje-option.js";
+class Options extends WJElement {
+  /**
+   * Creates an instance of Options.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "dependencies", {
+      "wje-option": Option,
+      "wje-infinite-scroll": InfiniteScroll,
+      "wje-list": List
+    });
+    __publicField(this, "className", "Options");
+    /**
+     * Recursively updates the object based on the provided path to the property.
+     * @param {object | Array | null} object
+     * @param {Array<string> | null} pathToProperty
+     * @returns {object | Array | null}
+     */
+    __publicField(this, "recursiveUpdate", (object, pathToProperty) => {
+      var _a;
+      if (pathToProperty.length === 0) {
+        if (Array.isArray(object)) {
+          return object.filter(
+            (option) => !this.loadedOptions.some(
+              (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]
+            )
+          );
+        } else {
+          console.error("Expected an array but got:", object, pathToProperty);
+          return [];
+        }
+      }
+      const [currentPath, ...remainingPath] = pathToProperty;
+      if (remainingPath.length > 0) {
+        object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);
+      } else {
+        object[currentPath] = ((_a = object[currentPath]) == null ? void 0 : _a.filter(
+          (option) => !this.loadedOptions.some(
+            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]
+          )
+        )) ?? [];
+      }
+      return object;
+    });
+    /**
+     * Generates an HTML option element based on the provided item.
+     * @param {object} item The item to generate the option element for.
+     * @returns {HTMLElement} The generated option element.
+     */
+    __publicField(this, "htmlItem", (item) => {
+      let option = document.createElement("wje-option");
+      if (item[this.itemValue] === null || item[this.itemValue] === void 0) {
+        console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);
+      }
+      if (item[this.itemText] === null || item[this.itemText] === void 0) {
+        console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);
+      }
+      option.setAttribute("value", item[this.itemValue] ?? "");
+      option.innerText = item[this.itemText] ?? "";
+      return option;
+    });
+    this._loadedOptions = [];
+  }
+  /**
+   * Returns the list of attributes to observe for changes.
+   * @static
+   * @returns {Array<string>}
+   */
+  static get observedAttributes() {
+    return ["search"];
+  }
+  /**
+   * Sets the option array path attribute.
+   * @param {string} value The value to set for the option array path.
+   */
+  set optionArrayPath(value) {
+    this.setAttribute("option-array-path", value);
+  }
+  /**
+   * Gets the option array path attribute.
+   * @returns {string} The value of the option array path attribute or "data" if not set.
+   */
+  get optionArrayPath() {
+    return this.getAttribute("option-array-path");
+  }
+  /**
+   * Checks if the option array path attribute is present.
+   * @returns {boolean} True if the option array path attribute is present, false otherwise.
+   */
+  get hasOptionArrayPath() {
+    return this.hasAttribute("option-array-path");
+  }
+  /**
+   * Gets the dropdown height attribute.
+   * @returns {string} The value of the dropdown height attribute or "100%" if not set.
+   */
+  get dropdownHeight() {
+    return this.getAttribute("dropdown-height") || "100%";
+  }
+  /**
+   * Sets the dropdown height attribute.
+   * @param {string} value The value to set for the dropdown height.
+   */
+  set dropdownHeight(value) {
+    this.setAttribute("dropdown-height", value);
+  }
+  /**
+   * Sets the item value attribute.
+   * @param {string} value The value to set for the item value.
+   */
+  set itemValue(value) {
+    this.setAttribute("item-value", value);
+  }
+  /**
+   * Gets the item value attribute.
+   * @returns {string} The value of the item value attribute or "value" if not set.
+   */
+  get itemValue() {
+    return this.getAttribute("item-value") || "value";
+  }
+  /**
+   * Sets the item text attribute.
+   * @param {string} value The value to set for the item text.
+   */
+  set itemText(value) {
+    this.setAttribute("item-text", value);
+  }
+  /**
+   * Gets the item text attribute.
+   * @returns {string} The value of the item text attribute or "text" if not set.
+   */
+  get itemText() {
+    return this.getAttribute("item-text") || "text";
+  }
+  /**
+   * Gets the lazy load size attribute.
+   * @returns {number} The value of the lazy load size attribute or 10 if not set.
+   */
+  get lazyLoadSize() {
+    return this.getAttribute("lazy-load-size") || 10;
+  }
+  /**
+   * Sets the lazy load size attribute.
+   * @param {number} value The value to set for the lazy load size.
+   */
+  set lazyLoadSize(value) {
+    this.setAttribute("lazy-load-size", value);
+  }
+  /**
+   * Sets the search attribute.
+   * @param {string} value The value to set for the search.
+   */
+  set search(value) {
+    this.setAttribute("search", value);
+  }
+  /**
+   * Gets the search attribute.
+   * @returns {string} The value of the search attribute.
+   */
+  get search() {
+    return this.getAttribute("search");
+  }
+  /**
+   * Checks if the search attribute is present.
+   * @returns {boolean} True if the search attribute is present, false otherwise.
+   */
+  get hasSearch() {
+    return this.hasAttribute("search");
+  }
+  get searchToQueryParams() {
+    return this.getAttribute("search-to-query-params");
+  }
+  set searchToQueryParams(value) {
+    this.setAttribute("search-to-query-params", value);
+  }
+  get hasSearchToQueryParams() {
+    return this.hasAttribute("search-to-query-params");
+  }
+  /**
+   * Checks if the lazy attribute is present.
+   * @returns {boolean} True if the lazy attribute is present, false otherwise.
+   */
+  get lazy() {
+    return this.hasAttribute("lazy");
+  }
+  /**
+   * Sets the lazy attribute.
+   * @param {boolean} value The value to set for the lazy attribute.
+   */
+  set lazy(value) {
+    this.setAttribute("lazy", value);
+  }
+  /**
+   * Gets the loaded options.
+   * @returns {Array} The loaded options.
+   */
+  get options() {
+    var _a;
+    return (_a = this.loadedOptions) == null ? void 0 : _a.flat();
+  }
+  get loadedOptions() {
+    return this._loadedOptions;
+  }
+  set loadedOptions(loadedOptions) {
+    this._loadedOptions = loadedOptions;
+  }
+  /**
+   * Lifecycle method, called whenever an observed property changes.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (this.infiniteScroll && name === "search" && oldValue !== newValue) {
+      this.loadedOptions = [];
+      this.infiniteScroll.placementObj.innerHTML = "";
+      this.infiniteScroll.totalPages = 0;
+      this.infiniteScroll.refresh();
+    }
+  }
+  /**
+   * Sets up the attributes for the component.
+   */
+  setupAttributes() {
+    this.isShadowRoot = "open";
+  }
+  /**
+   * Prepares the component before drawing.
+   * Fetches the pages and creates the options elements.
+   */
+  afterDraw() {
+    event.dispatchCustomEvent(this, "wje-options:load", {});
+  }
+  /**
+   * Draws the component.
+   * @returns {DocumentFragment}
+   */
+  async draw() {
+    let fragment = document.createDocumentFragment();
+    const slot = document.createElement("slot");
+    if (this.hasAttribute("lazy")) {
+      const list = document.createElement("wje-list");
+      const infiniteScroll = document.createElement("wje-infinite-scroll");
+      infiniteScroll.setAttribute("placement", "wje-list");
+      infiniteScroll.setAttribute("height", this.dropdownHeight);
+      infiniteScroll.setAttribute("object-name", this.optionArrayPath);
+      infiniteScroll.append(list);
+      infiniteScroll.dataToHtml = this.htmlItem;
+      infiniteScroll.setCustomData = async (page, signal) => {
+        let processedUrl = `${this.url}${this.search ? `/${this.search}` : ""}?page=${page}&size=${this.lazyLoadSize}`;
+        if (this.hasSearchToQueryParams) {
+          processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&search=${this.search}` : ""}`;
+        }
+        let res = await this.service.get(
+          processedUrl,
+          null,
+          false,
+          signal
+        );
+        const filteredOptions = this.filterOutDrawnOptions(res);
+        this.loadedOptions.push(...this.processData(filteredOptions));
+        return filteredOptions;
+      };
+      if (!this.contains(infiniteScroll)) {
+        this.appendChild(infiniteScroll);
+      }
+      this.infiniteScroll = infiniteScroll;
+    } else {
+      this.response = await this.getPages();
+      let optionsData = this.filterOutDrawnOptions(this.response);
+      optionsData = this.processData(optionsData);
+      this.loadedOptions.push(...optionsData);
+      this.append(...optionsData.map(this.htmlItem));
+    }
+    fragment.appendChild(slot);
+    return fragment;
+  }
+  /**
+   * Processes the given data and returns the options based on the option array path.
+   * @param {any} data The data to be processed.
+   * @returns {any} - The options based on the option array path.
+   */
+  processData(data) {
+    var _a;
+    const splittedOptionArrayPath = this.optionArrayPath ? (_a = this.optionArrayPath) == null ? void 0 : _a.split(".") : null;
+    let options = data;
+    splittedOptionArrayPath == null ? void 0 : splittedOptionArrayPath.forEach((path) => {
+      options = options[path];
+    });
+    return options ?? [];
+  }
+  /**
+   * Filters out drawn options from the response.
+   * @param {object | null} response The response to filter.
+   * @returns {object} The filtered response.
+   */
+  filterOutDrawnOptions(response) {
+    var _a;
+    const splittedOptionArrayPath = this.optionArrayPath ? (_a = this.optionArrayPath) == null ? void 0 : _a.split(".") : [];
+    let filteredResponse = structuredClone(response);
+    filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);
+    return filteredResponse;
+  }
+  /**
+   * Fetches the pages from the provided URL.
+   * @param {number} page The page number to fetch.
+   * @returns {Promise<object>} The fetched data.
+   * @throws Will throw an error if the response is not ok.
+   */
+  async getPages(page) {
+    const response = await fetch(this.url);
+    if (!response.ok) {
+      throw new Error(`An error occurred: ${response.status}`);
+    }
+    return await response.json();
+  }
+  /**
+   * Finds the selected option data based on the given selected option values.
+   * @param {Array} selectedOptionValues The array of selected option values.
+   * @returns {Array} - The array of option data that matches the selected option values.
+   */
+  findSelectedOptionData(selectedOptionValues = []) {
+    return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));
+  }
+  /**
+   * Adds an option to the element.
+   * @param {object} optionData The data of the option to be added.
+   */
+  addOption(optionData) {
+    if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {
+      return;
+    }
+    this.prepend(this.htmlItem(optionData));
+    this.loadedOptions.push(optionData);
+  }
+  /**
+   * Adds options to the element.
+   * @param {Array} optionsData The array of option data to be added.
+   * @param {boolean} [silent] Whether to suppress events triggered by adding options.
+   */
+  addOptions(optionsData = [], silent = false) {
+    if (Array.isArray(optionsData)) optionsData == null ? void 0 : optionsData.forEach((od) => this.addOption(od, silent));
+    else this.addOption(optionsData, silent);
+  }
+}
+Options.define("wje-options", Options);
+export {
+  Options as default
+};
+//# sourceMappingURL=wje-options.js.map

package/dist/wje-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-options.js","sources":["../packages/wje-options/options.element.js","../packages/wje-options/options.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport InfiniteScroll from '../wje-infinite-scroll/infinite-scroll.element.js';\nimport List from '../wje-list/list.element.js';\nimport Option from '../wje-option/option.js';\n\n/**\n * `Options` is a custom web component that represents a set of options.\n * It extends from `WJElement`.\n * @summary This element represents a set of options.\n * @documentation https://elements.webjet.sk/components/options\n * @status stable\n * @augments {WJElement}\n * // @fires wje-options:load - Event fired when the options are loaded.\n * @tag wje-options\n */\nexport default class Options extends WJElement {\n    /**\n     * Creates an instance of Options.\n     * @class\n     */\n    constructor() {\n        super();\n\n        this._loadedOptions = [];\n    }\n\n    dependencies = {\n        'wje-option': Option,\n        'wje-infinite-scroll': InfiniteScroll,\n        'wje-list': List,\n    };\n\n    className = 'Options';\n\n    /**\n     * Returns the list of attributes to observe for changes.\n     * @static\n     * @returns {Array<string>}\n     */\n    static get observedAttributes() {\n        return ['search'];\n    }\n\n    /**\n     * Sets the option array path attribute.\n     * @param {string} value The value to set for the option array path.\n     */\n    set optionArrayPath(value) {\n        this.setAttribute('option-array-path', value);\n    }\n\n    /**\n     * Gets the option array path attribute.\n     * @returns {string} The value of the option array path attribute or \"data\" if not set.\n     */\n    get optionArrayPath() {\n        return this.getAttribute('option-array-path');\n    }\n\n    /**\n     * Checks if the option array path attribute is present.\n     * @returns {boolean} True if the option array path attribute is present, false otherwise.\n     */\n    get hasOptionArrayPath() {\n        return this.hasAttribute('option-array-path');\n    }\n\n    /**\n     * Gets the dropdown height attribute.\n     * @returns {string} The value of the dropdown height attribute or \"100%\" if not set.\n     */\n    get dropdownHeight() {\n        return this.getAttribute('dropdown-height') || '100%';\n    }\n\n    /**\n     * Sets the dropdown height attribute.\n     * @param {string} value The value to set for the dropdown height.\n     */\n    set dropdownHeight(value) {\n        this.setAttribute('dropdown-height', value);\n    }\n\n    /**\n     * Sets the item value attribute.\n     * @param {string} value The value to set for the item value.\n     */\n    set itemValue(value) {\n        this.setAttribute('item-value', value);\n    }\n\n    /**\n     * Gets the item value attribute.\n     * @returns {string} The value of the item value attribute or \"value\" if not set.\n     */\n    get itemValue() {\n        return this.getAttribute('item-value') || 'value';\n    }\n\n    /**\n     * Sets the item text attribute.\n     * @param {string} value The value to set for the item text.\n     */\n    set itemText(value) {\n        this.setAttribute('item-text', value);\n    }\n\n    /**\n     * Gets the item text attribute.\n     * @returns {string} The value of the item text attribute or \"text\" if not set.\n     */\n    get itemText() {\n        return this.getAttribute('item-text') || 'text';\n    }\n\n    /**\n     * Gets the lazy load size attribute.\n     * @returns {number} The value of the lazy load size attribute or 10 if not set.\n     */\n    get lazyLoadSize() {\n        return this.getAttribute('lazy-load-size') || 10;\n    }\n\n    /**\n     * Sets the lazy load size attribute.\n     * @param {number} value The value to set for the lazy load size.\n     */\n    set lazyLoadSize(value) {\n        this.setAttribute('lazy-load-size', value);\n    }\n\n    /**\n     * Sets the search attribute.\n     * @param {string} value The value to set for the search.\n     */\n    set search(value) {\n        this.setAttribute('search', value);\n    }\n\n    /**\n     * Gets the search attribute.\n     * @returns {string} The value of the search attribute.\n     */\n    get search() {\n        return this.getAttribute('search');\n    }\n\n    /**\n     * Checks if the search attribute is present.\n     * @returns {boolean} True if the search attribute is present, false otherwise.\n     */\n    get hasSearch() {\n        return this.hasAttribute('search');\n    }\n\n    get searchToQueryParams() {\n        return this.getAttribute('search-to-query-params');\n    }\n\n    set searchToQueryParams(value) {\n        this.setAttribute('search-to-query-params', value);\n    }\n\n    get hasSearchToQueryParams() {\n        return this.hasAttribute('search-to-query-params');\n    }\n\n    /**\n     * Checks if the lazy attribute is present.\n     * @returns {boolean} True if the lazy attribute is present, false otherwise.\n     */\n    get lazy() {\n        return this.hasAttribute('lazy');\n    }\n\n    /**\n     * Sets the lazy attribute.\n     * @param {boolean} value The value to set for the lazy attribute.\n     */\n    set lazy(value) {\n        this.setAttribute('lazy', value);\n    }\n\n    /**\n     * Gets the loaded options.\n     * @returns {Array} The loaded options.\n     */\n    get options() {\n        return this.loadedOptions?.flat();\n    }\n\n    get loadedOptions() {\n        return this._loadedOptions;\n    }\n\n    set loadedOptions(loadedOptions) {\n        this._loadedOptions = loadedOptions;\n    }\n\n    /**\n     * Lifecycle method, called whenever an observed property changes.\n     */\n    attributeChangedCallback(name, oldValue, newValue) {\n        if (this.infiniteScroll && name === 'search' && oldValue !== newValue) {\n            this.loadedOptions = [];\n            this.infiniteScroll.placementObj.innerHTML = '';\n            this.infiniteScroll.totalPages = 0;\n            this.infiniteScroll.refresh();\n        }\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Prepares the component before drawing.\n     * Fetches the pages and creates the options elements.\n     */\n    afterDraw() {\n        event.dispatchCustomEvent(this, 'wje-options:load', {}); // nepomohlo to, v ff stale je scroll hore\n    }\n\n    /**\n     * Draws the component.\n     * @returns {DocumentFragment}\n     */\n    async draw() {\n        let fragment = document.createDocumentFragment();\n\n        const slot = document.createElement('slot');\n\n        if (this.hasAttribute('lazy')) {\n            const list = document.createElement('wje-list');\n\n            const infiniteScroll = document.createElement('wje-infinite-scroll');\n            infiniteScroll.setAttribute('placement', 'wje-list');\n            infiniteScroll.setAttribute('height', this.dropdownHeight);\n            infiniteScroll.setAttribute('object-name', this.optionArrayPath);\n            infiniteScroll.append(list);\n\n            infiniteScroll.dataToHtml = this.htmlItem;\n\n            infiniteScroll.setCustomData = async (page, signal) => {\n                let processedUrl = `${this.url}${this.search ? `/${this.search}` : ''}?page=${page}&size=${this.lazyLoadSize}`\n\n                if (this.hasSearchToQueryParams) {\n                    processedUrl = `${this.url}?page=${page}&size=${this.lazyLoadSize}${this.search ? `&search=${this.search}` : ''}`;\n                }\n\n                let res = await this.service.get(processedUrl,\n                    null,\n                    false,\n                    signal\n                );\n                const filteredOptions = this.filterOutDrawnOptions(res);\n                this.loadedOptions.push(...this.processData(filteredOptions));\n\n                return filteredOptions;\n            };\n\n            if (!this.contains(infiniteScroll)) {\n                this.appendChild(infiniteScroll);\n            }\n\n            this.infiniteScroll = infiniteScroll;\n        } else {\n            this.response = await this.getPages();\n            let optionsData = this.filterOutDrawnOptions(this.response);\n            optionsData = this.processData(optionsData);\n\n            this.loadedOptions.push(...optionsData);\n\n            this.append(...optionsData.map(this.htmlItem));\n        }\n\n        fragment.appendChild(slot);\n\n        return fragment;\n    }\n\n    /**\n     * Processes the given data and returns the options based on the option array path.\n     * @param {any} data The data to be processed.\n     * @returns {any} - The options based on the option array path.\n     */\n    processData(data) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : null;\n        let options = data;\n\n        splittedOptionArrayPath?.forEach((path) => {\n            options = options[path];\n        });\n\n        return options ?? [];\n    }\n\n    /**\n     * Filters out drawn options from the response.\n     * @param {object | null} response The response to filter.\n     * @returns {object} The filtered response.\n     */\n    filterOutDrawnOptions(response) {\n        const splittedOptionArrayPath = this.optionArrayPath ? this.optionArrayPath?.split('.') : [];\n        let filteredResponse = structuredClone(response);\n\n        filteredResponse = this.recursiveUpdate(filteredResponse, splittedOptionArrayPath);\n        return filteredResponse;\n    }\n\n    /**\n     * Recursively updates the object based on the provided path to the property.\n     * @param {object | Array | null} object\n     * @param {Array<string> | null} pathToProperty\n     * @returns {object | Array | null}\n     */\n    recursiveUpdate = (object, pathToProperty) => {\n        if (pathToProperty.length === 0) {\n            if (Array.isArray(object)) {\n                return object.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                );\n            } else {\n                console.error('Expected an array but got:', object, pathToProperty);\n                return [];\n            }\n        }\n\n        const [currentPath, ...remainingPath] = pathToProperty;\n        if (remainingPath.length > 0) {\n            object[currentPath] = this.recursiveUpdate(object[currentPath], remainingPath);\n        } else {\n            object[currentPath] =\n                object[currentPath]?.filter(\n                    (option) =>\n                        !this.loadedOptions.some(\n                            (loadedOption) => loadedOption[this.itemValue] === option[this.itemValue]\n                        )\n                ) ?? [];\n        }\n        return object;\n    };\n\n    /**\n     * Generates an HTML option element based on the provided item.\n     * @param {object} item The item to generate the option element for.\n     * @returns {HTMLElement} The generated option element.\n     */\n    htmlItem = (item) => {\n        let option = document.createElement('wje-option');\n\n        if (item[this.itemValue] === null || item[this.itemValue] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemValue}`);\n        }\n\n        if (item[this.itemText] === null || item[this.itemText] === undefined) {\n            console.warn(`The item ${JSON.stringify(item)} does not have the property ${this.itemText}`);\n        }\n\n        option.setAttribute('value', item[this.itemValue] ?? '');\n        option.innerText = item[this.itemText] ?? '';\n\n        return option;\n    };\n\n    /**\n     * Fetches the pages from the provided URL.\n     * @param {number} page The page number to fetch.\n     * @returns {Promise<object>} The fetched data.\n     * @throws Will throw an error if the response is not ok.\n     */\n    async getPages(page) {\n        const response = await fetch(this.url);\n        if (!response.ok) {\n            throw new Error(`An error occurred: ${response.status}`);\n        }\n        return await response.json();\n    }\n\n    /**\n     * Finds the selected option data based on the given selected option values.\n     * @param {Array} selectedOptionValues The array of selected option values.\n     * @returns {Array} - The array of option data that matches the selected option values.\n     */\n    findSelectedOptionData(selectedOptionValues = []) {\n        return this.options.filter((option) => selectedOptionValues.includes(option[this.itemValue]));\n    }\n\n    /**\n     * Adds an option to the element.\n     * @param {object} optionData The data of the option to be added.\n     */\n    addOption(optionData) {\n        if (this.loadedOptions.some((option) => option[this.itemValue] === optionData[this.itemValue])) {\n            return;\n        }\n\n        this.prepend(this.htmlItem(optionData));\n        this.loadedOptions.push(optionData);\n    }\n\n    /**\n     * Adds options to the element.\n     * @param {Array} optionsData The array of option data to be added.\n     * @param {boolean} [silent] Whether to suppress events triggered by adding options.\n     */\n    addOptions(optionsData = [], silent = false) {\n        if (Array.isArray(optionsData)) optionsData?.forEach((od) => this.addOption(od, silent));\n        else this.addOption(optionsData, silent);\n    }\n}\n","import Options from './options.element.js';\n\nexport default Options;\n\nOptions.define('wje-options', Options);\n"],"names":[],"mappings":"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"}

package/dist/wje-orgchart-group.js

@@ -0,0 +1,72 @@
+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, { event } from "./wje-element.js";
+const styles = ":host {\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,\n    &::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: var(--wje-orgchart-group-padding);\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,\n: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}\n";
+class OrgchartGroup extends WJElement {
+  /**
+   * Creates an instance of OrgchartGroup.
+   * @class
+   */
+  constructor() {
+    super();
+    /**
+     * The class name for the component.
+     * @type {string}
+     */
+    __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 for the org chart group.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    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.setAttribute("part", "title");
+    title.innerHTML = this.getAttribute("title") || "";
+    let items = document.createElement("div");
+    items.setAttribute("part", "items");
+    items.classList.add("items");
+    let slot = document.createElement("slot");
+    items.appendChild(slot);
+    card.appendChild(title);
+    card.appendChild(items);
+    native.appendChild(card);
+    fragment.appendChild(native);
+    this.card = card;
+    return fragment;
+  }
+  /**
+   * After Draws the component for the org chart group.
+   */
+  afterDraw() {
+    this.card.addEventListener("click", (e) => {
+      e.stopPropagation();
+      event.dispatchCustomEvent(this.card, "wje-orgchart-group:click", { target: this });
+    });
+  }
+}
+OrgchartGroup.define("wje-orgchart-group", OrgchartGroup);
+export {
+  OrgchartGroup as default
+};
+//# sourceMappingURL=wje-orgchart-group.js.map

package/dist/wje-orgchart-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-orgchart-group.js","sources":["../packages/wje-orgchart-group/orgchart-group.element.js","../packages/wje-orgchart-group/orgchart-group.js"],"sourcesContent":["import { default as WJElement, event } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-orgchart-item\n * @example\n */\nexport default class OrgchartGroup extends WJElement {\n    /**\n     * Creates an instance of OrgchartGroup.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * The class name for the component.\n     * @type {string}\n     */\n    className = 'OrgchartGroup';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the org chart group.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('orgchart-group');\n\n        let card = document.createElement('wje-card');\n\n        let title = document.createElement('h4');\n        title.setAttribute('part', 'title');\n        title.innerHTML = this.getAttribute('title') || '';\n\n        let items = document.createElement('div');\n        items.setAttribute('part', 'items');\n        items.classList.add('items');\n\n        let slot = document.createElement('slot');\n\n        items.appendChild(slot);\n\n        card.appendChild(title);\n        card.appendChild(items);\n\n        native.appendChild(card);\n\n        fragment.appendChild(native);\n\n        this.card = card;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart group.\n     */\n    afterDraw() {\n        this.card.addEventListener('click', (e) => {\n            e.stopPropagation();\n            event.dispatchCustomEvent(this.card, 'wje-orgchart-group:click', { target: this });\n        });\n    }\n}\n","import OrgchartGroup from './orgchart-group.element.js';\n\nexport default OrgchartGroup;\n\nOrgchartGroup.define('wje-orgchart-group', OrgchartGroup);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,sBAAsB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKjD,cAAc;AACV,UAAO;AAOX;AAAA;AAAA;AAAA;AAAA,qCAAY;AAAA,EANhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,gBAAgB;AAErC,QAAI,OAAO,SAAS,cAAc,UAAU;AAE5C,QAAI,QAAQ,SAAS,cAAc,IAAI;AACvC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,YAAY,KAAK,aAAa,OAAO,KAAK;AAEhD,QAAI,QAAQ,SAAS,cAAc,KAAK;AACxC,UAAM,aAAa,QAAQ,OAAO;AAClC,UAAM,UAAU,IAAI,OAAO;AAE3B,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,UAAM,YAAY,IAAI;AAEtB,SAAK,YAAY,KAAK;AACtB,SAAK,YAAY,KAAK;AAEtB,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,SAAK,OAAO;AAEZ,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,KAAK,iBAAiB,SAAS,CAAC,MAAM;AACvC,QAAE,gBAAiB;AACnB,YAAM,oBAAoB,KAAK,MAAM,4BAA4B,EAAE,QAAQ,MAAM;AAAA,IAC7F,CAAS;AAAA,EACT;AACA;ACrFA,cAAc,OAAO,sBAAsB,aAAa;"}

package/dist/wje-orgchart-item.js

@@ -0,0 +1,98 @@
+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 = ":host {\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: 0.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                overflow: visible;\n                padding-block: 0.125rem;\n                background: var(--wje-orgchart-item-background);\n            }\n        }\n    }\n\n    .expander {\n        position: absolute;\n        left: calc(50% + 1px / 2);\n        border: 1px solid var(--wje-border-color);\n        border-radius: 50%;\n        width: var(--wje-orgchart-item-expander-size);\n        height: var(--wje-orgchart-item-expander-size);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--wje-color-contrast-0);\n        font-size: 8px;\n        line-height: 1;\n        box-sizing: border-box;\n        transform: translate(-50%, calc(var(--wje-orgchart-item-expander-size) / 2));\n        padding-bottom: 1px;\n        cursor: pointer;\n        z-index: 999;\n        bottom: 0;\n        &.collapse {\n            content: '+';\n            wje-orgchart {\n                display: none;\n            }\n        }\n        &:hover {\n            background: var(--wje-color-contrast-1);\n        }\n    }\n}\n\n:host(.collapse) {\n    .expander {\n        content: '+';\n    }\n    slot[name='child'] {\n        display: none;\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    box-sizing: border-box;\n\n    &::before,\n    &::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: calc(var(--wje-orgchart-item-height-line) - 1px);\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([boss]) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-boss-background);\n        border: var(--wje-orgchart-item-boss-border);\n    }\n}\n\n:host(:hover) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-hover-background);\n        border: var(--wje-orgchart-item-hover-border);\n    }\n}\n\n:host(.highlight) {\n    wje-card::part(native) {\n        background: var(--wje-orgchart-item-highlight-background);\n        border: var(--wje-orgchart-item-highlight-border);\n    }\n}\n\n:host(:only-child)::after,\n: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}\n";
+class OrgchartItem extends WJElement {
+  /**
+   * Creates an instance of OrgchartItem.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "OrgchartItem");
+    /**
+     * Toggles the children of the orgchart item.
+     * @param e The event object.
+     */
+    __publicField(this, "toggleChildren", (e) => {
+      this.classList.toggle("collapse");
+      if (this.classList.contains("collapse")) e.target.innerHTML = "+";
+      else e.target.innerHTML = "-";
+    });
+  }
+  /**
+   * Sets the boss of the orgchart item.
+   * @param value
+   */
+  set boss(value) {
+    if (value) this.setAttribute("boss", value);
+  }
+  /**
+   * Gets the boss of the orgchart item.
+   * @returns {boolean}
+   */
+  get boss() {
+    return this.hasAttribute("boss");
+  }
+  /**
+   * 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";
+  }
+  beforeDraw() {
+    if (this.parentElement && this.parentElement.tagName === "WJE-ORGCHART-GROUP") {
+      this.classList.add("parent-group");
+    }
+  }
+  /**
+   * Draws the component for the org chart item.
+   * @returns {DocumentFragment}
+   */
+  draw() {
+    let fragment = document.createDocumentFragment();
+    let native = document.createElement("div");
+    native.setAttribute("part", "native");
+    native.classList.add("orgchart-item");
+    let card = document.createElement("wje-card");
+    card.setAttribute("part", "card");
+    let slot = document.createElement("slot");
+    let child = document.createElement("slot");
+    child.setAttribute("name", "child");
+    let expander = document.createElement("div");
+    expander.setAttribute("part", "expander");
+    expander.classList.add("expander");
+    expander.innerHTML = "-";
+    card.appendChild(slot);
+    if (this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === "WJE-ORGCHART"))
+      card.appendChild(expander);
+    native.appendChild(card);
+    native.appendChild(child);
+    fragment.appendChild(native);
+    this.expander = expander;
+    return fragment;
+  }
+  /**
+   * After Draws the component for the org chart item.
+   */
+  afterDraw() {
+    this.expander.addEventListener("click", this.toggleChildren);
+  }
+  dispatchEvent(e) {
+    return false;
+  }
+}
+OrgchartItem.define("wje-orgchart-item", OrgchartItem);
+export {
+  OrgchartItem as default
+};
+//# sourceMappingURL=wje-orgchart-item.js.map

package/dist/wje-orgchart-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-orgchart-item.js","sources":["../packages/wje-orgchart-item/orgchart-item.element.js","../packages/wje-orgchart-item/orgchart-item.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary OrgchartItem is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/OrgchartItem\n * @status stable\n * @augments WJElement\n * @attribute {boolean} boss - The boss of the orgchart item (default: false).\n * @slot - The default slot for the orgchart item.\n * @slot child - The child slot for the orgchart item.\n * @csspart - Styles the element.\n * @csspart native - Styles the native element.\n * @csspart expander - Styles the expander element.\n * @tag wje-orgchart-item\n */\nexport default class OrgchartItem extends WJElement {\n    /**\n     * Creates an instance of OrgchartItem.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    /**\n     * Sets the boss of the orgchart item.\n     * @param value\n     */\n\n    set boss(value) {\n        if (value) this.setAttribute('boss', value);\n    }\n\n    /**\n     * Gets the boss of the orgchart item.\n     * @returns {boolean}\n     */\n\n    get boss() {\n        return this.hasAttribute('boss');\n    }\n\n    className = 'OrgchartItem';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    beforeDraw() {\n        if (this.parentElement && this.parentElement.tagName === 'WJE-ORGCHART-GROUP') {\n            this.classList.add('parent-group');\n        }\n    }\n\n    /**\n     * Draws the component for the org chart item.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('orgchart-item');\n\n        let card = document.createElement('wje-card');\n        card.setAttribute('part', 'card');\n\n        let slot = document.createElement('slot');\n\n        let child = document.createElement('slot');\n        child.setAttribute('name', 'child');\n\n        let expander = document.createElement('div');\n        expander.setAttribute('part', 'expander');\n        expander.classList.add('expander');\n        expander.innerHTML = '-';\n\n        card.appendChild(slot);\n        if (this.children.length > 0 && Array.from(this.children).some((el) => el.tagName === 'WJE-ORGCHART'))\n            card.appendChild(expander); // if the orgchart item has children and\n\n        native.appendChild(card);\n        native.appendChild(child);\n\n        fragment.appendChild(native);\n\n        this.expander = expander;\n\n        return fragment;\n    }\n\n    /**\n     * After Draws the component for the org chart item.\n     */\n    afterDraw() {\n        this.expander.addEventListener('click', this.toggleChildren);\n    }\n\n    /**\n     * Toggles the children of the orgchart item.\n     * @param e The event object.\n     */\n    toggleChildren = (e) => {\n        this.classList.toggle('collapse');\n        if (this.classList.contains('collapse')) e.target.innerHTML = '+';\n        else e.target.innerHTML = '-';\n    };\n\n    dispatchEvent(e) {\n        return false;\n    }\n}\n","import OrgchartItem from './orgchart-item.element.js';\n\nexport default OrgchartItem;\n\nOrgchartItem.define('wje-orgchart-item', OrgchartItem);\n"],"names":[],"mappings":";;;;;AAgBe,MAAM,qBAAqB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD,cAAc;AACV,UAAO;AAqBX,qCAAY;AAyEZ;AAAA;AAAA;AAAA;AAAA,0CAAiB,CAAC,MAAM;AACpB,WAAK,UAAU,OAAO,UAAU;AAChC,UAAI,KAAK,UAAU,SAAS,UAAU,EAAG,GAAE,OAAO,YAAY;AAAA,UACzD,GAAE,OAAO,YAAY;AAAA,IAC7B;AAAA,EAjGL;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,KAAK,OAAO;AACZ,QAAI,MAAO,MAAK,aAAa,QAAQ,KAAK;AAAA,EAClD;AAAA;AAAA;AAAA;AAAA;AAAA,EAOI,IAAI,OAAO;AACP,WAAO,KAAK,aAAa,MAAM;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA,EAEI,aAAa;AACT,QAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,sBAAsB;AAC3E,WAAK,UAAU,IAAI,cAAc;AAAA,IAC7C;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,eAAe;AAEpC,QAAI,OAAO,SAAS,cAAc,UAAU;AAC5C,SAAK,aAAa,QAAQ,MAAM;AAEhC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,QAAI,QAAQ,SAAS,cAAc,MAAM;AACzC,UAAM,aAAa,QAAQ,OAAO;AAElC,QAAI,WAAW,SAAS,cAAc,KAAK;AAC3C,aAAS,aAAa,QAAQ,UAAU;AACxC,aAAS,UAAU,IAAI,UAAU;AACjC,aAAS,YAAY;AAErB,SAAK,YAAY,IAAI;AACrB,QAAI,KAAK,SAAS,SAAS,KAAK,MAAM,KAAK,KAAK,QAAQ,EAAE,KAAK,CAAC,OAAO,GAAG,YAAY,cAAc;AAChG,WAAK,YAAY,QAAQ;AAE7B,WAAO,YAAY,IAAI;AACvB,WAAO,YAAY,KAAK;AAExB,aAAS,YAAY,MAAM;AAE3B,SAAK,WAAW;AAEhB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,YAAY;AACR,SAAK,SAAS,iBAAiB,SAAS,KAAK,cAAc;AAAA,EACnE;AAAA,EAYI,cAAc,GAAG;AACb,WAAO;AAAA,EACf;AACA;ACzHA,aAAa,OAAO,qBAAqB,YAAY;"}

package/dist/wje-orgchart.js

@@ -0,0 +1,49 @@
+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";
+class Orgchart extends WJElement {
+  /**
+   * Creates an instance of Orgchart.
+   * @class
+   */
+  constructor() {
+    super();
+    __publicField(this, "className", "Orgchart");
+  }
+  /**
+   * 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 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;
+    return fragment;
+  }
+}
+Orgchart.define("wje-orgchart", Orgchart);
+export {
+  Orgchart as default
+};
+//# sourceMappingURL=wje-orgchart.js.map

package/dist/wje-orgchart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wje-orgchart.js","sources":["../packages/wje-orgchart/orgchart.element.js","../packages/wje-orgchart/orgchart.js"],"sourcesContent":["import { default as WJElement } from '../wje-element/element.js';\nimport styles from './styles/styles.css?inline';\n\n/**\n * @summary Orgchart is a custom web component that extends WJElement.\n * @documentation https://elements.webjet.sk/components/Orgchart\n * @status stable\n * @augments WJElement\n * @csspart - Styles the element.\n * @tag wje-orgchart\n * @example\n */\nexport default class Orgchart extends WJElement {\n    /**\n     * Creates an instance of Orgchart.\n     * @class\n     */\n    constructor() {\n        super();\n    }\n\n    className = 'Orgchart';\n\n    /**\n     * Returns the CSS styles for the component.\n     * @static\n     * @returns {CSSStyleSheet}\n     */\n    static get cssStyleSheet() {\n        return styles;\n    }\n\n    /**\n     * Sets up the attributes for the component.\n     */\n    setupAttributes() {\n        this.isShadowRoot = 'open';\n    }\n\n    /**\n     * Draws the component for the org chart.\n     * @returns {DocumentFragment}\n     */\n    draw() {\n        let fragment = document.createDocumentFragment();\n\n        let native = document.createElement('div');\n        native.setAttribute('part', 'native');\n        native.classList.add('native-orgchart');\n\n        let slot = document.createElement('slot');\n\n        native.appendChild(slot);\n\n        fragment.appendChild(native);\n\n        this.native = native;\n\n        return fragment;\n    }\n}\n","import Orgchart from './orgchart.element.js';\n\nexport default Orgchart;\n\nOrgchart.define('wje-orgchart', Orgchart);\n"],"names":[],"mappings":";;;;;AAYe,MAAM,iBAAiB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,EAK5C,cAAc;AACV,UAAO;AAGX,qCAAY;AAAA,EAFhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASI,WAAW,gBAAgB;AACvB,WAAO;AAAA,EACf;AAAA;AAAA;AAAA;AAAA,EAKI,kBAAkB;AACd,SAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMI,OAAO;AACH,QAAI,WAAW,SAAS,uBAAwB;AAEhD,QAAI,SAAS,SAAS,cAAc,KAAK;AACzC,WAAO,aAAa,QAAQ,QAAQ;AACpC,WAAO,UAAU,IAAI,iBAAiB;AAEtC,QAAI,OAAO,SAAS,cAAc,MAAM;AAExC,WAAO,YAAY,IAAI;AAEvB,aAAS,YAAY,MAAM;AAE3B,SAAK,SAAS;AAEd,WAAO;AAAA,EACf;AACA;ACxDA,SAAS,OAAO,gBAAgB,QAAQ;"}

package/dist/wje-popup.js

@@ -0,0 +1,6 @@
+import { P as Popup } from "./popup.element-tyYxow0p.js";
+Popup.define("wje-popup", Popup);
+export {
+  Popup as default
+};
+//# sourceMappingURL=wje-popup.js.map