@genexus/genexus-ide-ui 1.0.19 → 1.0.20

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

@@ -14,15 +14,42 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         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_kbRefs, _GxIdeStartPage_evaluateRenderKbs, _GxIdeStartPage_filterKbs, _GxIdeStartPage_getNewsCallbackRecentNews, _GxIdeStartPage_openKbHandler, _GxIdeStartPage_renderKb, _GxIdeStartPage_renderKbs, _GxIdeStartPage_searchKbsInputHandler, _GxIdeStartPage_searchNewsInputHandler;
-/* STENCIL IMPORTS */
+var _GxIdeStartPage_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderSecondarySection;
+// Stencil
 import { Host, h } from "@stencil/core";
-/* OTHER LIBRARIES IMPORTS */
+// Other Libraries
 import { getIconPath } from "@genexus/mercury";
-/* CUSTOM IMPORTS */
+import { formatDistanceToNow } from "date-fns";
+import { ja, zhCN, enUS } from "date-fns/locale";
+// Custom
 import { Locale } from "../../common/locale";
-import { config } from "../../common/config";
-import { formatDate, hiChar } from "../../common/helpers";
+// const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English
+const LANGS_DATE_FNS_MAP = {
+    "en": enUS,
+    "ja": ja,
+    "zh-CN": zhCN,
+    "zh-TW": zhCN,
+    "zh-HK": zhCN
+};
+const DETAIL_ICON = getIconPath({
+    category: "system",
+    name: "detail",
+    colorType: "primary"
+});
+const FILTER_ICON = getIconPath({
+    category: "window-tools",
+    name: "filter",
+    colorType: "on-elevation"
+});
+const KB_DEFAULT_ICON = getIconPath({
+    category: "objects",
+    name: "knowledge-base"
+});
+const SEARCH_ICON = getIconPath({
+    category: "system",
+    name: "search",
+    colorType: "on-elevation"
+});
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
@@ -30,120 +57,133 @@ const CSS_BUNDLES = [
     "components/edit",
     "components/icon",
     "components/button",
-    "chameleon/scrollbar"
+    "chameleon/scrollbar",
+    "utils/typography"
 ];
-const KB_ICON = getIconPath({
-    category: "objects",
-    name: "knowledge-base"
-});
-const FOLDER_ICON = getIconPath({
-    category: "system",
-    name: "folder",
-    colorType: "on-elevation"
-});
 export class GxIdeStartPage {
     constructor() {
-        _GxIdeStartPage_recentKbsFilter.set(this, void 0);
-        _GxIdeStartPage_kbsFilterValue.set(this, "");
-        _GxIdeStartPage_kbRefs.set(this, {}); // Object to store kbs refs
-        _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_instances.add(this);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeStartPage_componentLocale.set(this, void 0);
+        _GxIdeStartPage_userLanguage.set(this, void 0);
+        _GxIdeStartPage_createKBClickHandler.set(this, (fromServer) => (event) => {
+            event.stopPropagation();
+            this.createKBCallback(fromServer);
         });
-        _GxIdeStartPage_getNewsCallbackRecentNews.set(this, async () => {
-            return new Promise(async (resolve) => {
-                this.news = await this.getNewsCallback();
-                resolve(this.news);
-            });
+        _GxIdeStartPage_openKbClickHandler.set(this, (kbId) => (event) => {
+            event.stopPropagation();
+            this.openKbCallback(kbId);
         });
-        _GxIdeStartPage_openKbHandler.set(this, async (e) => {
-            const kbId = e.currentTarget.id;
-            await this.openKbCallback(kbId);
+        _GxIdeStartPage_filterKbs.set(this, (event) => {
+            this.kbFilterValue = event.detail;
         });
-        _GxIdeStartPage_renderKb.set(this, (kb) => {
-            var _a, _b;
-            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", ref: el => (__classPrivateFieldGet(this, _GxIdeStartPage_kbRefs, "f")[kb.id] = el), onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbHandler, "f") }, h("div", { class: "card-kb__left-col" }, h("ch-image", { src: KB_ICON, class: "icon-md", containerRef: __classPrivateFieldGet(this, _GxIdeStartPage_kbRefs, "f")[kb.id] }), h("h2", { class: config.headingsClasses.cardSmall }, hiChar(kb.name, __classPrivateFieldGet(this, _GxIdeStartPage_kbsFilterValue, "f")))), dateCaption && h("div", { class: "card-kb__right-col" }, dateCaption))));
+        _GxIdeStartPage_renderKbsSection.set(this, () => {
+            const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;
+            const kbsListEmpty = this.filteredKbs.length === 0;
+            let contentToRender;
+            // Evaluate what is the content to display.
+            if (this.filteredKbs.length > 0) {
+                contentToRender = __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this);
+            }
+            else {
+                // No kb has pass the filter. Display an empty-state.
+                contentToRender = (h("gx-ide-empty-state", { isAnimated: true, stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.noMatches }));
+            }
+            return (h("section", { class: "section-kbs" }, h("header", { class: {
+                    "section-kbs__header": true
+                } }, h("h2", { class: "heading-3 section-kbs__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.title), h("ch-edit", {
+                // Render always, and display or hide, ro prevent FOUC, and also prevent
+                // the header block-size from growing a little bit when the input renders.
+                value: this.kbFilterValue, class: {
+                    "input": true,
+                    "section-kbs__filter--hidden": hideKbsFilter
+                }, startImgSrc: SEARCH_ICON, placeholder: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.filterKbsPlaceholder, onInput: !hideKbsFilter && __classPrivateFieldGet(this, _GxIdeStartPage_filterKbs, "f"), disabled: hideKbsFilter
+            })), h("div", { class: {
+                    "section-kbs__list": true,
+                    "section-kbs__list--empty": kbsListEmpty,
+                    "scrollable": true
+                } }, this.filteredKbs.length > 0 ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbs, "f").call(this) : contentToRender)));
         });
         _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);
+            return (_a = this.filteredKbs) === null || _a === void 0 ? void 0 : _a.map((kb, index) => {
+                // relative time ago
+                var _a;
+                const relativeDate = kb.lastOpenedDate
+                    ? formatDistanceToNow(new Date(kb.lastOpenedDate), {
+                        addSuffix: true,
+                        locale: __classPrivateFieldGet(this, _GxIdeStartPage_userLanguage, "f")
+                    })
+                    : undefined;
+                // icon
+                const kbIcon = (_a = kb.icon) !== null && _a !== void 0 ? _a : KB_DEFAULT_ICON;
+                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-md", src: kbIcon }), h("p", { class: "text-body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("div", { class: "text-body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened} ${relativeDate}`))));
+            });
         });
-        _GxIdeStartPage_searchNewsInputHandler.set(this, (event) => {
-            this.newsFilterValue = event.target.value.toLowerCase();
+        _GxIdeStartPage_renderSecondarySection.set(this, () => {
+            if (!this.secondarySection) {
+                return null;
+            }
+            const multipleCards = this.secondarySection.cards.length > 2;
+            return (h("section", {
+                // Recent Knowledge Bases
+                class: "section-secondary"
+            }, h("header", null, h("h2", { class: "heading-3" }, this.secondarySection.title)), h("section", { class: {
+                    "section-secondary__actions": true,
+                    "section-secondary__actions--two-cards": !multipleCards,
+                    "section-secondary__actions--multiple-cards": multipleCards,
+                    "scrollable": true
+                } }, this.secondarySection.cards.map((card, index) => {
+                return (h("article", { class: "card card-outlined", key: index }, h("header", { class: "card__header" }, h("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-md icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, card.title), card.description.map(paragraph => (h("p", { class: "text-body-regular-m" }, paragraph))))), h("footer", { class: "card__footer" }, card.action && (h("button", { class: "button-tertiary button-icon-and-text", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-md", src: DETAIL_ICON }), card.action.caption)))));
+            }))));
         });
-        this.displayKbsFilter = true;
-        this.displayNewsFilter = false;
-        this.filteredKbs = [];
-        this.filteredNews = [];
-        this.loadingKbs = true;
-        this.news = undefined;
-        this.newsFilterValue = undefined;
-        this.renderedFirstTime = false;
-        this.getNewsCallback = undefined;
-        this.kbs = [];
-        this.kbsFilterThreshold = 6;
-        this.newsFilterThreshold = 6;
+        this.kbFilterValue = "";
+        this.filteredKbs = undefined;
+        this.loading = true;
+        this.createKBCallback = undefined;
         this.openKbCallback = undefined;
-        this.openNewsCallback = undefined;
+        this.secondarySection = undefined;
+        this.kbs = undefined;
+        this.kbsFilterThreshold = undefined;
     }
-    watchNews(news) {
-        if ((news === null || news === void 0 ? void 0 : news.length) >= this.newsFilterThreshold) {
-            this.displayNewsFilter = true;
-        }
-        else {
-            this.displayNewsFilter = false;
-        }
+    kbFilterValueChanged(newKbFilterValue) {
+        this.filteredKbs = this.kbs.filter(kb => kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase()));
     }
-    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;
-        }
+    kbsChanged(newKbs) {
+        this.filteredKbs = newKbs;
+        this.kbFilterValue = ""; // clear filter
     }
     async componentWillLoad() {
-        this._componentLocale = await Locale.getComponentStrings(this.el);
-    }
-    componentDidLoad() {
-        var _a;
-        (_a = __classPrivateFieldGet(this, _GxIdeStartPage_recentKbsFilter, "f")) === null || _a === void 0 ? void 0 : _a.focus();
+        __classPrivateFieldSet(this, _GxIdeStartPage_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        // initialize filteredKbs
+        this.kbsChanged(this.kbs);
+        // get user language to display the kb "last opened" value in the appropriate language.
+        const userLanguage = document.documentElement
+            .lang;
+        __classPrivateFieldSet(this, _GxIdeStartPage_userLanguage, LANGS_DATE_FNS_MAP[userLanguage], "f");
     }
     render() {
-        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: "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: "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 }))))));
+        var _a;
+        this.loading =
+            (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: {
+                main: true
+            } }, h("section", {
+            // Create a new Knowledge Base
+            class: "section-create-new-kb"
+        }, h("header", {
+            // main header
+            class: "section-create-new__header"
+        }, h("h1", { class: "heading-2" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), h("section", { class: "section-create-new-kb__actions scrollable" }, h("article", {
+            // create project
+            class: "card card-filled"
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, false) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.buttonCaption))), h("article", {
+            // open existing project
+            class: "card-filled"
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "heading-3" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "text-body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.description))), h("footer", { class: "card__footer" }, h("button", { class: "button-secondary cancel-btn", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_createKBClickHandler, "f").call(this, true) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.buttonCaption))))), h("section", { class: "section-secondary scrollable" }, this.loading ? (h("gx-ide-loader", { class: "loader", loaderTitle: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderTitle, description: __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.loaderDescription, show: true })) : (__classPrivateFieldGet(this, _GxIdeStartPage_instances, "m", _GxIdeStartPage_evaluateContentToRender).call(this))))));
     }
     static get is() { return "gx-ide-start-page"; }
     static get encapsulation() { return "shadow"; }
@@ -160,17 +200,16 @@ export class GxIdeStartPage {
     static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
     static get properties() {
         return {
-            "getNewsCallback": {
+            "createKBCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "GetNewsCallback",
-                    "resolved": "() => Promise<NewsData[]>",
+                    "original": "(fromServer: boolean) => Promise<void>",
+                    "resolved": "(fromServer: boolean) => Promise<void>",
                     "references": {
-                        "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::GetNewsCallback"
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
                         }
                     }
                 },
@@ -178,133 +217,111 @@ export class GxIdeStartPage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to load the news feed (right panel \"Recent News\")."
+                    "text": "Callback invoked to create a new KB. It must be specified whether this create is create from server or not, through the parameter 'fromServer'."
                 }
             },
-            "kbs": {
+            "openKbCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "RecentKBData[]",
-                    "resolved": "RecentKBData[]",
+                    "original": "(id: string) => Promise<void>",
+                    "resolved": "(id: string) => Promise<void>",
                     "references": {
-                        "RecentKBData": {
-                            "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::RecentKBData"
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
                         }
                     }
                 },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Ann array of the user's KB's"
-                },
-                "defaultValue": "[]"
-            },
-            "kbsFilterThreshold": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of \"kbs\" that is required to display the kb's filter."
-                },
-                "attribute": "kbs-filter-threshold",
-                "reflect": false,
-                "defaultValue": "6"
+                    "text": "Callback invoked to open a KB when the user clicks on a KB card."
+                }
             },
-            "newsFilterThreshold": {
-                "type": "number",
+            "secondarySection": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
+                    "original": "SecondarySection",
+                    "resolved": "{ title: string; cards: CardInfo[]; }",
+                    "references": {
+                        "SecondarySection": {
+                            "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::SecondarySection"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "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"
+                    "text": "The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs."
+                }
             },
-            "openKbCallback": {
+            "kbs": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "OpenKbCallback",
-                    "resolved": "(id: string) => Promise<void>",
+                    "original": "RecentKBData[]",
+                    "resolved": "RecentKBData[]",
                     "references": {
-                        "OpenKbCallback": {
+                        "RecentKBData": {
                             "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"
+                            "id": "src/components/start-page/start-page.tsx::RecentKBData"
                         }
                     }
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to open a knowledge base when the user clicks on a KB card."
+                    "text": "User's kbs array"
                 }
             },
-            "openNewsCallback": {
-                "type": "unknown",
+            "kbsFilterThreshold": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "OpenNewsCallback",
-                    "resolved": "(id: string) => Promise<void>",
-                    "references": {
-                        "OpenNewsCallback": {
-                            "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::OpenNewsCallback"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked to open a news article."
-                }
+                    "text": "The minimum required of kbs to display a filter."
+                },
+                "attribute": "kbs-filter-threshold",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "displayKbsFilter": {},
-            "displayNewsFilter": {},
+            "kbFilterValue": {},
             "filteredKbs": {},
-            "filteredNews": {},
-            "loadingKbs": {},
-            "news": {},
-            "newsFilterValue": {},
-            "renderedFirstTime": {}
+            "loading": {}
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "news",
-                "methodName": "watchNews"
+                "propName": "kbFilterValue",
+                "methodName": "kbFilterValueChanged"
             }, {
                 "propName": "kbs",
                 "methodName": "kbsChanged"
             }];
     }
 }
-_GxIdeStartPage_recentKbsFilter = new WeakMap(), _GxIdeStartPage_kbsFilterValue = new WeakMap(), _GxIdeStartPage_kbRefs = 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();
+_GxIdeStartPage_componentLocale = new WeakMap(), _GxIdeStartPage_userLanguage = new WeakMap(), _GxIdeStartPage_createKBClickHandler = new WeakMap(), _GxIdeStartPage_openKbClickHandler = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_renderKbsSection = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_renderSecondarySection = new WeakMap(), _GxIdeStartPage_instances = new WeakSet(), _GxIdeStartPage_evaluateContentToRender = function _GxIdeStartPage_evaluateContentToRender() {
+    return this.kbs && this.kbs.length > 0
+        ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbsSection, "f").call(this)
+        : __classPrivateFieldGet(this, _GxIdeStartPage_renderSecondarySection, "f").call(this);
+};
 //# 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 { 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  \"chameleon/scrollbar\"\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  #kbRefs: { [key: string]: HTMLButtonElement | null } = {}; // Object to store kbs refs\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.currentTarget 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          ref={el => (this.#kbRefs[kb.id] = el as HTMLButtonElement)}\n          onClick={this.#openKbHandler}\n        >\n          <div class=\"card-kb__left-col\">\n            <ch-image\n              src={KB_ICON}\n              class=\"icon-md\"\n              containerRef={this.#kbRefs[kb.id]}\n            ></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 scrollable\">\n          {this.filteredKbs?.map(this.#renderKb)}\n        </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=\"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=\"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"]}
+{"version":3,"file":"start-page.js","sourceRoot":"","sources":["../../../src/components/start-page/start-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// Stencil\nimport { Component, Host, h, Prop, State, Element, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { formatDistanceToNow, Locale as LocaleDateFns } from \"date-fns\";\nimport { ja, zhCN, enUS } from \"date-fns/locale\";\n// import { enUS } from \"date-fns/locale\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n// Custom\nimport { Locale } from \"../../common/locale\";\n\n// const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English\n\nconst LANGS_DATE_FNS_MAP: LanguageMap = {\n  \"en\": enUS,\n  \"ja\": ja,\n  \"zh-CN\": zhCN,\n  \"zh-TW\": zhCN,\n  \"zh-HK\": zhCN\n};\n\nconst DETAIL_ICON = getIconPath({\n  category: \"system\",\n  name: \"detail\",\n  colorType: \"primary\"\n});\nconst FILTER_ICON = getIconPath({\n  category: \"window-tools\",\n  name: \"filter\",\n  colorType: \"on-elevation\"\n});\nconst KB_DEFAULT_ICON = getIconPath({\n  category: \"objects\",\n  name: \"knowledge-base\"\n});\nconst SEARCH_ICON = getIconPath({\n  category: \"system\",\n  name: \"search\",\n  colorType: \"on-elevation\"\n});\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  \"chameleon/scrollbar\",\n  \"utils/typography\"\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  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n  #userLanguage: LocaleDateFns;\n\n  @Element() el: HTMLGxIdeStartPageElement;\n\n  @State() kbFilterValue: string = \"\";\n  @Watch(\"kbFilterValue\")\n  kbFilterValueChanged(newKbFilterValue: string) {\n    this.filteredKbs = this.kbs.filter(kb =>\n      kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase())\n    );\n  }\n\n  /**\n   * The kbs after the filter value.\n   */\n  @State() filteredKbs: RecentKBData[];\n\n  /**\n   * True if the start page is waiting, either for the kb's list or the secondary section.\n   */\n  @State() loading: boolean = true;\n\n  /**\n   * Callback invoked to create a new KB. It must be specified whether this create is create from server or not, through the parameter 'fromServer'.\n   */\n  @Prop() readonly createKBCallback!: (fromServer: boolean) => Promise<void>;\n\n  /**\n   * Callback invoked to open a KB when the user clicks on a KB card.\n   */\n  @Prop() readonly openKbCallback!: (id: string) => Promise<void>;\n\n  /**\n   * The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs.\n   */\n  @Prop() readonly secondarySection?: SecondarySection;\n\n  /**\n   * User's kbs array\n   */\n  @Prop() readonly kbs: RecentKBData[];\n  @Watch(\"kbs\")\n  kbsChanged(newKbs: RecentKBData[]) {\n    this.filteredKbs = newKbs;\n    this.kbFilterValue = \"\"; // clear filter\n  }\n\n  /**\n   * The minimum required of kbs to display a filter.\n   */\n  @Prop() readonly kbsFilterThreshold: number;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    // initialize filteredKbs\n    this.kbsChanged(this.kbs);\n\n    // get user language to display the kb \"last opened\" value in the appropriate language.\n    const userLanguage: keyof LanguageMap = document.documentElement\n      .lang as keyof LanguageMap;\n    this.#userLanguage = LANGS_DATE_FNS_MAP[userLanguage];\n  }\n\n  #createKBClickHandler = (fromServer: boolean) => (event: MouseEvent) => {\n    event.stopPropagation();\n    this.createKBCallback(fromServer);\n  };\n\n  #openKbClickHandler = (kbId: string) => (event: MouseEvent) => {\n    event.stopPropagation();\n    this.openKbCallback(kbId);\n  };\n\n  #filterKbs = (event: ChEditCustomEvent<string> | InputEvent) => {\n    this.kbFilterValue = event.detail as string;\n  };\n\n  #renderKbsSection = () => {\n    const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;\n    const kbsListEmpty = this.filteredKbs.length === 0;\n    let contentToRender: HTMLGxgIdeLoaderElement | HTMLElement[];\n\n    // Evaluate what is the content to display.\n    if (this.filteredKbs.length > 0) {\n      contentToRender = this.#renderKbs();\n    } else {\n      // No kb has pass the filter. Display an empty-state.\n      contentToRender = (\n        <gx-ide-empty-state\n          isAnimated\n          stateIconSrc={FILTER_ICON}\n          stateTitle={this.#componentLocale.recentKBs.noMatches}\n        ></gx-ide-empty-state>\n      );\n    }\n\n    return (\n      <section class=\"section-kbs\">\n        <header\n          class={{\n            \"section-kbs__header\": true\n          }}\n        >\n          <h2 class=\"heading-3 section-kbs__title\">\n            {this.#componentLocale.recentKBs.title}\n          </h2>\n          <ch-edit\n            // Render always, and display or hide, ro prevent FOUC, and also prevent\n            // the header block-size from growing a little bit when the input renders.\n            value={this.kbFilterValue}\n            class={{\n              \"input\": true,\n              \"section-kbs__filter--hidden\": hideKbsFilter\n            }}\n            startImgSrc={SEARCH_ICON}\n            placeholder={this.#componentLocale.recentKBs.filterKbsPlaceholder}\n            onInput={!hideKbsFilter && this.#filterKbs}\n            disabled={hideKbsFilter}\n          ></ch-edit>\n        </header>\n\n        <div\n          class={{\n            \"section-kbs__list\": true,\n            \"section-kbs__list--empty\": kbsListEmpty,\n            \"scrollable\": true\n          }}\n        >\n          {this.filteredKbs.length > 0 ? this.#renderKbs() : contentToRender}\n        </div>\n      </section>\n    );\n  };\n\n  #renderKbs = (): HTMLElement[] => {\n    return this.filteredKbs?.map((kb, index) => {\n      // relative time ago\n\n      const relativeDate = kb.lastOpenedDate\n        ? formatDistanceToNow(new Date(kb.lastOpenedDate), {\n            addSuffix: true,\n            locale: this.#userLanguage\n          })\n        : undefined;\n\n      // icon\n      const kbIcon = kb.icon ?? KB_DEFAULT_ICON;\n\n      return (\n        <article class=\"kb__item\" key={index}>\n          <div class=\"kb__details\">\n            <ch-image class=\"icon-md\" src={kbIcon}></ch-image>\n            <p\n              class=\"text-body-regular-m kb__name\"\n              onClick={this.#openKbClickHandler(kb.id)}\n            >\n              {kb.name}\n            </p>\n          </div>\n          {relativeDate && (\n            <div class=\"text-body-regular-m kb__modified\">\n              {`${this.#componentLocale.recentKBs.opened} ${relativeDate}`}\n            </div>\n          )}\n        </article>\n      );\n    });\n  };\n\n  #evaluateContentToRender() {\n    return this.kbs && this.kbs.length > 0\n      ? this.#renderKbsSection()\n      : this.#renderSecondarySection();\n  }\n\n  #renderSecondarySection = (): HTMLElement | null => {\n    if (!this.secondarySection) {\n      return null;\n    }\n\n    const multipleCards = this.secondarySection.cards.length > 2;\n\n    return (\n      <section\n        // Recent Knowledge Bases\n        class=\"section-secondary\"\n      >\n        <header>\n          <h2 class=\"heading-3\">{this.secondarySection.title}</h2>\n        </header>\n\n        <section\n          class={{\n            \"section-secondary__actions\": true,\n            \"section-secondary__actions--two-cards\": !multipleCards,\n            \"section-secondary__actions--multiple-cards\": multipleCards,\n            \"scrollable\": true\n          }}\n        >\n          {this.secondarySection.cards.map((card, index) => {\n            return (\n              <article class=\"card card-outlined\" key={index}>\n                <header class=\"card__header\">\n                  <span class=\"icon-capsule\">\n                    <ch-image\n                      class=\"icon-md icon-circular\"\n                      src={card.icon.src}\n                      aria-label={card.icon.ariaLabel}\n                    ></ch-image>\n                  </span>\n                  <div class=\"card__header-description\">\n                    <h2 class=\"heading-3\">{card.title}</h2>\n                    {card.description.map(paragraph => (\n                      <p class=\"text-body-regular-m\">{paragraph}</p>\n                    ))}\n                  </div>\n                </header>\n                <footer class=\"card__footer\">\n                  {card.action && (\n                    <button\n                      class=\"button-tertiary button-icon-and-text\"\n                      onClick={card.action.callback && card.action.callback}\n                    >\n                      <ch-image class=\"icon-md\" src={DETAIL_ICON}></ch-image>\n                      {card.action.caption}\n                    </button>\n                  )}\n                </footer>\n              </article>\n            );\n          })}\n        </section>\n      </section>\n    );\n  };\n\n  render() {\n    this.loading =\n      (!this.kbs || this.kbs?.length === 0) && !this.secondarySection;\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <main\n          class={{\n            main: true\n          }}\n        >\n          <section\n            // Create a new Knowledge Base\n            class=\"section-create-new-kb\"\n          >\n            <header\n              // main header\n              class=\"section-create-new__header\"\n            >\n              <h1 class=\"heading-2\">{this.#componentLocale.createKB.title}</h1>\n              <p class=\"text-body-regular-m\">\n                {this.#componentLocale.createKB.description}\n              </p>\n            </header>\n\n            <section class=\"section-create-new-kb__actions scrollable\">\n              <article\n                // create project\n                class=\"card card-filled\"\n              >\n                <header class=\"card__header\">\n                  <div class=\"card__header-description\">\n                    <h2 class=\"heading-3\">\n                      {this.#componentLocale.createProject.title}\n                    </h2>\n                    <p class=\"text-body-regular-m\">\n                      {this.#componentLocale.createProject.description}\n                    </p>\n                  </div>\n                </header>\n                <footer class=\"card__footer\">\n                  <button\n                    class=\"button-primary\"\n                    onClick={this.#createKBClickHandler(false)}\n                  >\n                    {this.#componentLocale.createProject.buttonCaption}\n                  </button>\n                </footer>\n              </article>\n\n              <article\n                // open existing project\n                class=\"card-filled\"\n              >\n                <header class=\"card__header\">\n                  <div class=\"card__header-description\">\n                    <h2 class=\"heading-3\">\n                      {this.#componentLocale.openExistingProject.title}\n                    </h2>\n                    <p class=\"text-body-regular-m\">\n                      {this.#componentLocale.openExistingProject.description}\n                    </p>\n                  </div>\n                </header>\n                <footer class=\"card__footer\">\n                  <button\n                    class=\"button-secondary cancel-btn\"\n                    onClick={this.#createKBClickHandler(true)}\n                  >\n                    {this.#componentLocale.openExistingProject.buttonCaption}\n                  </button>\n                </footer>\n              </article>\n            </section>\n          </section>\n          <section class=\"section-secondary scrollable\">\n            {this.loading ? (\n              <gx-ide-loader\n                class=\"loader\"\n                loaderTitle={this.#componentLocale.recentKBs.loaderTitle}\n                description={this.#componentLocale.recentKBs.loaderDescription}\n                show\n              ></gx-ide-loader>\n            ) : (\n              this.#evaluateContentToRender()\n            )}\n          </section>\n        </main>\n      </Host>\n    );\n  }\n}\n\nexport type RecentKBData = {\n  id?: string;\n  name: string;\n  lastOpenedDate?: Date;\n  icon: string;\n};\n\nexport type SecondarySection = {\n  title: string;\n  cards: CardInfo[];\n};\n\nexport type CardInfo = {\n  icon?: {\n    src: string;\n    ariaLabel: string;\n  };\n  title: string;\n  description: string[];\n  action?: {\n    iconSrc: string;\n    caption: string;\n    callback?: () => void;\n  };\n};\n\ntype LanguageMap = {\n  \"en\": LocaleDateFns;\n  \"ja\": LocaleDateFns;\n  \"zh-CN\": LocaleDateFns;\n  \"zh-TW\": LocaleDateFns;\n  \"zh-HK\": LocaleDateFns;\n};\n"]}

package/dist/collection/components/welcome-page/gx-ide-assets/welcome-page/images/arrow-next.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="23" viewBox="0 0 15 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.52018 22.38L0.423828 22.3745L8.48838 11.2527L0.423828 0.122681H7.52018L14.9384 11.2527L7.52018 22.3827V22.38Z" fill="black"/>
+</svg>