@genexus/genexus-ide-ui 0.0.82 → 0.0.84

package/dist/collection/components/object-selector/object-selector.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/references/references.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/share-kb/share-kb.css

@@ -90,6 +90,19 @@ ch-grid-cell {
   --spacing-comp-02: var(--gxg-container--padding);
 }
 
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
 /*Gxg Tabs*/
 gxg-tabs {
   box-shadow: none;
@@ -97,7 +110,7 @@ gxg-tabs {
 
 /*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
 :host(.gx-ide-component) {
-  box-shadow: var(--box-shadow-01) !important;
+  box-shadow: var(--box-shadow-01);
   height: 100% !important;
   display: flex !important;
   flex-direction: column !important;

package/dist/collection/components/start-page/gx-ide-assets/recent-news/langs/recent-news.lang.en.json

@@ -0,0 +1,14 @@
+{
+  "componentName": "Recent News",
+  "recentNews": {
+    "title": "Recent News",
+    "linkLabel": "See all news",
+    "linkUrl": "https://www.genexus.com/en/news",
+    "newsNotFetched": "We are sorry, GeneXus recent news couldn't be retrieved.",
+    "tryAgainButtonLabel": "Try Again",
+    "readThemOnline": "Or read them on GeneXus.com"
+  },
+  "loader": {
+    "title": "Loading GeneXus Recent News..."
+  }
+}

package/dist/collection/components/start-page/gx-ide-assets/recent-news/langs/recent-news.lang.ja.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "「こんにちは、私の名前は {0} です。オレゴンに住んでいます。」"
+}

package/dist/collection/components/start-page/gx-ide-assets/recent-news/langs/recent-news.lang.zh.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "你好，我的名字是 {0}，我住在俄勒冈州。"
+}

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.en.json

@@ -0,0 +1,23 @@
+{
+  "componentName": "Start Page",
+  "tabs": {
+    "home": "home",
+    "learn": "learn",
+    "samples": "samples",
+    "marketplace": "marketplace",
+    "updates": "updates"
+  },
+  "recentKbs": {
+    "title": "Recent KBs",
+    "lastOpened": "Last opened:",
+    "modified": "Modified:"
+  },
+  "recentNews": {
+    "title": "Recent News",
+    "linkLabel": "See all news",
+    "linkUrl": "https://www.genexus.com/en/news"
+  },
+  "loader": {
+    "title": "Loading GeneXus Recent News..."
+  }
+}

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.ja.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "「こんにちは、私の名前は {0} です。オレゴンに住んでいます。」"
+}

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.zh.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "你好，我的名字是 {0}，我住在俄勒冈州。"
+}

package/dist/collection/components/start-page/recent-news.css

@@ -0,0 +1,270 @@
+/*Gemini*/
+/*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.justify-start {
+  display: flex;
+  justify-content: start;
+}
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: end;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--gray-01);
+}
+
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--gxg-container--padding);
+}
+
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--spacing-comp-05);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--spacing-comp-05);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01);
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
+:host {
+  display: block;
+  box-shadow: none;
+  height: 100%;
+  overflow: hidden;
+  padding-bottom: 2px;
+  box-sizing: border-box;
+}
+
+.news-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-ide-articles-gap);
+}
+.news-container p:first-child {
+  margin-top: 0;
+}
+.news-container p:last-child {
+  margin-bottom: 0;
+}
+
+gxg-card.section {
+  height: 100% !important;
+  overflow: auto;
+  border-bottom: 2px solid var(--gray-00);
+}
+
+gxg-ide-loader::part(loader-wrapper) {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.gxg-card-container {
+  height: 100%;
+  overflow: auto;
+}
+
+.gx-ide-message {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--spacing-comp-03);
+}
+.gx-ide-message--hidden {
+  display: none;
+}
+
+gx-ide-title {
+  max-width: 250px;
+}
+
+.news-article {
+  transition: 200ms opacity;
+  opacity: 0;
+}
+.news-article.visible {
+  opacity: 1;
+}

package/dist/collection/components/start-page/recent-news.js

@@ -0,0 +1,169 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../common/locale";
+export class GxIdeRecentNews {
+  constructor() {
+    this.newsRendered = false;
+    this.setTimeOutNewsDelay = 75;
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.evaluateNewsDisplay = () => {
+      if (!this.newsRendered &&
+        this.news.length > 0 &&
+        this.newsContainerEl !== undefined) {
+        this.displayNews();
+        this.newsRendered = true;
+      }
+    };
+    this.displayNews = () => {
+      if (this.newsContainerEl !== undefined) {
+        const news = Array.from(this.newsContainerEl.querySelectorAll("gxg-card"));
+        news.forEach(news => {
+          setTimeout(() => {
+            news.classList.add("visible");
+          }, this.setTimeOutNewsDelay);
+          this.setTimeOutNewsDelay += 75;
+        });
+      }
+    };
+    this.attachLoaderEvents = () => {
+      this.loaderEl.addEventListener("loaderFinished", () => {
+        if (this.news.length === 0) {
+          this.newsLoadFailed = true;
+        }
+        else {
+          this.newsLoadFailed = false;
+        }
+      });
+    };
+    this.getNews = async () => {
+      this.loaderEl.show = true;
+      if (this.getNewsCallback) {
+        const newsResult = await this.getNewsCallback();
+        this.loaderEl.show = false;
+        if (newsResult && newsResult.length > 0) {
+          this.news = newsResult;
+          this.newsLoadFailed = false;
+        }
+        else {
+          this.newsLoadFailed = true;
+        }
+      }
+    };
+    this.NewsClickHandler = async (e) => {
+      const newsId = e.target.id;
+      if (this.openNewsCallback) {
+        await this.openNewsCallback(newsId);
+      }
+    };
+    // 9.LOCAL METHODS -> RENDERS //
+    this.renderNews = (news) => {
+      if (news.id && news.title) {
+        return (h("gxg-card", { id: news.id, key: news.id, cardType: "article", cardTitle: news.title, icon: "gx-test/test-results", iconColor: "auto", actionable: true, onClick: this.NewsClickHandler, titleSemibold: true, noHeaderBorder: true, class: "news-article" }, news.body ? h("p", null, news.body) : null));
+      }
+      return null;
+    };
+    this.news = [];
+    this.newsLoadFailed = false;
+    this.getNewsCallback = undefined;
+    this.openNewsCallback = undefined;
+  }
+  watchNewsHandler() {
+    this.displayNews();
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidLoad() {
+    this.getNews();
+    this.attachLoaderEvents();
+  }
+  componentDidRender() {
+    this.evaluateNewsDisplay();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    var _a;
+    return (h(Host, null, h("gxg-card", { class: "section", cardType: "section", cardTitle: this._componentLocale.recentNews.title }, this.news.length > 0 ? (h("div", { class: "news-container", ref: el => (this.newsContainerEl = el) }, (_a = this.news) === null || _a === void 0 ? void 0 : _a.map(singleNews => {
+      return this.renderNews(singleNews);
+    }))) : (h("div", { class: {
+        "gx-ide-message": true,
+        "gx-ide-message--hidden": !this.newsLoadFailed
+      } }, h("gx-ide-title", { alignment: "center" }, this._componentLocale.recentNews.newsNotFetched), h("gxg-button", { onClick: this.getNews }, this._componentLocale.recentNews.tryAgainButtonLabel), h("gxg-text", { type: "text-link", href: "https://www.genexus.com/en/news", target: "_blank" }, this._componentLocale.recentNews.readThemOnline)))), h("gxg-ide-loader", { abortTime: 8000, container: this.el, loaderTitle: this._componentLocale.loader.title, description: "Hang on please", ref: el => (this.loaderEl = el) })));
+  }
+  static get is() { return "gx-ide-recent-news"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["recent-news.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["recent-news.css"]
+    };
+  }
+  static get assetsDirs() { return ["gx-ide-assets/recent-news"]; }
+  static get properties() {
+    return {
+      "getNewsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GetNewsCallback",
+          "resolved": "() => Promise<NewsData[]>",
+          "references": {
+            "GetNewsCallback": {
+              "location": "import",
+              "path": "./start-page"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked to load the news feed (right panel \"Recent News\")."
+        }
+      },
+      "openNewsCallback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "OpenNewsCallback",
+          "resolved": "(id: string) => Promise<void>",
+          "references": {
+            "OpenNewsCallback": {
+              "location": "import",
+              "path": "./start-page"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Callback invoked to open a news article."
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "news": {},
+      "newsLoadFailed": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "news",
+        "methodName": "watchNewsHandler"
+      }];
+  }
+}