@genexus/genexus-ide-ui 1.1.43 → 1.1.44

package/dist/collection/common/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/common/helpers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from \"@stencil/core\";\n\nimport {\n  ChCheckboxCustomEvent,\n  ComboBoxModel,\n  TreeViewItemModel\n} from \"@genexus/chameleon-controls-library\";\nexport type ChCheckboxArray = HTMLChCheckboxElement[] | null;\n\nimport { GxOption } from \"./types\";\n\nconst daysOfWeek = [\n  \"Sunday\",\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\"\n];\n\n/**\n * @param element an HTMLElement\n * @returns an alphabetically ordered array of all the parts and exportparts the element contains.\n */\nexport const getElementSelectorParts = (element: HTMLElement) => {\n  const queries: string[] = [];\n  const elementParts = element.shadowRoot?.querySelectorAll(`[part]`);\n  const elementExportParts =\n    element.shadowRoot?.querySelectorAll(`[exportparts]`);\n\n  elementParts?.forEach(el => {\n    queries.push(\n      `${element.tagName.toLowerCase()}::part(${el.getAttribute(\"part\")})`\n    );\n  });\n  elementExportParts?.forEach(el => {\n    queries.push(\n      ...[\n        ...el.getAttribute(\"exportparts\").matchAll(/(?:[\\w-]+:)?([\\w-]+)/g)\n      ].map(item => `${element.tagName.toLowerCase()}::part(${item[1]})`)\n    );\n  });\n\n  return queries.sort();\n};\n\n/**\n * @param selector a part selector\n * @returns A reference to the element the part belongs to.\n */\nexport const querySelectorPart = (selector: string) => {\n  const querySelectorDeep = (\n    element: HTMLElement,\n    parts: string\n  ): HTMLElement => {\n    const shadow = element.shadowRoot;\n    const partList = parts.split(\" \");\n\n    const partElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[part~=\"${partName}\"]`).join(\"\")\n    );\n    if (partElement) {\n      return partElement;\n    }\n\n    const exportPartElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[exportparts*=\"${partName}\"]`).join(\"\")\n    );\n    if (exportPartElement) {\n      const exportPartList: string[] = [];\n      const exportparts = exportPartElement.getAttribute(\"exportparts\");\n\n      partList.forEach(partItem => {\n        const exportPartName = exportparts.match(\n          `(?:([\\\\w-]+):)?(${partItem})`\n        )[1];\n        if (exportPartName) {\n          exportPartList.push(exportPartName);\n        }\n      });\n\n      if (partList.length === exportPartList.length) {\n        return querySelectorDeep(exportPartElement, exportPartList.join(\" \"));\n      }\n    }\n\n    return null;\n  };\n\n  const selectorItems = selector.match(\"(.*)::part\\\\(([^)]+)\\\\)\");\n  const entity = selectorItems[1];\n  const partName = selectorItems[2];\n\n  return querySelectorDeep(document.querySelector(entity), partName);\n};\n\nconst daysFromToday = (date: Date): number => {\n  const today = new Date();\n  // To calculate the time difference of two dates\n  const timeDifference = today.getTime() - date.getTime();\n  // To calculate the no. of days between two dates\n  const daysDifference = timeDifference / (1000 * 3600 * 24);\n  return Math.floor(daysDifference);\n};\n\n// - - - - - - - - - - - -\n// Date Functions\n// - - - - - - - - - - - -\n\nconst isToday = (date: Date): boolean => {\n  const today = new Date();\n  if (today.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nconst isYesterday = (date: Date): boolean => {\n  const yesterday = new Date();\n  yesterday.setDate(yesterday.getDate() - 1);\n  if (yesterday.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nexport const formatDate = (\n  date: Date,\n  type: FormatDateType = \"date-time\"\n): string => {\n  let formattedDate;\n  // validate date\n  // undefined or null\n  if (date === undefined || date === null) {\n    return \"\";\n  }\n  // If the date object is invalid it will return 'NaN' on getTime() and NaN is never equal to itself\n  const dateIsValid = date.getTime() === date.getTime();\n  if (!dateIsValid) {\n    return \"Invalid date\";\n  }\n  let locale = \"en-US\";\n  const lang = document\n    .getElementsByTagName(\"html\")[0]\n    .getAttribute(\"lang\")\n    ?.valueOf();\n  if (lang === \"es\") {\n    locale = \"es-ES\";\n  }\n  formattedDate = date.toLocaleDateString(locale);\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  const hours = String(date.getHours()).padStart(2, \"0\");\n  const minutes = String(date.getMinutes()).padStart(2, \"0\");\n  const time = `${hours}:${minutes}`;\n  if (type === \"date-time\") {\n    formattedDate += `  ${date.toLocaleTimeString()}`;\n  } else if (type === \"date-time-short\") {\n    // No seconds\n    if (locale === \"es-ES\") {\n      formattedDate = `${year}-${month}-${day} ${time}`;\n    } else {\n      formattedDate = `${month}/${day}/${year} ${time}`;\n    }\n  } else if (\"pretty\") {\n    const daysPassedFromToday = daysFromToday(date);\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    if (isToday(date)) {\n      return `Today ${time}`;\n    } else if (isYesterday(date)) {\n      return `Yesterday ${time}`;\n    } else if (daysPassedFromToday <= 7) {\n      // If one week or less, just show the day of the week, and the time\n      const day = daysOfWeek[date.getDay()];\n      return `${day} ${time}`;\n    } else if (currentYear === year) {\n      // If current year, show day number and month name. Example: November 17th\n      if (locale === \"es-ES\") {\n        formattedDate = `${day} de ${date.toLocaleString(\"es-ES\", {\n          month: \"long\"\n        })} ${time}`;\n      } else {\n        formattedDate = `${date.toLocaleString(\"en-US\", {\n          month: \"long\"\n        })} ${day} ${time}`;\n      }\n    } else {\n      // Display date as usual\n      formattedDate = formatDate(date, \"date-time-short\");\n    }\n  }\n  return formattedDate;\n};\n\nexport type FormatDateType =\n  | \"date\"\n  | \"date-time\"\n  | \"date-time-short\"\n  | \"pretty\";\n\n// - - - - - - - - - - - -\n// /End of Date Functions\n// - - - - - - - - - - - -\n\n/* Count the total tree nodes (by default it does not count the first level nodes)*/\nexport const countTreeItems = (\n  treeModel: TreeViewItemModel[],\n  children = false\n): number => {\n  let totalNodes = 0;\n  treeModel.forEach(node => {\n    children && totalNodes++;\n    if (node.items) {\n      totalNodes += countTreeItems(node.items, true);\n    }\n  });\n  return totalNodes;\n};\n\n/**\n * @description it evaluates the initial selected combo item\n * @param options an array of GxOption\n * @returns the initial combo value, which in this case is the id\n */\nexport const setInitialComboValue = (options: GxOption[]): string => {\n  const selected = options.find(option => option.selected);\n  if (selected) {\n    return selected.value || selected.id;\n  } else {\n    return options[0].value || options[0].id;\n  }\n};\n\nexport const escapeRegExp = (str: string) => {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * @description this function highlights the character(s) that match(es) the filter value.\n * hiChar comes from (hi)light (Char)acters\n * @param text the string to find the filter value on\n * @param filterValue the filter value\n * @returns a span element\n */\nexport const hiChar = function (text: string, filterValue: string) {\n  if (text && filterValue) {\n    const escapedFilterValue = escapeRegExp(filterValue);\n    const re = new RegExp(escapedFilterValue, \"gi\");\n    return (\n      <span\n        innerHTML={text.replace(re, '<span class=\"hiChar\">$&</span>')}\n      ></span>\n    );\n  } else {\n    return text;\n  }\n};\n\nexport const closeOnOutsideClickHandler = (\n  eventInfo: PointerEvent,\n  ref: HTMLElement\n): true | void => {\n  if (!eventInfo.composedPath().includes(ref)) {\n    return true;\n  }\n};\n\nexport const mapOptionsToComboBoxItemModel = (\n  options: GxOption[]\n): ComboBoxModel =>\n  options.map(option => ({\n    value: option.id,\n    caption: option.label\n    // startImgSrc: option.iconName\n  }));\n\nexport const renderChCheckboxItems = (\n  options: GxOption[] | undefined,\n  frontEndCheckboxInputHandler: (\n    event: ChCheckboxCustomEvent<string> | InputEvent\n  ) => void,\n  checkedIds: string[]\n): HTMLChCheckboxElement[] => {\n  return options?.map(option => {\n    const value = checkedIds?.find(\n      id => option.value === id || option.id === id\n    );\n    return (\n      <ch-checkbox\n        name={option.name}\n        class=\"checkbox\"\n        checkedValue={option.value || option.id}\n        caption={option.label}\n        disabled={option.disabled}\n        value={value}\n        onInput={frontEndCheckboxInputHandler}\n        startImgSrc={option.iconName}\n        key={option.value || option.id}\n      ></ch-checkbox>\n    );\n  });\n};\n"]}
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/common/helpers.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from \"@stencil/core\";\n\nimport {\n  ChCheckboxCustomEvent,\n  ComboBoxModel,\n  TreeViewItemModel\n} from \"@genexus/chameleon-controls-library\";\nexport type ChCheckboxArray = HTMLChCheckboxElement[] | null;\n\nimport { GxOption } from \"./types\";\n\nconst daysOfWeek = [\n  \"Sunday\",\n  \"Monday\",\n  \"Tuesday\",\n  \"Wednesday\",\n  \"Thursday\",\n  \"Friday\",\n  \"Saturday\"\n];\n\n/**\n * @param element an HTMLElement\n * @returns an alphabetically ordered array of all the parts and exportparts the element contains.\n */\nexport const getElementSelectorParts = (element: HTMLElement) => {\n  const queries: string[] = [];\n  const elementParts = element.shadowRoot?.querySelectorAll(`[part]`);\n  const elementExportParts =\n    element.shadowRoot?.querySelectorAll(`[exportparts]`);\n\n  elementParts?.forEach(el => {\n    queries.push(\n      `${element.tagName.toLowerCase()}::part(${el.getAttribute(\"part\")})`\n    );\n  });\n  elementExportParts?.forEach(el => {\n    queries.push(\n      ...[\n        ...el.getAttribute(\"exportparts\").matchAll(/(?:[\\w-]+:)?([\\w-]+)/g)\n      ].map(item => `${element.tagName.toLowerCase()}::part(${item[1]})`)\n    );\n  });\n\n  return queries.sort();\n};\n\n/**\n * @param selector a part selector\n * @returns A reference to the element the part belongs to.\n */\nexport const querySelectorPart = (selector: string) => {\n  const querySelectorDeep = (\n    element: HTMLElement,\n    parts: string\n  ): HTMLElement => {\n    const shadow = element.shadowRoot;\n    const partList = parts.split(\" \");\n\n    const partElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[part~=\"${partName}\"]`).join(\"\")\n    );\n    if (partElement) {\n      return partElement;\n    }\n\n    const exportPartElement: HTMLElement = shadow.querySelector(\n      partList.map(partName => `[exportparts*=\"${partName}\"]`).join(\"\")\n    );\n    if (exportPartElement) {\n      const exportPartList: string[] = [];\n      const exportparts = exportPartElement.getAttribute(\"exportparts\");\n\n      partList.forEach(partItem => {\n        const exportPartName = exportparts.match(\n          `(?:([\\\\w-]+):)?(${partItem})`\n        )[1];\n        if (exportPartName) {\n          exportPartList.push(exportPartName);\n        }\n      });\n\n      if (partList.length === exportPartList.length) {\n        return querySelectorDeep(exportPartElement, exportPartList.join(\" \"));\n      }\n    }\n\n    return null;\n  };\n\n  const selectorItems = selector.match(\"(.*)::part\\\\(([^)]+)\\\\)\");\n  const entity = selectorItems[1];\n  const partName = selectorItems[2];\n\n  return querySelectorDeep(document.querySelector(entity), partName);\n};\n\nconst daysFromToday = (date: Date): number => {\n  const today = new Date();\n  // To calculate the time difference of two dates\n  const timeDifference = today.getTime() - date.getTime();\n  // To calculate the no. of days between two dates\n  const daysDifference = timeDifference / (1000 * 3600 * 24);\n  return Math.floor(daysDifference);\n};\n\n// - - - - - - - - - - - -\n// Date Functions\n// - - - - - - - - - - - -\n\nconst isToday = (date: Date): boolean => {\n  const today = new Date();\n  if (today.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nconst isYesterday = (date: Date): boolean => {\n  const yesterday = new Date();\n  yesterday.setDate(yesterday.getDate() - 1);\n  if (yesterday.toDateString() === date.toDateString()) {\n    return true;\n  }\n  return false;\n};\n\nexport const formatDate = (\n  date: Date,\n  type: FormatDateType = \"date-time\"\n): string => {\n  let formattedDate;\n  // validate date\n  // undefined or null\n  if (date === undefined || date === null) {\n    return \"\";\n  }\n  // If the date object is invalid it will return 'NaN' on getTime() and NaN is never equal to itself\n  const dateIsValid = date.getTime() === date.getTime();\n  if (!dateIsValid) {\n    return \"Invalid date\";\n  }\n  let locale = \"en-US\";\n  const lang = document\n    .getElementsByTagName(\"html\")[0]\n    .getAttribute(\"lang\")\n    ?.valueOf();\n  if (lang === \"es\") {\n    locale = \"es-ES\";\n  }\n  formattedDate = date.toLocaleDateString(locale);\n  const year = date.getFullYear();\n  const month = String(date.getMonth() + 1).padStart(2, \"0\");\n  const day = String(date.getDate()).padStart(2, \"0\");\n  const hours = String(date.getHours()).padStart(2, \"0\");\n  const minutes = String(date.getMinutes()).padStart(2, \"0\");\n  const time = `${hours}:${minutes}`;\n  if (type === \"date-time\") {\n    formattedDate += `  ${date.toLocaleTimeString()}`;\n  } else if (type === \"date-time-short\") {\n    // No seconds\n    formattedDate = `${year}/${month}/${day} ${time}`;\n  } else {\n    // pretty\n    const daysPassedFromToday = daysFromToday(date);\n    const today = new Date();\n    const currentYear = today.getFullYear();\n    if (isToday(date)) {\n      return `Today ${time}`;\n    } else if (isYesterday(date)) {\n      return `Yesterday ${time}`;\n    } else if (daysPassedFromToday <= 7) {\n      // If one week or less, just show the day of the week, and the time\n      const day = daysOfWeek[date.getDay()];\n      return `${day} ${time}`;\n    } else if (currentYear === year) {\n      // If current year, show day number and month name. Example: November 17th\n      if (locale === \"es-ES\") {\n        formattedDate = `${day} de ${date.toLocaleString(\"es-ES\", {\n          month: \"long\"\n        })} ${time}`;\n      } else {\n        formattedDate = `${date.toLocaleString(\"en-US\", {\n          month: \"long\"\n        })} ${day} ${time}`;\n      }\n    } else {\n      // Display date as usual\n      formattedDate = formatDate(date, \"date-time-short\");\n    }\n  }\n  return formattedDate;\n};\n\nexport type FormatDateType =\n  | \"date\"\n  | \"date-time\"\n  | \"date-time-short\"\n  | \"pretty\";\n\n// - - - - - - - - - - - -\n// /End of Date Functions\n// - - - - - - - - - - - -\n\n/* Count the total tree nodes (by default it does not count the first level nodes)*/\nexport const countTreeItems = (\n  treeModel: TreeViewItemModel[],\n  children = false\n): number => {\n  let totalNodes = 0;\n  treeModel.forEach(node => {\n    children && totalNodes++;\n    if (node.items) {\n      totalNodes += countTreeItems(node.items, true);\n    }\n  });\n  return totalNodes;\n};\n\n/**\n * @description it evaluates the initial selected combo item\n * @param options an array of GxOption\n * @returns the initial combo value, which in this case is the id\n */\nexport const setInitialComboValue = (options: GxOption[]): string => {\n  const selected = options.find(option => option.selected);\n  if (selected) {\n    return selected.value || selected.id;\n  } else {\n    return options[0].value || options[0].id;\n  }\n};\n\nexport const escapeRegExp = (str: string) => {\n  return str.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\");\n};\n\n/**\n * @description this function highlights the character(s) that match(es) the filter value.\n * hiChar comes from (hi)light (Char)acters\n * @param text the string to find the filter value on\n * @param filterValue the filter value\n * @returns a span element\n */\nexport const hiChar = function (text: string, filterValue: string) {\n  if (text && filterValue) {\n    const escapedFilterValue = escapeRegExp(filterValue);\n    const re = new RegExp(escapedFilterValue, \"gi\");\n    return (\n      <span\n        innerHTML={text.replace(re, '<span class=\"hiChar\">$&</span>')}\n      ></span>\n    );\n  } else {\n    return text;\n  }\n};\n\nexport const closeOnOutsideClickHandler = (\n  eventInfo: PointerEvent,\n  ref: HTMLElement\n): true | void => {\n  if (!eventInfo.composedPath().includes(ref)) {\n    return true;\n  }\n};\n\nexport const mapOptionsToComboBoxItemModel = (\n  options: GxOption[]\n): ComboBoxModel =>\n  options.map(option => ({\n    value: option.id,\n    caption: option.label\n    // startImgSrc: option.iconName\n  }));\n\nexport const renderChCheckboxItems = (\n  options: GxOption[] | undefined,\n  frontEndCheckboxInputHandler: (\n    event: ChCheckboxCustomEvent<string> | InputEvent\n  ) => void,\n  checkedIds: string[]\n): HTMLChCheckboxElement[] => {\n  return options?.map(option => {\n    const value = checkedIds?.find(\n      id => option.value === id || option.id === id\n    );\n    return (\n      <ch-checkbox\n        name={option.name}\n        class=\"checkbox\"\n        checkedValue={option.value || option.id}\n        caption={option.label}\n        disabled={option.disabled}\n        value={value}\n        onInput={frontEndCheckboxInputHandler}\n        startImgSrc={option.iconName}\n        key={option.value || option.id}\n      ></ch-checkbox>\n    );\n  });\n};\n"]}

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.en.json

@@ -8,6 +8,10 @@
     "description": "Create a new Knowledge Base to start working.",
     "buttonCaption": "New Knowledge Base"
   },
+  "viewSamples": {
+    "title": "View Samples",
+    "description": "Explore our  samples. Search, discover, and chat with the assistant to find exactly what you need."
+  },
   "openExistingProject": {
     "title": "Open Existing Project",
     "description": "You can open a project from the server, whether it's a GeneXus Next Start project or any other project.",

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.ja.json

@@ -8,6 +8,10 @@
     "description": "作業を開始するための新しいナレッジベースを作成します。",
     "buttonCaption": "新規ナレッジベース"
   },
+  "viewSamples": {
+    "title": "View Samples",
+    "description": "Explore our  samples. Search, discover, and chat with the assistant to find exactly what you need."
+  },
   "openExistingProject": {
     "title": "既存プロジェクトを開く",
     "description": "サーバーからプロジェクトを開くことができます。GeneXus Next Startプロジェクトまたはその他のプロジェクトを開くことができます。",

package/dist/collection/components/start-page/gx-ide-assets/start-page/langs/start-page.lang.zh.json

@@ -8,6 +8,10 @@
     "description": "Create a new Knowledge Base to start working.",
     "buttonCaption": "New Knowledge Base"
   },
+  "viewSamples": {
+    "title": "View Samples",
+    "description": "Explore our  samples. Search, discover, and chat with the assistant to find exactly what you need."
+  },
   "openExistingProject": {
     "title": "Open Existing Project",
     "description": "You can open a project from the server, whether it's a GeneXus Next Start project or any other project.",

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

@@ -4,6 +4,10 @@
 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 {
+  --spacing-body-block-start: var(--mer-spacing--lg);
+  --spacing-body-block-end: var(--mer-spacing--lg);
+  --spacing-body-inline-start: var(--mer-spacing--lg);
+  --spacing-body-inline-end: var(--mer-spacing--lg);
   display: grid;
   block-size: 100%;
   overflow: auto;
@@ -16,8 +20,7 @@ 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--xl);
-  min-block-size: 635px;
+  gap: var(--mer-spacing--lg);
 }
 
 @keyframes bounce {
@@ -48,15 +51,21 @@ 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--xl);
+  gap: var(--mer-spacing--md);
   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);
+  border-radius: var(--mer-border__radius--md);
 }
 
 .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 {
@@ -69,15 +78,20 @@ 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--2xs);
+  gap: var(--mer-spacing--xs);
+  --font-weight-regular: 300;
 }
 
 .section-create-new-kb {
@@ -87,14 +101,22 @@ 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--2xs);
+  gap: var(--mer-spacing--xs);
+}
+.section-create-new-kb__title {
+  color: var(--mer-text__bright);
+  font-weight: 500;
 }
 .section-create-new-kb__actions {
   display: grid;
   gap: var(--mer-spacing--md);
   overflow-x: auto;
   grid-auto-flow: column;
-  grid-auto-columns: 430px;
+  grid-auto-columns: 372px;
+}
+
+.samples-buttons-container {
+  flex-wrap: wrap;
 }
 
 .section-secondary {
@@ -103,9 +125,20 @@ 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));
@@ -114,11 +147,21 @@ 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;
 }
@@ -127,7 +170,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--03);
+  border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
   padding-block-end: var(--mer-spacing--sm);
 }
 .section-kbs__header--no-border {
@@ -156,13 +199,19 @@ 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: 284px 1fr;
-  gap: var(--mer-spacing--md);
+  grid-template-columns: auto max-content;
+  gap: var(--mer-spacing--3xl);
 }
 .kb__details {
   display: grid;
@@ -176,6 +225,7 @@ 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);
@@ -184,6 +234,8 @@ 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 {
@@ -210,4 +262,17 @@ 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

@@ -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_openKbClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderSecondarySection;
+var _GxIdeStartPage_instances, _GxIdeStartPage_componentLocale, _GxIdeStartPage_userLanguage, _GxIdeStartPage_createKBClickHandler, _GxIdeStartPage_filterKbs, _GxIdeStartPage_openKbClickHandler, _GxIdeStartPage_evaluateContentToRender, _GxIdeStartPage_renderKbsSection, _GxIdeStartPage_renderKbs, _GxIdeStartPage_renderSecondarySection;
 // Stencil
 import { Host, h } from "@stencil/core";
 // Other Libraries
@@ -24,6 +24,7 @@ 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,
@@ -73,13 +74,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;
@@ -118,9 +119,14 @@ 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("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, () => {
@@ -130,24 +136,26 @@ export class GxIdeStartPage {
             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()));
@@ -166,22 +174,28 @@ export class GxIdeStartPage {
         __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 renderViewSamplesCard = ((_b = this.samples) === null || _b === void 0 ? void 0 : _b.length) && this.openSampleCallback;
+        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)), 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-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))), 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) }, 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 is() { return "gx-ide-start-page"; }
     static get encapsulation() { return "shadow"; }
@@ -218,6 +232,44 @@ 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,
@@ -238,71 +290,79 @@ export class GxIdeStartPage {
                     "text": "Callback invoked to open a KB when the user clicks on a KB card."
                 }
             },
-            "secondarySection": {
+            "openSampleCallback": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "SecondarySection",
-                    "resolved": "{ title: string; cards: CardInfo[]; }",
+                    "original": "(sample: SampleData) => Promise<void>",
+                    "resolved": "(sample: SampleData) => Promise<void>",
                     "references": {
-                        "SecondarySection": {
+                        "SampleData": {
                             "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"
+                            "id": "src/components/start-page/start-page.tsx::SampleData"
+                        },
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
                         }
                     }
                 },
-                "required": false,
-                "optional": true,
+                "required": 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": "Callback invoked when the user clicks a button to open a sample."
                 }
             },
-            "kbs": {
+            "samples": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "RecentKBData[]",
-                    "resolved": "RecentKBData[]",
+                    "original": "SampleData[]",
+                    "resolved": "SampleData[]",
                     "references": {
-                        "RecentKBData": {
+                        "SampleData": {
                             "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"
+                            "id": "src/components/start-page/start-page.tsx::SampleData"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "User's kbs array"
+                    "text": "List of samples available to be displayed in the samples card."
                 }
             },
-            "kbsFilterThreshold": {
-                "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 required of kbs to display a filter."
-                },
-                "attribute": "kbs-filter-threshold",
-                "reflect": false
+                    "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."
+                }
             }
         };
     }
     static get states() {
         return {
-            "kbFilterValue": {},
             "filteredKbs": {},
+            "kbFilterValue": {},
             "loading": {}
         };
     }
@@ -317,7 +377,7 @@ export class GxIdeStartPage {
             }];
     }
 }
-_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);