@genexus/genexus-ide-ui 0.0.96 → 0.0.97

package/dist/genexus-ide-ui/{p-f18b01c1.entry.js → p-9c6c5a61.entry.js}

@@ -1,32 +1,32 @@
-import { r as t, c as a, h as e, H as i, g as r } from "./p-2776d2f9.js";
+import { r as i, c as e, h as r, H as t, g as o } from "./p-2776d2f9.js";
 
-import { L as o } from "./p-74d59062.js";
+import { L as a } from "./p-74d59062.js";
 
-import { f as s } from "./p-04f3d630.js";
+import { f as n } from "./p-04f3d630.js";
 
-const n = ".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}.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{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.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;}.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}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:auto;opacity:0;transition:var(--gx-ide-show-component-delay) opacity}:host(.rendered){opacity:1}gxg-tabs{background-color:transparent;box-shadow:none;height:100% !important;overflow:auto}.layout{height:100%;overflow:auto}.layout gxg-card{height:100%;overflow:auto}.kbs-container,.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{border-bottom:2px solid var(--gray-00)}";
+const s = ".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}.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{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.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;}.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}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;box-shadow:none;height:100%;overflow:auto;opacity:0;transition:var(--gx-ide-show-component-delay) opacity}:host(.rendered){opacity:1}gxg-tabs{background-color:transparent;box-shadow:none;height:100% !important;overflow:auto}.layout{height:100%;overflow:auto}.layout gxg-card{height:100%;overflow:auto}.kbs-container,.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{border-bottom:2px solid var(--gray-00)}";
 
 const l = class {
-  constructor(i) {
-    t(this, i);
-    this.componentDidRenderFirstTime = a(this, "componentDidRenderFirstTime", 7);
-    this.getNewsCallbackRecentNews = async () => new Promise((async t => {
+  constructor(t) {
+    i(this, t);
+    this.componentDidRenderFirstTime = e(this, "componentDidRenderFirstTime", 7);
+    this.getNewsCallbackRecentNews = async () => new Promise((async i => {
       if (this.getNewsCallback) {
-        const a = await this.getNewsCallback();
-        t(a);
+        const e = await this.getNewsCallback();
+        i(e);
       }
     }));
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-        this.kbClickHandler = async t => {
-      const a = t.target.id;
+        this.kbClickHandler = async i => {
+      const e = i.target.id;
       if (this.openKbCallback) {
-        await this.openKbCallback(a);
+        await this.openKbCallback(e);
       }
     };
-    this.searchKbsInputHandler = t => {
-      this.kbsFilterValue = t.detail.toLowerCase();
+    this.searchKbsInputHandler = i => {
+      this.kbsFilterValue = i.detail.toLowerCase();
     };
     // private NewsClickHandler = async (e: MouseEvent) => {
     //   const newsId = (e.target as HTMLElement).id;
@@ -56,18 +56,18 @@ const l = class {
     //   }
     //   return null;
     // };
-        this.renderKb = t => {
-      if (t.id && t.name && t.name.toLowerCase().includes(this.kbsFilterValue)) {
-        const a = s(t.lastOpenedDate, "pretty");
-        const i = a ? `${this._componentLocale.recentKbs.lastOpened} ${a}` : null;
-        return e("gxg-card", {
-          id: t.id,
-          key: t.id,
+        this.renderKb = i => {
+      if (i.id && i.name && i.name.toLowerCase().includes(this.kbsFilterValue)) {
+        const e = n(i.lastOpenedDate, "pretty");
+        const t = e ? `${this._componentLocale.recentKbs.lastOpened} ${e}` : null;
+        return r("gxg-card", {
+          id: i.id,
+          key: i.id,
           cardType: "article",
-          cardTitle: t.name,
+          cardTitle: i.name,
           icon: "general/knowledge-base",
           iconColor: "auto",
-          cardSubtitle: i,
+          cardSubtitle: t,
           actionable: true,
           filterValue: this.kbsFilterValue,
           onClick: this.kbClickHandler,
@@ -77,67 +77,24 @@ const l = class {
       return null;
     };
     this.renderHomeTabContent = () => {
-      var t;
-      return e("div", {
+      var i;
+      return r("div", {
         class: "layout layout--two-cols layout--space-above"
-      }, e("gxg-card", {
+      }, r("gxg-card", {
         class: "section",
         cardTitle: this._componentLocale.recentKbs.title
-      }, e("div", {
+      }, r("div", {
         class: "kbs-container"
-      }, (t = this.kbs) === null || t === void 0 ? void 0 : t.map((t => this.renderKb(t)))), e("gxg-form-text", {
+      }, (i = this.kbs) === null || i === void 0 ? void 0 : i.map((i => this.renderKb(i)))), r("gxg-form-text", {
         slot: "header",
         placeholder: "Search KBs by name",
         onInput: this.searchKbsInputHandler
-      })), e("gx-ide-recent-news", {
+      })), r("gx-ide-recent-news", {
         class: "section",
         getNewsCallback: this.getNewsCallbackRecentNews,
         openNewsCallback: this.openNewsCallback
       }));
     };
-    this.renderTabs = () => e("gxg-tabs", {
-      height: "auto",
-      minWidth: "100%",
-      noPadding: true
-    }, e("gxg-tab-bar", {
-      slot: "tab-bar-container",
-      displayBorder: true
-    }, e("gxg-tab-button", {
-      slot: "tab-bar",
-      "tab-label": this._componentLocale.tabs.home,
-      tab: "home",
-      "is-selected": true
-    }), e("gxg-tab-button", {
-      slot: "tab-bar",
-      "tab-label": this._componentLocale.tabs.learn,
-      tab: "learn",
-      disabled: true
-    }), e("gxg-tab-button", {
-      slot: "tab-bar",
-      "tab-label": this._componentLocale.tabs.samples,
-      tab: "samples",
-      disabled: true
-    }), e("gxg-tab-button", {
-      slot: "tab-bar",
-      "tab-label": this._componentLocale.tabs.marketplace,
-      tab: "marketplace",
-      disabled: true
-    }), e("gxg-tab-button", {
-      slot: "tab-bar",
-      "tab-label": this._componentLocale.tabs.updates,
-      tab: "updates",
-      disabled: true
-    })), e("gxg-tab", {
-      tab: "home"
-    }, this.renderHomeTabContent()), e("gxg-tab", {
-      tab: "learn"
-    }), e("gxg-tab", {
-      tab: "samples"
-    }), e("gxg-tab", {
-      tab: "marketplace"
-    }), e("gxg-tab", {
-      tab: "updates"
-    }));
     this.kbsFilterValue = "";
     this.renderedFirstTime = false;
     this.news = undefined;
@@ -148,7 +105,7 @@ const l = class {
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   async componentWillLoad() {
-    this._componentLocale = await o.getComponentStrings(this.el);
+    this._componentLocale = await a.getComponentStrings(this.el);
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -156,23 +113,66 @@ const l = class {
       this.renderedFirstTime = true;
     }
   }
+  // private renderTabs = (): HTMLGxgTabsElement => {
+  //   return (
+  //     <gxg-tabs height="auto" minWidth="100%" no-border>
+  //       <gxg-tab-bar slot="tab-bar-container" displayBorder>
+  //         <gxg-tab-button
+  //           slot="tab-bar"
+  //           tab-label={this._componentLocale.tabs.home}
+  //           tab="home"
+  //           is-selected
+  //         ></gxg-tab-button>
+  //         <gxg-tab-button
+  //           slot="tab-bar"
+  //           tab-label={this._componentLocale.tabs.learn}
+  //           tab="learn"
+  //           disabled
+  //         ></gxg-tab-button>
+  //         <gxg-tab-button
+  //           slot="tab-bar"
+  //           tab-label={this._componentLocale.tabs.samples}
+  //           tab="samples"
+  //           disabled
+  //         ></gxg-tab-button>
+  //         <gxg-tab-button
+  //           slot="tab-bar"
+  //           tab-label={this._componentLocale.tabs.marketplace}
+  //           tab="marketplace"
+  //           disabled
+  //         ></gxg-tab-button>
+  //         <gxg-tab-button
+  //           slot="tab-bar"
+  //           tab-label={this._componentLocale.tabs.updates}
+  //           tab="updates"
+  //           disabled
+  //         ></gxg-tab-button>
+  //       </gxg-tab-bar>
+  //       <gxg-tab tab="home">{this.renderHomeTabContent()}</gxg-tab>
+  //       <gxg-tab tab="learn"></gxg-tab>
+  //       <gxg-tab tab="samples"></gxg-tab>
+  //       <gxg-tab tab="marketplace"></gxg-tab>
+  //       <gxg-tab tab="updates"></gxg-tab>
+  //     </gxg-tabs>
+  //   );
+  // };
   // 10.RENDER() FUNCTION //
   render() {
-    return e(i, {
+    return r(t, {
       class: {
         rendered: this.renderedFirstTime
       }
-    }, this.renderTabs());
+    }, this.renderHomeTabContent());
   }
   static get assetsDirs() {
     return [ "gx-ide-assets/start-page" ];
   }
   get el() {
-    return r(this);
+    return o(this);
   }
 };
 
-l.style = n;
+l.style = s;
 
 export { l as gx_ide_start_page };
-//# sourceMappingURL=p-f18b01c1.entry.js.map
+//# sourceMappingURL=p-9c6c5a61.entry.js.map

package/dist/genexus-ide-ui/p-9c6c5a61.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["startPageCss","GxIdeStartPage","this","getNewsCallbackRecentNews","async","Promise","resolve","getNewsCallback","newsResult","kbClickHandler","e","kbId","target","id","openKbCallback","searchKbsInputHandler","kbsFilterValue","detail","toLowerCase","renderKb","kb","name","includes","formattedDate","formatDate","lastOpenedDate","subtitle","_componentLocale","recentKbs","lastOpened","h","key","cardType","cardTitle","icon","iconColor","cardSubtitle","actionable","filterValue","onClick","hiChar","renderHomeTabContent","class","title","_a","kbs","map","slot","placeholder","onInput","openNewsCallback","componentWillLoad","Locale","getComponentStrings","el","componentDidRender","renderedFirstTime","componentDidRenderFirstTime","emit","componentName","render","Host","rendered"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.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: auto;\n  opacity: 0;\n  transition: var(--gx-ide-show-component-delay) opacity;\n}\n:host(.rendered) {\n  opacity: 1;\n}\ngxg-tabs {\n  background-color: transparent;\n  box-shadow: none;\n  height: 100% !important;\n  overflow: auto;\n}\n.layout {\n  height: 100%;\n  overflow: auto;\n  gxg-card {\n    height: 100%;\n    overflow: auto;\n  }\n}\n.kbs-container,\n.news-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-articles-gap);\n}\n.news-container {\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\ngxg-card.section {\n  border-bottom: 2px solid var(--gray-00);\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\n@Component({\n  tag: \"gx-ide-start-page\",\n  styleUrl: \"start-page.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\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: HTMLGxIdeStartPageElement;\n  // private recentNewsEl!: HTMLGxgCardElement;\n\n  // 3.STATE() VARIABLES //\n\n  /*\n   * The filter value to search for kbs\n   */\n  @State() kbsFilterValue = \"\";\n\n  /**\n   * True if the component has been rendered for the first time.\n   */\n  @State() renderedFirstTime = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * A temporary array of news for testing purposes\n   */\n  @Prop() readonly news: NewsData[];\n\n  /**\n   * Ann array of the user's KB's\n   */\n  @Prop() readonly kbs: RecentKBData[];\n\n  /**\n   * Callback invoked to open a knowledge base when the user clicks on a KB card.\n   */\n  @Prop() readonly openKbCallback: OpenKbCallback;\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  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  private getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n    return new Promise(async resolve => {\n      if (this.getNewsCallback) {\n        const newsResult = await this.getNewsCallback();\n        resolve(newsResult);\n      }\n    });\n  };\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private kbClickHandler = async (e: MouseEvent) => {\n    const kbId = (e.target as HTMLElement).id;\n    if (this.openKbCallback) {\n      await this.openKbCallback(kbId);\n    }\n  };\n\n  private searchKbsInputHandler = (e: CustomEvent<string>) => {\n    this.kbsFilterValue = e.detail.toLowerCase();\n  };\n\n  // private NewsClickHandler = async (e: MouseEvent) => {\n  //   const newsId = (e.target as HTMLElement).id;\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.NewsClickHandler}\n  //         titleSemibold\n  //         noHeaderBorder\n  //       >\n  //         {news.body ? <p>{news.body}</p> : null}\n  //       </gxg-card>\n  //     );\n  //   }\n  //   return null;\n  // };\n\n  private renderKb = (kb: RecentKBData): HTMLGxgCardElement | null => {\n    if (\n      kb.id &&\n      kb.name &&\n      kb.name.toLowerCase().includes(this.kbsFilterValue)\n    ) {\n      const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n      const subtitle = formattedDate\n        ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n        : null;\n      return (\n        <gxg-card\n          id={kb.id}\n          key={kb.id}\n          cardType=\"article\"\n          cardTitle={kb.name}\n          icon=\"general/knowledge-base\"\n          iconColor=\"auto\"\n          cardSubtitle={subtitle}\n          actionable\n          filterValue={this.kbsFilterValue}\n          onClick={this.kbClickHandler}\n          hiChar\n        ></gxg-card>\n      );\n    }\n    return null;\n  };\n\n  private renderHomeTabContent = (): HTMLElement => {\n    return (\n      <div class=\"layout layout--two-cols layout--space-above\">\n        <gxg-card\n          class=\"section\"\n          cardTitle={this._componentLocale.recentKbs.title}\n        >\n          <div class=\"kbs-container\">\n            {this.kbs?.map(kb => {\n              return this.renderKb(kb);\n            })}\n          </div>\n          <gxg-form-text\n            slot=\"header\"\n            placeholder=\"Search KBs by name\"\n            onInput={this.searchKbsInputHandler as any}\n          ></gxg-form-text>\n        </gxg-card>\n        {/* <gxg-card\n          class=\"section\"\n          cardTitle={this._componentLocale.recentNews.title}\n          ref={el => (this.recentNewsEl = el as HTMLGxgCardElement)}\n        >\n          <div class=\"news-container\">\n            {this.news?.map(singleNews => {\n              return this.renderNews(singleNews);\n            })}\n          </div>\n        </gxg-card> */}\n        {\n          <gx-ide-recent-news\n            class=\"section\"\n            getNewsCallback={this.getNewsCallbackRecentNews}\n            openNewsCallback={this.openNewsCallback}\n          ></gx-ide-recent-news>\n        }\n      </div>\n    );\n  };\n\n  // private renderTabs = (): HTMLGxgTabsElement => {\n  //   return (\n  //     <gxg-tabs height=\"auto\" minWidth=\"100%\" no-border>\n  //       <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.home}\n  //           tab=\"home\"\n  //           is-selected\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.learn}\n  //           tab=\"learn\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.samples}\n  //           tab=\"samples\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.marketplace}\n  //           tab=\"marketplace\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //         <gxg-tab-button\n  //           slot=\"tab-bar\"\n  //           tab-label={this._componentLocale.tabs.updates}\n  //           tab=\"updates\"\n  //           disabled\n  //         ></gxg-tab-button>\n  //       </gxg-tab-bar>\n  //       <gxg-tab tab=\"home\">{this.renderHomeTabContent()}</gxg-tab>\n  //       <gxg-tab tab=\"learn\"></gxg-tab>\n  //       <gxg-tab tab=\"samples\"></gxg-tab>\n  //       <gxg-tab tab=\"marketplace\"></gxg-tab>\n  //       <gxg-tab tab=\"updates\"></gxg-tab>\n  //     </gxg-tabs>\n  //   );\n  // };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class={{ rendered: this.renderedFirstTime }}>\n        {/* this.renderTabs()*/}\n        {this.renderHomeTabContent()}\n      </Host>\n    );\n  }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n  id: string;\n  name: string;\n  lastOpenedDate?: Date;\n};\nexport type NewsData = {\n  id: string;\n  title: string;\n  body: string;\n};\n"],"mappings":";;;;;;AAAA,MAAMA,IAAe;;MCsBRC,IAAc;;;;IA+EjBC,KAAAC,4BAA4BC,YAC3B,IAAIC,SAAQD,MAAME;MACvB,IAAIJ,KAAKK,iBAAiB;QACxB,MAAMC,UAAmBN,KAAKK;QAC9BD,EAAQE;;;;;;QAoBNN,KAAAO,iBAAiBL,MAAOM;MAC9B,MAAMC,IAAQD,EAAEE,OAAuBC;MACvC,IAAIX,KAAKY,gBAAgB;cACjBZ,KAAKY,eAAeH;;;IAItBT,KAAAa,wBAAyBL;MAC/BR,KAAKc,iBAAiBN,EAAEO,OAAOC;AAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkCtChB,KAAAiB,WAAYC;MAClB,IACEA,EAAGP,MACHO,EAAGC,QACHD,EAAGC,KAAKH,cAAcI,SAASpB,KAAKc,iBACpC;QACA,MAAMO,IAAgBC,EAAWJ,EAAGK,gBAAgB;QACpD,MAAMC,IAAWH,IACb,GAAGrB,KAAKyB,iBAAiBC,UAAUC,cAAcN,MACjD;QACJ,OACEO,EAAA;UACEjB,IAAIO,EAAGP;UACPkB,KAAKX,EAAGP;UACRmB,UAAS;UACTC,WAAWb,EAAGC;UACda,MAAK;UACLC,WAAU;UACVC,cAAcV;UACdW,YAAU;UACVC,aAAapC,KAAKc;UAClBuB,SAASrC,KAAKO;UACd+B,QAAM;;;MAIZ,OAAO;AAAI;IAGLtC,KAAAuC,uBAAuB;;MAC7B,OACEX,EAAA;QAAKY,OAAM;SACTZ,EAAA;QACEY,OAAM;QACNT,WAAW/B,KAAKyB,iBAAiBC,UAAUe;SAE3Cb,EAAA;QAAKY,OAAM;UACRE,IAAA1C,KAAK2C,SAAG,QAAAD,WAAA,aAAAA,EAAEE,KAAI1B,KACNlB,KAAKiB,SAASC,OAGzBU,EAAA;QACEiB,MAAK;QACLC,aAAY;QACZC,SAAS/C,KAAKa;WAehBe,EAAA;QACEY,OAAM;QACNnC,iBAAiBL,KAAKC;QACtB+C,kBAAkBhD,KAAKgD;;AAGvB;0BAlLgB;6BAKG;;;;;;;;EAsC7B,uBAAMC;IACJjD,KAAKyB,yBAAyByB,EAAOC,oBAAoBnD,KAAKoD;;EAYhE,kBAAAC;IACE,KAAKrD,KAAKsD,mBAAmB;MAC3BtD,KAAKuD,4BAA4BC,KAC/BxD,KAAKyB,iBAAiBgC;MAExBzD,KAAKsD,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuK7B,MAAAI;IACE,OACE9B,EAAC+B,GAAI;MAACnB,OAAO;QAAEoB,UAAU5D,KAAKsD;;OAE3BtD,KAAKuC"}

package/dist/types/components/start-page/start-page.d.ts

@@ -41,7 +41,6 @@ export declare class GxIdeStartPage {
     private searchKbsInputHandler;
     private renderKb;
     private renderHomeTabContent;
-    private renderTabs;
     render(): any;
 }
 export type OpenKbCallback = (id: string) => Promise<void>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "0.0.96",
+  "version": "0.0.97",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/genexus-ide-ui/p-f18b01c1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["startPageCss","GxIdeStartPage","this","getNewsCallbackRecentNews","async","Promise","resolve","getNewsCallback","newsResult","kbClickHandler","e","kbId","target","id","openKbCallback","searchKbsInputHandler","kbsFilterValue","detail","toLowerCase","renderKb","kb","name","includes","formattedDate","formatDate","lastOpenedDate","subtitle","_componentLocale","recentKbs","lastOpened","h","key","cardType","cardTitle","icon","iconColor","cardSubtitle","actionable","filterValue","onClick","hiChar","renderHomeTabContent","class","title","_a","kbs","map","slot","placeholder","onInput","openNewsCallback","renderTabs","height","minWidth","noPadding","displayBorder","tabs","home","tab","learn","disabled","samples","marketplace","updates","componentWillLoad","Locale","getComponentStrings","el","componentDidRender","renderedFirstTime","componentDidRenderFirstTime","emit","componentName","render","Host","rendered"],"sources":["src/components/start-page/start-page.scss?tag=gx-ide-start-page&encapsulation=shadow","src/components/start-page/start-page.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: auto;\n  opacity: 0;\n  transition: var(--gx-ide-show-component-delay) opacity;\n}\n:host(.rendered) {\n  opacity: 1;\n}\ngxg-tabs {\n  background-color: transparent;\n  box-shadow: none;\n  height: 100% !important;\n  overflow: auto;\n}\n.layout {\n  height: 100%;\n  overflow: auto;\n  gxg-card {\n    height: 100%;\n    overflow: auto;\n  }\n}\n.kbs-container,\n.news-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gx-ide-articles-gap);\n}\n.news-container {\n  p:first-child {\n    margin-top: 0;\n  }\n  p:last-child {\n    margin-bottom: 0;\n  }\n}\ngxg-card.section {\n  border-bottom: 2px solid var(--gray-00);\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\n@Component({\n  tag: \"gx-ide-start-page\",\n  styleUrl: \"start-page.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\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: HTMLGxIdeStartPageElement;\n  // private recentNewsEl!: HTMLGxgCardElement;\n\n  // 3.STATE() VARIABLES //\n\n  /*\n   * The filter value to search for kbs\n   */\n  @State() kbsFilterValue = \"\";\n\n  /**\n   * True if the component has been rendered for the first time.\n   */\n  @State() renderedFirstTime = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * A temporary array of news for testing purposes\n   */\n  @Prop() readonly news: NewsData[];\n\n  /**\n   * Ann array of the user's KB's\n   */\n  @Prop() readonly kbs: RecentKBData[];\n\n  /**\n   * Callback invoked to open a knowledge base when the user clicks on a KB card.\n   */\n  @Prop() readonly openKbCallback: OpenKbCallback;\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  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  private getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n    return new Promise(async resolve => {\n      if (this.getNewsCallback) {\n        const newsResult = await this.getNewsCallback();\n        resolve(newsResult);\n      }\n    });\n  };\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private kbClickHandler = async (e: MouseEvent) => {\n    const kbId = (e.target as HTMLElement).id;\n    if (this.openKbCallback) {\n      await this.openKbCallback(kbId);\n    }\n  };\n\n  private searchKbsInputHandler = (e: CustomEvent<string>) => {\n    this.kbsFilterValue = e.detail.toLowerCase();\n  };\n\n  // private NewsClickHandler = async (e: MouseEvent) => {\n  //   const newsId = (e.target as HTMLElement).id;\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.NewsClickHandler}\n  //         titleSemibold\n  //         noHeaderBorder\n  //       >\n  //         {news.body ? <p>{news.body}</p> : null}\n  //       </gxg-card>\n  //     );\n  //   }\n  //   return null;\n  // };\n\n  private renderKb = (kb: RecentKBData): HTMLGxgCardElement | null => {\n    if (\n      kb.id &&\n      kb.name &&\n      kb.name.toLowerCase().includes(this.kbsFilterValue)\n    ) {\n      const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n      const subtitle = formattedDate\n        ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n        : null;\n      return (\n        <gxg-card\n          id={kb.id}\n          key={kb.id}\n          cardType=\"article\"\n          cardTitle={kb.name}\n          icon=\"general/knowledge-base\"\n          iconColor=\"auto\"\n          cardSubtitle={subtitle}\n          actionable\n          filterValue={this.kbsFilterValue}\n          onClick={this.kbClickHandler}\n          hiChar\n        ></gxg-card>\n      );\n    }\n    return null;\n  };\n\n  private renderHomeTabContent = (): HTMLElement => {\n    return (\n      <div class=\"layout layout--two-cols layout--space-above\">\n        <gxg-card\n          class=\"section\"\n          cardTitle={this._componentLocale.recentKbs.title}\n        >\n          <div class=\"kbs-container\">\n            {this.kbs?.map(kb => {\n              return this.renderKb(kb);\n            })}\n          </div>\n          <gxg-form-text\n            slot=\"header\"\n            placeholder=\"Search KBs by name\"\n            onInput={this.searchKbsInputHandler as any}\n          ></gxg-form-text>\n        </gxg-card>\n        {/* <gxg-card\n          class=\"section\"\n          cardTitle={this._componentLocale.recentNews.title}\n          ref={el => (this.recentNewsEl = el as HTMLGxgCardElement)}\n        >\n          <div class=\"news-container\">\n            {this.news?.map(singleNews => {\n              return this.renderNews(singleNews);\n            })}\n          </div>\n        </gxg-card> */}\n        {\n          <gx-ide-recent-news\n            class=\"section\"\n            getNewsCallback={this.getNewsCallbackRecentNews}\n            openNewsCallback={this.openNewsCallback}\n          ></gx-ide-recent-news>\n        }\n      </div>\n    );\n  };\n\n  private renderTabs = (): HTMLGxgTabsElement => {\n    return (\n      <gxg-tabs height=\"auto\" minWidth=\"100%\" noPadding>\n        <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n          <gxg-tab-button\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.home}\n            tab=\"home\"\n            is-selected\n          ></gxg-tab-button>\n          <gxg-tab-button\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.learn}\n            tab=\"learn\"\n            disabled\n          ></gxg-tab-button>\n          <gxg-tab-button\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.samples}\n            tab=\"samples\"\n            disabled\n          ></gxg-tab-button>\n          <gxg-tab-button\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.marketplace}\n            tab=\"marketplace\"\n            disabled\n          ></gxg-tab-button>\n          <gxg-tab-button\n            slot=\"tab-bar\"\n            tab-label={this._componentLocale.tabs.updates}\n            tab=\"updates\"\n            disabled\n          ></gxg-tab-button>\n        </gxg-tab-bar>\n        <gxg-tab tab=\"home\">{this.renderHomeTabContent()}</gxg-tab>\n        <gxg-tab tab=\"learn\"></gxg-tab>\n        <gxg-tab tab=\"samples\"></gxg-tab>\n        <gxg-tab tab=\"marketplace\"></gxg-tab>\n        <gxg-tab tab=\"updates\"></gxg-tab>\n      </gxg-tabs>\n    );\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class={{ rendered: this.renderedFirstTime }}>\n        {this.renderTabs()}\n      </Host>\n    );\n  }\n}\n\nexport type OpenKbCallback = (id: string) => Promise<void>;\nexport type GetNewsCallback = () => Promise<NewsData[]>;\nexport type OpenNewsCallback = (id: string) => Promise<void>;\n\nexport type RecentKBData = {\n  id: string;\n  name: string;\n  lastOpenedDate?: Date;\n};\nexport type NewsData = {\n  id: string;\n  title: string;\n  body: string;\n};\n"],"mappings":";;;;;;AAAA,MAAMA,IAAe;;MCsBRC,IAAc;;;;IA+EjBC,KAAAC,4BAA4BC,YAC3B,IAAIC,SAAQD,MAAME;MACvB,IAAIJ,KAAKK,iBAAiB;QACxB,MAAMC,UAAmBN,KAAKK;QAC9BD,EAAQE;;;;;;QAoBNN,KAAAO,iBAAiBL,MAAOM;MAC9B,MAAMC,IAAQD,EAAEE,OAAuBC;MACvC,IAAIX,KAAKY,gBAAgB;cACjBZ,KAAKY,eAAeH;;;IAItBT,KAAAa,wBAAyBL;MAC/BR,KAAKc,iBAAiBN,EAAEO,OAAOC;AAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkCtChB,KAAAiB,WAAYC;MAClB,IACEA,EAAGP,MACHO,EAAGC,QACHD,EAAGC,KAAKH,cAAcI,SAASpB,KAAKc,iBACpC;QACA,MAAMO,IAAgBC,EAAWJ,EAAGK,gBAAgB;QACpD,MAAMC,IAAWH,IACb,GAAGrB,KAAKyB,iBAAiBC,UAAUC,cAAcN,MACjD;QACJ,OACEO,EAAA;UACEjB,IAAIO,EAAGP;UACPkB,KAAKX,EAAGP;UACRmB,UAAS;UACTC,WAAWb,EAAGC;UACda,MAAK;UACLC,WAAU;UACVC,cAAcV;UACdW,YAAU;UACVC,aAAapC,KAAKc;UAClBuB,SAASrC,KAAKO;UACd+B,QAAM;;;MAIZ,OAAO;AAAI;IAGLtC,KAAAuC,uBAAuB;;MAC7B,OACEX,EAAA;QAAKY,OAAM;SACTZ,EAAA;QACEY,OAAM;QACNT,WAAW/B,KAAKyB,iBAAiBC,UAAUe;SAE3Cb,EAAA;QAAKY,OAAM;UACRE,IAAA1C,KAAK2C,SAAG,QAAAD,WAAA,aAAAA,EAAEE,KAAI1B,KACNlB,KAAKiB,SAASC,OAGzBU,EAAA;QACEiB,MAAK;QACLC,aAAY;QACZC,SAAS/C,KAAKa;WAehBe,EAAA;QACEY,OAAM;QACNnC,iBAAiBL,KAAKC;QACtB+C,kBAAkBhD,KAAKgD;;AAGvB;IAIFhD,KAAAiD,aAAa,MAEjBrB,EAAA;MAAUsB,QAAO;MAAOC,UAAS;MAAOC,WAAS;OAC/CxB,EAAA;MAAaiB,MAAK;MAAoBQ,eAAa;OACjDzB,EAAA;MACEiB,MAAK;MAAS,aACH7C,KAAKyB,iBAAiB6B,KAAKC;MACtCC,KAAI;MAAM;QAGZ5B,EAAA;MACEiB,MAAK;MAAS,aACH7C,KAAKyB,iBAAiB6B,KAAKG;MACtCD,KAAI;MACJE,UAAQ;QAEV9B,EAAA;MACEiB,MAAK;MAAS,aACH7C,KAAKyB,iBAAiB6B,KAAKK;MACtCH,KAAI;MACJE,UAAQ;QAEV9B,EAAA;MACEiB,MAAK;MAAS,aACH7C,KAAKyB,iBAAiB6B,KAAKM;MACtCJ,KAAI;MACJE,UAAQ;QAEV9B,EAAA;MACEiB,MAAK;MAAS,aACH7C,KAAKyB,iBAAiB6B,KAAKO;MACtCL,KAAI;MACJE,UAAQ;SAGZ9B,EAAA;MAAS4B,KAAI;OAAQxD,KAAKuC,yBAC1BX,EAAA;MAAS4B,KAAI;QACb5B,EAAA;MAAS4B,KAAI;QACb5B,EAAA;MAAS4B,KAAI;QACb5B,EAAA;MAAS4B,KAAI;;0BA7NO;6BAKG;;;;;;;;EAsC7B,uBAAMM;IACJ9D,KAAKyB,yBAAyBsC,EAAOC,oBAAoBhE,KAAKiE;;EAYhE,kBAAAC;IACE,KAAKlE,KAAKmE,mBAAmB;MAC3BnE,KAAKoE,4BAA4BC,KAC/BrE,KAAKyB,iBAAiB6C;MAExBtE,KAAKmE,oBAAoB;;;;EAuK7B,MAAAI;IACE,OACE3C,EAAC4C,GAAI;MAAChC,OAAO;QAAEiC,UAAUzE,KAAKmE;;OAC3BnE,KAAKiD"}