@genexus/genexus-ide-ui 0.0.57 → 0.0.59

package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-item/gxg-tree-item.css

@@ -660,20 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+  background: var(--gxg-scrollbar-track-thumb-hover-background);
 }
 
 :host {

package/dist/node_modules/@genexus/gemini/dist/collection/components/tree-view/tree-view.css

@@ -321,52 +321,100 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+  background: var(--gxg-scrollbar-track-thumb-hover-background);
 }
 
 /*---------------------------
 gxg-tree-view
 ---------------------------*/
 gxg-tree-view {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  height: 100%;
   font-family: var(--font-family-primary);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-regular);
   color: var(--color-on-background);
+  display: contents;
+}
+gxg-tree-view ch-tree-x .ch-tree-x-container {
+  padding: var(--spacing-comp-01);
+}
+
+gxg-tree-view[position-relative] ch-tree-x .ch-tree-x-container {
+  position: relative;
+  width: 100%;
 }
 
-.tree-buttons {
-  display: grid;
-  grid-auto-rows: max-content;
-  row-gap: 8px;
+/*padding (added by Gemini)*/
+gxg-tree-view[no-padding] ch-tree-x .ch-tree-x-container {
+  padding: 0;
 }
 
 /*---------------------------
 ch-tree-x-list-item
 ---------------------------*/
 ch-tree-x-list-item {
+  --checkbox-size: var(--gxg-checkbox-size);
   --expandable-button-width: var(--spacing-comp-04);
 }
+ch-tree-x-list-item .tree-view-item::part(dashed-line) {
+  border-color: var(--gray-02);
+}
+ch-tree-x-list-item.tree-view-item--folder::part(action)::before, ch-tree-x-list-item.tree-view-item--module::part(action)::before {
+  grid-area: left-img;
+  content: "";
+  width: 14px;
+  height: 14px;
+  margin-inline-end: 4px;
+  background-repeat: no-repeat;
+}
+ch-tree-x-list-item.tree-view-item--folder::part(action)::before {
+  background-image: url("/build/icon-assets/objects/folder.svg");
+}
+ch-tree-x-list-item.tree-view-item--folder::part(action expanded)::before {
+  background-image: url("/build/icon-assets/objects/folder-open.svg");
+}
+ch-tree-x-list-item.tree-view-item--module::part(action)::before {
+  background-image: url("/build/icon-assets/objects/module.svg");
+}
+ch-tree-x-list-item.tree-view-item--module::part(action expanded)::before {
+  background-image: url("/build/icon-assets/objects/module-open.svg");
+}
+ch-tree-x-list-item .tree-view-item--pending-commit::part(action)::before {
+  content: "";
+  position: relative;
+  z-index: 1;
+  grid-area: left-img;
+  width: 5px;
+  height: 5px;
+  align-self: end;
+  margin-block-end: 3px;
+  margin-inline-start: 1px;
+  background-color: #2c3b92;
+  border-radius: 50%;
+}
+ch-tree-x-list-item::part(header):first-child {
+  margin-inline-start: var(--spacing-comp-01);
+}
 ch-tree-x-list-item::part(header) {
   padding-inline-end: calc(var(--spacing-comp-02) * 0.65);
   border: 1px solid transparent;
   height: var(--spacing-comp-05);
+  display: flex;
+  gap: var(--spacing-comp-01);
+}
+ch-tree-x-list-item::part(header):hover {
+  background-color: var(--gxg-background-color--hover);
+  color: var(--gxg-color--hover);
 }
 ch-tree-x-list-item::part(header):focus {
   outline-style: solid;
@@ -376,17 +424,13 @@ ch-tree-x-list-item::part(header):focus {
 }
 ch-tree-x-list-item[selected]::part(header) {
   background-color: var(--gxg-background-color--selected);
-  outline-style: solid;
-  outline-color: var(--gxg-border-color--focused);
-  outline-width: var(--border-width-md);
-  outline-offset: -2px;
 }
 ch-tree-x-list-item[selected]::part(header):hover {
   background-color: var(--gxg-background-color--selected-hover);
 }
 ch-tree-x-list-item::part(expandable-button) {
   background-color: var(--color-hover);
-  margin-inline-start: var(--spacing-comp-01);
+  margin-inline-end: 0;
 }
 ch-tree-x-list-item::part(expandable-button)::before {
   background-color: var(--gray-04);
@@ -402,12 +446,84 @@ ch-tree-x-list-item::part(expandable-button):focus {
   outline-width: var(--border-width-md);
   outline-offset: 0;
 }
+ch-tree-x-list-item::part(checkbox) {
+  margin-inline-end: 0;
+}
+ch-tree-x-list-item::part(checkbox__container) {
+  display: block;
+  width: var(--gxg-checkbox-size);
+  height: var(--gxg-checkbox-size);
+  border: none;
+  position: relative;
+  box-shadow: none !important;
+}
+ch-tree-x-list-item::part(checkbox__input) {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+}
+ch-tree-x-list-item::part(checkbox__option) {
+  display: inline-block;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-width: var(--border-width-sm);
+  border-style: var(--border-style-regular);
+  border-radius: var(--border-radius-md);
+  border-color: var(--gray-04);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  background: var(--color-background);
+  opacity: 1;
+  left: 0;
+  top: 0;
+  transform: none;
+  -webkit-mask: none;
+}
+ch-tree-x-list-item::part(checkbox__option):after {
+  position: absolute;
+  display: block;
+  content: "";
+  border: solid;
+  border-color: transparent;
+}
+ch-tree-x-list-item::part(checkbox__option checkbox__checked):after {
+  left: 5.5px;
+  top: 3px;
+  width: 4px;
+  height: 7px;
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  border-color: var(--color-primary-active);
+  transition-property: border-color;
+  transition-duration: var(--ui-animaton-speed);
+  transition-timing-function: ease;
+}
+ch-tree-x-list-item::part(checkbox__option checkbox__indeterminate):after {
+  left: 50%;
+  top: 50%;
+  width: 8px;
+  height: 1.5px;
+  border: 0;
+  background-color: var(--color-primary-active);
+  -webkit-transform: rotate(0) translateY(-50%) translateX(-50%);
+  -ms-transform: rotate(0) translateY(-50%) translateX(-50%);
+  transform: rotate(0) translateY(-50%) translateX(-50%);
+}
 ch-tree-x-list-item::part(action) {
   text-transform: capitalize;
+  display: flex;
+  gap: var(--spacing-comp-01);
 }
 ch-tree-x-list-item::part(left-img) {
   width: var(--spacing-comp-04);
   height: var(--spacing-comp-04);
+  margin-inline-end: 0;
 }
 ch-tree-x-list-item::part(downloading) {
   width: var(--spacing-comp-03);

package/dist/node_modules/@genexus/gemini/dist/collection/components/window/window.css

@@ -660,20 +660,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+  background: var(--gxg-scrollbar-track-thumb-hover-background);
 }
 
 :host {
@@ -749,20 +747,18 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 :host #content::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width);
 }
 :host #content::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
 }
 :host #content::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
 }
 :host #content::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+  background: var(--gxg-scrollbar-track-thumb-hover-background);
 }
 
 :host(.display) {

package/dist/types/common/config.d.ts

@@ -1,3 +1,11 @@
 export declare const config: {
   tooltip: boolean;
+  gxgMessage: {
+    common: {
+      type: string;
+      textAlign: string;
+      padding: string;
+      maxWidth: string;
+    };
+  };
 };

package/dist/types/common/helpers.d.ts

@@ -10,3 +10,4 @@ export declare const getElementSelectorParts: (element: HTMLElement) => string[]
 export declare const querySelectorPart: (selector: string) => HTMLElement;
 export declare const formatDate: (date: Date, type?: FormatDateType) => string;
 export type FormatDateType = "date" | "date-time";
+export declare const resolveGxgIconPath: (gxgIconName: string) => string;

package/dist/types/components/directory-selector/directory-selector.d.ts

@@ -30,6 +30,7 @@ export declare class GxIdeDirectorySelector {
   componentWillLoad(): void;
   private evaluateLabelPosition;
   private btnSelectClickHandler;
+  private valueChangedHandler;
   render(): any;
 }
 export type DirectorySelectorLabels = {

package/dist/types/components/kb-manager-export/helpers.d.ts

@@ -0,0 +1,5 @@
+import { TreeXItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-x/types";
+import { ObjectData, ObjectType, KBPropertyData, KBPropertyType } from "./kb-manager-export";
+export declare const convertObjectDataToTreeItemData: (objects: ObjectData[] | undefined, objectTypes: ObjectType[], actualTreeState: TreeXItemModel[]) => TreeXItemModel[];
+export declare const convertKbPropertiesDataToTreeItemData: (properties: KBPropertyData[], kbPropertiesTypes: KBPropertyType[], actualTreeState: TreeXItemModel[]) => TreeXItemModel[];
+export declare const clearKbPropertiesFromTree: (actualTreeState: TreeXItemModel[]) => TreeXItemModel[];

package/dist/types/components/kb-manager-export/kb-manager-export.d.ts

@@ -0,0 +1,110 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { TreeXItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-x/types";
+export declare class GxIdeKbManagerExport {
+  /**
+   * Selected properties
+   */
+  /**
+   * The component hard-coded strings translations.
+   */
+  private _componentLocale;
+  private checkedObjectsIds;
+  private checkedPropertiesIds;
+  el: HTMLGxIdeKbManagerExportElement;
+  private fileNameEl;
+  private exportAllCheckboxEl;
+  private objectsTreeEl;
+  fileName: string;
+  exportFilePathName: string;
+  objectsTreeState: TreeXItemModel[];
+  noObjects: boolean;
+  watchObjectsTreeStateHandler(newState: TreeXItemModel[]): void;
+  /**
+   * Just for testing. Remove when this is is done (Bruno)
+   */
+  readonly dummyInitialTree: TreeXItemModel[];
+  watchDummyInitialTreeHandler(newTree: TreeXItemModel[]): void;
+  /**
+   * Array with the possible types of KB properties
+   */
+  readonly kbPropertiesTypes: KBPropertyType[];
+  /**
+   * Array of possible object types
+   */
+  readonly objectTypes: ObjectType[];
+  /**
+   * Callback invoked when the user wants to access the export options.
+   */
+  readonly exportFileDirectoryCallback: ExportFileDirectoryCallback;
+  /**
+   * Callback invoked when the user wants to access the export options.
+   */
+  readonly optionsCallback: OptionsCallback;
+  /**
+   * Callback invoked when the user wants to include KB properties.
+   */
+  readonly addKBPropertiesCallback: KBPropertiesCallback;
+  /**
+   *Callback invoked when the user wants to add all the references for the selected objects.
+   *@param itemIds:string[] The selected item ids
+   *@returns : Returns an object with the items and its references
+   */
+  readonly addReferencesCallback: AddReferencesCallback;
+  /**
+   * Callback invoked when the user wants to add objects.
+   */
+  readonly addObjectsCallback: AddObjectsCallback;
+  /**
+   *Callback invoked when the user wants to initiate the export process.
+   *@param fileName:string
+   *@param itemIds:string[] The selected item ids
+   *@returns : It returns a boolean indicating whether the process was successful
+   */
+  readonly exportCallback: ExportCallback;
+  /**
+   * Callback invoked when the user wants to cancel the export process.
+   * @returns It returns a boolean indicating whether the process could be canceled or not.
+   */
+  readonly cancelCallback: CancelCallback;
+  /**
+   * This event is emitted once just after the component is fully loaded and the first render() occurs.
+   */
+  componentDidLoadEvent: EventEmitter<boolean>;
+  componentWillLoad(): Promise<void>;
+  private optionsCallbackHandler;
+  private addKBPropertiesCallbackHandler;
+  private addObjectsCallbackHandler;
+  private addReferencesCallbackHandler;
+  private updateObjects;
+  private treeObjectsCheckedItemsChangedHandler;
+  private exportCallbackHandler;
+  private cancelCallbackHandler;
+  private clearButtonHandler;
+  render(): void;
+}
+export type KBPropertiesCallback = () => Promise<KBPropertyData[]>;
+export type KBPropertyData = {
+  typeId: string;
+  id: string;
+  name: string;
+};
+export type KBPropertyType = {
+  id: string;
+  icon: string;
+};
+export type ObjectData = {
+  typeId: string;
+  id: string;
+  name: string;
+};
+export type ObjectType = {
+  id: string;
+  name: string;
+  icon: string;
+};
+export type ExportFileDirectoryCallback = () => Promise<string>;
+export type OptionsCallback = () => Promise<void>;
+export type AddObjectsCallback = () => Promise<ObjectData[]>;
+export type ExportCallback = (fileName: string, checkedKbPropertiesIds: string[], checkedObjectIds: string[]) => Promise<boolean>;
+export type AddReferencesCallback = (objectIds: string[]) => Promise<ObjectData[]>;
+export type CancelCallback = () => Promise<boolean>;

package/dist/types/components/references/helpers.d.ts

@@ -1,5 +1,5 @@
 import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/ch-suggest";
-import { GxgTreeItemData } from "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item";
+import { TreeXItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-x/types";
 import { SelectorCategoryData } from "./references";
 import { ReferenceData } from "./references";
 /**
@@ -7,6 +7,6 @@ import { ReferenceData } from "./references";
  */
 export declare const convertObjectDataToSuggestData: (selectorCategoriesData: SelectorCategoryData[]) => SuggestData;
 /**
- * @description This function converts ReferenceData[] data to GxgTreeItemData[]
+ * @description This function converts ReferenceData[] data to TreeItemData[]
  */
-export declare const convertReferenceDataToTreeData: (referencedBy: ReferenceData[] | undefined) => GxgTreeItemData[];
+export declare const convertReferenceDataToTreeViewData: (referenceData: ReferenceData[] | undefined) => TreeXItemModel[];

package/dist/types/components/references/references.d.ts

@@ -1,23 +1,19 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { GxgTreeItemData } from "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item";
+import { TreeXItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-x/types";
 import { SuggestData } from "@genexus/chameleon-controls-library/dist/types/components/suggest/ch-suggest";
 export declare class GxIdeReferences {
   /**
    * The component hard-coded strings translations.
    */
   private _componentLocale;
-  /**
-   * The references messages max. width that appear if the tree is empty or could not be retrieved.
-   */
-  private referencesMessagesMaxWidth;
   /**
    * The last SelectorCategoryData[] returned by selectorSourceCallback
    */
   private selectorCategoryData;
   el: HTMLGxIdeReferencesElement;
-  private selectObjectSuggestEl;
-  referencedByTreeData: GxgTreeItemData[];
-  referencesToTreeData: GxgTreeItemData[];
+  referencedByTreeData: TreeXItemModel[];
+  referencesToTreeData: TreeXItemModel[];
   /**
    * Displays or hides the header-bottom section
    */
@@ -66,10 +62,11 @@ export declare class GxIdeReferences {
   componentWillLoad(): Promise<void>;
   componentDidLoad(): void;
   componentDidRender(): void;
+  private attachTreeEvents;
   /**
    * It attaches on the ch-suggest, the "itemSelected" event triggered by the ch-suggest-list-item. This helps set the new 'selectedObject'.
    */
-  private attachSelectObjectListener;
+  private selectObjectSelectionChanged;
   /**
    * This handler gets fired every time the value of the 'Select Object' ch-suggest changes.
    */
@@ -91,21 +88,8 @@ export declare class GxIdeReferences {
    * It hides/show the bar (The header bottom section).
    */
   private hideBarButtonClickedHandler;
-  /**
-   * Simple helper function to get 'this.referencedByTreeData' or 'this.referencesToTreeData'
-   */
-  private getRef;
-  /**
-   * Simple helper function to update 'this.referencedByTreeData' or 'this.referencesToTreeData'
-   */
-  private updateRef;
-  /**
-   * Handles changes on any of the references (by or to). Used to:
-   * 1) Keep the models updated.
-   * 2) call the openObjectCallback.
-   * 3) call the loadReferencesCallback if a lazy node was toggled.
-   */
-  private referencesPanelStateChangedHandler;
+  private referencesLazyLoadCallbackHandler;
+  private referenceSelectedHandler;
   render(): any;
 }
 export type SelectorCategoryData = {