@genexus/genexus-ide-ui 0.0.99 → 0.0.100

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

@@ -357,6 +357,13 @@ FORM ELEMENTS
 :host .container::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0);
 }
+:host .container--reduced {
+  font-size: var(--gxg-tab-font-size--reduced);
+  padding-block-start: var(--gxg-tab-vertical-padding--reduced);
+  padding-inline-end: var(--gxg-tab-horizontal-padding--reduced);
+  padding-block-end: var(--gxg-tab-vertical-padding--reduced);
+  padding-inline-start: var(--gxg-tab-horizontal-padding--reduced);
+}
 
 :host(.not-selected) {
   display: none;

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

@@ -460,6 +460,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 +1777,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 +2205,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;
@@ -2596,6 +2629,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 +3809,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 +3853,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.100",
   "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",

package/dist/cjs/gx-ide-recent-news.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"gx-ide-recent-news.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,60GAA60G;;MCat1G,eAAe;;;QA2BlB,iBAAY,GAAG,KAAK,CAAC;QACrB,wBAAmB,GAAG,EAAE,CAAC;;;;QAqDzB,wBAAmB,GAAG;YAC5B,IACE,CAAC,IAAI,CAAC,YAAY;gBAClB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;gBACpB,IAAI,CAAC,eAAe,KAAK,SAAS,EAClC;gBACA,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;aAC1B;SACF,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE;gBACtC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAClD,CAAC;gBACF,IAAI,CAAC,OAAO,CAAC,IAAI;oBACf,UAAU,CAAC;wBACT,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;qBAC/B,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;oBAC7B,IAAI,CAAC,mBAAmB,IAAI,EAAE,CAAC;iBAChC,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,uBAAkB,GAAG;YAC3B,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,EAAE;gBAC/C,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;oBAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;iBAC5B;qBAAM;oBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;iBAC7B;aACF,CAAC,CAAC;SACJ,CAAC;QAEM,YAAO,GAAG;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;YAC1B,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;gBAChD,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC;gBAC3B,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;oBACvC,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC;oBACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;iBAC7B;qBAAM;oBACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;iBAC5B;aACF;SACF,CAAC;QAEM,oBAAe,GAAG,CAAC,MAAc,KAAK;YAC5C,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACzB,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;aACrC;SACF,CAAC;;QAIM,eAAU,GAAG,CAAC,IAAc;YAClC,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,EAAE;gBACzB,QACEA,sBACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,QAAQ,EAAC,SAAS,EAClB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,IAAI,EAAC,sBAAsB,EAC3B,SAAS,EAAC,MAAM,EAChB,UAAU,QACV,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,EACtC,aAAa,QACb,cAAc,QACd,KAAK,EAAC,cAAc,IAEnB,IAAI,CAAC,IAAI,GAAGA,mBAAI,IAAI,CAAC,IAAI,CAAK,GAAG,IAAI,CAC7B,EACX;aACH;YACD,OAAO,IAAI,CAAC;SACb,CAAC;oBA5H0B,EAAE;8BASJ,KAAK;;;;IAP/B,gBAAgB;QACd,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;;;IAuBD,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAMC,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACnE;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;KAC3B;IAED,kBAAkB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;;IA0FD,MAAM;;QACJ,QACED,QAACE,UAAI,QACHF,sBACE,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,SAAS,EAClB,SAAS,EAAE,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,KAAK,IAEhD,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IACnBA,iBACE,KAAK,EAAC,gBAAgB,EACtB,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,eAAe,GAAG,EAAoB,CAAC,IAEvD,MAAA,IAAI,CAAC,IAAI,0CAAE,GAAG,CAAC,UAAU;YACxB,OAAO,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;SACpC,CAAC,CACE,KAENA,iBACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,wBAAwB,EAAE,CAAC,IAAI,CAAC,cAAc;aAC/C,IAEDA,0BAAc,SAAS,EAAC,QAAQ,IAC7B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,cAAc,CACnC,EACfA,wBAAY,OAAO,EAAE,IAAI,CAAC,OAAO,IAC9B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,mBAAmB,CAC1C,EACbA,sBACE,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,iCAAiC,EACtC,MAAM,EAAC,QAAQ,IAEd,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,cAAc,CACvC,CACP,CACP,CACQ,EACXA,4BACE,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,EAAE,EAClB,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,KAAK,EAC/C,WAAW,EAAC,gBAAgB,EAC5B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAA6B,CAAC,GAC1C,CACb,EACP;KACH;;;;;;;;;;;","names":["h","Locale","Host"],"sources":["src/components/start-page/recent-news.scss?tag=gx-ide-recent-news&encapsulation=shadow","src/components/start-page/recent-news.tsx"],"sourcesContent":["@import \"../../global/gx-ide-common.scss\";\n@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: block;\n  box-shadow: none;\n  height: 100%;\n  overflow: hidden;\n  padding-bottom: 2px;\n  box-sizing: border-box;\n}\n.news-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-articles-gap);\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\ngxg-card.section {\n  height: 100% !important;\n  overflow: auto;\n  border-bottom: 2px solid var(--gray-00);\n}\ngxg-ide-loader::part(loader-wrapper) {\n  border-radius: 8px;\n  overflow: hidden;\n}\n.gxg-card-container {\n  height: 100%;\n  overflow: auto;\n}\n.gx-ide-message {\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--mer-spacing--sm);\n\n  &--hidden {\n    display: none;\n  }\n}\ngx-ide-title {\n  max-width: 250px;\n}\n.news-article {\n  transition: 200ms opacity;\n  opacity: 0;\n\n  &.visible {\n    opacity: 1;\n  }\n}\n","/* STENCIL IMPORTS */\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { NewsData, GetNewsCallback, OpenNewsCallback } from \"./start-page\";\n\n@Component({\n  tag: \"gx-ide-recent-news\",\n  styleUrl: \"recent-news.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/recent-news\"]\n})\nexport class GxIdeRecentNews {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeRecentNewsElement;\n  private loaderEl!: HTMLGxgIdeLoaderElement;\n  private newsContainerEl: HTMLDivElement;\n  private newsRendered = false;\n  private setTimeOutNewsDelay = 75;\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * The list of news\n   */\n  @State() news: NewsData[] = [];\n  @Watch(\"news\")\n  watchNewsHandler() {\n    this.displayNews();\n  }\n\n  /**\n   * True if news couldn't be loaded\n   */\n  @State() newsLoadFailed = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * Callback invoked to load the news feed (right panel \"Recent News\").\n   */\n  @Prop() readonly getNewsCallback: GetNewsCallback;\n\n  /**\n   * Callback invoked to open a news article.\n   */\n  @Prop() readonly openNewsCallback: OpenNewsCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.getNews();\n    this.attachLoaderEvents();\n  }\n\n  componentDidRender() {\n    this.evaluateNewsDisplay();\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private evaluateNewsDisplay = () => {\n    if (\n      !this.newsRendered &&\n      this.news.length > 0 &&\n      this.newsContainerEl !== undefined\n    ) {\n      this.displayNews();\n      this.newsRendered = true;\n    }\n  };\n\n  private displayNews = () => {\n    if (this.newsContainerEl !== undefined) {\n      const news = Array.from(\n        this.newsContainerEl.querySelectorAll(\"gxg-card\")\n      );\n      news.forEach(news => {\n        setTimeout(() => {\n          news.classList.add(\"visible\");\n        }, this.setTimeOutNewsDelay);\n        this.setTimeOutNewsDelay += 75;\n      });\n    }\n  };\n\n  private attachLoaderEvents = () => {\n    this.loaderEl.addEventListener(\"loaderFinished\", () => {\n      if (this.news.length === 0) {\n        this.newsLoadFailed = true;\n      } else {\n        this.newsLoadFailed = false;\n      }\n    });\n  };\n\n  private getNews = async () => {\n    this.loaderEl.show = true;\n    if (this.getNewsCallback) {\n      const newsResult = await this.getNewsCallback();\n      this.loaderEl.show = false;\n      if (newsResult && newsResult.length > 0) {\n        this.news = newsResult;\n        this.newsLoadFailed = false;\n      } else {\n        this.newsLoadFailed = true;\n      }\n    }\n  };\n\n  private openNewsHandler = (newsId: string) => async () => {\n    if (this.openNewsCallback) {\n      await this.openNewsCallback(newsId);\n    }\n  };\n\n  // 9.LOCAL METHODS -> RENDERS //\n\n  private renderNews = (news: NewsData): HTMLGxgCardElement | null => {\n    if (news.id && news.title) {\n      return (\n        <gxg-card\n          id={news.id}\n          key={news.id}\n          cardType=\"article\"\n          cardTitle={news.title}\n          icon=\"gx-test/test-results\"\n          iconColor=\"auto\"\n          actionable\n          onClick={this.openNewsHandler(news.id)}\n          titleSemibold\n          noHeaderBorder\n          class=\"news-article\"\n        >\n          {news.body ? <p>{news.body}</p> : null}\n        </gxg-card>\n      );\n    }\n    return null;\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <gxg-card\n          class=\"section\"\n          cardType=\"section\"\n          cardTitle={this._componentLocale.recentNews.title}\n        >\n          {this.news.length > 0 ? (\n            <div\n              class=\"news-container\"\n              ref={el => (this.newsContainerEl = el as HTMLDivElement)}\n            >\n              {this.news?.map(singleNews => {\n                return this.renderNews(singleNews);\n              })}\n            </div>\n          ) : (\n            <div\n              class={{\n                \"gx-ide-message\": true,\n                \"gx-ide-message--hidden\": !this.newsLoadFailed\n              }}\n            >\n              <gx-ide-title alignment=\"center\">\n                {this._componentLocale.recentNews.newsNotFetched}\n              </gx-ide-title>\n              <gxg-button onClick={this.getNews}>\n                {this._componentLocale.recentNews.tryAgainButtonLabel}\n              </gxg-button>\n              <gxg-text\n                type=\"text-link\"\n                href=\"https://www.genexus.com/en/news\"\n                target=\"_blank\"\n              >\n                {this._componentLocale.recentNews.readThemOnline}\n              </gxg-text>\n            </div>\n          )}\n        </gxg-card>\n        <gxg-ide-loader\n          abortTime={8000}\n          container={this.el}\n          loaderTitle={this._componentLocale.loader.title}\n          description=\"Hang on please\"\n          ref={el => (this.loaderEl = el as HTMLGxgIdeLoaderElement)}\n        ></gxg-ide-loader>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/reposition-scroll-86d8fac5.js

@@ -1,33 +0,0 @@
-'use strict';
-
-const types = require('./types-36efe32d.js');
-
-const repositionScroll = (scollableElementRef, activeItem, direction) => {
-    const scrollableElement = scollableElementRef;
-    const hasVerticalScrollbar = scrollableElement?.scrollHeight > scrollableElement?.clientHeight;
-    if (hasVerticalScrollbar && activeItem) {
-        const scrollableElementScrollTop = scrollableElement.scrollTop;
-        if (direction === types.KeyboardKeys.ARROW_UP) {
-            const scrollableElementTop = scrollableElement.getBoundingClientRect()
-                .top;
-            const selectedItemTop = activeItem.getBoundingClientRect().top;
-            if (selectedItemTop < scrollableElementTop) {
-                const offset = scrollableElementTop - selectedItemTop;
-                scrollableElement.scrollTo(0, scrollableElementScrollTop - offset);
-            }
-        }
-        else if (direction === types.KeyboardKeys.ARROW_DOWN) {
-            const scrollableElementBottom = scrollableElement.getBoundingClientRect()
-                .bottom;
-            const selectedItemBottom = activeItem.getBoundingClientRect().bottom;
-            if (selectedItemBottom > scrollableElementBottom) {
-                const offset = selectedItemBottom - scrollableElementBottom;
-                scrollableElement.scrollTo(0, scrollableElementScrollTop + offset);
-            }
-        }
-    }
-};
-
-exports.repositionScroll = repositionScroll;
-
-//# sourceMappingURL=reposition-scroll-86d8fac5.js.map

package/dist/cjs/reposition-scroll-86d8fac5.js.map

@@ -1 +0,0 @@
-{"file":"reposition-scroll-86d8fac5.js","mappings":";;;;AACY,MAAC,gBAAgB,GAAG,CAAC,mBAAmB,EAAE,UAAU,EAAE,SAAS,KAAK;AAChF,IAAI,MAAM,iBAAiB,GAAG,mBAAmB,CAAC;AAClD,IAAI,MAAM,oBAAoB,GAAG,iBAAiB,EAAE,YAAY,GAAG,iBAAiB,EAAE,YAAY,CAAC;AACnG,IAAI,IAAI,oBAAoB,IAAI,UAAU,EAAE;AAC5C,QAAQ,MAAM,0BAA0B,GAAG,iBAAiB,CAAC,SAAS,CAAC;AACvE,QAAQ,IAAI,SAAS,KAAKA,kBAAE,CAAC,QAAQ,EAAE;AACvC,YAAY,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,qBAAqB,EAAE;AAClF,iBAAiB,GAAG,CAAC;AACrB,YAAY,MAAM,eAAe,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;AAC3E,YAAY,IAAI,eAAe,GAAG,oBAAoB,EAAE;AACxD,gBAAgB,MAAM,MAAM,GAAG,oBAAoB,GAAG,eAAe,CAAC;AACtE,gBAAgB,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,0BAA0B,GAAG,MAAM,CAAC,CAAC;AACnF,aAAa;AACb,SAAS;AACT,aAAa,IAAI,SAAS,KAAKA,kBAAE,CAAC,UAAU,EAAE;AAC9C,YAAY,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,qBAAqB,EAAE;AACrF,iBAAiB,MAAM,CAAC;AACxB,YAAY,MAAM,kBAAkB,GAAG,UAAU,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;AACjF,YAAY,IAAI,kBAAkB,GAAG,uBAAuB,EAAE;AAC9D,gBAAgB,MAAM,MAAM,GAAG,kBAAkB,GAAG,uBAAuB,CAAC;AAC5E,gBAAgB,iBAAiB,CAAC,QAAQ,CAAC,CAAC,EAAE,0BAA0B,GAAG,MAAM,CAAC,CAAC;AACnF,aAAa;AACb,SAAS;AACT,KAAK;AACL;;;;","names":["KK"],"sources":["node_modules/@genexus/gemini/dist/collection/common/reposition-scroll.js"],"sourcesContent":["import { KeyboardKeys as KK } from \"./types\";\nexport const repositionScroll = (scollableElementRef, activeItem, direction) => {\n    const scrollableElement = scollableElementRef;\n    const hasVerticalScrollbar = scrollableElement?.scrollHeight > scrollableElement?.clientHeight;\n    if (hasVerticalScrollbar && activeItem) {\n        const scrollableElementScrollTop = scrollableElement.scrollTop;\n        if (direction === KK.ARROW_UP) {\n            const scrollableElementTop = scrollableElement.getBoundingClientRect()\n                .top;\n            const selectedItemTop = activeItem.getBoundingClientRect().top;\n            if (selectedItemTop < scrollableElementTop) {\n                const offset = scrollableElementTop - selectedItemTop;\n                scrollableElement.scrollTo(0, scrollableElementScrollTop - offset);\n            }\n        }\n        else if (direction === KK.ARROW_DOWN) {\n            const scrollableElementBottom = scrollableElement.getBoundingClientRect()\n                .bottom;\n            const selectedItemBottom = activeItem.getBoundingClientRect().bottom;\n            if (selectedItemBottom > scrollableElementBottom) {\n                const offset = selectedItemBottom - scrollableElementBottom;\n                scrollableElement.scrollTo(0, scrollableElementScrollTop + offset);\n            }\n        }\n    }\n};\n//# sourceMappingURL=reposition-scroll.js.map\n"],"version":3}