@genexus/genexus-ide-ui 0.0.108 → 0.0.109

package/dist/node_modules/@genexus/gemini/dist/collection/components/top-state-bar/gxg-top-state-bar.css

@@ -3,6 +3,9 @@
   display: grid;
   grid-template-rows: 0fr;
   transition: 200ms grid-template-rows;
+  overflow: hidden;
+  --ds-icon-size-box--small: var(--mer-font__size--xxs);
+  --ds-icon-size--small: 100%;
 }
 :host > * {
   overflow: hidden;
@@ -14,42 +17,33 @@
 
 .top-state-bar {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
   border-radius: var(--mer-border__width--lg);
   list-style: var(--mer-font__size--xxs);
   display: flex;
-  opacity: 0;
-  transition: 150ms opacity;
   /*states*/
 }
-.top-state-bar:before {
-  content: "";
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  background-color: var(--mer-color__elevation--04);
-  z-index: -1;
-}
-.top-state-bar:after {
-  content: "";
-  left: var(--mer-border__width--sm);
-  top: var(--mer-border__width--sm);
-  width: calc(100% - var(--mer-border__width--sm) * 2);
-  height: calc(100% - var(--mer-border__width--sm) * 2);
-  position: absolute;
-  background-color: var(--mer-color__surface);
-  z-index: 0;
-  border-radius: var(--mer-border__width--lg);
-}
 .top-state-bar > * {
   position: relative;
   z-index: 1;
 }
-.top-state-bar__wrapper {
+.top-state-bar__outer-wrapper {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: var(--mer-spacing--xs);
+  gap: var(--mer-spacing--sm);
   padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__dim);
+  border-radius: var(--mer-border__width--lg);
+}
+.top-state-bar__inner-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--mer-spacing--xs);
 }
 .top-state-bar__caption {
   color: var(--mer-text__on-message);
@@ -65,18 +59,13 @@
   height: var(--mer-spacing--xxs);
   background-color: var(--mer-color__elevation--04);
 }
-.top-state-bar__close-wrapper {
+.top-state-bar__close {
   cursor: pointer;
-  border-inline-start: 1px solid var(--mer-color__elevation--04);
-  display: flex;
-  align-items: center;
   transition: 200ms background-color;
 }
-.top-state-bar__close-wrapper:hover .top-state-bar__close {
-  opacity: 0.75;
-}
-.top-state-bar__close-wrapper:active .top-state-bar__close {
-  opacity: 0.5;
+.top-state-bar__inner-wrapper, .top-state-bar__progress-wrapper, .top-state-bar__close {
+  opacity: 0;
+  transition: 150ms opacity;
 }
 .top-state-bar--accent .progress-bar {
   background-color: var(--mer-accent__primary);
@@ -139,9 +128,17 @@
 .top-state-bar--in-progress .top-state-bar__caption {
   color: #3fa89b;
 }
-.top-state-bar--visible {
+.top-state-bar--visible .top-state-bar__inner-wrapper,
+.top-state-bar--visible .top-state-bar__progress-wrapper,
+.top-state-bar--visible .top-state-bar__close {
   opacity: 1;
 }
+.top-state-bar--visible .top-state-bar__close:hover {
+  opacity: 0.75;
+}
+.top-state-bar--visible .top-state-bar__close:active {
+  opacity: 0.5;
+}
 
 /*in progress animation*/
 @-webkit-keyframes inProgressBorderColor {
@@ -192,12 +189,6 @@
   height: 100%;
 }
 
-:host([no-border]) .top-state-bar {
-  position: relative;
-}
-:host([no-border]) .top-state-bar:before, :host([no-border]) .top-state-bar:after {
-  display: none;
-}
-:host([no-border]) .top-state-bar__close-wrapper {
-  border-inline-start: none;
+:host([no-border]) .top-state-bar__outer-wrapper {
+  border: 0;
 }

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

@@ -324,6 +324,16 @@ gxg-tree-view {
 .tree-view
 ---------------------------*/
 .tree-view {
+  --ch-tree-view-item-gap: var(--gxg-tree-view-item__gap);
+  --ch-tree-view-item__checkbox-size: var(--ds-checkbox-size);
+  --ch-tree-view-item__expandable-button-size: var(--mer-font__size--sm);
+  --ch-tree-view-item__image-size: var(--mer-font__size--sm);
+  --ch-tree-view-item-custom-padding-inline-start: var(
+    --gxg-tree-view-item__custom-padding-inline-start
+  );
+  --ch-tree-view-item-custom-padding-inline-end: var(
+    --gxg-tree-view-item__custom-padding-inline-end
+  );
   /* Track */
   /* Handle */
   /* Handle on hover */
@@ -359,48 +369,30 @@ gxg-tree-view {
 .tree-view-item
 ---------------------------*/
 .tree-view-item {
-  /*-- Custom vars ---*/
-  --ch-tree-view-view__checkbox-size: var(--ds-checkbox-size);
-  --ch-tree-view-item-gap: var(--gxg-tree-view-item__gap);
-  --ch-tree-view-item-custom-padding-inline-start: var(
-    --gxg-tree-view-item__custom-padding-inline-start
-  );
-  --ch-tree-view-item-custom-padding-inline-end: var(
-    --gxg-tree-view-item__custom-padding-inline-end
-  );
+  line-height: 1.5em;
   /*-- Parts ---*/
   /*-- Parts for checkbox ---*/
-  /*checked*/
-  /*indeterminate*/
   /*-- Dynamic Icons ---*/
   /*-- Other ---*/
 }
 .tree-view-item::part(dashed-line) {
-  border-color: var(--gxg-tree-view-item-dashed-line__border-color);
+  border-color: var(--ds-base-font-color);
+  opacity: 0.3;
 }
 .tree-view-item::part(header) {
   border-radius: var(--gxg-tree-view-item-header__border-radius);
-  padding-block-start: var(--gxg-tree-view-item-header__padding-top);
-  padding-block-end: var(--gxg-tree-view-item-header__padding-bottom);
   padding-inline-end: var(--gxg-tree-view-item-header__padding-inline-end);
 }
-.tree-view-item::part(header):hover {
-  color: var(--gxg-tree-view-item__color--hover);
-}
-.tree-view-item::part(header):before {
-  content: "";
-  display: block;
-}
-.tree-view-item::part(header):hover {
-  background-color: var(--ds-item-background-color--hover);
-  background-color: var(--ds-item-background-color--hover);
-}
 .tree-view-item::part(header):focus {
   outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);
   outline-offset: -1px;
   outline-offset: 0;
   outline-offset: var(--gxg-tree-view-item-header__outline-offset--focus);
 }
+.ch-tree-view-not-dragging-item .tree-view-item:not([selected])::part(header):hover {
+  color: var(--gxg-tree-view-item__color--hover);
+  background-color: var(--ds-item-background-color--hover);
+}
 .tree-view-item[selected]::part(header) {
   color: var(--gxg-grid-row-cell__color--selected);
   background-color: var(--ds-item-background-color--selected);
@@ -408,29 +400,12 @@ gxg-tree-view {
 .tree-view-item[selected]::part(header):hover {
   background-color: var(--ds-item-background-color--selected-hover);
 }
-.tree-view-item::part(expandable-button) {
-  background-color: var(--gxg-tree-view-item-expandable-button__background-color);
-}
-.tree-view-item::part(expandable-button)::before {
-  background-color: var(--gxg-tree-view-item-expandable-button__background-color--before);
-  -webkit-mask-position: center;
-  -webkit-mask-repeat: no-repeat;
-}
-.tree-view-item::part(expandable-button):hover {
-  background-color: var(--gxg-tree-view-item-expandable-button__background-color--hover);
-}
-.tree-view-item::part(expandable-button):focus {
-  outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);
-  outline-offset: -1px;
-  outline-offset: 0;
-}
-.tree-view-item::part(action)::before, .tree-view-item::part(action)::after {
-  inline-size: var(--mer-font__size--sm);
-  block-size: var(--mer-font__size--sm);
+.tree-view-item::part(action) {
+  padding-block: var(--gxg-tree-view-item-header__padding-top) var(--gxg-tree-view-item-header__padding-bottom);
 }
 .tree-view-item::part(downloading) {
-  width: var(--gxg-tree-view-item-downloading__size);
-  height: var(--gxg-tree-view-item-downloading__size);
+  inline-size: var(--gxg-tree-view-item-downloading__size);
+  block-size: var(--gxg-tree-view-item-downloading__size);
   border: var(--gxg-tree-view-item-downloading__border);
   border-inline-start-color: transparent;
 }
@@ -498,9 +473,8 @@ gxg-tree-view {
 }
 .tree-view-item--folder::part(action)::before, .tree-view-item--module::part(action)::before {
   content: "";
-  width: var(--gxg-tree-view-icon__size);
-  height: var(--gxg-tree-view-icon__size);
-  margin-inline-end: var(--ch-tree-view-item-gap);
+  inline-size: var(--gxg-tree-view-icon__size);
+  block-size: var(--gxg-tree-view-icon__size);
   background-repeat: no-repeat;
 }
 .tree-view-item--folder::part(action)::before {
@@ -529,15 +503,24 @@ gxg-tree-view {
 }
 
 /*-- Other Selectors (these depend on the tag class name)---*/
-.tree-view-item--editing::part(header) {
-  border: 2px solid transparent;
+.ch-tree-view-item--drag-enter {
+  background-color: var(--ds-item-background-color--hover);
+  outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);
+  outline-offset: -1px;
+  outline-offset: 0;
+  outline-offset: var(--gxg-tree-view-item-header__outline-offset--focus);
 }
-/*--- Revisar ---*/
+
 .tree-view .ch-tree-view-drag-info {
   padding-inline: 6px;
   padding-block: 2px;
-  background-color: #cfdee6;
-  border: 1px solid #0266a0;
+  background-color: var(--mer-color__elevation--04);
+  border: 1px solid var(--ds-border-color--regular);
   border-radius: 10px;
+  box-shadow: var(--gxg-grid-row__box-shadow--dragging);
   font-size: 8px;
+}
+
+ch-tree-view-drop::after {
+  background-color: var(--ds-border-color-control--focused);
 }

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

@@ -1,5 +1,7 @@
 import { GxOption } from "./types";
+import { ModulePropertyData } from "../components/modules/types";
 export declare const renderFormItems: (componentType: "gxg-combo-box-item" | "gxg-form-checkbox" | "gxg-form-radio", options: Array<GxOption>, group?: string, callback?: any) => (HTMLGxgComboBoxItemElement | HTMLGxgFormCheckboxElement | HTMLGxgFormRadioElement)[];
+export declare const renderModuleDataProperties: (options: Array<ModulePropertyData>) => ModulePropertyData[];
 /**
  *
  * @param gxOptions An array of GxOptions's

package/dist/types/components/_helpers/container/container.d.ts

@@ -45,10 +45,18 @@ export declare class GxIdeContainer {
      * Removes the border bottom from the heading
      */
     readonly noHeadingBorder: boolean;
+    /**
+     * Removes the heading gap
+     */
+    readonly noHeadingGap: boolean;
     /**
      * Removes the padding from the heading
      */
     readonly noHeadingPadding: boolean;
+    /**
+     * Removes the padding block end from the heading
+     */
+    readonly noHeadingPaddingBlockEnd: boolean;
     /**
      * Adds padding to the top of the heading
      */

package/dist/types/components/modules/add-module-servers/add-module-servers.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { ModuleServerType, ModuleServerFullData, EditServerModuleResult } from "../types";
+export declare class GxIdeAddModuleServers {
+    /**
+     * The component hard-coded strings translations.
+     */
+    private _componentLocale;
+    private renderedFirstTime;
+    el: HTMLGxIdeAddModuleServersElement;
+    private serverTypeEl;
+    private nameEl;
+    private sourceEl;
+    private userEl;
+    private passwordEl;
+    selectedType: "local" | "remote";
+    /**
+     * The type of the server
+     */
+    readonly types: ModuleServerType[];
+    /**
+     * The name of the server
+     */
+    readonly name: string;
+    /**
+     * Disk path or server url
+     */
+    readonly source: string;
+    /**
+     * Confirm callback
+     */
+    readonly confirmCallback: ConfirmCallback;
+    /**
+     * Callback invoked when wants to select a local folder that have modules inside
+     */
+    readonly selectSourceCallback: SelectSourceCallback;
+    /**
+     * Cancel callback
+     */
+    readonly cancelCallback: CancelCallback;
+    /**
+     * This event is emitted once just after the component is fully loaded and the first render() occurs
+     */
+    componentDidRenderFirstTime: EventEmitter<boolean>;
+    componentWillLoad(): Promise<void>;
+    componentDidRender(): void;
+    /**
+     * Executed when user click on confirm button
+     */
+    private confirmCallbackHandler;
+    /**
+     * Executed when user click on cancel button
+     */
+    private cancelCallbackHandler;
+    private selectSourceCallbackHandle;
+    private renderServerOptions;
+    render(): any;
+}
+export type ConfirmCallback = (data: ModuleServerFullData) => Promise<EditServerModuleResult>;
+export type CancelCallback = () => Promise<void>;
+export type SelectSourceCallback = () => Promise<string | undefined>;

package/dist/types/components/modules/edit-module-servers/edit-module-servers.d.ts

@@ -0,0 +1,60 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { ModuleServerType, ModuleServerFullData, EditServerModuleResult } from "../types";
+export declare class GxIdeEditModuleServers {
+    /**
+     * The component hard-coded strings translations.
+     */
+    private _componentLocale;
+    private renderedFirstTime;
+    el: HTMLGxIdeEditModuleServersElement;
+    private serverTypeEl;
+    private nameEl;
+    private sourceEl;
+    private userEl;
+    private passwordEl;
+    selectedType: "local" | "remote";
+    /**
+     * The type of the server
+     */
+    readonly types: ModuleServerType[];
+    /**
+     * The name of the server
+     */
+    readonly name: string;
+    /**
+     * Disk path or server url
+     */
+    readonly source: string;
+    /**
+     * Confirm callback
+     */
+    readonly confirmCallback: ConfirmCallback;
+    /**
+     * Callback invoked when wants to select a local folder that have modules inside
+     */
+    readonly selectSourceCallback: SelectSourceCallback;
+    /**
+     * Cancel callback
+     */
+    readonly cancelCallback: CancelCallback;
+    /**
+     * This event is emitted once just after the component is fully loaded and the first render() occurs
+     */
+    componentDidRenderFirstTime: EventEmitter<boolean>;
+    componentWillLoad(): Promise<void>;
+    componentDidRender(): void;
+    /**
+     * Executed when user click on confirm button
+     */
+    private confirmCallbackHandler;
+    /**
+     * Executed when user click on cancel button
+     */
+    private cancelCallbackHandler;
+    private selectSourceCallbackHandle;
+    private renderServerOptions;
+    render(): any;
+}
+export type ConfirmCallback = (data: ModuleServerFullData) => Promise<EditServerModuleResult>;
+export type CancelCallback = () => Promise<void>;
+export type SelectSourceCallback = () => Promise<string | undefined>;

package/dist/types/components/modules/manage-module-references/manage-module-references.d.ts

@@ -0,0 +1,98 @@
+import { EventEmitter } from "../../../stencil-public-runtime";
+import { topStateBarType } from "@genexus/gemini";
+import { ModuleServerData, ModuleData, ModuleActionType } from "../types";
+import { ContextMenuInfo } from "../../../common/types";
+export declare class GxManageModuleReferences {
+    /**
+     * The component hard-coded strings translations.
+     */
+    private _componentLocale;
+    private renderedFirstTime;
+    el: HTMLGxIdeManageModuleReferencesElement;
+    private modulesList;
+    private moduleMenuLeftPosition;
+    private moduleMenuTopPosition;
+    modulesAll: ModuleData[];
+    filteredModules: ModuleData[];
+    selectedModule: ModuleData;
+    selectedServerId: string;
+    selectedModuleAction: ActionInfo;
+    actionCompleted: boolean;
+    closeProgressBar: boolean;
+    progressValue: number;
+    progressState: topStateBarType;
+    /**
+     * List of module servers currently cataloged
+     */
+    readonly servers: ModuleServerData[];
+    /**
+     * Callback invoked when a server is selected. Returns the set of modules available on that server.
+     */
+    readonly serverSelectedCallback: ServerSelectedCallback;
+    /**
+     * Callback invoked when the user wants to execute the action corresponding to a selected module. When the action begins to be executed, the component must be able to show the progress of the action. For this, the onProgress parameter is available, which is in turn a callback used by the host to notify the progress by text message and percentage.
+     */
+    readonly executeActionCallback: ExecuteActionCallback;
+    /**
+     * Callback invoked when Add button is clicked
+     */
+    readonly addServerCallback: AddServerCallback;
+    /**
+     * Callback invoked when an element is right clicked on servers list
+     */
+    readonly serverContextMenuCallback: ServerContextMenuCallback;
+    /**
+     * This event is emitted once just after the component is fully loaded and the first render() occurs
+     */
+    componentDidRenderFirstTime: EventEmitter<boolean>;
+    componentDidLoad(): Promise<void>;
+    componentDidRender(): void;
+    componentWillLoad(): Promise<void>;
+    onPropValueChange(newModulesData: ModuleData[]): void;
+    /**
+     * validate
+     */
+    validate(): Promise<boolean>;
+    private getActionFromCurrentModuleVersion;
+    /**
+     * Callback invoked to get the progress when module is performing an action
+     */
+    private onProgress;
+    /**
+     * Used for changing the selected module
+     */
+    private handleModuleChange;
+    /**
+     * Change the server selected value in response to callbackServerSelected callback
+     */
+    private serverSelectedCallbackHandler;
+    private handleFilterChange;
+    /**
+     * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback
+     */
+    private executeActionCallbackHandler;
+    private filterModulesByType;
+    private moduleMenuSelectionChangedHandler;
+    private renderMenu;
+    private showModuleMenu;
+    private renderModulesGrid;
+    private moduleIconColor;
+    private renderModuleName;
+    private renderModuleAction;
+    private moduleVersionsValueChangedHandler;
+    private renderModuleVersions;
+    private selectedButtonChangedHandler;
+    private serverItemSelectedHandler;
+    private serverValueChangedHandler;
+    private progressBarCloseHandler;
+    render(): void;
+}
+export type ExecuteActionCallback = (serverId: string, moduleId: string, action: ModuleActionType, onProgress: (message: string, progress: number, state: topStateBarType) => void) => Promise<boolean>;
+export type ServerSelectedCallback = (id: string) => Promise<ModuleData[]>;
+export type AddServerCallback = () => Promise<void>;
+export type ServerContextMenuCallback = (contextMenuInfo: ContextMenuInfo) => Promise<void>;
+export interface ActionInfo {
+    message: string;
+    progress: number;
+    state: topStateBarType;
+}

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

@@ -0,0 +1,40 @@
+export type ModuleServerData = {
+    type: "remote" | "local";
+    id: string;
+    name: string;
+    source?: string;
+    authenticated?: boolean;
+};
+export type ModuleServerType = {
+    id: string;
+    name: string;
+    type: "local" | "remote";
+    authenticated: boolean;
+};
+export type ModuleData = {
+    id: string;
+    name: string;
+    description?: string;
+    versions?: ModuleVersionData[];
+    currentVersion?: string;
+    properties?: ModulePropertyData[];
+};
+export type ModuleActionType = "install" | "restore" | "update";
+export type ModuleFilterType = "browse" | "installed" | "updates";
+export type ModulePropertyData = {
+    name: string;
+    value?: string | string[];
+    inline?: boolean;
+};
+export type ModuleServerFullData = ModuleServerData & {
+    user?: string;
+    password?: string;
+};
+export type ModuleVersionData = {
+    id: string;
+    action: ModuleActionType;
+};
+export type EditServerModuleResult = {
+    success: boolean;
+    message: string;
+};