npm - @genexus/genexus-ide-ui - Versions diffs - 1.1.47 → 1.1.49 - Mend

@genexus/genexus-ide-ui 1.1.47 → 1.1.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

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

@@ -4,37 +4,11 @@
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
 :host {
-  --common-spacing: var(--mer-spacing--lg);
-  --spacing-body-block-start: var(--common-spacing);
-  --spacing-body-block-end: var(--common-spacing);
-  --spacing-body-inline-start: var(--common-spacing);
-  --spacing-body-inline-end: 0;
-  --spacing-body-inline-start: 0;
   display: grid;
   block-size: 100%;
   overflow: auto;
 }
-:host(.spacing-body) .section-secondary,
-:host(.spacing-body) .section-create-new-kb__header,
-:host(.spacing-body) .section-create-new-kb__actions,
-:host(.spacing-body-inline) .section-secondary,
-:host(.spacing-body-inline) .section-create-new-kb__header,
-:host(.spacing-body-inline) .section-create-new-kb__actions {
-  padding-inline-start: var(--common-spacing);
-  padding-inline-end: var(--common-spacing);
-}
-:host(.spacing-body-inline-start) .section-secondary,
-:host(.spacing-body-inline-start) .section-create-new-kb__actions {
-  padding-inline-start: var(--common-spacing);
-}
-:host(.spacing-body-inline-end) .section-secondary,
-:host(.spacing-body-inline-end) .section-create-new-kb__actions {
-  padding-inline-end: var(--common-spacing);
-}
 .main {
   animation: fadeIn var(--mer-timing--fast) forwards;
   display: grid;
@@ -42,7 +16,8 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   overflow: auto;
   opacity: 0;
   grid-template-rows: max-content 1fr;
-  gap: var(--mer-spacing--lg);
+  gap: var(--mer-spacing--xl);
+  min-block-size: 635px;
 }
 @keyframes bounce {
@@ -73,21 +48,15 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 .card-filled,
 .card-outlined {
   display: grid;
-  gap: var(--mer-spacing--md);
+  gap: var(--mer-spacing--xl);
   align-content: space-between;
-  border-radius: var(--mer-border__radius--md);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--lg);
 }
 .card-filled {
   background-color: var(--mer-surface__elevation--01);
-  padding: var(--mer-spacing--md);
-}
-.card-outlined {
-  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);
-  grid-template-columns: max-content 1fr;
-  align-items: center;
-  padding: var(--mer-spacing--md) var(--mer-spacing--md) var(--mer-spacing--xs) var(--mer-spacing--md);
 }
 .icon-capsule {
@@ -100,20 +69,15 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   border-radius: 50%;
   border: var(--mer-border__width--sm) dashed var(--mer-border-color__on-elevation--02);
 }
-.icon-capsule .icon-circular {
-  --ch-image-size: 20px;
-}
 .card__header {
   display: grid;
   gap: var(--mer-spacing--sm);
-  justify-items: self-start;
 }
 .card__header-description {
   display: grid;
-  gap: var(--mer-spacing--xs);
-  --font-weight-regular: 300;
+  gap: var(--mer-spacing--2xs);
 }
 .section-create-new-kb {
@@ -123,22 +87,14 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 }
 .section-create-new-kb__header {
   display: grid;
-  gap: var(--mer-spacing--xs);
-}
-.section-create-new-kb__title {
-  color: var(--mer-text__bright);
-  font-weight: 500;
+  gap: var(--mer-spacing--2xs);
 }
 .section-create-new-kb__actions {
   display: grid;
   gap: var(--mer-spacing--md);
   overflow-x: auto;
   grid-auto-flow: column;
-  grid-auto-columns: 330px;
-}
-.samples-buttons-container {
-  flex-wrap: wrap;
+  grid-auto-columns: 430px;
 }
 .section-secondary {
@@ -147,20 +103,9 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   position: relative;
   overflow: auto;
 }
-.section-secondary__title {
-  display: grid;
-  grid-template-columns: 1fr max-content 1fr;
-  gap: var(--mer-spacing--md);
-  align-items: center;
-  font-weight: 300;
-}
-.section-secondary__title::before, .section-secondary__title::after {
-  content: "";
-  block-size: var(--mer-border__width--sm);
-  background-color: var(--mer-border-color__on-elevation--01);
-}
 .section-secondary__actions {
   display: grid;
+  gap: var(--mer-spacing--sm);
 }
 .section-secondary__actions--two-cards {
   grid-template-columns: repeat(2, minmax(430px, 1fr));
@@ -169,21 +114,11 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   grid-auto-columns: 670px;
 }
-.section-no-kbs {
-  display: grid;
-  block-size: 100%;
-  position: relative;
-  overflow: auto;
-  grid-template-rows: max-content max-content;
-  gap: var(--mer-spacing--md);
-}
 .section-kbs {
   background-color: var(--mer-surface__elevation--01);
   border-radius: var(--mer-border__radius--sm);
   padding: var(--mer-spacing--sm);
   display: grid;
-  container-type: inline-size;
   grid-template-rows: auto 1fr;
   overflow: hidden;
 }
@@ -192,7 +127,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   grid-template-columns: max-content 230px;
   align-items: center;
   gap: var(--mer-spacing--xl);
-  border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--03);
   padding-block-end: var(--mer-spacing--sm);
 }
 .section-kbs__header--no-border {
@@ -221,19 +156,13 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   grid-auto-rows: 1fr;
   overflow: hidden;
 }
-@container (max-width: 768px) {
-  .section-kbs__list {
-    grid-template-columns: 1fr;
-  }
-}
 .kb__item {
-  --font-weight-regular: 300;
   background-color: var(--mer-surface__elevation--02);
   padding: var(--mer-spacing--sm);
   display: grid;
-  grid-template-columns: auto max-content;
-  gap: var(--mer-spacing--3xl);
+  grid-template-columns: 284px 1fr;
+  gap: var(--mer-spacing--md);
 }
 .kb__details {
   display: grid;
@@ -247,7 +176,6 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   text-overflow: ellipsis;
   text-decoration: underline;
   cursor: pointer;
-  display: inline-block;
 }
 .kb__name:hover {
   color: var(--mer-text__bright);
@@ -256,8 +184,6 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  text-align: end;
-  font-variant-numeric: tabular-nums;
 }
 .hiChar {
@@ -284,17 +210,4 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 .card__footer {
   font-weight: var(--mer-font__weight--light) !important;
   --control__font-weight--regular: var(--mer-font__weight--light);
-}
-.card__header-description {
-  --line-height-tight: 1.7;
-  --font-weight-regular: 300;
-}
-.card__header-title {
-  color: var(--mer-text__bright);
-}
-.button-tertiary-no-padding-inline-start.button-tertiary {
-  padding-inline-start: 0;
 }

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

@@ -14,7 +14,7 @@ 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_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_renderSecondarySection;
+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
@@ -24,7 +24,6 @@ import { ja, zhCN, enUS } from "date-fns/locale";
 // Custom
 import { Locale } from "../../common/locale";
 // const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English
-import { formatDate } from "../../common/helpers";
 const LANGS_DATE_FNS_MAP = {
     "en": enUS,
     "ja": ja,
@@ -74,13 +73,13 @@ export class GxIdeStartPage {
             event.stopPropagation();
             this.createKBCallback(fromServer);
         });
-        _GxIdeStartPage_filterKbs.set(this, (event) => {
-            this.kbFilterValue = event.detail;
-        });
         _GxIdeStartPage_openKbClickHandler.set(this, (kbId) => (event) => {
             event.stopPropagation();
             this.openKbCallback(kbId);
         });
+        _GxIdeStartPage_filterKbs.set(this, (event) => {
+            this.kbFilterValue = event.detail;
+        });
         _GxIdeStartPage_renderKbsSection.set(this, () => {
             const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;
             const kbsListEmpty = this.filteredKbs.length === 0;
@@ -119,14 +118,9 @@ export class GxIdeStartPage {
                         locale: __classPrivateFieldGet(this, _GxIdeStartPage_userLanguage, "f")
                     })
                     : undefined;
-                // convert date to date format, since toISOString() requires date as Date.
-                const dateAsDate = kb.lastOpenedDate
-                    ? new Date(kb.lastOpenedDate)
-                    : undefined;
-                let dateFormated = formatDate(dateAsDate, "date-time-short");
                 // 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("button", { class: "body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("p", { class: "body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened}`, " ", h("time", { dateTime: dateFormated }, dateFormated)))));
+                return (h("article", { class: "kb__item", key: index }, h("div", { class: "kb__details" }, h("ch-image", { class: "icon-md", src: kbIcon }), h("p", { class: "body-regular-m kb__name", onClick: __classPrivateFieldGet(this, _GxIdeStartPage_openKbClickHandler, "f").call(this, kb.id) }, kb.name)), relativeDate && (h("div", { class: "body-regular-m kb__modified" }, `${__classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").recentKBs.opened} ${relativeDate}`))));
             });
         });
         _GxIdeStartPage_renderSecondarySection.set(this, () => {
@@ -136,26 +130,24 @@ export class GxIdeStartPage {
             const multipleCards = this.secondarySection.cards.length > 2;
             return (h("section", {
                 // Recent Knowledge Bases
-                class: "section-no-kbs"
-            }, h("header", null, h("h2", { class: "body-regular-s section-secondary__title" }, this.secondarySection.title)), h("section", { class: {
+                class: "section-secondary"
+            }, h("header", null, h("h2", { class: "subtitle-regular-s" }, 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("span", { class: "icon-capsule" }, h("ch-image", { class: "icon-md icon-circular", src: card.icon.src, "aria-label": card.icon.ariaLabel })), h("header", { class: "card__header" }, h("h2", { class: "subtitle-semi-bold-xs card__header-title" }, card.title), card.description.map(paragraph => (h("p", { class: "body-regular-s card__header-description" }, paragraph))), card.action && (h("button", { class: "button-tertiary button-icon-and-text button-tertiary-no-padding-inline-start", onClick: card.action.callback && card.action.callback }, h("ch-image", { class: "icon-md", src: DETAIL_ICON }), card.action.caption)))));
+                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: "subtitle-regular-s" }, card.title), card.description.map(paragraph => (h("p", { class: "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.filteredKbs = undefined;
         this.kbFilterValue = "";
+        this.filteredKbs = undefined;
         this.loading = true;
         this.createKBCallback = undefined;
-        this.kbs = undefined;
-        this.kbsFilterThreshold = undefined;
         this.openKbCallback = undefined;
-        this.openSampleCallback = undefined;
-        this.samples = undefined;
         this.secondarySection = undefined;
+        this.kbs = undefined;
+        this.kbsFilterThreshold = undefined;
     }
     kbFilterValueChanged(newKbFilterValue) {
         this.filteredKbs = this.kbs.filter(kb => kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase()));
@@ -174,33 +166,22 @@ export class GxIdeStartPage {
         __classPrivateFieldSet(this, _GxIdeStartPage_userLanguage, LANGS_DATE_FNS_MAP[userLanguage], "f");
     }
     render() {
-        var _a, _b;
+        var _a;
         this.loading =
             (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
-        const renderCreateProjectCard = this.createKBCallback;
-        const renderOpenProjectCard = this.openKbCallback;
-        const renderViewSamplesCard = ((_b = this.samples) === null || _b === void 0 ? void 0 : _b.length) && this.openSampleCallback;
-        const renderCardsContainer = renderCreateProjectCard || renderOpenProjectCard || renderViewSamplesCard;
-        return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
+        return (h(Host, { class: "widget scrollable spacing-body" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
             // Create a new Knowledge Base
             class: "section-create-new-kb"
         }, h("header", {
             // main header
-            class: "section-create-new-kb__header"
-        }, h("h1", { class: "heading-5 section-create-new-kb__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), renderCardsContainer && (h("section", { class: "section-create-new-kb__actions scrollable" }, renderCreateProjectCard && (h("article", {
+            class: "section-create-new__header"
+        }, h("h1", { class: "heading-4" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "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: "subtitle-semi-bold-xs card__header-title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "body-regular-s" }, __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)))), renderOpenProjectCard && (h("article", {
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createProject.title), h("p", { class: "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: "subtitle-semi-bold-xs" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "body-regular-s" }, __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)))), renderViewSamplesCard ? (h("article", {
-            // view samples
-            class: "card-filled"
-        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-semi-bold-xs" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.title), h("p", { class: "body-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.description))), h("footer", { class: "card__footer" }, h("div", { class: "buttons-spacer samples-buttons-container" }, this.samples.map(sample => {
-            return (h("button", { class: "button-secondary", onClick: () => this.openSampleCallback(sample) }, sample.name));
-        }))))) : null))), 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))))));
+        }, h("header", { class: "card__header" }, h("div", { class: "card__header-description" }, h("h2", { class: "subtitle-regular-s" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").openExistingProject.title), h("p", { class: "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"; }
@@ -237,44 +218,6 @@ export class GxIdeStartPage {
                     "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": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "RecentKBData[]",
-                    "resolved": "RecentKBData[]",
-                    "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"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "User's kbs array"
-                }
-            },
-            "kbsFilterThreshold": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The minimum required of kbs to display a filter."
-                },
-                "attribute": "kbs-filter-threshold",
-                "reflect": false
-            },
             "openKbCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -295,79 +238,71 @@ export class GxIdeStartPage {
                     "text": "Callback invoked to open a KB when the user clicks on a KB card."
                 }
             },
-            "openSampleCallback": {
+            "secondarySection": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(sample: SampleData) => Promise<void>",
-                    "resolved": "(sample: SampleData) => Promise<void>",
+                    "original": "SecondarySection",
+                    "resolved": "{ title: string; cards: CardInfo[]; }",
                     "references": {
-                        "SampleData": {
+                        "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::SampleData"
-                        },
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
+                            "id": "src/components/start-page/start-page.tsx::SecondarySection"
                         }
                     }
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Callback invoked when the user clicks a button to open a sample."
+                    "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."
                 }
             },
-            "samples": {
+            "kbs": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SampleData[]",
-                    "resolved": "SampleData[]",
+                    "original": "RecentKBData[]",
+                    "resolved": "RecentKBData[]",
                     "references": {
-                        "SampleData": {
+                        "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::SampleData"
+                            "id": "src/components/start-page/start-page.tsx::RecentKBData"
                         }
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "List of samples available to be displayed in the samples card."
+                    "text": "User's kbs array"
                 }
             },
-            "secondarySection": {
-                "type": "unknown",
+            "kbsFilterThreshold": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "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"
-                        }
-                    }
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "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."
-                }
+                    "text": "The minimum required of kbs to display a filter."
+                },
+                "attribute": "kbs-filter-threshold",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "filteredKbs": {},
             "kbFilterValue": {},
+            "filteredKbs": {},
             "loading": {}
         };
     }
@@ -382,7 +317,7 @@ export class GxIdeStartPage {
             }];
     }
 }
-_GxIdeStartPage_componentLocale = new WeakMap(), _GxIdeStartPage_userLanguage = new WeakMap(), _GxIdeStartPage_createKBClickHandler = new WeakMap(), _GxIdeStartPage_filterKbs = new WeakMap(), _GxIdeStartPage_openKbClickHandler = new WeakMap(), _GxIdeStartPage_renderKbsSection = new WeakMap(), _GxIdeStartPage_renderKbs = new WeakMap(), _GxIdeStartPage_renderSecondarySection = new WeakMap(), _GxIdeStartPage_instances = new WeakSet(), _GxIdeStartPage_evaluateContentToRender = function _GxIdeStartPage_evaluateContentToRender() {
+_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);

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

	@@ -1 +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\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\nimport { formatDate } from \"../../common/helpers\";\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 /\n The kbs after the filter value.\n /\n @State() filteredKbs: RecentKBData[];\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 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 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 /\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 Callback invoked when the user clicks a button to open a sample.\n /\n @Prop() readonly openSampleCallback!: (sample: SampleData) => Promise<void>;\n\n /\n List of samples available to be displayed in the samples card.\n /\n @Prop() readonly samples?: SampleData[];\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 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 #filterKbs = (event: ChEditCustomEvent<string> \| InputEvent) => {\n this.kbFilterValue = event.detail as string;\n };\n\n #openKbClickHandler = (kbId: string) => (event: MouseEvent) => {\n event.stopPropagation();\n this.openKbCallback(kbId);\n };\n\n // renders\n\n #evaluateContentToRender() {\n return this.kbs && this.kbs.length > 0\n ? this.#renderKbsSection()\n : this.#renderSecondarySection();\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 <label\n class=\"subtitle-regular-s section-kbs__title\"\n htmlFor=\"filter-kbs\"\n >\n {this.#componentLocale.recentKBs.title}\n </label>\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 id=\"filter-kbs\"\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 // convert date to date format, since toISOString() requires date as Date.\n const dateAsDate = kb.lastOpenedDate\n ? new Date(kb.lastOpenedDate)\n : undefined;\n\n let dateFormated = formatDate(dateAsDate, \"date-time-short\");\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 <button\n class=\"body-regular-m kb__name\"\n onClick={this.#openKbClickHandler(kb.id)}\n >\n {kb.name}\n </button>\n </div>\n {relativeDate && (\n <p class=\"body-regular-m kb__modified\">\n {`${this.#componentLocale.recentKBs.opened}`}{\" \"}\n <time dateTime={dateFormated}>{dateFormated}</time>\n </p>\n )}\n </article>\n );\n });\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-no-kbs\"\n >\n <header>\n <h2 class=\"body-regular-s section-secondary__title\">\n {this.secondarySection.title}\n </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 <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 <header class=\"card__header\">\n <h2 class=\"subtitle-semi-bold-xs card__header-title\">\n {card.title}\n </h2>\n {card.description.map(paragraph => (\n <p class=\"body-regular-s card__header-description\">\n {paragraph}\n </p>\n ))}\n {card.action && (\n <button\n class=\"button-tertiary button-icon-and-text button-tertiary-no-padding-inline-start\"\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 </header>\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\n const renderCreateProjectCard = this.createKBCallback;\n const renderOpenProjectCard = this.openKbCallback;\n const renderViewSamplesCard =\n this.samples?.length && this.openSampleCallback;\n const renderCardsContainer =\n renderCreateProjectCard \|\| renderOpenProjectCard \|\| renderViewSamplesCard;\n\n return (\n <Host class=\"scrollable\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <main class=\"main scrollable\">\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-kb__header\"\n >\n <h1 class=\"heading-5 section-create-new-kb__title\">\n {this.#componentLocale.createKB.title}\n </h1>\n <p class=\"body-regular-m\">\n {this.#componentLocale.createKB.description}\n </p>\n </header>\n\n {renderCardsContainer && (\n <section class=\"section-create-new-kb__actions scrollable\">\n {renderCreateProjectCard && (\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=\"subtitle-semi-bold-xs card__header-title\">\n {this.#componentLocale.createProject.title}\n </h2>\n <p class=\"body-regular-s\">\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\n {renderOpenProjectCard && (\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=\"subtitle-semi-bold-xs\">\n {this.#componentLocale.openExistingProject.title}\n </h2>\n <p class=\"body-regular-s\">\n {\n this.#componentLocale.openExistingProject\n .description\n }\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 {\n this.#componentLocale.openExistingProject\n .buttonCaption\n }\n </button>\n </footer>\n </article>\n )}\n\n {renderViewSamplesCard ? (\n <article\n // view samples\n class=\"card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"subtitle-semi-bold-xs\">\n {this.#componentLocale.viewSamples.title}\n </h2>\n <p class=\"body-regular-s\">\n {this.#componentLocale.viewSamples.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <div class=\"buttons-spacer samples-buttons-container\">\n {this.samples.map(sample => {\n return (\n <button\n class=\"button-secondary\"\n onClick={() => this.openSampleCallback(sample)}\n >\n {sample.name}\n </button>\n );\n })}\n </div>\n </footer>\n </article>\n ) : null}\n </section>\n )}\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 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\nexport type RecentKBData = {\n id?: string;\n name: string;\n lastOpenedDate?: Date;\n icon: string;\n};\n\nexport type SampleData = {\n name: string;\n serverUrl: string;\n kbName: string;\n};\n\nexport type SecondarySection = {\n title: string;\n cards: CardInfo[];\n};\n"]}
1	+ {"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 <label\n class=\"subtitle-regular-s section-kbs__title\"\n htmlFor=\"filter-kbs\"\n >\n {this.#componentLocale.recentKBs.title}\n </label>\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 id=\"filter-kbs\"\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=\"body-regular-m kb__name\"\n onClick={this.#openKbClickHandler(kb.id)}\n >\n {kb.name}\n </p>\n </div>\n {relativeDate && (\n <div class=\"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=\"subtitle-regular-s\">{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=\"subtitle-regular-s\">{card.title}</h2>\n {card.description.map(paragraph => (\n <p class=\"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 class=\"widget scrollable spacing-body\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <main class=\"main scrollable\">\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-4\">{this.#componentLocale.createKB.title}</h1>\n <p class=\"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=\"subtitle-regular-s\">\n {this.#componentLocale.createProject.title}\n </h2>\n <p class=\"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=\"subtitle-regular-s\">\n {this.#componentLocale.openExistingProject.title}\n </h2>\n <p class=\"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"]}