@genexus/genexus-ide-ui 0.0.60 → 0.0.62

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

@@ -787,7 +787,7 @@ FORM ELEMENTS
   transition-property: opacity;
   transition-duration: 0.5s;
   transition-timing-function: ease;
-  background-color: var(--color-hover);
+  background-color: var(--gxg-background-color--hover);
 }
 :host li .toggle-icon:hover {
   background-color: var(--color-background);

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

@@ -346,11 +346,10 @@ gxg-tree-view {
   color: var(--color-on-background);
   display: contents;
 }
-gxg-tree-view ch-tree-x .ch-tree-x-container {
-  padding: var(--spacing-comp-01);
-}
 
-/*custom styles for the property */
+/*---------------------------
+.tree-view
+---------------------------*/
 .tree-view {
   /* Track */
   /* Handle */
@@ -372,113 +371,87 @@ gxg-tree-view ch-tree-x .ch-tree-x-container {
   cursor: pointer;
 }
 
-gxg-tree-view[position-relative] ch-tree-x .ch-tree-x-container {
-  position: relative;
-  width: 100%;
-}
-
-/*padding (added by Gemini)*/
-gxg-tree-view[no-padding] ch-tree-x .ch-tree-x-container {
-  padding: 0;
-}
-
 /*---------------------------
-ch-tree-x-list-item
+.tree-view-item
 ---------------------------*/
-.tree-view-item::part(dashed-line) {
-  border-color: var(--gray-02);
-}
-
-ch-tree-x-list-item {
+.tree-view-item {
+  /*-- Css Variables ---*/
   --checkbox-size: var(--gxg-checkbox-size);
   --expandable-button-width: var(--spacing-comp-04);
+  /*-- Parts ---*/
+  /*-- Parts for checkbox ---*/
   /*checked*/
   /*indeterminate*/
+  /*-- Dynamic Icons ---*/
+  /*-- Other ---*/
 }
-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);
+.tree-view-item::part(dashed-line) {
+  border-color: var(--gray-02);
 }
-ch-tree-x-list-item::part(header) {
+.tree-view-item::part(header) {
   padding-inline-end: calc(var(--spacing-comp-02) * 0.65);
   height: var(--spacing-comp-05);
   display: flex;
   gap: 5px;
 }
-ch-tree-x-list-item::part(header):before {
+.tree-view-item::part(header):first-child {
+  margin-inline-start: var(--spacing-comp-01);
+}
+.tree-view-item::part(header):before {
   content: "";
   display: block;
 }
-ch-tree-x-list-item::part(header):hover {
+.tree-view-item::part(header):hover {
   background-color: var(--gxg-background-color--hover);
   color: var(--gxg-color--hover);
 }
-ch-tree-x-list-item::part(header):focus {
+.tree-view-item::part(header):focus {
   outline: var(--border-width-md) solid var(--gxg-border-color--focused);
   outline-offset: -2px;
 }
-ch-tree-x-list-item[selected]::part(header) {
+.tree-view-item[selected]::part(header) {
   background-color: var(--gxg-background-color--selected);
 }
-ch-tree-x-list-item[selected]::part(header):hover {
+.tree-view-item[selected]::part(header):hover {
   background-color: var(--gxg-background-color--selected-hover);
 }
-ch-tree-x-list-item.ch-tree-x-list-item--editing::part(header) {
-  border: 2px solid transparent;
-}
-ch-tree-x-list-item::part(expandable-button) {
-  background-color: var(--color-hover);
+.tree-view-item::part(expandable-button) {
+  background-color: var(--gray-00);
   margin-inline-end: 0;
 }
-ch-tree-x-list-item::part(expandable-button)::before {
+.tree-view-item::part(expandable-button)::before {
   background-color: var(--gray-04);
   -webkit-mask-position: center;
   -webkit-mask-repeat: no-repeat;
 }
-ch-tree-x-list-item::part(expandable-button):hover {
+.tree-view-item::part(expandable-button):hover {
   background-color: var(--color-background);
 }
-ch-tree-x-list-item::part(expandable-button):focus {
+.tree-view-item::part(expandable-button):focus {
   outline: var(--border-width-md) solid var(--gxg-border-color--focused);
   outline-offset: 0;
 }
-ch-tree-x-list-item::part(checkbox__container) {
+.tree-view-item::part(action) {
+  text-transform: capitalize;
+  display: flex;
+  gap: var(--spacing-comp-01);
+}
+.tree-view-item::part(left-img) {
+  width: var(--spacing-comp-04);
+  height: var(--spacing-comp-04);
+  margin-inline-end: 0;
+}
+.tree-view-item::part(downloading) {
+  width: var(--spacing-comp-03);
+  height: var(--spacing-comp-03);
+  border: var(--border-width-md) solid var(--color-primary-enabled);
+  border-inline-start-color: transparent;
+}
+.tree-view-item::part(checkbox__container) {
   border-color: var(--gray-04);
   background-color: var(--color-background);
 }
-ch-tree-x-list-item::part(checkbox__container):after {
+.tree-view-item::part(checkbox__container):after {
   content: "";
   position: absolute;
   display: block;
@@ -486,18 +459,18 @@ ch-tree-x-list-item::part(checkbox__container):after {
   border-color: transparent;
   z-index: 0;
 }
-ch-tree-x-list-item::part(checkbox__container):focus-within {
+.tree-view-item::part(checkbox__container):focus-within {
   box-shadow: none;
   outline: var(--border-width-md) solid var(--gxg-border-color--focused);
   outline-offset: -2px;
 }
-ch-tree-x-list-item::part(checkbox) {
+.tree-view-item::part(checkbox) {
   margin-inline-end: 0;
 }
-ch-tree-x-list-item::part(checkbox__option) {
+.tree-view-item::part(checkbox__option) {
   display: none;
 }
-ch-tree-x-list-item::part(checkbox__container checkbox__checked):after {
+.tree-view-item::part(checkbox__container checkbox__checked):after {
   left: 5.5px;
   top: 3px;
   width: 4px;
@@ -511,7 +484,7 @@ ch-tree-x-list-item::part(checkbox__container checkbox__checked):after {
   transition-duration: var(--ui-animaton-speed);
   transition-timing-function: ease;
 }
-ch-tree-x-list-item::part(checkbox__container checkbox__indeterminate):after {
+.tree-view-item::part(checkbox__container checkbox__indeterminate):after {
   left: 50%;
   top: 50%;
   width: 8px;
@@ -522,28 +495,50 @@ ch-tree-x-list-item::part(checkbox__container checkbox__indeterminate):after {
   -ms-transform: rotate(0) translateY(-50%) translateX(-50%);
   transform: rotate(0) translateY(-50%) translateX(-50%);
 }
-ch-tree-x-list-item::part(checkbox__input) {
+.tree-view-item::part(checkbox__input) {
   position: relative;
   z-index: 1;
 }
-ch-tree-x-list-item::part(action) {
-  text-transform: capitalize;
-  display: flex;
-  gap: var(--spacing-comp-01);
+.tree-view-item--folder::part(action)::before, .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::part(left-img) {
-  width: var(--spacing-comp-04);
-  height: var(--spacing-comp-04);
-  margin-inline-end: 0;
+.tree-view-item--folder::part(action)::before {
+  background-image: url("/build/icon-assets/objects/folder.svg");
 }
-ch-tree-x-list-item::part(downloading) {
-  width: var(--spacing-comp-03);
-  height: var(--spacing-comp-03);
-  border: var(--border-width-md) solid var(--color-primary-enabled);
-  border-inline-start-color: transparent;
+.tree-view-item--folder::part(action expanded)::before {
+  background-image: url("/build/icon-assets/objects/folder-open.svg");
+}
+.tree-view-item--module::part(action)::before {
+  background-image: url("/build/icon-assets/objects/module.svg");
+}
+.tree-view-item--module::part(action expanded)::before {
+  background-image: url("/build/icon-assets/objects/module-open.svg");
+}
+.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: var(--color-primary-enabled);
+  border-radius: 50%;
 }
 
-.ch-tree-x-drag-info {
+/*-- Other Selectors (these depend on the tag class name)---*/
+.ch-tree-x-list-item--editing::part(header) {
+  border: 2px solid transparent;
+}
+/*--- Revisar ---*/
+.ch-tree-x-list-item .ch-tree-x-drag-info {
   padding-inline: 6px;
   padding-block: 2px;
   background-color: #cfdee6;

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

@@ -6,6 +6,10 @@ export declare const config: {
       textAlign: string;
       padding: string;
       maxWidth: string;
+      minHeight: string;
     };
   };
+  gxIdeContainer: {
+    slimmerFooter: boolean;
+  };
 };

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

@@ -1,5 +1,6 @@
 export declare const gridCommon: {
   colSize: {
+    minContent: string;
     auto: string;
     common: string;
     commonDouble: string;

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

@@ -1,3 +1,4 @@
+import { TreeXItemModel } from "@genexus/chameleon-controls-library/dist/types/components/tree-view/tree-x/types";
 /**
  * @param element an HTMLElement
  * @returns an alphabetically ordered array of all the parts and exportparts the element contains.
@@ -11,3 +12,4 @@ 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;
+export declare const countTreeItems: (treeModel: TreeXItemModel[], children?: boolean) => number;

package/dist/types/common/render-list-item.d.ts

@@ -0,0 +1,2 @@
+import { ItemData } from "../components/_helpers/list-selector/list-selector-item/list-selector-item";
+export declare const renderListItems: (itemsData: ItemData[]) => HTMLGxIdeListSelectorItemElement[];

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

@@ -13,6 +13,22 @@ export type GxOption = {
   iconName?: string;
   iconColor?: string;
 };
+export type ImportCategoryData = {
+  id: string;
+  name: string;
+  icon: string;
+  items: ImportItemData[];
+};
+export type ImportItemData = {
+  id: string;
+  name: string;
+};
+export type ImportItemResultData = {
+  id: string;
+  name: string;
+  status: "warning" | "error" | "success";
+  messages?: string[];
+};
 export type Position = "above" | "end" | "below" | "start";
 export type LabelPosition = "start" | "above";
 export type FormElementValidation = {

package/dist/types/components/{container → _helpers/container}/container.d.ts

@@ -1,9 +1,18 @@
 import { TitleAlignment } from "@genexus/gemini/dist/types/common/types";
+import { TitleType } from "../title/title";
 export declare class GxIdeContainer {
+  /**
+   * By setting the title to inactive, the color will be gray instead of black.
+   */
+  readonly inactiveTitle: boolean;
   /**
    * The title of the container
    */
   readonly containerTitle: string;
+  /**
+   * The title of the container
+   */
+  readonly titleType: TitleType;
   /**
    * Displays a border all around the container
    */
@@ -28,10 +37,6 @@ export declare class GxIdeContainer {
    * The container general padding (applies to .heading, .content, and .footer)
    */
   readonly sectionsPadding: SectionsPadding;
-  /**
-   * Makes the container full height (content will grow only)
-   */
-  readonly fullHeight: boolean;
   /**
    * Title alignment
    */
@@ -44,6 +49,10 @@ export declare class GxIdeContainer {
    * Removes the padding from the heading
    */
   readonly noHeadingPadding: boolean;
+  /**
+   * Adds padding to the top of the heading
+   */
+  readonly headingPaddingTop: boolean;
   /**
    * The heading justification
    */
@@ -72,6 +81,26 @@ export declare class GxIdeContainer {
    * Justify content
    */
   readonly justifyContent: JustifyContent;
+  /**
+   * Display border end on the content
+   */
+  readonly contentBorderEnd: boolean;
+  /**
+   * Makes the above footer vertical padding slimmer
+   */
+  readonly slimmerAboveFooter: boolean;
+  /**
+   * Removes the above padding from the footer
+   */
+  readonly noAboveFooterPadding: boolean;
+  /**
+   * Removes the above border top
+   */
+  readonly noBorderAboveFooter: boolean;
+  /**
+   * Makes the footer vertical padding slimmer
+   */
+  readonly slimmerFooter: boolean;
   /**
    * Removes the padding from the footer
    */
@@ -84,6 +113,10 @@ export declare class GxIdeContainer {
    * Removes the border top from the footer
    */
   readonly noBorderFooter: boolean;
+  /**
+   * Adds a subtle shadow to the footer
+   */
+  readonly footerSubtleShadow: boolean;
   el: HTMLGxIdeContainerElement;
   /**
    * A boolean variable indicating if the component has or not any content for the 'header' slot
@@ -97,10 +130,18 @@ export declare class GxIdeContainer {
    * A boolean variable indicating if the component has or not any content for the 'footer' slot
    */
   hasFooterSlot: boolean;
+  /**
+   * A boolean variable indicating if the component has or not any content for the 'footer' slot
+   */
+  hasAboveFooterSlot: boolean;
   /**
    * A boolean variable indicating that the container only has the heading section
    */
   hasOnlyHeading: boolean;
+  /**
+   * A boolean variable indicating that the container only has the content section
+   */
+  hasOnlyContent: boolean;
   /**
    * A boolean variable indicating that the container only has the footer section
    */
@@ -110,6 +151,7 @@ export declare class GxIdeContainer {
   private evaluateSections;
   private headingClasses;
   private contentClasses;
+  private aboveFooter;
   private footer;
   render(): any;
 }

package/dist/types/components/{entity-selector → _helpers/entity-selector}/entity-selector.d.ts

@@ -1,6 +1,6 @@
-import { EventEmitter } from "../../stencil-public-runtime";
+import { EventEmitter } from "../../../stencil-public-runtime";
 import { LabelPosition } from "../directory-selector/directory-selector";
-import { EntityData } from "../../common/types";
+import { EntityData } from "../../../common/types";
 export declare class GxIdeEntitySelector {
   /**
    *  This property provides the user a way to define custom aria-label descriptions.
@@ -21,7 +21,7 @@ export declare class GxIdeEntitySelector {
   /**
    * Centers the label
    */
-  readonly centerLabel = false;
+  readonly centerLabel: boolean;
   /**
    * The label width
    */

package/dist/types/components/{list-selector → _helpers/list-selector}/list-selector-item/list-selector-item.d.ts

@@ -1,31 +1,67 @@
-import { EventEmitter } from "../../../stencil-public-runtime";
+import { EventEmitter } from "../../../../stencil-public-runtime";
+import { Color, Size } from "@genexus/gemini/dist/types/components/icon/icon";
 export declare class GxIdeListSelectorItem {
   private parentIsListSelector;
   private parentList;
   private checked;
   private name;
+  private type;
+  private hasUniversalSlot;
+  private index;
   el: HTMLGxIdeListSelectorItemElement;
   /**
    * The item id
    */
   readonly itemId: string;
   /**
-   * The item value, that act as a label as well
+   * The item value, that acts as a label as well
    */
   readonly itemValue: string;
+  /**
+   * This will set the input as checked
+   */
+  itemChecked: boolean;
   /**
    * It allows to select the item by clicking on it. It will emit the item-id
    */
-  selectable: boolean;
+  readonly: boolean;
   /**
    * The presence of this property will force the item text to not-wrap, and have ellipsis
    */
   ellipsis: boolean;
+  /**
+   * The gemini icon name
+   */
+  readonly icon: string;
+  /**
+   * The gemini icon color. If no one provided, it will inherit the value from the list-selector
+   */
+  iconColor: Color;
+  /**
+   * The gemini icon size. Inherited from the parent.
+   */
+  iconSize: Size;
+  /**
+   * Disables the item border
+   */
+  noBorder: boolean;
+  /**
+   * Displays the universal slot at the end, instead of at the benign
+   */
+  readonly universalSlotEnd = false;
   componentWillLoad(): void;
   /**
    * Emits the item data
    */
-  itemSelected: EventEmitter<ItemData>;
+  itemSelectionChanged: EventEmitter<ItemData>;
+  /**
+   * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference
+   */
+  private evaluateParentIsListSelector;
+  /**
+   * Determines the type of item, based on the parent list-selector 'type' property value
+   */
+  private evaluateType;
   /**
    * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item
    */
@@ -38,18 +74,20 @@ export declare class GxIdeListSelectorItem {
    * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.
    */
   private evaluateChecked;
-  /**
-   * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference
-   */
-  private evaluateParentIsListSelector;
+  private evaluateBorder;
+  private evaluateUniversalSlot;
   /**
    * Gets the listName required value, that is needed for the list selection to properly work
    */
   private assignName;
+  private evaluateOrderedList;
+  private evaluateIconColor;
+  private evaluateIconSize;
   private onChangeHandler;
   render(): any;
 }
 export type ItemData = {
   itemId: string;
   itemValue: string;
+  itemIcon?: string;
 };

package/dist/types/components/_helpers/list-selector/list-selector.d.ts

@@ -0,0 +1,71 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { Color, Size } from "@genexus/gemini/dist/types/components/icon/icon";
+import { ItemData } from "./list-selector-item/list-selector-item";
+export declare class GxIdeListSelector {
+  el: HTMLGxIdeListSelectorElement;
+  /**
+   * The list title (optional)
+   */
+  readonly listTitle: string;
+  /**
+   * It determines if the list is ordered, or unordered
+   */
+  readonly ordered: boolean;
+  /**
+   * Makes the list readonly
+   */
+  readonly readonly: boolean;
+  /**
+   * It determines the type of list: single-selection or multi-selection
+   */
+  readonly type: "single-selection" | "multi-selection";
+  /**
+   * Makes the list required
+   */
+  readonly required: boolean;
+  /**
+   * The presence of this property will force all the items to not-wrap, and have ellipsis
+   */
+  readonly ellipsis: boolean;
+  /**
+   * The value of the initial (or initials) checked list-item/s
+   */
+  value: string | string[];
+  /**
+   * Icons color
+   */
+  readonly iconsColor: Color;
+  /**
+   * Icons size
+   */
+  readonly iconsSize: Size;
+  /**
+   * The name of this list. This is a required attribute for the list to work.
+   */
+  readonly listName: string;
+  /**
+   * Disables the items border
+   */
+  readonly noItemsBorder: boolean;
+  /**
+   * Disables the list border
+   */
+  readonly noListBorder: boolean;
+  /**
+   * Emits the actual selection
+   */
+  selectionChanged: EventEmitter<CheckedItemsInfo>;
+  componentWillLoad(): void;
+  itemSelectionChangedHandler(event: CustomEvent<ItemData>): void;
+  /**
+   * It evaluates the checked items, and checks or unchecks if needed
+   */
+  private evaluateChecked;
+  /**
+   * It evaluates the initial value/s
+   */
+  private evaluateInitialValue;
+  private getChecked;
+  render(): any;
+}
+export type CheckedItemsInfo = ItemData[];

package/dist/types/components/_helpers/status-buttons/gx-ide-status-buttons.d.ts

@@ -0,0 +1,63 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { Size } from "@genexus/gemini/dist/types/components/icon/icon";
+import { CheckedItemsInfo } from "../list-selector/list-selector";
+export declare class GxIdeStatusButtons {
+  /**
+   * Whether or not the buttons begin active or not
+   */
+  readonly active: boolean;
+  /**
+   * The errors amount
+   */
+  readonly errors: number;
+  /**
+   * The warnings amount
+   */
+  readonly warnings: number;
+  /**
+   * The successes amount
+   */
+  readonly successes: number;
+  /**
+   * Display only the number
+   */
+  readonly minimal: boolean;
+  /**
+   * If present will make the component look smaller.
+   */
+  readonly compact: boolean;
+  /**
+   * No border all around
+   */
+  readonly noBorder: boolean;
+  /**
+   * No inner borders
+   */
+  readonly noInnerBorders: boolean;
+  /**
+   * No border on the top
+   */
+  readonly noBorderTop: boolean;
+  /**
+   * No border on the end
+   */
+  readonly noBorderEnd: boolean;
+  /**
+   * No border on the bottom
+   */
+  readonly noBorderBottom: boolean;
+  /**
+   * No border on the start
+   */
+  readonly noBorderStart: boolean;
+  iconsSize: Size;
+  /**
+   * Emits the actual selection
+   */
+  selectionChanged: EventEmitter<CheckedItemsInfo>;
+  componentWillLoad(): void;
+  private evaluateIconsSize;
+  private evaluateLabel;
+  private selectionChangedHandler;
+  render(): any;
+}