@genexus/genexus-ide-ui 1.0.1 → 1.0.2

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

@@ -1,145 +1,147 @@
+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"
+];
+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" }, (_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 +158,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 +198,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 +272,7 @@ export class GxIdeStartPage {
                         }
                     }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -265,31 +283,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

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

@@ -1 +1 @@
-{"version":3,"file":"start-page.js","sourceRoot":"","sources":["../../../src/components/start-page/start-page.tsx"],"names":[],"mappings":"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","sourcesContent":["/* 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  // 9.LOCAL METHODS -> RENDERS //\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        ></gxg-card>\n      );\n    }\n    return null;\n  };\n\n  private renderHomeTabContent = (): HTMLElement => {\n    return (\n      <div class=\"layout layout--two-cols\">\n        <gxg-card\n          class=\"section\"\n          cardTitle={this._componentLocale.recentKbs.title}\n          displayHeaderSlot\n        >\n          {this.kbs?.length > 0 ? (\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            ]\n          ) : (\n            <gx-ide-empty-state\n              class=\"kbs-empty-state\"\n              stateIcon=\"mercury/folder\"\n              stateTitle=\" You haven't created any Knowledge Base\"\n              stateDescription=\"Once you have created your first knowledge base it will appear on this \n          window.\"\n            ></gx-ide-empty-state>\n          )}\n        </gxg-card>\n        <gx-ide-recent-news\n          class=\"section\"\n          getNewsCallback={this.getNewsCallbackRecentNews}\n          openNewsCallback={this.openNewsCallback}\n        ></gx-ide-recent-news>\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"]}
+{"version":3,"file":"start-page.js","sourceRoot":"","sources":["../../../src/components/start-page/start-page.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport { Component, Host, h, Prop, Element, State, Watch } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\nimport { formatDate, hiChar } from \"../../common/helpers\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/typography\",\n  \"utils/layout\",\n  \"components/edit\",\n  \"components/icon\",\n  \"components/button\"\n];\n\nconst KB_ICON = getIconPath({\n  category: \"objects\",\n  name: \"knowledge-base\"\n});\nconst FOLDER_ICON = getIconPath({\n  category: \"system\",\n  name: \"folder\",\n  colorType: \"on-elevation\"\n});\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  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n\n  #recentKbsFilter: HTMLChEditElement;\n  #kbsFilterValue: string = \"\";\n\n  @Element() el: HTMLGxIdeStartPageElement;\n\n  /**\n   * The condition required to display the kbs filter\n   */\n  @State() displayKbsFilter: boolean = true;\n\n  /**\n   * The condition required to display the news filter\n   */\n  @State() displayNewsFilter: boolean = false;\n\n  /**\n   * The filtered KBs after user input\n   */\n  @State() filteredKbs: RecentKBData[] = [];\n\n  /**\n   * The filtered news after user input\n   */\n  @State() filteredNews: NewsData[] = [];\n\n  /**\n   * True if kbs have been not loaded yet.\n   */\n  @State() loadingKbs: boolean = true;\n\n  /**\n   * A list of recent news\n   */\n  @State() news: NewsData[];\n  @Watch(\"news\")\n  watchNews(news: NewsData[]) {\n    if (news?.length >= this.newsFilterThreshold) {\n      this.displayNewsFilter = true;\n    } else {\n      this.displayNewsFilter = false;\n    }\n  }\n\n  /**\n   * The filter value for the recent news set by the user input\n   */\n  @State() newsFilterValue: string;\n\n  /**\n   * True if the component has been rendered for the first time.\n   */\n  @State() renderedFirstTime = false;\n\n  /**\n   * Callback invoked to load the news feed (right panel \"Recent News\").\n   */\n  @Prop() readonly getNewsCallback!: GetNewsCallback;\n\n  /**\n   * Ann array of the user's KB's\n   */\n  @Prop() readonly kbs: RecentKBData[] = [];\n  @Watch(\"kbs\")\n  kbsChanged(kbs: RecentKBData[]) {\n    this.loadingKbs = false;\n    this.#filterKbs();\n    if (kbs?.length >= this.kbsFilterThreshold) {\n      this.displayKbsFilter = true;\n    } else {\n      this.displayKbsFilter = false;\n    }\n  }\n\n  /**\n   * The minimum number of \"kbs\" that is required to display the kb's filter.\n   */\n  @Prop() readonly kbsFilterThreshold: number = 6;\n\n  /**\n   * The minimum number of \"news\" that is required to display the news's filter.\n   */\n  @Prop() readonly newsFilterThreshold: number = 6;\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 open a news article.\n   */\n  @Prop() readonly openNewsCallback!: OpenNewsCallback;\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.#recentKbsFilter?.focus();\n  }\n\n  #evaluateRenderKbs = () => {\n    if (this.kbs?.length > 0) {\n      return this.#renderKbs();\n    } else {\n      return (\n        <gx-ide-empty-state\n          class=\"kbs-empty-state\"\n          stateIconSrc={FOLDER_ICON}\n          stateTitle={this._componentLocale.emptyState.title}\n          stateDescription={this._componentLocale.emptyState.description}\n        ></gx-ide-empty-state>\n      );\n    }\n  };\n\n  #filterKbs = () => {\n    this.filteredKbs = this.kbs.filter(kb =>\n      kb.name?.toLowerCase().includes(this.#kbsFilterValue)\n    );\n  };\n\n  #getNewsCallbackRecentNews = async (): Promise<NewsData[]> => {\n    return new Promise(async resolve => {\n      this.news = await this.getNewsCallback();\n      resolve(this.news);\n    });\n  };\n\n  #openKbHandler = async (e: MouseEvent) => {\n    const kbId = (e.target as HTMLElement).id;\n    await this.openKbCallback(kbId);\n  };\n\n  #renderKb = (kb: RecentKBData): HTMLButtonElement | null => {\n    const formattedDate = formatDate(kb.lastOpenedDate, \"pretty\");\n    const dateCaption = formattedDate\n      ? `${this._componentLocale.recentKbs.lastOpened} ${formattedDate}`\n      : null;\n    return (\n      <article class=\"display-contents\">\n        <button\n          class={{\n            \"card-small\": true,\n            \"card-small--actionable\": true,\n            \"card-kb\": true,\n            \"exact-match-bright\":\n              kb.name?.toLocaleLowerCase() ===\n              this.#kbsFilterValue?.toLowerCase()\n          }}\n          id={kb.id}\n          key={kb.id}\n          type=\"button\"\n          onClick={this.#openKbHandler}\n        >\n          <div class=\"card-kb__left-col\">\n            <ch-image src={KB_ICON} class=\"icon-md\"></ch-image>\n            <h2 class={config.headingsClasses.cardSmall}>\n              {hiChar(kb.name, this.#kbsFilterValue)}\n            </h2>\n          </div>\n          {dateCaption && <div class=\"card-kb__right-col\">{dateCaption}</div>}\n        </button>\n      </article>\n    );\n  };\n\n  #renderKbs = () => {\n    if (this.filteredKbs.length) {\n      return (\n        <div class=\"kbs-container\">{this.filteredKbs?.map(this.#renderKb)}</div>\n      );\n    }\n    return (\n      <gx-ide-empty-state\n        stateIconSrc={KB_ICON}\n        stateTitle={this._componentLocale.recentKbs.noKbsFiltered.title}\n      ></gx-ide-empty-state>\n    );\n  };\n\n  #searchKbsInputHandler = (event: Event | ChEditCustomEvent<InputEvent>) => {\n    this.#kbsFilterValue = (\n      event as ChEditCustomEvent<InputEvent>\n    ).target.value.toLowerCase();\n    this.#filterKbs();\n  };\n\n  #searchNewsInputHandler = (event: Event | ChEditCustomEvent<InputEvent>) => {\n    this.newsFilterValue = (\n      event as ChEditCustomEvent<InputEvent>\n    ).target.value.toLowerCase();\n  };\n\n  render() {\n    return (\n      <Host class=\"start-page-host\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"layout layout-main layout--cols-2\">\n          <div class=\"layout__panel panel-recent-kbs\">\n            <section class=\"card-regular recent-kbs\">\n              <header class=\"recent-kbs__header\">\n                <h2\n                  class={{\n                    [config.headingsClasses.cardRegular]: true,\n                    \"recent-kbs__title\": true\n                  }}\n                >\n                  {this._componentLocale.recentKbs.title}\n                </h2>\n                {this.displayKbsFilter && (\n                  <ch-edit\n                    type=\"text\"\n                    class=\"form-input recent-kbs__name-filter\"\n                    placeholder={this._componentLocale.recentKbs.placeholder}\n                    onInput={this.#searchKbsInputHandler}\n                    ref={el =>\n                      (this.#recentKbsFilter = el as HTMLChEditElement)\n                    }\n                    disabled={!(this.kbs?.length > 0)}\n                  ></ch-edit>\n                )}\n              </header>\n\n              {this.loadingKbs ? (\n                <gx-ide-loader\n                  loaderTitle={this._componentLocale.recentKbs.loader.title}\n                  description={\n                    this._componentLocale.recentKbs.loader.description\n                  }\n                  show={true}\n                ></gx-ide-loader>\n              ) : (\n                this.#evaluateRenderKbs()\n              )}\n            </section>\n          </div>\n\n          <div class=\"layout__panel panel-recent-news\">\n            <section class=\"card-regular recent-news\">\n              <header class=\"recent-news__header\">\n                <h2 class={config.headingsClasses.cardRegular}>\n                  {this._componentLocale.recentNews.title}\n                </h2>\n                {this.displayNewsFilter && (\n                  <ch-edit\n                    type=\"text\"\n                    class=\"form-input recent-news__filter\"\n                    placeholder={\n                      this._componentLocale.recentNews.inputPlaceholder\n                    }\n                    onInput={\n                      this.news?.length > 0\n                        ? this.#searchNewsInputHandler\n                        : null\n                    }\n                    disabled={!(this.news?.length > 0)}\n                  ></ch-edit>\n                )}\n              </header>\n\n              <gx-ide-recent-news\n                getNewsCallback={this.#getNewsCallbackRecentNews}\n                openNewsCallback={this.openNewsCallback}\n                filterValue={this.newsFilterValue}\n              ></gx-ide-recent-news>\n            </section>\n          </div>\n        </div>\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"]}