@genexus/genexus-ide-ui 0.0.62 → 0.0.64

package/dist/esm/ch-tree-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0aa3977d.js';
 
 const chTreeItemCss = "/*! 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}:host{--text-color:var(--black);--font-family:\"Source Sans Pro\", sans-serif;--font-weight:normal;--font-size:12px;--guide-color:var(--darkGray);--item-hover-color:var(--lightGray);--item-active-color:var(--silverGray);display:block}:host .text{padding-left:var(--spacing-comp-01)}:host li{list-style:none;font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);color:var(--text-color);height:20px;overflow:hidden}:host li.tree-open{height:auto}:host li .li-text{height:100%;padding:0 var(--spacing-comp-02);cursor:pointer;display:flex;align-items:center;position:relative}:host li .li-text:hover{background-color:var(--item-hover-color)}:host li .li-text:active{background-color:var(--item-active-color)}:host li .li-text:focus{outline:none;box-shadow:inset 0px 0px 0px 2px var(--color-primary-active)}:host li .li-text--selected{background-color:var(--item-active-color)}:host li .li-text--selected:hover{background-color:var(--item-hover-color)}:host li .vertical-line{position:absolute;width:1px;height:0;top:21px;left:15px;z-index:1;background-image:linear-gradient(var(--guide-color) 28%, rgba(255, 255, 255, 0) 0%);background-position:right;background-size:1px 4px;background-repeat:repeat-y}:host li .horizontal-line{position:absolute;width:16px;height:1px;top:11px;z-index:1;margin-left:-23px;top:10px;background-image:linear-gradient(to right, var(--guide-color) 33%, rgba(255, 255, 255, 0) 0%);background-position:bottom;background-size:3px 1px;background-repeat:repeat-x}:host li .horizontal-line.display-none{display:none}:host li .closed-opened-icons{position:relative;display:flex;margin-left:-2px}:host li .toggle-icon{position:relative;z-index:2;padding-left:3px;padding-right:3px;transition-property:opacity;transition-duration:0.5s;transition-timing-function:ease}:host .checkbox{margin-right:var(--spacing-comp-01)}:host .icon{height:20px;justify-content:center;align-items:center;padding-left:2px;padding-right:2px}:host .right-icon{margin-inline-start:auto;position:relative;top:0;transition-property:top;transition-duration:0.5s;transition-timing-function:ease}:host .loading{opacity:1;display:inline;right:11px;top:-20px;position:absolute;z-index:1;transition-property:all;transition-duration:0.5s;transition-timing-function:ease;border-radius:50%;width:8px;height:8px;border:0.18rem solid var(--gray-04);border-top-color:var(--gray-01);animation:spin 1s infinite linear}:host .loading--double{border-style:double;border-width:0.5rem}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.label input[disabled]{color:red}:host([disabled]) li .text{color:var(--darkGray)}:host([disabled]) .toggle-icon{pointer-events:none}:host([downloading]){pointer-events:none}:host([downloading]) .right-icon{top:20px}:host([downloading]) .loading{top:3px}:host([downloaded]) .loading,:host([downloaded]) .right-icon{opacity:0}";
 

package/dist/esm/ch-tree-view-render-wrapper.entry.js

@@ -0,0 +1,159 @@
+import { r as registerInstance, c as createEvent, h } from './index-0aa3977d.js';
+
+const treeViewRenderWrapperCss = "";
+
+const DEFAULT_DRAG_DISABLED_VALUE = false;
+const DEFAULT_DROP_DISABLED_VALUE = false;
+const DEFAULT_EDITABLE_ITEMS_VALUE = true;
+const defaultRenderItem = (itemModel, treeState, treeHasFilter, lastItem, level) => {
+  var _a, _b, _c, _d, _e, _f;
+  return (treeState.filterType === "none" || itemModel.render !== false) && (h("ch-tree-view-item", { id: itemModel.id, caption: itemModel.caption, checkbox: (_a = itemModel.checkbox) !== null && _a !== void 0 ? _a : treeState.checkbox, checked: (_b = itemModel.checked) !== null && _b !== void 0 ? _b : treeState.checked, class: itemModel.class, disabled: itemModel.disabled, downloading: itemModel.downloading, dragDisabled: (_c = itemModel.dragDisabled) !== null && _c !== void 0 ? _c : treeState.dragDisabled, dropDisabled: (_d = itemModel.dropDisabled) !== null && _d !== void 0 ? _d : treeState.dropDisabled, editable: (_e = itemModel.editable) !== null && _e !== void 0 ? _e : treeState.editableItems, expanded: itemModel.expanded, indeterminate: itemModel.indeterminate, lastItem: lastItem, lazyLoad: itemModel.lazy, leaf: itemModel.leaf, leftImgSrc: itemModel.leftImgSrc, level: level, metadata: itemModel.metadata, rightImgSrc: itemModel.rightImgSrc, selected: itemModel.selected, showExpandableButton: itemModel.showExpandableButton, showLines: treeState.showLines, toggleCheckboxes: (_f = itemModel.toggleCheckboxes) !== null && _f !== void 0 ? _f : treeState.toggleCheckboxes }, !itemModel.leaf &&
+    itemModel.items != null &&
+    itemModel.items.map((subModel, index) => defaultRenderItem(subModel, treeState, treeHasFilter, treeState.showLines &&
+      (treeHasFilter && itemModel.lastItemId !== ""
+        ? subModel.id === itemModel.lastItemId
+        : index === itemModel.items.length - 1), level + 1))));
+};
+const ChTreeViewRenderWrapper = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkedItemsChange = createEvent(this, "checkedItemsChange", 7);
+    this.itemContextmenu = createEvent(this, "itemContextmenu", 7);
+    this.itemOpenReference = createEvent(this, "itemOpenReference", 7);
+    this.selectedItemsChange = createEvent(this, "selectedItemsChange", 7);
+    /**
+     * Set this attribute if you want display a checkbox in all items by default.
+     */
+    this.checkbox = false;
+    /**
+     * Set this attribute if you want the checkbox to be checked in all items by
+     * default.
+     * Only works if `checkbox = true`
+     */
+    this.checked = false;
+    /**
+     * This attribute lets you specify if the drag operation is disabled in all
+     * items by default. If `true`, the items can't be dragged.
+     */
+    this.dragDisabled = DEFAULT_DRAG_DISABLED_VALUE;
+    /**
+     * This attribute lets you specify if the drop operation is disabled in all
+     * items by default. If `true`, the items won't accept any drops.
+     */
+    this.dropDisabled = DEFAULT_DROP_DISABLED_VALUE;
+    /**
+     * This attribute lets you specify if the edit operation is enabled in all
+     * items by default. If `true`, the items can edit its caption in place.
+     */
+    this.editableItems = DEFAULT_EDITABLE_ITEMS_VALUE;
+    /**
+     * This property lets you determine the list of items that will be filtered.
+     * Only works if `filterType = "id-list"`.
+     */
+    this.filterList = [];
+    /**
+     * This property lets you determine the options that will be applied to the
+     * filter.
+     * Only works if `filterType = "caption" | "metadata"`.
+     */
+    this.filterOptions = {};
+    /**
+     * This attribute lets you define what kind of filter is applied to items.
+     * Only items that satisfy the filter predicate will be displayed.
+     *
+     * | Value       | Details                                                                                        |
+     * | ----------- | ---------------------------------------------------------------------------------------------- |
+     * | `checked`   | Show only the items that have a checkbox and are checked.                                      |
+     * | `unchecked` | Show only the items that have a checkbox and are not checked.                                  |
+     * | `caption`   | Show only the items whose `caption` satisfies the regex determinate by the `filter` property.  |
+     * | `metadata`  | Show only the items whose `metadata` satisfies the regex determinate by the `filter` property. |
+     * | `id-list`   | Show only the items that are contained in the array determinate by the `filterList` property.  |
+     * | `none`      | Show all items.                                                                                |
+     */
+    this.filterType = "none";
+    /**
+     * Set this attribute if you want to allow multi selection of the items.
+     */
+    this.multiSelection = false;
+    /**
+     * This property allows us to implement custom rendering of tree items.
+     */
+    this.renderItem = defaultRenderItem;
+    /**
+     * `true` to display the relation between tree items and tree lists using
+     * lines.
+     */
+    this.showLines = "none";
+    /**
+     * Set this attribute if you want all the children item's checkboxes to be
+     * checked when the parent item checkbox is checked, or to be unchecked when
+     * the parent item checkbox is unchecked.
+     * This attribute will be used in all items by default.
+     */
+    this.toggleCheckboxes = false;
+    /**
+     * This property lets you define the model of the ch-tree-x control.
+     */
+    this.treeModel = [];
+  }
+  /**
+   * Given an item id, an array of items to add, the download status and the
+   * lazy state, updates the item's UI Model.
+   */
+  async loadLazyContent(itemId, items, downloading = false, lazy = false) {
+    this.treeRef.loadLazyContent(itemId, items, downloading, lazy);
+  }
+  /**
+   * Given an item id, it displays and scrolls into the item view.
+   */
+  async scrollIntoVisible(treeItemId) {
+    this.treeRef.scrollIntoVisible(treeItemId);
+  }
+  /**
+   * This method is used to toggle a tree item by the tree item id/ids.
+   *
+   * @param treeItemIds An array id the tree items to be toggled.
+   * @param expand A boolean indicating that the tree item should be expanded or collapsed. (optional)
+   * @returns The modified items after the method was called.
+   */
+  async toggleItems(treeItemIds, expand) {
+    return this.treeRef.toggleItems(treeItemIds, expand);
+  }
+  /**
+   * Given a subset of item's properties, it updates all item UI models.
+   */
+  async updateAllItemsProperties(properties) {
+    this.treeRef.updateAllItemsProperties(properties);
+  }
+  /**
+   * Given a item list and the properties to update, it updates the properties
+   * of the items in the list.
+   */
+  async updateItemsProperties(items, properties) {
+    this.treeRef.updateItemsProperties(items, properties);
+  }
+  /**
+   * Update the information about the valid droppable zones.
+   * @param requestTimestamp Time where the request to the server was made. Useful to avoid having old information.
+   * @param newContainerId ID of the container where the drag is trying to be made.
+   * @param draggedItems Information about the dragged items.
+   * @param validDrop Current state of the droppable zone.
+   */
+  async updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop) {
+    this.treeRef.updateValidDropZone(requestTimestamp, newContainerId, draggedItems, validDrop);
+  }
+  updateCheckboxValue(event) {
+    event.stopPropagation();
+    this.checkedItemsChange.emit(event.detail);
+  }
+  handleOpenReference(event) {
+    event.stopPropagation();
+    this.itemOpenReference.emit(event.detail);
+  }
+  render() {
+    return (h("ch-tree-view-render", { checkbox: this.checkbox, checked: this.checked, checkDroppableZoneCallback: this.checkDroppableZoneCallback, cssClass: this.cssClass, dragDisabled: this.dragDisabled, dropDisabled: this.dropDisabled, dropItemsCallback: this.dropItemsCallback, editableItems: this.editableItems, filter: this.filter, filterList: this.filterList, filterOptions: this.filterOptions, filterType: this.filterType, lazyLoadTreeItemsCallback: this.lazyLoadTreeItemsCallback, modifyItemCaptionCallback: this.modifyItemCaptionCallback, multiSelection: this.multiSelection, renderItem: this.renderItem, showLines: this.showLines, sortItemsCallback: this.sortItemsCallback, toggleCheckboxes: this.toggleCheckboxes, treeModel: this.treeModel, ref: el => (this.treeRef = el) }));
+  }
+};
+ChTreeViewRenderWrapper.style = treeViewRenderWrapperCss;
+
+export { ChTreeViewRenderWrapper as ch_tree_view_render_wrapper };