@genexus/genexus-ide-ui 0.0.56 → 0.0.58

package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/{tree-x → tree-view/tree-x}/tree-x.css

@@ -1,18 +1,17 @@
 ch-tree-x {
   display: flex;
   position: relative;
+  width: 100%;
   overflow: auto;
 }
-ch-tree-x > ch-tree-x-list {
+ch-tree-x > .ch-tree-x-container {
   position: absolute;
   inset: 0;
-  min-width: max-content;
 }
 ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list-item {
   pointer-events: var(--ch-tree-x-pointer-events, all);
 }
-ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop,
-ch-tree-x.ch-tree-x-dragging-item ch-tree-x-list {
+ch-tree-x.ch-tree-x-dragging-item .ch-tree-x-list-item--deny-drop {
   pointer-events: none;
 }
 ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected] {
@@ -21,7 +20,7 @@ ch-tree-x.ch-tree-x--dragging-selected-items ch-tree-x-list-item[selected] {
 ch-tree-x.ch-tree-x-waiting-drop-processing {
   cursor: wait;
 }
-ch-tree-x.ch-tree-x-waiting-drop-processing > ch-tree-x-list {
+ch-tree-x.ch-tree-x-waiting-drop-processing > .ch-tree-x-container {
   pointer-events: none;
 }
 

package/dist/node_modules/@genexus/chameleon-controls-library/dist/collection/components/{tree-x-list-item → tree-view/tree-x-list-item}/tree-x-list-item.css

@@ -1,7 +1,6 @@
 :where(button) {
   all: unset;
   display: flex;
-  cursor: pointer;
   user-select: none;
   touch-action: manipulation;
   -webkit-user-drag: element;
@@ -121,7 +120,7 @@
   inset-inline-start: calc( var(--inset-inline-start) + var(--ch-tree-x-list-item-dashed-line--offset) );
   height: 1px;
   width: calc( var(--tab-width) - var(--parent-checkbox-offset) - var(--parent-expandable-offset) - var(--own-offset) - var(--ch-tree-x-list-item-dashed-line--offset) - 4px );
-  border: 0 dashed #a9a9a9;
+  border: 0 dashed color-mix(in srgb, currentColor 65%, transparent);
   border-block-end-width: 1px;
   pointer-events: none;
   content-visibility: hidden;
@@ -150,6 +149,7 @@
   height: var(--expandable-button-width);
   margin-inline-end: 5px;
   z-index: 1;
+  cursor: pointer;
   content-visibility: auto;
   contain-intrinsic-size: auto var(--expandable-button-width);
 }
@@ -184,6 +184,7 @@
   align-items: center;
   height: 100%;
   flex: 1;
+  cursor: pointer;
 }
 
 .readonly-mode {
@@ -213,9 +214,10 @@
   grid-area: text;
   width: 100%;
   height: 100%;
-  background-color: unset;
   padding: 0;
   margin: 0;
+  background-color: unset;
+  color: unset;
   border: 1px solid currentColor;
   font: unset;
   outline: unset;
@@ -245,16 +247,13 @@
   --parent-negative-checkbox-offset: 0px;
   --parent-checkbox-offset: 0px;
   display: grid;
-  grid-template-rows: 0fr;
+  grid-auto-rows: min-content;
+  position: relative;
   content-visibility: auto;
   contain-intrinsic-size: auto 100px;
 }
 
-.expanded {
-  grid-template-rows: 1fr;
-}
-
-:not(.expanded) ::slotted([slot=tree]) {
+.expandable--collapsed {
   display: none;
   overflow: hidden;
   content-visibility: hidden;

package/dist/node_modules/@genexus/gemini/dist/collection/components/combo-box/combo-box.css

@@ -691,6 +691,11 @@ FORM ELEMENTS
   position: relative;
   /*POSITION TOP*/
 }
+:host .main-container .outer-wrapper {
+  display: flex;
+  gap: var(--spacing-comp-01);
+  align-items: center;
+}
 :host .main-container .label {
   font-size: var(--font-size-sm);
   margin-bottom: var(--spacing-lay-xs);

package/dist/node_modules/@genexus/gemini/dist/collection/components/form-checkbox/form-checkbox.css

@@ -712,6 +712,24 @@ FORM ELEMENTS
   --checkmark-border-color: var(--color-success-dark);
 }
 
+/*Tooltip*/
+.tooltip-outer-wrapper {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns var(--timing-02);
+}
+
+:host(.tooltip--visible) .tooltip-outer-wrapper {
+  grid-template-columns: 1fr;
+}
+
+.tooltip-inner-wrapper gxg-icon {
+  display: flex;
+  position: relative !important;
+  top: 0 !important;
+  transform: none !important;
+}
+
 :host(.gxg--disabled) .form-element,
 :host(.gxg--disabled.form-element) {
   pointer-events: none;

package/dist/node_modules/@genexus/gemini/dist/collection/components/form-text/form-text.css

@@ -712,6 +712,24 @@ FORM ELEMENTS
   --checkmark-border-color: var(--color-success-dark);
 }
 
+/*Tooltip*/
+.tooltip-outer-wrapper {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns var(--timing-02);
+}
+
+:host(.tooltip--visible) .tooltip-outer-wrapper {
+  grid-template-columns: 1fr;
+}
+
+.tooltip-inner-wrapper gxg-icon {
+  display: flex;
+  position: relative !important;
+  top: 0 !important;
+  transform: none !important;
+}
+
 :host(.gxg--disabled) .form-element,
 :host(.gxg--disabled.form-element) {
   pointer-events: none;
@@ -744,6 +762,25 @@ FORM ELEMENT WRAPPER
   position: absolute;
 }
 
+/*****************************************************
+TOOLTIP
+*****************************************************/
+:host(.tooltip) .inner-wrapper {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-comp-01);
+}
+:host(.tooltip) .tooltip-container {
+  width: 0;
+  overflow: hidden;
+  transition: width --timing-01;
+}
+
+:host(.tooltip--visible) .tooltip-container {
+  width: 20px;
+}
+
 /*****************************************************
 LABEL
 *****************************************************/

package/dist/node_modules/@genexus/gemini/dist/collection/components/form-textarea/form-textarea.css

@@ -712,6 +712,24 @@ FORM ELEMENTS
   --checkmark-border-color: var(--color-success-dark);
 }
 
+/*Tooltip*/
+.tooltip-outer-wrapper {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns var(--timing-02);
+}
+
+:host(.tooltip--visible) .tooltip-outer-wrapper {
+  grid-template-columns: 1fr;
+}
+
+.tooltip-inner-wrapper gxg-icon {
+  display: flex;
+  position: relative !important;
+  top: 0 !important;
+  transform: none !important;
+}
+
 :host(.gxg--disabled) .form-element,
 :host(.gxg--disabled.form-element) {
   pointer-events: none;
@@ -766,6 +784,10 @@ LABEL
 /*****************************************************
 TEXTAREA
 *****************************************************/
+:host .textarea-wrapper {
+  display: flex;
+  gap: var(--spacing-comp-01);
+}
 :host textarea {
   resize: none;
   border-width: var(--border-width-sm);

package/dist/node_modules/@genexus/gemini/dist/collection/components/list-box/list-box.css

@@ -382,6 +382,24 @@ FORM ELEMENTS
   --checkmark-border-color: var(--color-success-dark);
 }
 
+/*Tooltip*/
+.tooltip-outer-wrapper {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns var(--timing-02);
+}
+
+:host(.tooltip--visible) .tooltip-outer-wrapper {
+  grid-template-columns: 1fr;
+}
+
+.tooltip-inner-wrapper gxg-icon {
+  display: flex;
+  position: relative !important;
+  top: 0 !important;
+  transform: none !important;
+}
+
 :host {
   display: block;
   font-size: var(--font-size-sm);

package/dist/node_modules/@genexus/gemini/dist/collection/components/suggest/styles.css

@@ -374,6 +374,24 @@ FORM ELEMENTS
   --checkmark-border-color: var(--color-success-dark);
 }
 
+/*Tooltip*/
+.tooltip-outer-wrapper {
+  display: grid;
+  grid-template-columns: 0fr;
+  transition: grid-template-columns var(--timing-02);
+}
+
+:host(.tooltip--visible) .tooltip-outer-wrapper {
+  grid-template-columns: 1fr;
+}
+
+.tooltip-inner-wrapper gxg-icon {
+  display: flex;
+  position: relative !important;
+  top: 0 !important;
+  transform: none !important;
+}
+
 ch-suggest {
   font-family: var(--font-family-primary);
   font-size: var(--font-size-lg);

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

@@ -676,11 +676,13 @@ FORM ELEMENTS
   cursor: pointer;
 }
 
+:host {
+  display: inline-flex;
+}
 :host .tooltip {
   cursor: pointer;
   position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black;
+  border-bottom: 1px dotted var(--color-on-secondary);
   text-decoration: none;
 }
 :host .tooltip .tooltiptext {
@@ -726,7 +728,7 @@ FORM ELEMENTS
 }
 
 :host([position=top]) .tooltip .tooltiptext {
-  bottom: 20px;
+  bottom: 27px;
   left: 50%;
   transform: translateX(-50%);
 }
@@ -776,4 +778,57 @@ FORM ELEMENTS
 
 :host([no-border]) .tooltip {
   border-bottom: none;
+}
+
+:host([align-end]) .tooltiptext {
+  transform: none !important;
+  inset-inline-end: 0;
+  left: auto !important;
+  max-width: 180px;
+  width: max-content;
+}
+:host([align-end]) .tooltiptext:after {
+  inset-inline-end: -1px;
+  left: auto !important;
+}
+
+:host([flex]) {
+  display: flex;
+}
+:host([flex]) .tooltip {
+  display: flex;
+}
+
+:host([fixed]) {
+  border: 1px solid black;
+}
+:host([fixed]) .tooltip:hover .tooltiptext {
+  visibility: hidden;
+  opacity: 0;
+}
+:host([fixed]) .tooltip .tooltiptext {
+  position: fixed;
+  height: 0;
+}
+:host([fixed]) .tooltip .tooltiptext__content {
+  transform: translateY(calc(-100% - 5px));
+}
+:host([fixed]) .tooltip .tooltiptext__content:after {
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 5px solid var(--gray-07);
+  position: absolute;
+  right: 0;
+  transform: translateX(-3px) rotate(180deg);
+  bottom: -3px;
+}
+:host([fixed]) .tooltip .tooltiptext:after {
+  display: none;
+}
+:host([fixed]) .tooltip--visible .tooltiptext {
+  visibility: visible !important;
+  opacity: 1 !important;
 }

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

@@ -341,20 +341,37 @@ FORM ELEMENTS
 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;
 }
 
-.tree-buttons {
-  display: grid;
-  grid-auto-rows: max-content;
-  row-gap: 8px;
+ch-tree-x {
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+ch-tree-x::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+ch-tree-x::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+ch-tree-x::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+ch-tree-x::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+ch-tree-x > div.ch-tree-x-container {
+  position: relative;
+  width: 100%;
 }
 
 /*---------------------------
@@ -363,8 +380,40 @@ ch-tree-x-list-item
 ch-tree-x-list-item {
   --expandable-button-width: var(--spacing-comp-04);
 }
+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) {
-  padding-inline-start: var(--spacing-comp-01);
   padding-inline-end: calc(var(--spacing-comp-02) * 0.65);
   border: 1px solid transparent;
   height: var(--spacing-comp-05);
@@ -377,16 +426,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);
 }
 ch-tree-x-list-item::part(expandable-button)::before {
   background-color: var(--gray-04);
@@ -414,4 +460,13 @@ ch-tree-x-list-item::part(downloading) {
   height: var(--spacing-comp-03);
   border: var(--border-width-md) solid var(--color-primary-enabled);
   border-inline-start-color: transparent;
+}
+
+.ch-tree-x-drag-info {
+  padding-inline: 6px;
+  padding-block: 2px;
+  background-color: #cfdee6;
+  border: 1px solid #0266a0;
+  border-radius: 10px;
+  font-size: 8px;
 }

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

@@ -0,0 +1,3 @@
+export declare const config: {
+  tooltip: boolean;
+};

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/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,5 +1,6 @@
 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 {
   /**
@@ -15,9 +16,8 @@ export declare class GxIdeReferences {
    */
   private selectorCategoryData;
   el: HTMLGxIdeReferencesElement;
-  private selectObjectSuggestEl;
-  referencedByTreeData: GxgTreeItemData[];
-  referencesToTreeData: GxgTreeItemData[];
+  referencedByTreeData: TreeXItemModel[];
+  referencesToTreeData: TreeXItemModel[];
   /**
    * Displays or hides the header-bottom section
    */
@@ -66,10 +66,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 +92,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 = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -36,10 +36,10 @@
     "@types/react": "^18.2.8"
   },
   "peerDependencies": {
-    "@genexus/gemini": "*0.1.483"
+    "@genexus/gemini": "*0.1.494"
   },
   "devDependencies": {
-    "@genexus/gemini": "*0.1.483",
+    "@genexus/gemini": "*0.1.494",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "^2.17.0",
     "@stencil/sass": "^2.0.1",