@genexus/genexus-ide-ui 0.0.9

package/dist/cjs/gxg-tree.cjs.entry.js

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93a6a7e0.js');
+
+const gxgTreeCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{display:block;--gxg-tree-item-inner-spacing:var(--spacing-comp-01);overflow:auto;height:100%}:host::-webkit-scrollbar{width:6px;height:6px}:host::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host ul{margin:0;padding-left:0;width:100%}";
+
+const GxgTree = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    //PROPS
+    /**
+     * Set this attribute if you want all the items to have a checkbox.
+     */
+    this.checkbox = true;
+    /**
+     * Set this attribute if you want all the items to be checked by default.
+     */
+    this.checked = false;
+    /**
+     * Set this attribute if you want all the items to be opened by default.
+     */
+    this.opened = true;
+    /**
+     * Set this attribute if you want all the items checkboxes to be toggled when the parent tree item checkbox is toggled.
+     */
+    this.toggleCheckboxes = false;
+    /**
+     * Set this attribute if you want to allow multi selection of the items. This property should only be set on the master tree.
+     */
+    this.multiSelection = false;
+    /**
+     * Indicates if this the is master tree
+     */
+    this.masterTree = false;
+    /**
+     * This method evaluates if this tree is the master tree
+     */
+    this.evaluateIsMasterTree = () => {
+      var _a;
+      const grandFather = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
+      if (grandFather === undefined || grandFather.nodeName !== "GXG-TREE") {
+        this.masterTree = true;
+      }
+    };
+    this.initialConfig = () => {
+      const parent = this.el.parentElement;
+      if ((parent === null || parent === void 0 ? void 0 : parent.tagName) === "GXG-TREE-ITEM") {
+        const treeItem = parent;
+        this.checkbox =
+          treeItem.checkbox !== undefined ? treeItem.checkbox : this.checkbox;
+        this.checked =
+          treeItem.checked !== undefined ? treeItem.checked : this.checked;
+        this.opened =
+          treeItem.opened !== undefined ? treeItem.opened : this.opened;
+        this.toggleCheckboxes =
+          treeItem.toggleCheckboxes !== undefined
+            ? treeItem.toggleCheckboxes
+            : this.toggleCheckboxes;
+      }
+    };
+    this.getNumberOfParentTrees = () => {
+    };
+  }
+  componentWillLoad() {
+    //this.initialConfig();
+    this.initialConfig();
+    this.getNumberOfParentTrees();
+    this.evaluateIsMasterTree();
+  }
+  selectionChangedHandler(e) {
+    //Unselect all items, except the one that triggered this event. This action should be done once, by the master tree.
+    if ((this.masterTree && !this.multiSelection) ||
+      (this.masterTree && this.multiSelection && !e.detail.ctrlKey)) {
+      const allChildren = this.el.querySelectorAll("gxg-tree-item");
+      if (allChildren === null || allChildren === void 0 ? void 0 : allChildren.length) {
+        Array.from(allChildren).forEach((item) => {
+          item.selected = false;
+        });
+      }
+    }
+  }
+  /**
+   * Returns an array of the selected tree-items, providing the id, checked status, selected status, and label.
+   */
+  async getCheckedItems(idsArray) {
+    const allTreeItems = Array.from(this.el.querySelectorAll("gxg-tree-item"));
+    const checkedTreeItems = [];
+    if (idsArray === null || idsArray === void 0 ? void 0 : idsArray.length) {
+      idsArray.forEach((id) => {
+        const found = allTreeItems.find((item) => id === item.id);
+        found &&
+          checkedTreeItems.push({
+            id: found.id,
+            label: found.label,
+            checked: found.checked,
+            selected: found.selected,
+          });
+      });
+    }
+    else {
+      allTreeItems.forEach((item) => {
+        item.checked &&
+          checkedTreeItems.push({
+            id: item.id,
+            label: item.label,
+            checked: item.checked,
+            selected: item.selected,
+          });
+      });
+    }
+    return checkedTreeItems;
+  }
+  /**
+   * Returns an array of the selected tree-items, providing the id, checked status, selected status, and label.
+   */
+  async getSelectedItems() {
+    const selectedItems = [];
+    const allItems = this.el.querySelectorAll("gxg-tree-item");
+    if (allItems === null || allItems === void 0 ? void 0 : allItems.length) {
+      Array.from(allItems).forEach((item) => {
+        if (item.selected) {
+          selectedItems.push({
+            id: item.id,
+            label: item.label,
+            checked: item.checked,
+            selected: item.selected,
+          });
+        }
+      });
+    }
+    return selectedItems;
+  }
+  /**
+   * @param ids: An array id the tree items to be toggled.
+   * @param open: A boolean indicating that the tree item should be opened or closed. (optional)
+   * @description This method is used to toggle a tree-item by the tree-item id/ids.
+   * @returns a boolean value indicating if the selected tree-item is open or not, after the method was called.
+   */
+  async toggleItems(ids, open) {
+    if (!(ids === null || ids === void 0 ? void 0 : ids.length)) {
+      return [];
+    }
+    const allTreeItems = Array.from(this.el.querySelectorAll("gxg-tree-item"));
+    const toggledTreeItems = [];
+    ids.forEach((id) => {
+      const found = allTreeItems.find((item) => id === item.itemId);
+      if (found && open === undefined) {
+        found.opened = !found.opened;
+      }
+      else if (found && open && !found.opened) {
+        found.opened = true;
+      }
+      else if (found && !open && found.opened) {
+        found.opened = false;
+      }
+      if (found) {
+        toggledTreeItems.push({
+          id: found.id,
+          opened: found.opened,
+        });
+      }
+    });
+    return toggledTreeItems;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        tree: true,
+      } }, index.h("ul", { ref: (el) => (this.ulTree = el) }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+};
+GxgTree.style = gxgTreeCss;
+
+exports.gxg_tree = GxgTree;

package/dist/cjs/gxg-window.cjs.entry.js

@@ -0,0 +1,259 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93a6a7e0.js');
+
+const windowCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}:host{font-family:var(--font-family-primary)}:host #draggable-resizable-div{position:absolute;background-color:var(--gray-01);opacity:0;margin-top:30px;transition-property:opacity, margin-top;transition-duration:var(--ui-animaton-speed);transition-timing-function:ease;z-index:-99}:host #top,:host #bottom{width:100%;height:5px;cursor:ns-resize}:host #left,:host #right{width:5px;height:100%;cursor:ew-resize}:host #top,:host #left{top:0;left:0}:host #bottom,:host #right{bottom:0;right:0}:host #top,:host #left,:host #bottom,:host #right{position:absolute;background:transparent}:host #header{height:var(--spacing-comp-06);background-color:var(--gray-02);font-size:var(--font-size-sm);text-transform:capitalize;display:flex;justify-content:space-between;align-items:center;padding:0 var(--spacing-comp-02);color:var(--color-on-background)}:host #header .title-container{display:flex;align-items:center}:host #header .title-container .title-icon{margin-inline-end:var(--spacing-comp-01)}:host #content{padding:var(--spacing-comp-03);font-size:var(--font-size-sm);padding:var(--spacing-comp-02);color:var(--color-on-background);height:calc(100% - 48px);overflow-y:auto;line-height:var(--line-height-regular);}:host #content::-webkit-scrollbar{width:6px;height:6px}:host #content::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host #content::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host #content::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host #content .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}:host(.display){display:block}:host(.visible) #draggable-resizable-div{opacity:1;margin-top:0;z-index:99}";
+
+const GxgWindow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * The window starting height
+     */
+    this.initialHeight = "200px";
+    /**
+     * The window starting width
+     */
+    this.initialWidth = "360px";
+    /**
+     * The window min. height
+     */
+    this.minHeight = "200px";
+    /**
+     * The window min. width
+     */
+    this.minWidth = "360px";
+    /**
+     * The window max. height
+     */
+    this.maxHeight = "420px";
+    /**
+     * The window max. width
+     */
+    this.maxWidth = "520px";
+    /**
+     * The window left position. By default the window is horizontally centered
+     */
+    this.leftPosition = "0px";
+    /**
+     * The window top position. By default the window is vertically centered
+     */
+    this.topPosition = "0px";
+    /**
+     * The window title
+     */
+    this.windowTitle = "";
+    /**
+     * The window title icon
+     */
+    this.titleIcon = "";
+    /**
+     * Displays the window
+     */
+    this.displayWindow = false;
+    this.showWindow = false;
+    this.customPosition = false;
+  }
+  dragElement(elm, mainElm) {
+    let p1 = 0, p2 = 0, p3 = 0, p4 = 0;
+    function dragElm(e) {
+      p1 = p3 - e.clientX;
+      p2 = p4 - e.clientY;
+      p3 = e.clientX;
+      p4 = e.clientY;
+      mainElm.style.top = mainElm.offsetTop - p2 + "px";
+      mainElm.style.left = mainElm.offsetLeft - p1 + "px";
+      if (mainElm.offsetTop < 0) {
+        mainElm.style.top = 0;
+      }
+      if (mainElm.offsetLeft < 0) {
+        mainElm.style.left = 0;
+      }
+      if (mainElm.offsetTop + mainElm.offsetHeight > window.innerHeight) {
+        mainElm.style.top = window.innerHeight - mainElm.offsetHeight + "px";
+      }
+      if (mainElm.offsetLeft + mainElm.offsetWidth > window.innerWidth) {
+        mainElm.style.left = window.innerWidth - mainElm.offsetWidth + "px";
+      }
+      elm.style.cursor = "grabbing";
+    }
+    function dropElm() {
+      document.onmousemove = null;
+      document.onmouseup = null;
+      elm.style.cursor = "grab";
+    }
+    function dragMouseDown(e) {
+      p3 = e.clientX;
+      p4 = e.clientY;
+      document.onmousemove = dragElm;
+      document.onmouseup = dropElm;
+    }
+    if (elm) {
+      elm.onmousedown = dragMouseDown;
+    }
+  }
+  resizeElement(elm, mainElm) {
+    //resize top
+    let oldT = 0, oldH = 0, oldCY = 0;
+    //drop resize element
+    function dropElm() {
+      document.onmousemove = null;
+      document.onmouseup = null;
+      document.querySelector("html").style.cursor = "default";
+      elm[4].style.cursor = "default";
+    }
+    function dragElmTop(e) {
+      mainElm.style.top = e.clientY + "px";
+      elm[4].style.height = oldH - (e.clientY - oldCY) + "px";
+      if (mainElm.offsetHeight < 214) {
+        mainElm.style.top = oldT + "px";
+      }
+      document.querySelector("html").style.cursor = "ns-resize";
+      elm[4].style.cursor = "ns-resize";
+    }
+    function dragMouseDownTop(e) {
+      oldT = mainElm.offsetTop + mainElm.offsetHeight - 212;
+      oldH = elm[4].offsetHeight;
+      oldCY = e.clientY;
+      document.onmousemove = dragElmTop;
+      document.onmouseup = dropElm;
+    }
+    //resize left
+    let oldL = 0, oldW = 0, oldCX = 0;
+    function dragElmLeft(e) {
+      mainElm.style.left = e.clientX + "px";
+      elm[4].style.width = oldW - (e.clientX - oldCX) + "px";
+      if (mainElm.offsetWidth < 213) {
+        mainElm.style.left = oldL + "px";
+      }
+      document.querySelector("html").style.cursor = "ew-resize";
+      elm[4].style.cursor = "ew-resize";
+    }
+    function dragMouseDownLeft(e) {
+      oldL = mainElm.offsetLeft + mainElm.offsetWidth - 212;
+      oldW = elm[4].offsetWidth;
+      oldCX = e.clientX;
+      document.onmousemove = dragElmLeft;
+      document.onmouseup = dropElm;
+    }
+    if (elm[0]) {
+      elm[0].onmousedown = dragMouseDownTop;
+    }
+    if (elm[1]) {
+      elm[1].onmousedown = dragMouseDownLeft;
+    }
+    function dragElmBottom(e) {
+      elm[4].style.height = e.clientY - mainElm.offsetTop - 12 + "px";
+      document.querySelector("html").style.cursor = "ns-resize";
+      elm[4].style.cursor = "ns-resize";
+    }
+    function dragMouseDownBottom() {
+      document.onmousemove = dragElmBottom;
+      document.onmouseup = dropElm;
+    }
+    //resize bottom
+    if (elm[2]) {
+      elm[2].onmousedown = dragMouseDownBottom;
+    }
+    function dragElmRight(e) {
+      elm[4].style.width = e.clientX - mainElm.offsetLeft - 10 + "px";
+      document.querySelector("html").style.cursor = "ew-resize";
+      elm[4].style.cursor = "ew-resize";
+    }
+    function dragMouseDownRight() {
+      document.onmousemove = dragElmRight;
+      document.onmouseup = dropElm;
+    }
+    //resize right
+    if (elm[3]) {
+      elm[3].onmousedown = dragMouseDownRight;
+    }
+  }
+  componentWillLoad() {
+    if (this.leftPosition !== "0px" && this.topPosition !== "0px") {
+      this.customPosition = true;
+    }
+  }
+  componentDidLoad() {
+    const childrenDivs = this.el.shadowRoot.querySelectorAll("#draggable-resizable-div>div");
+    this.dragElement(this.header, this.draggableResizableDiv);
+    this.resizeElement(childrenDivs, this.draggableResizableDiv);
+    (function (elm) {
+      if (this.leftPosition === "0px" && this.topPosition === "0px") {
+        elm.style.left = window.innerWidth / 2 - elm.offsetWidth / 2 + "px";
+        elm.style.top = window.innerHeight / 2 - elm.offsetHeight / 2 + "px";
+      }
+    }.bind(this)(this.draggableResizableDiv));
+  }
+  closeWindow() {
+    this.showWindow = false;
+    setTimeout(function () {
+      this.displayWindow = false;
+    }.bind(this), 200);
+  }
+  displayWindowHandler() {
+    if (this.displayWindow === true) {
+      setTimeout(function () {
+        this.showWindow = true;
+      }.bind(this), 50);
+    }
+  }
+  setInitialWidth() {
+    const initialWidthInt = parseInt(this.initialWidth.substring(0, this.initialWidth.length - 2));
+    const minWidthInt = parseInt(this.minWidth.substring(0, this.minWidth.length - 2));
+    const maxWidthInt = parseInt(this.maxWidth.substring(0, this.maxWidth.length - 2));
+    if (initialWidthInt < minWidthInt) {
+      return this.minWidth;
+    }
+    else if (initialWidthInt > maxWidthInt) {
+      return this.maxWidth;
+    }
+    else {
+      return this.initialWidth;
+    }
+  }
+  setInitialHeight() {
+    const initialHeightInt = parseInt(this.initialHeight.substring(0, this.initialHeight.length - 2));
+    const minHeightInt = parseInt(this.minHeight.substring(0, this.minHeight.length - 2));
+    const maxHeightInt = parseInt(this.maxHeight.substring(0, this.maxHeight.length - 2));
+    if (initialHeightInt < minHeightInt) {
+      return this.minHeight;
+    }
+    else if (initialHeightInt > maxHeightInt) {
+      return this.maxHeight;
+    }
+    else {
+      return this.initialHeight;
+    }
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        display: this.displayWindow,
+        visible: this.showWindow,
+        "custom-position": this.customPosition,
+      } }, index.h("div", { id: "draggable-resizable-div", ref: (el) => (this.draggableResizableDiv = el), style: {
+        maxWidth: this.maxWidth,
+        minWidth: this.minWidth,
+        minHeight: this.minHeight,
+        maxHeight: this.maxHeight,
+        left: this.leftPosition,
+        top: this.topPosition,
+      } }, index.h("div", { id: "top" }), index.h("div", { id: "left" }), index.h("div", { id: "bottom" }), index.h("div", { id: "right" }), index.h("div", { id: "center", style: {
+        width: this.setInitialWidth(),
+        height: this.setInitialHeight(),
+        maxWidth: this.maxWidth,
+        minWidth: this.minWidth,
+        minHeight: this.minHeight,
+        maxHeight: this.maxHeight,
+      } }, index.h("div", { id: "header", style: { cursor: "grab" }, ref: (el) => (this.header = el) }, index.h("div", { class: { "title-container": true } }, this.titleIcon !== "" ? (index.h("gxg-icon", { class: "title-icon", color: "auto", size: "regular", type: this.titleIcon })) : null, this.windowTitle !== "" ? this.windowTitle : null), index.h("gxg-button", { class: { "delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.closeWindow() })), index.h("div", { id: "content" }, index.h("slot", null))))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "displayWindow": ["displayWindowHandler"]
+  }; }
+};
+GxgWindow.style = windowCss;
+
+exports.gxg_window = GxgWindow;

package/dist/cjs/helpers-00cb4402.js

@@ -0,0 +1,12 @@
+'use strict';
+
+function mouseEventModifierKey(eventInfo) {
+  if (navigator.userAgent.includes("Mac")) {
+    return eventInfo.metaKey;
+  }
+  else {
+    return eventInfo.ctrlKey;
+  }
+}
+
+exports.mouseEventModifierKey = mouseEventModifierKey;

package/dist/cjs/index-79bce6af.js

@@ -0,0 +1,98 @@
+'use strict';
+
+const index = require('./index-93a6a7e0.js');
+
+const ClickOutsideOptionsDefaults = {
+    triggerEvents: "click",
+    exclude: ""
+};
+/**
+ * Call this function as soon as the click outside of annotated method's host is done.
+ * @example
+```
+@ClickOutside()
+callback() {
+  // this will run when click outside of element (host component) is done.
+}
+```
+ */
+function ClickOutside(opt = ClickOutsideOptionsDefaults) {
+    return (proto, methodName) => {
+        const { connectedCallback, disconnectedCallback } = proto;
+        proto.connectedCallback = function () {
+            const host = index.getElement(this);
+            const method = this[methodName];
+            registerClickOutside(this, host, method, opt);
+            return connectedCallback && connectedCallback.call(this);
+        };
+        proto.disconnectedCallback = function () {
+            const host = index.getElement(this);
+            const method = this[methodName];
+            removeClickOutside(this, host, method, opt);
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}
+/**
+ * Register callback function for HTMLElement to be executed when user clicks outside of element.
+ * @example
+```
+<span
+    ref={spanEl => registerClickOutside(this, spanEl, () => this.test())}>
+      Hello, World!
+</span>;
+```
+ */
+function registerClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {
+    const excludedNodes = getExcludedNodes(opt);
+    getTriggerEvents(opt).forEach(triggerEvent => {
+        window.addEventListener(triggerEvent, (e) => {
+            initClickOutside(e, component, element, callback, excludedNodes);
+        }, false);
+    });
+}
+/**
+ * Remove click outside callback function for HTMLElement.
+ */
+function removeClickOutside(component, element, callback, opt = ClickOutsideOptionsDefaults) {
+    getTriggerEvents(opt).forEach(triggerEvent => {
+        window.removeEventListener(triggerEvent, (e) => {
+            initClickOutside(e, component, element, callback);
+        }, false);
+    });
+}
+function initClickOutside(event, component, element, callback, excludedNodes) {
+    const target = event.target;
+    if (!element.contains(target) && !isExcluded(target, excludedNodes)) {
+        callback.call(component);
+    }
+}
+function getTriggerEvents(opt) {
+    if (opt.triggerEvents) {
+        return opt.triggerEvents.split(",").map(e => e.trim());
+    }
+    return ["click"];
+}
+function getExcludedNodes(opt) {
+    if (opt.exclude) {
+        try {
+            return Array.from(document.querySelectorAll(opt.exclude));
+        }
+        catch (err) {
+            console.warn(`@ClickOutside: Exclude: '${opt.exclude}' will not be evaluated. Check your exclude selector syntax.`, err);
+        }
+    }
+    return;
+}
+function isExcluded(target, excudedNodes) {
+    if (target && excudedNodes) {
+        for (let excludedNode of excudedNodes) {
+            if (excludedNode.contains(target)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+exports.ClickOutside = ClickOutside;