@genexus/genexus-ide-ui 1.1.49 → 1.1.50

package/dist/components/gx-ide-start-page.js

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getIconPath } from './MERCURY_ASSETS.js';
 import { L as Locale } from './locale.js';
+import { f as formatDate } from './helpers.js';
 import { d as defineCustomElement$3 } from './gx-ide-empty-state2.js';
 import { d as defineCustomElement$2 } from './ide-loader.js';
 
@@ -2502,7 +2503,7 @@ const zhCN = {
   },
 };
 
-const startPageCss = ":host{display:grid;block-size:100%;overflow:auto}.main{animation:fadeIn var(--mer-timing--fast) forwards;display:grid;block-size:100%;overflow:auto;opacity:0;grid-template-rows:max-content 1fr;gap:var(--mer-spacing--xl);min-block-size:635px}@keyframes bounce{0%{transform:translateY(0)}100%{transform:translateY(-30px)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.section-create-new-kb__actions,.section-secondary__actions{display:grid;grid-auto-flow:column;gap:var(--mer-spacing--md);overflow-x:auto;padding-block-end:var(--mer-spacing--xs)}.card-filled,.card-outlined{display:grid;gap:var(--mer-spacing--xl);align-content:space-between;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)}.icon-capsule{pointer-events:none;display:inline-flex;block-size:40px;inline-size:40px;justify-content:center;align-items:center;border-radius:50%;border:var(--mer-border__width--sm) dashed var(--mer-border-color__on-elevation--02)}.card__header{display:grid;gap:var(--mer-spacing--sm)}.card__header-description{display:grid;gap:var(--mer-spacing--2xs)}.section-create-new-kb{display:grid;grid-auto-rows:max-content;gap:var(--mer-spacing--lg)}.section-create-new-kb__header{display:grid;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:430px}.section-secondary{display:grid;block-size:100%;position:relative;overflow:auto}.section-secondary__actions{display:grid;gap:var(--mer-spacing--sm)}.section-secondary__actions--two-cards{grid-template-columns:repeat(2, minmax(430px, 1fr))}.section-secondary__actions--multiple-cards{grid-auto-columns:670px}.section-kbs{background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm);display:grid;grid-template-rows:auto 1fr;overflow:hidden}.section-kbs__header{display:grid;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--03);padding-block-end:var(--mer-spacing--sm)}.section-kbs__header--no-border{border-block-end-color:transparent !important}.section-kbs__title{align-items:center;display:flex;min-block-size:31px}.section-kbs__filter--hidden{opacity:0}.section-kbs__list{display:grid;grid-auto-rows:max-content;grid-template-columns:1fr 1fr;row-gap:var(--mer-spacing--xs);column-gap:var(--mer-spacing--md);overflow:auto;position:relative;padding-block-start:var(--mer-spacing--sm)}.section-kbs__list--empty{grid-template-columns:1fr;grid-auto-rows:1fr;overflow:hidden}.kb__item{background-color:var(--mer-surface__elevation--02);padding:var(--mer-spacing--sm);display:grid;grid-template-columns:284px 1fr;gap:var(--mer-spacing--md)}.kb__details{display:grid;grid-template-columns:max-content 1fr;align-items:center;gap:var(--mer-spacing--sm)}.kb__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-decoration:underline;cursor:pointer}.kb__name:hover{color:var(--mer-text__bright)}.kb__modified{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hiChar{color:var(--mer-color__primary--200);filter:brightness(1.3)}.loader{border:var(--mer-border__width--sm) solid var(--mer-border-color__on-surface)}.heading-2,.heading-3{margin:0;font-weight:600 !important;color:#ffffff !important}.card-filled .heading-3{color:var(--mer-text__on-surface) !important}.text-body-regular-m,.card__footer{font-weight:var(--mer-font__weight--light) !important;--control__font-weight--regular:var(--mer-font__weight--light)}";
+const startPageCss = "/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound 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.\n*/\n:host {\n  --common-spacing: var(--mer-spacing--lg);\n  --spacing-body-block-start: var(--common-spacing);\n  --spacing-body-block-end: var(--common-spacing);\n  --spacing-body-inline-start: var(--common-spacing);\n  --spacing-body-inline-end: 0;\n  --spacing-body-inline-start: 0;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n}\n\n:host(.spacing-body) .section-secondary,\n:host(.spacing-body) .section-create-new-kb__header,\n:host(.spacing-body) .section-create-new-kb__actions,\n:host(.spacing-body-inline) .section-secondary,\n:host(.spacing-body-inline) .section-create-new-kb__header,\n:host(.spacing-body-inline) .section-create-new-kb__actions {\n  padding-inline-start: var(--common-spacing);\n  padding-inline-end: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-start) .section-secondary,\n:host(.spacing-body-inline-start) .section-create-new-kb__actions {\n  padding-inline-start: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-end) .section-secondary,\n:host(.spacing-body-inline-end) .section-create-new-kb__actions {\n  padding-inline-end: var(--common-spacing);\n}\n\n.main {\n  animation: fadeIn var(--mer-timing--fast) forwards;\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  opacity: 0;\n  grid-template-rows: max-content 1fr;\n  gap: var(--mer-spacing--lg);\n}\n\n@keyframes bounce {\n  0% {\n    transform: translateY(0);\n  }\n  100% {\n    transform: translateY(-30px);\n  }\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.section-create-new-kb__actions,\n.section-secondary__actions {\n  display: grid;\n  grid-auto-flow: column;\n  gap: var(--mer-spacing--md);\n  overflow-x: auto;\n  padding-block-end: var(--mer-spacing--xs);\n}\n\n.card-filled,\n.card-outlined {\n  display: grid;\n  gap: var(--mer-spacing--md);\n  align-content: space-between;\n  border-radius: var(--mer-border__radius--md);\n}\n\n.card-filled {\n  background-color: var(--mer-surface__elevation--01);\n  padding: var(--mer-spacing--md);\n}\n\n.card-outlined {\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);\n  grid-template-columns: max-content 1fr;\n  align-items: center;\n  padding: var(--mer-spacing--md) var(--mer-spacing--md) var(--mer-spacing--xs) var(--mer-spacing--md);\n}\n\n.icon-capsule {\n  pointer-events: none;\n  display: inline-flex;\n  block-size: 40px;\n  inline-size: 40px;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  border: var(--mer-border__width--sm) dashed var(--mer-border-color__on-elevation--02);\n}\n.icon-capsule .icon-circular {\n  --ch-image-size: 20px;\n}\n\n.card__header {\n  display: grid;\n  gap: var(--mer-spacing--sm);\n  justify-items: self-start;\n}\n\n.card__header-description {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n  --font-weight-regular: 300;\n}\n\n.section-create-new-kb {\n  display: grid;\n  grid-auto-rows: max-content;\n  gap: var(--mer-spacing--lg);\n}\n.section-create-new-kb__header {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n}\n.section-create-new-kb__title {\n  color: var(--mer-text__bright);\n  font-weight: 500;\n}\n.section-create-new-kb__actions {\n  display: grid;\n  gap: var(--mer-spacing--md);\n  overflow-x: auto;\n  grid-auto-flow: column;\n  grid-auto-columns: 330px;\n}\n\n.samples-buttons-container {\n  flex-wrap: wrap;\n}\n\n.section-secondary {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n  overflow: auto;\n}\n.section-secondary__title {\n  display: grid;\n  grid-template-columns: 1fr max-content 1fr;\n  gap: var(--mer-spacing--md);\n  align-items: center;\n  font-weight: 300;\n}\n.section-secondary__title::before, .section-secondary__title::after {\n  content: \"\";\n  block-size: var(--mer-border__width--sm);\n  background-color: var(--mer-border-color__on-elevation--01);\n}\n.section-secondary__actions {\n  display: grid;\n}\n.section-secondary__actions--two-cards {\n  grid-template-columns: repeat(2, minmax(430px, 1fr));\n}\n.section-secondary__actions--multiple-cards {\n  grid-auto-columns: 670px;\n}\n\n.section-no-kbs {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n  overflow: auto;\n  grid-template-rows: max-content max-content;\n  gap: var(--mer-spacing--md);\n}\n\n.section-kbs {\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-border__radius--sm);\n  padding: var(--mer-spacing--sm);\n  display: grid;\n  container-type: inline-size;\n  grid-template-rows: auto 1fr;\n  overflow: hidden;\n}\n.section-kbs__header {\n  display: grid;\n  grid-template-columns: max-content 230px;\n  align-items: center;\n  gap: var(--mer-spacing--xl);\n  border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n  padding-block-end: var(--mer-spacing--sm);\n}\n.section-kbs__header--no-border {\n  border-block-end-color: transparent !important;\n}\n.section-kbs__title {\n  align-items: center;\n  display: flex;\n  min-block-size: 31px;\n}\n.section-kbs__filter--hidden {\n  opacity: 0;\n}\n.section-kbs__list {\n  display: grid;\n  grid-auto-rows: max-content;\n  grid-template-columns: 1fr 1fr;\n  row-gap: var(--mer-spacing--xs);\n  column-gap: var(--mer-spacing--md);\n  overflow: auto;\n  position: relative;\n  padding-block-start: var(--mer-spacing--sm);\n}\n.section-kbs__list--empty {\n  grid-template-columns: 1fr;\n  grid-auto-rows: 1fr;\n  overflow: hidden;\n}\n@container (max-width: 768px) {\n  .section-kbs__list {\n    grid-template-columns: 1fr;\n  }\n}\n\n.kb__item {\n  --font-weight-regular: 300;\n  background-color: var(--mer-surface__elevation--02);\n  padding: var(--mer-spacing--sm);\n  display: grid;\n  grid-template-columns: auto max-content;\n  gap: var(--mer-spacing--3xl);\n}\n.kb__details {\n  display: grid;\n  grid-template-columns: max-content 1fr;\n  align-items: center;\n  gap: var(--mer-spacing--sm);\n}\n.kb__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-decoration: underline;\n  cursor: pointer;\n  display: inline-block;\n}\n.kb__name:hover {\n  color: var(--mer-text__bright);\n}\n.kb__modified {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n.hiChar {\n  color: var(--mer-color__primary--200);\n  filter: brightness(1.3);\n}\n\n.loader {\n  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);\n}\n\n.heading-2,\n.heading-3 {\n  margin: 0;\n  font-weight: 600 !important;\n  color: #ffffff !important;\n}\n\n.card-filled .heading-3 {\n  color: var(--mer-text__on-surface) !important;\n}\n\n.text-body-regular-m,\n.card__footer {\n  font-weight: var(--mer-font__weight--light) !important;\n  --control__font-weight--regular: var(--mer-font__weight--light);\n}\n\n.card__header-description {\n  --line-height-tight: 1.7;\n  --font-weight-regular: 300;\n}\n\n.card__header-title {\n  color: var(--mer-text__bright);\n}\n\n.button-tertiary-no-padding-inline-start.button-tertiary {\n  padding-inline-start: 0;\n}";
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -2520,8 +2521,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
         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_openKbClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderSecondarySection;
-// const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English
+var _GxIdeStartPage_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_renderSecondarySection;
 const LANGS_DATE_FNS_MAP = {
     "en": enUS,
     "ja": ja,
@@ -2548,6 +2548,7 @@ const SEARCH_ICON = getIconPath({
     name: "search",
     colorType: "on-elevation"
 });
+const PROJECT_NAME_PLACEHOLDER = "[projectName]";
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/typography",
@@ -2574,13 +2575,13 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
             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;
@@ -2619,9 +2620,14 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
                         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("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}`))));
+                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)))));
             });
         });
         _GxIdeStartPage_renderSecondarySection.set(this, () => {
@@ -2631,24 +2637,26 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
             const multipleCards = this.secondarySection.cards.length > 2;
             return (h("section", {
                 // Recent Knowledge Bases
-                class: "section-secondary"
-            }, h("header", null, h("h2", { class: "subtitle-regular-s" }, this.secondarySection.title)), h("section", { class: {
+                class: "section-no-kbs"
+            }, h("header", null, h("h2", { class: "body-regular-s section-secondary__title" }, 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: "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)))));
+                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)))));
             }))));
         });
-        this.kbFilterValue = "";
         this.filteredKbs = undefined;
+        this.kbFilterValue = "";
         this.loading = true;
         this.createKBCallback = undefined;
-        this.openKbCallback = undefined;
-        this.secondarySection = undefined;
         this.kbs = undefined;
         this.kbsFilterThreshold = undefined;
+        this.openKbCallback = undefined;
+        this.openSampleCallback = undefined;
+        this.samples = undefined;
+        this.secondarySection = undefined;
     }
     kbFilterValueChanged(newKbFilterValue) {
         this.filteredKbs = this.kbs.filter(kb => kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase()));
@@ -2667,22 +2675,33 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
         __classPrivateFieldSet(this, _GxIdeStartPage_userLanguage, LANGS_DATE_FNS_MAP[userLanguage], "f");
     }
     render() {
-        var _a;
+        var _a, _b;
         this.loading =
             (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
-        return (h(Host, { class: "widget scrollable spacing-body" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
+        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", {
             // Create a new Knowledge Base
             class: "section-create-new-kb"
         }, h("header", {
             // main header
-            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", {
+            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", {
             // create project
             class: "card card-filled"
-        }, 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", {
+        }, 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", {
             // open existing project
             class: "card-filled"
-        }, 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))))));
+        }, 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.id) }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").viewSamples.open.replace(PROJECT_NAME_PLACEHOLDER, 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))))));
     }
     static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
     get el() { return this; }
@@ -2693,18 +2712,20 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
     static get style() { return startPageCss; }
 }, [1, "gx-ide-start-page", {
         "createKBCallback": [16],
-        "openKbCallback": [16],
-        "secondarySection": [16],
         "kbs": [16],
         "kbsFilterThreshold": [2, "kbs-filter-threshold"],
-        "kbFilterValue": [32],
+        "openKbCallback": [16],
+        "openSampleCallback": [16],
+        "samples": [16],
+        "secondarySection": [16],
         "filteredKbs": [32],
+        "kbFilterValue": [32],
         "loading": [32]
     }, undefined, {
         "kbFilterValue": ["kbFilterValueChanged"],
         "kbs": ["kbsChanged"]
     }]);
-_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() {
+_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() {
     return this.kbs && this.kbs.length > 0
         ? __classPrivateFieldGet(this, _GxIdeStartPage_renderKbsSection, "f").call(this)
         : __classPrivateFieldGet(this, _GxIdeStartPage_renderSecondarySection, "f").call(this);