@genexus/genexus-ide-ui 0.0.99 → 0.0.101

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/dashboard-home/dashboard-home.d.ts

@@ -8,10 +8,6 @@ export declare class GxIdeDashboardHome {
     el: HTMLGxIdeDashboardHomeElement;
     private kbNameEl;
     private envNameEl;
-    /**
-     * The editing state for the title.
-     */
-    editingKbName: boolean;
     /**
      * The editing state for the environment name.
      */
@@ -24,10 +20,18 @@ export declare class GxIdeDashboardHome {
      * The KB basic properties.
      */
     readonly kb: KBData;
+    /**
+     * This allows the kb to be editable by the user.
+     */
+    readonly enableEditKBName: boolean;
     /**
      * Information of the current environment.
      */
     readonly environment: EnvironmentData;
+    /**
+     * This allows the environment name to be editable by the user.
+     */
+    readonly enableEditEnvironmentName: boolean;
     /**
      * Project Detail description.
      */
@@ -66,7 +70,6 @@ export declare class GxIdeDashboardHome {
     componentDidRender(): void;
     private handleKbNameChange;
     private handleEnvNameChange;
-    private toggleEditDescription;
     private handleDescriptionChange;
     private openObject;
     private editValidation;

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
      */

package/dist/types/components.d.ts

@@ -353,6 +353,14 @@ export namespace Components {
           * Callback invoked when user tries to edit the Project Description. The edition is resolved by the host.
          */
         "editDescriptionCallback": () => Promise<void>;
+        /**
+          * This allows the environment name to be editable by the user.
+         */
+        "enableEditEnvironmentName": boolean;
+        /**
+          * This allows the kb to be editable by the user.
+         */
+        "enableEditKBName": boolean;
         /**
           * Information of the current environment.
          */
@@ -460,6 +468,32 @@ export namespace Components {
          */
         "value": string;
     }
+    interface GxIdeEmptyState {
+        /**
+          * If true, it will display the content
+         */
+        "display": boolean;
+        /**
+          * The button primary label
+         */
+        "primaryButtonLabel"?: string;
+        /**
+          * The button secondary label
+         */
+        "secondaryButtonLabel"?: string;
+        /**
+          * The state description
+         */
+        "stateDescription"?: string;
+        /**
+          * The state icon
+         */
+        "stateIcon"?: string;
+        /**
+          * The state title
+         */
+        "stateTitle": string;
+    }
     interface GxIdeEntitySelector {
         /**
           * This property provides the user a way to define custom aria-label descriptions.
@@ -1751,6 +1785,12 @@ declare global {
         prototype: HTMLGxIdeDirectorySelectorElement;
         new (): HTMLGxIdeDirectorySelectorElement;
     };
+    interface HTMLGxIdeEmptyStateElement extends Components.GxIdeEmptyState, HTMLStencilElement {
+    }
+    var HTMLGxIdeEmptyStateElement: {
+        prototype: HTMLGxIdeEmptyStateElement;
+        new (): HTMLGxIdeEmptyStateElement;
+    };
     interface HTMLGxIdeEntitySelectorElementEventMap {
         "valueChanged": EntityData;
     }
@@ -2173,6 +2213,7 @@ declare global {
         "gx-ide-dashboard-home": HTMLGxIdeDashboardHomeElement;
         "gx-ide-data-selector": HTMLGxIdeDataSelectorElement;
         "gx-ide-directory-selector": HTMLGxIdeDirectorySelectorElement;
+        "gx-ide-empty-state": HTMLGxIdeEmptyStateElement;
         "gx-ide-entity-selector": HTMLGxIdeEntitySelectorElement;
         "gx-ide-file-selector": HTMLGxIdeFileSelectorElement;
         "gx-ide-import-from-design": HTMLGxIdeImportFromDesignElement;
@@ -2485,6 +2526,14 @@ declare namespace LocalJSX {
           * Callback invoked when user tries to edit the Project Description. The edition is resolved by the host.
          */
         "editDescriptionCallback"?: () => Promise<void>;
+        /**
+          * This allows the environment name to be editable by the user.
+         */
+        "enableEditEnvironmentName"?: boolean;
+        /**
+          * This allows the kb to be editable by the user.
+         */
+        "enableEditKBName"?: boolean;
         /**
           * Information of the current environment.
          */
@@ -2596,6 +2645,32 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface GxIdeEmptyState {
+        /**
+          * If true, it will display the content
+         */
+        "display"?: boolean;
+        /**
+          * The button primary label
+         */
+        "primaryButtonLabel"?: string;
+        /**
+          * The button secondary label
+         */
+        "secondaryButtonLabel"?: string;
+        /**
+          * The state description
+         */
+        "stateDescription"?: string;
+        /**
+          * The state icon
+         */
+        "stateIcon"?: string;
+        /**
+          * The state title
+         */
+        "stateTitle": string;
+    }
     interface GxIdeEntitySelector {
         /**
           * This property provides the user a way to define custom aria-label descriptions.
@@ -3750,6 +3825,7 @@ declare namespace LocalJSX {
         "gx-ide-dashboard-home": GxIdeDashboardHome;
         "gx-ide-data-selector": GxIdeDataSelector;
         "gx-ide-directory-selector": GxIdeDirectorySelector;
+        "gx-ide-empty-state": GxIdeEmptyState;
         "gx-ide-entity-selector": GxIdeEntitySelector;
         "gx-ide-file-selector": GxIdeFileSelector;
         "gx-ide-import-from-design": GxIdeImportFromDesign;
@@ -3793,6 +3869,7 @@ declare module "@stencil/core" {
             "gx-ide-dashboard-home": LocalJSX.GxIdeDashboardHome & JSXBase.HTMLAttributes<HTMLGxIdeDashboardHomeElement>;
             "gx-ide-data-selector": LocalJSX.GxIdeDataSelector & JSXBase.HTMLAttributes<HTMLGxIdeDataSelectorElement>;
             "gx-ide-directory-selector": LocalJSX.GxIdeDirectorySelector & JSXBase.HTMLAttributes<HTMLGxIdeDirectorySelectorElement>;
+            "gx-ide-empty-state": LocalJSX.GxIdeEmptyState & JSXBase.HTMLAttributes<HTMLGxIdeEmptyStateElement>;
             "gx-ide-entity-selector": LocalJSX.GxIdeEntitySelector & JSXBase.HTMLAttributes<HTMLGxIdeEntitySelectorElement>;
             "gx-ide-file-selector": LocalJSX.GxIdeFileSelector & JSXBase.HTMLAttributes<HTMLGxIdeFileSelectorElement>;
             "gx-ide-import-from-design": LocalJSX.GxIdeImportFromDesign & JSXBase.HTMLAttributes<HTMLGxIdeImportFromDesignElement>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "0.0.99",
+  "version": "0.0.101",
   "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.2.104"
+    "@genexus/gemini": "*0.2.108"
   },
   "devDependencies": {
-    "@genexus/gemini": "*0.2.104",
+    "@genexus/gemini": "*0.2.108",
     "@stencil-community/eslint-plugin": "^0.6.0",
     "@stencil/core": "~4.9.0",
     "@stencil/sass": "~1.4.0",