@genexus/genexus-ide-ui 0.0.98 → 0.0.100

package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-bar/tab-bar.css

@@ -382,6 +382,24 @@ FORM ELEMENTS
   width: 0;
 }
 
+/*Stacked*/
+:host(.gxg-tab-bar--left-stacked),
+:host(.gxg-tab-bar--right-stacked) {
+  height: 100%;
+}
+:host(.gxg-tab-bar--left-stacked) .tab-bar,
+:host(.gxg-tab-bar--right-stacked) .tab-bar {
+  flex-direction: column;
+}
+
+:host(.gxg-tab-bar--left-stacked) {
+  border-inline-end: var(--ds-border-common-styles);
+}
+
+:host(.gxg-tab-bar--right-stacked) {
+  border-inline-start: var(--ds-border-common-styles);
+}
+
 /*Scrollable*/
 :host([scrollable]) .nav {
   width: 100%;

package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-button/tab-button.css

@@ -344,6 +344,7 @@ FORM ELEMENTS
   -moz-box-shadow: none;
   box-shadow: none;
   background-color: transparent;
+  /*stacked style*/
 }
 :host .tab-button:focus-visible {
   outline: var(--ds-focus-border-width) solid var(--ds-border-color-control--focused);
@@ -404,10 +405,26 @@ FORM ELEMENTS
 :host .tab-button gxg-icon {
   --gxg-icon-color: var(--gxg-tab-button-icon-color);
 }
+:host .tab-button--reduced {
+  padding-inline-end: var(--gxg-tab-button-horizontal-padding--reduced);
+  padding-inline-start: var(--gxg-tab-button-horizontal-padding--reduced);
+  font-size: var(--gxg-tab-button-font-size--reduced);
+  height: var(--gxg-tab-button-height--reduced);
+}
+:host .tab-button--stacked-style {
+  justify-content: flex-start;
+}
+:host .tab-button--stacked-style.tab-button--text-icon {
+  padding-inline-start: var(--gxg-tab-button-horizontal-padding--stacked);
+}
 :host .tab-button__text {
   display: inline-block;
 }
 
+:host(.stacked) {
+  width: 100%;
+}
+
 :host([slot=tab-menu]) .tab-button {
   padding-left: 0;
   padding-right: 0;

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

@@ -344,26 +344,77 @@ FORM ELEMENTS
   overflow-y: auto;
 }
 
-:host([position=left]) .tab-bar-container {
-  transform: rotate(-90deg) translate(-100%, 0);
-  transform-origin: left top;
-  position: absolute;
-  z-index: 10;
+:host([position=left-rotated]) .main-container,
+:host([position=right-rotated]) .main-container {
+  flex-direction: row;
 }
-:host([position=left]) .tabs-container {
+:host([position=left-rotated]) .tab-bar-container,
+:host([position=right-rotated]) .tab-bar-container {
   height: 100%;
-  width: calc(100% - 32px);
-  margin-left: 32px;
+  overflow: auto;
+  width: 40px;
+  position: relative;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
 }
-
-:host([position=right]) .tab-bar-container {
+:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar,
+:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar {
+  width: var(--gxg-scrollbar-width);
+  height: var(--gxg-scrollbar-width);
+}
+:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-track,
+:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-track {
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
+}
+:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb,
+:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb {
+  background-color: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
+}
+:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover,
+:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-thumb:hover {
+  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
+}
+:host([position=left-rotated]) .tab-bar-container::-webkit-scrollbar-corner,
+:host([position=right-rotated]) .tab-bar-container::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
+}
+:host([position=left-rotated]) ::slotted(gxg-tab-bar),
+:host([position=right-rotated]) ::slotted(gxg-tab-bar) {
   transform: rotate(-90deg) translate(-100%, 0);
   transform-origin: left top;
   position: absolute;
   z-index: 10;
-  left: calc(100% - 32px);
 }
-:host([position=right]) .tabs-container {
-  height: 100%;
+:host([position=left-rotated]) ::slotted(gxg-tab),
+:host([position=right-rotated]) ::slotted(gxg-tab) {
+  border-left-width: var(--gxg-tabs-border-width);
+  border-left-style: solid;
+  border-left-color: var(--gxg-tabs-border-color);
+}
+:host([position=left-rotated]) .tabs-container,
+:host([position=right-rotated]) .tabs-container {
   width: calc(100% - 32px);
+}
+:host([position=left-rotated]) .main-container {
+  flex-direction: row;
+}
+
+:host([position=right-rotated]) .main-container {
+  flex-direction: row-reverse;
+}
+
+:host([position=left-stacked]) .main-container,
+:host([position=right-stacked]) .main-container {
+  flex-direction: row;
+}
+
+:host([position=left-stacked]) .main-container {
+  flex-direction: row;
+}
+
+:host([position=right-stacked]) .main-container {
+  flex-direction: row-reverse;
 }

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

@@ -13,57 +13,118 @@
 }
 
 .top-state-bar {
+  position: relative;
+  border-radius: var(--mer-border__width--lg);
+  list-style: var(--mer-font__size--xxs);
+  display: flex;
+  opacity: 0;
+  transition: 150ms opacity;
   /*states*/
-  /*with action*/
+}
+.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 {
-  padding: 0 var(--mer-spacing--md);
+  flex: 1;
   display: flex;
-  justify-content: center;
-  align-items: center;
-  height: var(--mer-spacing--xxl);
+  flex-direction: column;
+  gap: var(--mer-spacing--xs);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
 }
 .top-state-bar__caption {
-  opacity: 0;
-  transition: 150ms opacity;
   color: var(--mer-text__on-message);
   font-family: var(--ds-base-font-family-primary);
-  font-size: var(--mer-font__size--sm);
-  font-weight: var(--mer-font__weight--semi-bold);
+  font-size: var(--mer-font__size--xxs);
+  line-height: var(--mer-font__size--xxs);
+  font-weight: var(--mer-font__weight--regular);
+  display: flex;
+  align-items: baseline;
+  font-style: italic;
 }
-.top-state-bar__caption--visible {
-  opacity: 1;
+.top-state-bar__progress-wrapper {
+  height: var(--mer-spacing--xxs);
+  background-color: var(--mer-color__elevation--04);
 }
-.top-state-bar__close {
-  opacity: 0;
-  transition: 200ms opacity;
+.top-state-bar__close-wrapper {
   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:hover {
+.top-state-bar__close-wrapper:hover .top-state-bar__close {
   opacity: 0.75;
 }
-.top-state-bar__close--visible {
-  opacity: 1;
+.top-state-bar__close-wrapper:active .top-state-bar__close {
+  opacity: 0.5;
 }
-.top-state-bar--accent .top-state-bar__wrapper {
+.top-state-bar--accent .progress-bar {
   background-color: var(--mer-accent__primary);
-  color: var(--mer-text__on-primary);
 }
-.top-state-bar--success .top-state-bar__wrapper {
+.top-state-bar--accent .top-state-bar__caption {
+  color: var(--mer-accent__primary);
+}
+.top-state-bar--success .progress-bar {
   background-color: var(--mer-color__message-green--100);
 }
-.top-state-bar--warning .top-state-bar__wrapper {
+.top-state-bar--success .top-state-bar__caption {
+  color: var(--mer-color__message-green--100);
+}
+.top-state-bar--warning .progress-bar {
   background-color: var(--mer-color__message-yellow--100);
 }
-.top-state-bar--error .top-state-bar__wrapper {
+.top-state-bar--warning .top-state-bar__caption {
+  color: var(--mer-color__message-yellow--100);
+}
+.top-state-bar--error .progress-bar {
   background-color: var(--mer-color__message-red--100);
 }
-.top-state-bar--in-progress .top-state-bar__wrapper {
+.top-state-bar--error .top-state-bar__caption {
+  color: var(--mer-color__message-red--100);
+}
+.top-state-bar--in-progress:before {
+  height: 0;
+  width: 120%;
+  padding-top: 60%;
+  padding-bottom: 60%;
+  background: linear-gradient(90deg, #5ba7ff 0%, #3fa89b 100%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -webkit-animation: inProgressBackgroundColor 1s linear infinite;
+  animation: inProgressBackgroundColor 1s linear infinite;
+}
+.top-state-bar--in-progress .top-state-bar__close-wrapper {
+  border-inline-start-color: #3fa89b;
+  -webkit-animation: inProgressBorderColor 1s linear infinite;
+  animation: inProgressBorderColor 1s linear infinite;
+}
+.top-state-bar--in-progress .progress-bar {
   position: relative;
   overflow: hidden;
   z-index: 1;
 }
-.top-state-bar--in-progress .top-state-bar__wrapper:after {
+.top-state-bar--in-progress .progress-bar:after {
   content: "";
   position: absolute;
   z-index: 0;
@@ -71,27 +132,35 @@
   height: 100%;
   left: 0;
   background: linear-gradient(90deg, #93f5eb 0%, #1aa3ff 33%, #93f5eb 66%, #1aa3ff 100%);
-  animation-name: inProgress;
+  animation-name: inProgressBar;
   animation-duration: 2s;
   animation-iteration-count: infinite;
 }
 .top-state-bar--in-progress .top-state-bar__caption {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  position: relative;
-  z-index: 2;
+  color: #3fa89b;
 }
-.top-state-bar--with-action .top-state-bar__caption {
-  flex: 1;
-  text-align: center;
-}
-.top-state-bar--with-action .top-state-bar__wrapper {
-  padding-inline-end: var(--mer-spacing--xxs);
+.top-state-bar--visible {
+  opacity: 1;
 }
 
 /*in progress animation*/
-@-webkit-keyframes inProgress {
+@-webkit-keyframes inProgressBorderColor {
+  0% {
+    border-inline-start-color: #3fa89b;
+  }
+  100% {
+    border-inline-start-color: #5ba7ff;
+  }
+}
+@-webkit-keyframes inProgressBackgroundColor {
+  0% {
+    transform: translate(-50%, -50%) rotate(0);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+@-webkit-keyframes inProgressBar {
   0% {
     left: 0%;
   }
@@ -99,7 +168,7 @@
     left: -200%;
   }
 }
-@-moz-keyframes inProgress {
+@-moz-keyframes inProgressBar {
   0% {
     left: 0%;
   }
@@ -107,7 +176,7 @@
     left: 200%;
   }
 }
-@keyframes inProgress {
+@keyframes inProgressBar {
   0% {
     left: 0%;
   }
@@ -116,11 +185,19 @@
   }
 }
 .progress-bar {
+  display: block;
   transition: all 200ms;
   width: var(--top-bar-progress);
-  background-color: var(--mer-accent__primary);
-  height: var(--mer-spacing--xxs);
+  border-radius: calc(var(--mer-spacing--xxs) / 2);
+  height: 100%;
 }
-.progress-bar--hidden {
-  height: 0;
+
+: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;
 }

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/types/components/_helpers/empty-state/gx-ide-empty-state.d.ts

@@ -0,0 +1,34 @@
+export declare class GxIdeEmptyState {
+    private transitionSpeed;
+    el: HTMLGxIdeEmptyStateElement;
+    private primaryButtonEl;
+    private secondaryButtonEl;
+    /**
+     * The state icon
+     */
+    readonly stateIcon?: string;
+    /**
+     * The state title
+     */
+    readonly stateTitle: string;
+    /**
+     * The state description
+     */
+    readonly stateDescription?: string;
+    /**
+     * The button primary label
+     */
+    readonly primaryButtonLabel?: string;
+    /**
+     * The button secondary label
+     */
+    readonly secondaryButtonLabel?: string;
+    /**
+     * If true, it will display the content
+     */
+    display: boolean;
+    watchDisplayHandler(display: boolean): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,109 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { EntityData } from "../../common/types";
+export declare class GxIdeDataSelector {
+    /**
+     * The component hard-coded strings translations.
+     */
+    private _componentLocale;
+    private renderedFirstTime;
+    private shortcutsSrc;
+    el: HTMLGxIdeDataSelectorElement;
+    private filterPatternEl;
+    private filterObjectEl;
+    private chGridEl;
+    private gxgShortcutsEl;
+    private loaderEl;
+    /**
+     * The objects rendered in the table
+     */
+    objects: ItemData[];
+    /**
+     * The selected objects in the table of objects
+     */
+    selectedObjectsIds: string[];
+    /**
+     * If true it displays the component title on the header
+     */
+    readonly displayTitle = false;
+    /**
+     * If true, it will display a loader when needed.
+     */
+    readonly loader = false;
+    /**
+     * Single if multiple object selection is not allowed. Default is multiple
+     */
+    readonly selectionType: "single" | "multiple";
+    /**
+     * Callback invoked when the action is executed in the Object filter. It returns the information of the selected object (id and name) or 'undefined' if it was canceled.
+     */
+    readonly selectObjectCallback: SelectObjectCallback;
+    /**
+     * Callback invoked when user press edit button. Receives the first selected element id as parameter
+     */
+    readonly editCallback: EditCallback;
+    /**
+     * Callback invoked when the user wishes to cancel the selection of objects.
+     */
+    readonly cancelCallback: CancelCallback;
+    /**
+     * Callback invoked when the component needs to reload the list of attributes.
+     */
+    readonly loadItemsCallback: LoadItemsCallback;
+    /**
+     * Callback invoked when the user presses the 'New' button.
+     */
+    readonly newVariableCallback: NewVariableCallback;
+    /**
+     * Callback invoked when the user presses the 'OK' button
+     */
+    readonly confirmCallback: ConfirmCallback;
+    /**
+     * This event is emitted once just after the component is fully loaded and the first render() occurs
+     */
+    componentDidRenderFirstTime: EventEmitter<boolean>;
+    /**
+     * This event is emitted once just after the component is fully loaded and the first render() occurs.
+     */
+    componentDidLoadEvent: EventEmitter<boolean>;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    /**
+     * Suspends or reactivates the shortcuts
+     */
+    suspendShortcuts(suspendShortcuts: boolean): Promise<void>;
+    /**
+     * Validate necessary data input
+     */
+    validate(): Promise<boolean>;
+    private loaderCancelCallbackHandler;
+    private getObjects;
+    private editCallbackHandler;
+    private confirmCallbackHandler;
+    private cancelCallbackHandler;
+    private deselectAll;
+    private newVariableCallbackHandler;
+    private listenChanges;
+    private chGridKeyDownHandler;
+    private hostKeyPressHandler;
+    private renderFilter;
+    private renderObjects;
+    render(): void;
+}
+export type NewVariableCallback = () => Promise<void>;
+export type CancelCallback = () => Promise<void>;
+export type SelectObjectCallback = () => Promise<EntityData | undefined>;
+export type EditCallback = (id: string) => Promise<boolean>;
+export type ConfirmCallback = (ids: string[]) => Promise<void>;
+export type LoadItemsCallback = (filters: FiltersData) => Promise<ItemData[]>;
+export type FiltersData = {
+    pattern?: string;
+    object?: string;
+};
+export type ItemData = {
+    type: "variable" | "attribute";
+    id: string;
+    name: string;
+    dataType: string;
+    description: string;
+};

package/dist/types/components/import-from-design/import-from-design.d.ts

@@ -30,7 +30,6 @@ export declare class GxIdeImportFromDesign {
     private tokensFactoryRenderEl;
     private stylesFactoryRenderEl;
     private treeDataEl;
-    private tabsEl;
     /**
      * The design data loaded from file
      */
@@ -75,8 +74,7 @@ export declare class GxIdeImportFromDesign {
     /**
      * Used to trigger a re-render after an item has been selected on renderDesignTree, in order to set the first tab as the active tab (setFirstActiveTab()), since calling this method inside objectsTreeSelectedItemsChangedHandler does not always work without a setTimeOut.
      */
-    counter: number;
-    watchCounterHandler(): void;
+    updateTabsActiveTab: boolean;
     /**
      * If true, images will be fitted in the container
      */