@genexus/genexus-ide-ui 1.0.1 → 1.0.3

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

@@ -318,6 +318,66 @@ FORM ELEMENTS
 /* 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.
 */
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,58 +569,115 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*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: auto;
-  opacity: 0;
-  transition: var(--gx-ide-show-component-delay) opacity;
+.hiChar {
+  color: var(--mer-color__primary-blue--200);
+  filter: brightness(1.3);
 }
 
-:host(.rendered) {
-  opacity: 1;
+:host {
+  overflow: auto;
+  container-type: inline-size;
+  container-name: host;
 }
 
-gxg-tabs {
-  background-color: transparent;
-  box-shadow: none;
-  height: 100% !important;
+.layout-main,
+.layout__panel {
+  block-size: 100%;
   overflow: auto;
 }
 
-.kbs-empty-state {
-  height: 100%;
+@container host (max-width: 768px) {
+  .layout.layout-main {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+}
+.panel-recent-kbs {
+  position: relative;
 }
 
-.layout {
-  height: 100%;
+.recent-kbs,
+.recent-news {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: var(--mer-spacing--md);
   overflow: auto;
 }
-.layout gxg-card {
-  height: 100%;
+.recent-kbs__header,
+.recent-news__header {
+  display: grid;
+  gap: var(--mer-spacing--md);
+}
+
+.kbs-container {
+  display: grid;
+  gap: var(--mer-spacing--xs);
   overflow: auto;
+  grid-auto-rows: max-content;
+  container-type: inline-size;
+  container-name: kb-container;
+  animation: fadeIn var(--mer-timing--super-fast) forwards linear;
 }
 
-.kbs-container,
-.news-container {
+.card-kb {
   display: flex;
-  flex-direction: column;
-  gap: var(--gx-ide-articles-gap);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mer-spacing--lg);
+  container-type: inline-size;
+  container-name: card-kb;
+}
+.card-kb__left-col {
+  display: flex;
+  align-items: center;
+  gap: var(--mer-spacing--sm);
 }
 
-.news-container p:first-child {
-  margin-top: 0;
+@container kb-container (max-width: 360px) {
+  .card-kb {
+    align-items: center;
+    flex-direction: column;
+    gap: var(--mer-spacing--xs);
+    justify-content: start;
+  }
 }
-.news-container p:last-child {
-  margin-bottom: 0;
+gx-ide-recent-news {
+  overflow: auto;
+}
+
+.panel-recent-news {
+  position: relative;
+}
+
+@keyframes exactMatchBright {
+  100% {
+    filter: brightness(1.25);
+  }
+}
+.exact-match-bright {
+  animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4 alternate;
+}
+
+gx-ide-loader::part(loader-wrapper) {
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
 }
 
-gxg-card.section {
-  border-bottom: 2px solid var(--gray-00);
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
 }

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

@@ -1,145 +1,148 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeStartPage_recentKbsFilter, _GxIdeStartPage_kbsFilterValue, _GxIdeStartPage_evaluateRenderKbs, _GxIdeStartPage_filterKbs, _GxIdeStartPage_getNewsCallbackRecentNews, _GxIdeStartPage_openKbHandler, _GxIdeStartPage_renderKb, _GxIdeStartPage_renderKbs, _GxIdeStartPage_searchKbsInputHandler, _GxIdeStartPage_searchNewsInputHandler;
 /* STENCIL IMPORTS */
 import { Host, h } from "@stencil/core";
 /* OTHER LIBRARIES IMPORTS */
+import { getIconPath } from "@genexus/mercury";
 /* CUSTOM IMPORTS */
 import { Locale } from "../../common/locale";
-import { formatDate } from "../../common/helpers";
+import { config } from "../../common/config";
+import { formatDate, hiChar } from "../../common/helpers";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "utils/typography",
+    "utils/layout",
+    "components/edit",
+    "components/icon",
+    "components/button",
+    "chameleon/scrollbar"
+];
+const KB_ICON = getIconPath({
+    category: "objects",
+    name: "knowledge-base"
+});
+const FOLDER_ICON = getIconPath({
+    category: "system",
+    name: "folder",
+    colorType: "on-elevation"
+});
 export class GxIdeStartPage {
     constructor() {
-        this.getNewsCallbackRecentNews = async () => {
+        _GxIdeStartPage_recentKbsFilter.set(this, void 0);
+        _GxIdeStartPage_kbsFilterValue.set(this, "");
+        _GxIdeStartPage_evaluateRenderKbs.set(this, () => {
+            var _a;
+            if (((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                return __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this);
+            }
+            else {
+                return (h("gx-ide-empty-state", { class: "kbs-empty-state", stateIconSrc: FOLDER_ICON, stateTitle: this._componentLocale.emptyState.title, stateDescription: this._componentLocale.emptyState.description }));
+            }
+        });
+        _GxIdeStartPage_filterKbs.set(this, () => {
+            this.filteredKbs = this.kbs.filter(kb => { var _a; return (_a = kb.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(__classPrivateFieldGet(this, _GxIdeStartPage_kbsFilterValue, "f")); });
+        });
+        _GxIdeStartPage_getNewsCallbackRecentNews.set(this, async () => {
             return new Promise(async (resolve) => {
-                if (this.getNewsCallback) {
-                    const newsResult = await this.getNewsCallback();
-                    resolve(newsResult);
-                }
+                this.news = await this.getNewsCallback();
+                resolve(this.news);
             });
-        };
-        // 7.LISTENERS //
-        // 8.PUBLIC METHODS API //
-        // 9.LOCAL METHODS //
-        this.kbClickHandler = async (e) => {
+        });
+        _GxIdeStartPage_openKbHandler.set(this, async (e) => {
             const kbId = e.target.id;
-            if (this.openKbCallback) {
-                await this.openKbCallback(kbId);
-            }
-        };
-        this.searchKbsInputHandler = (e) => {
-            this.kbsFilterValue = e.detail.toLowerCase();
-        };
-        // private NewsClickHandler = async (e: MouseEvent) => {
-        //   const newsId = (e.target as HTMLElement).id;
-        //   if (this.openNewsCallback) {
-        //     await this.openNewsCallback(newsId);
-        //   }
-        // };
-        // 9.LOCAL METHODS -> RENDERS //
-        // private renderNews = (news: NewsData): HTMLGxgCardElement | null => {
-        //   if (news.id && news.title) {
-        //     return (
-        //       <gxg-card
-        //         id={news.id}
-        //         key={news.id}
-        //         cardType="article"
-        //         cardTitle={news.title}
-        //         icon="gx-test/test-results"
-        //         iconColor="auto"
-        //         actionable
-        //         onClick={this.NewsClickHandler}
-        //         titleSemibold
-        //         noHeaderBorder
-        //       >
-        //         {news.body ? <p>{news.body}</p> : null}
-        //       </gxg-card>
-        //     );
-        //   }
-        //   return null;
-        // };
-        // 9.LOCAL METHODS -> RENDERS //
-        this.renderKb = (kb) => {
-            if (kb.id &&
-                kb.name &&
-                kb.name.toLowerCase().includes(this.kbsFilterValue)) {
-                const formattedDate = formatDate(kb.lastOpenedDate, "pretty");
-                const subtitle = formattedDate
-                    ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`
-                    : null;
-                return (h("gxg-card", { id: kb.id, key: kb.id, cardType: "article", cardTitle: kb.name, icon: "general/knowledge-base", iconColor: "auto", cardSubtitle: subtitle, actionable: true, filterValue: this.kbsFilterValue, onClick: this.kbClickHandler }));
-            }
-            return null;
-        };
-        this.renderHomeTabContent = () => {
+            await this.openKbCallback(kbId);
+        });
+        _GxIdeStartPage_renderKb.set(this, (kb) => {
             var _a, _b;
-            return (h("div", { class: "layout layout--two-cols" }, h("gxg-card", { class: "section", cardTitle: this._componentLocale.recentKbs.title, displayHeaderSlot: true }, ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? ([
-                h("div", { class: "kbs-container" }, (_b = this.kbs) === null || _b === void 0 ? void 0 : _b.map(kb => {
-                    return this.renderKb(kb);
-                })),
-                h("gxg-form-text", { slot: "header", placeholder: "Search KBs by name", onInput: this.searchKbsInputHandler })
-            ]) : (h("gx-ide-empty-state", { class: "kbs-empty-state", stateIcon: "mercury/folder", stateTitle: " You haven't created any Knowledge Base", stateDescription: "Once you have created your first knowledge base it will appear on this \n          window." }))), h("gx-ide-recent-news", { class: "section", getNewsCallback: this.getNewsCallbackRecentNews, openNewsCallback: this.openNewsCallback })));
-        };
-        this.kbsFilterValue = "";
-        this.renderedFirstTime = false;
+            const formattedDate = formatDate(kb.lastOpenedDate, "pretty");
+            const dateCaption = formattedDate
+                ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`
+                : null;
+            return (h("article", { class: "display-contents" }, h("button", { class: {
+                    "card-small": true,
+                    "card-small--actionable": true,
+                    "card-kb": true,
+                    "exact-match-bright": ((_a = kb.name) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase()) ===
+                        ((_b = __classPrivateFieldGet(this, _GxIdeStartPage_kbsFilterValue, "f")) === null || _b === void 0 ? void 0 : _b.toLowerCase())
+                }, id: kb.id, key: kb.id, type: "button", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbHandler, "f") }, h("div", { class: "card-kb__left-col" }, h("ch-image", { src: KB_ICON, class: "icon-md" }), h("h2", { class: config.headingsClasses.cardSmall }, hiChar(kb.name, __classPrivateFieldGet(this, _GxIdeStartPage_kbsFilterValue, "f")))), dateCaption && h("div", { class: "card-kb__right-col" }, dateCaption))));
+        });
+        _GxIdeStartPage_renderKbs.set(this, () => {
+            var _a;
+            if (this.filteredKbs.length) {
+                return (h("div", { class: "kbs-container scrollable" }, (_a = this.filteredKbs) === null || _a === void 0 ? void 0 : _a.map(__classPrivateFieldGet(this, _GxIdeStartPage_renderKb, "f"))));
+            }
+            return (h("gx-ide-empty-state", { stateIconSrc: KB_ICON, stateTitle: this._componentLocale.recentKbs.noKbsFiltered.title }));
+        });
+        _GxIdeStartPage_searchKbsInputHandler.set(this, (event) => {
+            __classPrivateFieldSet(this, _GxIdeStartPage_kbsFilterValue, event.target.value.toLowerCase(), "f");
+            __classPrivateFieldGet(this, _GxIdeStartPage_filterKbs, "f").call(this);
+        });
+        _GxIdeStartPage_searchNewsInputHandler.set(this, (event) => {
+            this.newsFilterValue = event.target.value.toLowerCase();
+        });
+        this.displayKbsFilter = true;
+        this.displayNewsFilter = false;
+        this.filteredKbs = [];
+        this.filteredNews = [];
+        this.loadingKbs = true;
         this.news = undefined;
-        this.kbs = undefined;
-        this.openKbCallback = undefined;
+        this.newsFilterValue = undefined;
+        this.renderedFirstTime = false;
         this.getNewsCallback = undefined;
+        this.kbs = [];
+        this.kbsFilterThreshold = 6;
+        this.newsFilterThreshold = 6;
+        this.openKbCallback = undefined;
         this.openNewsCallback = undefined;
     }
-    // 6.COMPONENT LIFECYCLE METHODS //
+    watchNews(news) {
+        if ((news === null || news === void 0 ? void 0 : news.length) >= this.newsFilterThreshold) {
+            this.displayNewsFilter = true;
+        }
+        else {
+            this.displayNewsFilter = false;
+        }
+    }
+    kbsChanged(kbs) {
+        this.loadingKbs = false;
+        __classPrivateFieldGet(this, _GxIdeStartPage_filterKbs, "f").call(this);
+        if ((kbs === null || kbs === void 0 ? void 0 : kbs.length) >= this.kbsFilterThreshold) {
+            this.displayKbsFilter = true;
+        }
+        else {
+            this.displayKbsFilter = false;
+        }
+    }
     async componentWillLoad() {
         this._componentLocale = await Locale.getComponentStrings(this.el);
     }
-    componentDidRender() {
-        if (!this.renderedFirstTime) {
-            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
-            this.renderedFirstTime = true;
-        }
+    componentDidLoad() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _GxIdeStartPage_recentKbsFilter, "f")) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    // 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 (h(Host, { class: { rendered: this.renderedFirstTime } }, this.renderHomeTabContent()));
+        var _a, _b, _c;
+        return (h(Host, { class: "start-page-host" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "layout layout-main layout--cols-2" }, h("div", { class: "layout__panel panel-recent-kbs" }, h("section", { class: "card-regular recent-kbs" }, h("header", { class: "recent-kbs__header" }, h("h2", { class: {
+                [config.headingsClasses.cardRegular]: true,
+                "recent-kbs__title": true
+            } }, this._componentLocale.recentKbs.title), this.displayKbsFilter && (h("ch-edit", { type: "text", class: "form-input recent-kbs__name-filter", placeholder: this._componentLocale.recentKbs.placeholder, onInput: __classPrivateFieldGet(this, _GxIdeStartPage_searchKbsInputHandler, "f"), ref: el => (__classPrivateFieldSet(this, _GxIdeStartPage_recentKbsFilter, el, "f")), disabled: !(((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) > 0) }))), this.loadingKbs ? (h("gx-ide-loader", { loaderTitle: this._componentLocale.recentKbs.loader.title, description: this._componentLocale.recentKbs.loader.description, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_evaluateRenderKbs, "f").call(this)))), h("div", { class: "layout__panel panel-recent-news" }, h("section", { class: "card-regular recent-news" }, h("header", { class: "recent-news__header" }, h("h2", { class: config.headingsClasses.cardRegular }, this._componentLocale.recentNews.title), this.displayNewsFilter && (h("ch-edit", { type: "text", class: "form-input recent-news__filter", placeholder: this._componentLocale.recentNews.inputPlaceholder, onInput: ((_b = this.news) === null || _b === void 0 ? void 0 : _b.length) > 0
+                ? __classPrivateFieldGet(this, _GxIdeStartPage_searchNewsInputHandler, "f")
+                : null, disabled: !(((_c = this.news) === null || _c === void 0 ? void 0 : _c.length) > 0) }))), h("gx-ide-recent-news", { getNewsCallback: __classPrivateFieldGet(this, _GxIdeStartPage_getNewsCallbackRecentNews, "f"), openNewsCallback: this.openNewsCallback, filterValue: this.newsFilterValue }))))));
     }
     static get is() { return "gx-ide-start-page"; }
     static get encapsulation() { return "shadow"; }
@@ -156,25 +159,25 @@ export class GxIdeStartPage {
     static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
     static get properties() {
         return {
-            "news": {
+            "getNewsCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "NewsData[]",
-                    "resolved": "NewsData[]",
+                    "original": "GetNewsCallback",
+                    "resolved": "() => Promise<NewsData[]>",
                     "references": {
-                        "NewsData": {
+                        "GetNewsCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
-                            "id": "src/components/start-page/start-page.tsx::NewsData"
+                            "id": "src/components/start-page/start-page.tsx::GetNewsCallback"
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A temporary array of news for testing purposes"
+                    "text": "Callback invoked to load the news feed (right panel \"Recent News\")."
                 }
             },
             "kbs": {
@@ -196,48 +199,64 @@ export class GxIdeStartPage {
                 "docs": {
                     "tags": [],
                     "text": "Ann array of the user's KB's"
-                }
+                },
+                "defaultValue": "[]"
             },
-            "openKbCallback": {
-                "type": "unknown",
+            "kbsFilterThreshold": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "OpenKbCallback",
-                    "resolved": "(id: string) => Promise<void>",
-                    "references": {
-                        "OpenKbCallback": {
-                            "location": "local",
-                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
-                            "id": "src/components/start-page/start-page.tsx::OpenKbCallback"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to open a knowledge base when the user clicks on a KB card."
-                }
+                    "text": "The minimum number of \"kbs\" that is required to display the kb's filter."
+                },
+                "attribute": "kbs-filter-threshold",
+                "reflect": false,
+                "defaultValue": "6"
             },
-            "getNewsCallback": {
+            "newsFilterThreshold": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minimum number of \"news\" that is required to display the news's filter."
+                },
+                "attribute": "news-filter-threshold",
+                "reflect": false,
+                "defaultValue": "6"
+            },
+            "openKbCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetNewsCallback",
-                    "resolved": "() => Promise<NewsData[]>",
+                    "original": "OpenKbCallback",
+                    "resolved": "(id: string) => Promise<void>",
                     "references": {
-                        "GetNewsCallback": {
+                        "OpenKbCallback": {
                             "location": "local",
                             "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/start-page/start-page.tsx",
-                            "id": "src/components/start-page/start-page.tsx::GetNewsCallback"
+                            "id": "src/components/start-page/start-page.tsx::OpenKbCallback"
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to load the news feed (right panel \"Recent News\")."
+                    "text": "Callback invoked to open a knowledge base when the user clicks on a KB card."
                 }
             },
             "openNewsCallback": {
@@ -254,7 +273,7 @@ export class GxIdeStartPage {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -265,31 +284,26 @@ export class GxIdeStartPage {
     }
     static get states() {
         return {
-            "kbsFilterValue": {},
+            "displayKbsFilter": {},
+            "displayNewsFilter": {},
+            "filteredKbs": {},
+            "filteredNews": {},
+            "loadingKbs": {},
+            "news": {},
+            "newsFilterValue": {},
             "renderedFirstTime": {}
         };
     }
-    static get events() {
+    static get elementRef() { return "el"; }
+    static get watchers() {
         return [{
-                "method": "componentDidRenderFirstTime",
-                "name": "componentDidRenderFirstTime",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "description",
-                            "text": "Gets fired when the component has rendered for the first time."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
+                "propName": "news",
+                "methodName": "watchNews"
+            }, {
+                "propName": "kbs",
+                "methodName": "kbsChanged"
             }];
     }
-    static get elementRef() { return "el"; }
 }
+_GxIdeStartPage_recentKbsFilter = new WeakMap(), _GxIdeStartPage_kbsFilterValue = new WeakMap(), _GxIdeStartPage_evaluateRenderKbs = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_getNewsCallbackRecentNews = new WeakMap(), _GxIdeStartPage_openKbHandler = new WeakMap(), _GxIdeStartPage_renderKb = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_searchKbsInputHandler = new WeakMap(), _GxIdeStartPage_searchNewsInputHandler = new WeakMap();
 //# sourceMappingURL=start-page.js.map