npm - @genexus/genexus-ide-ui - Versions diffs - 1.0.22 → 1.0.23 - Mend

@genexus/genexus-ide-ui 1.0.22 → 1.0.23

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 (14) hide show

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

@@ -10,13 +10,14 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 }
 .main {
-  animation: fadeIn 300ms forwards;
+  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 {
@@ -119,7 +120,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   padding: var(--mer-spacing--sm);
   display: grid;
   grid-template-rows: auto 1fr;
-  overflow: auto;
+  overflow: hidden;
 }
 .section-kbs__header {
   display: grid;

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

@@ -169,9 +169,7 @@ export class GxIdeStartPage {
         var _a;
         this.loading =
             (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
-        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: {
-                main: true
-            } }, h("section", {
+        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", {

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\nconst LANGS_DATE_FNS_MAP: LanguageMap = {\n \"en\": enUS,\n \"ja\": ja,\n \"zh-CN\": zhCN,\n \"zh-TW\": zhCN,\n \"zh-HK\": zhCN\n};\n\nconst DETAIL_ICON = getIconPath({\n category: \"system\",\n name: \"detail\",\n colorType: \"primary\"\n});\nconst FILTER_ICON = getIconPath({\n category: \"window-tools\",\n name: \"filter\",\n colorType: \"on-elevation\"\n});\nconst KB_DEFAULT_ICON = getIconPath({\n category: \"objects\",\n name: \"knowledge-base\"\n});\nconst SEARCH_ICON = getIconPath({\n category: \"system\",\n name: \"search\",\n colorType: \"on-elevation\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"utils/layout\",\n \"components/edit\",\n \"components/icon\",\n \"components/button\",\n \"chameleon/scrollbar\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-start-page\",\n styleUrl: \"start-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\n /*\n The component hard-coded strings translations.\n /\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n #userLanguage: LocaleDateFns;\n\n @Element() el: HTMLGxIdeStartPageElement;\n\n @State() kbFilterValue: string = \"\";\n @Watch(\"kbFilterValue\")\n kbFilterValueChanged(newKbFilterValue: string) {\n this.filteredKbs = this.kbs.filter(kb =>\n kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase())\n );\n }\n\n /\n The kbs after the filter value.\n /\n @State() filteredKbs: RecentKBData[];\n\n /\n True if the start page is waiting, either for the kb's list or the secondary section.\n /\n @State() loading: boolean = true;\n\n /\n Callback invoked to create a new KB. It must be specified whether this create is create from server or not, through the parameter 'fromServer'.\n /\n @Prop() readonly createKBCallback!: (fromServer: boolean) => Promise<void>;\n\n /\n Callback invoked to open a KB when the user clicks on a KB card.\n /\n @Prop() readonly openKbCallback!: (id: string) => Promise<void>;\n\n /\n The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs.\n /\n @Prop() readonly secondarySection?: SecondarySection;\n\n /\n User's kbs array\n /\n @Prop() readonly kbs: RecentKBData[];\n @Watch(\"kbs\")\n kbsChanged(newKbs: RecentKBData[]) {\n this.filteredKbs = newKbs;\n this.kbFilterValue = \"\"; // clear filter\n }\n\n /\n The minimum required of kbs to display a filter.\n */\n @Prop() readonly kbsFilterThreshold: number;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n // initialize filteredKbs\n this.kbsChanged(this.kbs);\n\n // get user language to display the kb \"last opened\" value in the appropriate language.\n const userLanguage: keyof LanguageMap = document.documentElement\n .lang as keyof LanguageMap;\n this.#userLanguage = LANGS_DATE_FNS_MAP[userLanguage];\n }\n\n #createKBClickHandler = (fromServer: boolean) => (event: MouseEvent) => {\n event.stopPropagation();\n this.createKBCallback(fromServer);\n };\n\n #openKbClickHandler = (kbId: string) => (event: MouseEvent) => {\n event.stopPropagation();\n this.openKbCallback(kbId);\n };\n\n #filterKbs = (event: ChEditCustomEvent<string> \| InputEvent) => {\n this.kbFilterValue = event.detail as string;\n };\n\n #renderKbsSection = () => {\n const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;\n const kbsListEmpty = this.filteredKbs.length === 0;\n let contentToRender: HTMLGxgIdeLoaderElement \| HTMLElement[];\n\n // Evaluate what is the content to display.\n if (this.filteredKbs.length > 0) {\n contentToRender = this.#renderKbs();\n } else {\n // No kb has pass the filter. Display an empty-state.\n contentToRender = (\n <gx-ide-empty-state\n isAnimated\n stateIconSrc={FILTER_ICON}\n stateTitle={this.#componentLocale.recentKBs.noMatches}\n ></gx-ide-empty-state>\n );\n }\n\n return (\n <section class=\"section-kbs\">\n <header\n class={{\n \"section-kbs__header\": true\n }}\n >\n <h2 class=\"heading-3 section-kbs__title\">\n {this.#componentLocale.recentKBs.title}\n </h2>\n <ch-edit\n // Render always, and display or hide, ro prevent FOUC, and also prevent\n // the header block-size from growing a little bit when the input renders.\n value={this.kbFilterValue}\n class={{\n \"input\": true,\n \"section-kbs__filter--hidden\": hideKbsFilter\n }}\n startImgSrc={SEARCH_ICON}\n placeholder={this.#componentLocale.recentKBs.filterKbsPlaceholder}\n onInput={!hideKbsFilter && this.#filterKbs}\n disabled={hideKbsFilter}\n ></ch-edit>\n </header>\n\n <div\n class={{\n \"section-kbs__list\": true,\n \"section-kbs__list--empty\": kbsListEmpty,\n \"scrollable\": true\n }}\n >\n {this.filteredKbs.length > 0 ? this.#renderKbs() : contentToRender}\n </div>\n </section>\n );\n };\n\n #renderKbs = (): HTMLElement[] => {\n return this.filteredKbs?.map((kb, index) => {\n // relative time ago\n\n const relativeDate = kb.lastOpenedDate\n ? formatDistanceToNow(new Date(kb.lastOpenedDate), {\n addSuffix: true,\n locale: this.#userLanguage\n })\n : undefined;\n\n // icon\n const kbIcon = kb.icon ?? KB_DEFAULT_ICON;\n\n return (\n <article class=\"kb__item\" key={index}>\n <div class=\"kb__details\">\n <ch-image class=\"icon-md\" src={kbIcon}></ch-image>\n <p\n class=\"text-body-regular-m kb__name\"\n onClick={this.#openKbClickHandler(kb.id)}\n >\n {kb.name}\n </p>\n </div>\n {relativeDate && (\n <div class=\"text-body-regular-m kb__modified\">\n {`${this.#componentLocale.recentKBs.opened} ${relativeDate}`}\n </div>\n )}\n </article>\n );\n });\n };\n\n #evaluateContentToRender() {\n return this.kbs && this.kbs.length > 0\n ? this.#renderKbsSection()\n : this.#renderSecondarySection();\n }\n\n #renderSecondarySection = (): HTMLElement \| null => {\n if (!this.secondarySection) {\n return null;\n }\n\n const multipleCards = this.secondarySection.cards.length > 2;\n\n return (\n <section\n // Recent Knowledge Bases\n class=\"section-secondary\"\n >\n <header>\n <h2 class=\"heading-3\">{this.secondarySection.title}</h2>\n </header>\n\n <section\n class={{\n \"section-secondary__actions\": true,\n \"section-secondary__actions--two-cards\": !multipleCards,\n \"section-secondary__actions--multiple-cards\": multipleCards,\n \"scrollable\": true\n }}\n >\n {this.secondarySection.cards.map((card, index) => {\n return (\n <article class=\"card card-outlined\" key={index}>\n <header class=\"card__header\">\n <span class=\"icon-capsule\">\n <ch-image\n class=\"icon-md icon-circular\"\n src={card.icon.src}\n aria-label={card.icon.ariaLabel}\n ></ch-image>\n </span>\n <div class=\"card__header-description\">\n <h2 class=\"heading-3\">{card.title}</h2>\n {card.description.map(paragraph => (\n <p class=\"text-body-regular-m\">{paragraph}</p>\n ))}\n </div>\n </header>\n <footer class=\"card__footer\">\n {card.action && (\n <button\n class=\"button-tertiary button-icon-and-text\"\n onClick={card.action.callback && card.action.callback}\n >\n <ch-image class=\"icon-md\" src={DETAIL_ICON}></ch-image>\n {card.action.caption}\n </button>\n )}\n </footer>\n </article>\n );\n })}\n </section>\n </section>\n );\n };\n\n render() {\n this.loading =\n (!this.kbs \|\| this.kbs?.length === 0) && !this.secondarySection;\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <main\n class={{\n main: true\n }}\n >\n <section\n // Create a new Knowledge Base\n class=\"section-create-new-kb\"\n >\n <header\n // main header\n class=\"section-create-new__header\"\n >\n <h1 class=\"heading-2\">{this.#componentLocale.createKB.title}</h1>\n <p class=\"text-body-regular-m\">\n {this.#componentLocale.createKB.description}\n </p>\n </header>\n\n <section class=\"section-create-new-kb__actions scrollable\">\n <article\n // create project\n class=\"card card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"heading-3\">\n {this.#componentLocale.createProject.title}\n </h2>\n <p class=\"text-body-regular-m\">\n {this.#componentLocale.createProject.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <button\n class=\"button-primary\"\n onClick={this.#createKBClickHandler(false)}\n >\n {this.#componentLocale.createProject.buttonCaption}\n </button>\n </footer>\n </article>\n\n <article\n // open existing project\n class=\"card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"heading-3\">\n {this.#componentLocale.openExistingProject.title}\n </h2>\n <p class=\"text-body-regular-m\">\n {this.#componentLocale.openExistingProject.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#createKBClickHandler(true)}\n >\n {this.#componentLocale.openExistingProject.buttonCaption}\n </button>\n </footer>\n </article>\n </section>\n </section>\n <section class=\"section-secondary scrollable\">\n {this.loading ? (\n <gx-ide-loader\n class=\"loader\"\n loaderTitle={this.#componentLocale.recentKBs.loaderTitle}\n description={this.#componentLocale.recentKBs.loaderDescription}\n show\n ></gx-ide-loader>\n ) : (\n this.#evaluateContentToRender()\n )}\n </section>\n </main>\n </Host>\n );\n }\n}\n\nexport type RecentKBData = {\n id?: string;\n name: string;\n lastOpenedDate?: Date;\n icon: string;\n};\n\nexport type SecondarySection = {\n title: string;\n cards: CardInfo[];\n};\n\nexport type CardInfo = {\n icon?: {\n src: string;\n ariaLabel: string;\n };\n title: string;\n description: string[];\n action?: {\n iconSrc: string;\n caption: string;\n callback?: () => void;\n };\n};\n\ntype LanguageMap = {\n \"en\": LocaleDateFns;\n \"ja\": LocaleDateFns;\n \"zh-CN\": LocaleDateFns;\n \"zh-TW\": LocaleDateFns;\n \"zh-HK\": LocaleDateFns;\n};\n"]}
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 <h2 class=\"heading-3 section-kbs__title\">\n {this.#componentLocale.recentKBs.title}\n </h2>\n <ch-edit\n // Render always, and display or hide, ro prevent FOUC, and also prevent\n // the header block-size from growing a little bit when the input renders.\n value={this.kbFilterValue}\n class={{\n \"input\": true,\n \"section-kbs__filter--hidden\": hideKbsFilter\n }}\n startImgSrc={SEARCH_ICON}\n placeholder={this.#componentLocale.recentKBs.filterKbsPlaceholder}\n onInput={!hideKbsFilter && this.#filterKbs}\n disabled={hideKbsFilter}\n ></ch-edit>\n </header>\n\n <div\n class={{\n \"section-kbs__list\": true,\n \"section-kbs__list--empty\": kbsListEmpty,\n \"scrollable\": true\n }}\n >\n {this.filteredKbs.length > 0 ? this.#renderKbs() : contentToRender}\n </div>\n </section>\n );\n };\n\n #renderKbs = (): HTMLElement[] => {\n return this.filteredKbs?.map((kb, index) => {\n // relative time ago\n\n const relativeDate = kb.lastOpenedDate\n ? formatDistanceToNow(new Date(kb.lastOpenedDate), {\n addSuffix: true,\n locale: this.#userLanguage\n })\n : undefined;\n\n // icon\n const kbIcon = kb.icon ?? KB_DEFAULT_ICON;\n\n return (\n <article class=\"kb__item\" key={index}>\n <div class=\"kb__details\">\n <ch-image class=\"icon-md\" src={kbIcon}></ch-image>\n <p\n class=\"text-body-regular-m kb__name\"\n onClick={this.#openKbClickHandler(kb.id)}\n >\n {kb.name}\n </p>\n </div>\n {relativeDate && (\n <div class=\"text-body-regular-m kb__modified\">\n {`${this.#componentLocale.recentKBs.opened} ${relativeDate}`}\n </div>\n )}\n </article>\n );\n });\n };\n\n #evaluateContentToRender() {\n return this.kbs && this.kbs.length > 0\n ? this.#renderKbsSection()\n : this.#renderSecondarySection();\n }\n\n #renderSecondarySection = (): HTMLElement \| null => {\n if (!this.secondarySection) {\n return null;\n }\n\n const multipleCards = this.secondarySection.cards.length > 2;\n\n return (\n <section\n // Recent Knowledge Bases\n class=\"section-secondary\"\n >\n <header>\n <h2 class=\"heading-3\">{this.secondarySection.title}</h2>\n </header>\n\n <section\n class={{\n \"section-secondary__actions\": true,\n \"section-secondary__actions--two-cards\": !multipleCards,\n \"section-secondary__actions--multiple-cards\": multipleCards,\n \"scrollable\": true\n }}\n >\n {this.secondarySection.cards.map((card, index) => {\n return (\n <article class=\"card card-outlined\" key={index}>\n <header class=\"card__header\">\n <span class=\"icon-capsule\">\n <ch-image\n class=\"icon-md icon-circular\"\n src={card.icon.src}\n aria-label={card.icon.ariaLabel}\n ></ch-image>\n </span>\n <div class=\"card__header-description\">\n <h2 class=\"heading-3\">{card.title}</h2>\n {card.description.map(paragraph => (\n <p class=\"text-body-regular-m\">{paragraph}</p>\n ))}\n </div>\n </header>\n <footer class=\"card__footer\">\n {card.action && (\n <button\n class=\"button-tertiary button-icon-and-text\"\n onClick={card.action.callback && card.action.callback}\n >\n <ch-image class=\"icon-md\" src={DETAIL_ICON}></ch-image>\n {card.action.caption}\n </button>\n )}\n </footer>\n </article>\n );\n })}\n </section>\n </section>\n );\n };\n\n render() {\n this.loading =\n (!this.kbs \|\| this.kbs?.length === 0) && !this.secondarySection;\n return (\n <Host 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-2\">{this.#componentLocale.createKB.title}</h1>\n <p class=\"text-body-regular-m\">\n {this.#componentLocale.createKB.description}\n </p>\n </header>\n\n <section class=\"section-create-new-kb__actions scrollable\">\n <article\n // create project\n class=\"card card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"heading-3\">\n {this.#componentLocale.createProject.title}\n </h2>\n <p class=\"text-body-regular-m\">\n {this.#componentLocale.createProject.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <button\n class=\"button-primary\"\n onClick={this.#createKBClickHandler(false)}\n >\n {this.#componentLocale.createProject.buttonCaption}\n </button>\n </footer>\n </article>\n\n <article\n // open existing project\n class=\"card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"heading-3\">\n {this.#componentLocale.openExistingProject.title}\n </h2>\n <p class=\"text-body-regular-m\">\n {this.#componentLocale.openExistingProject.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#createKBClickHandler(true)}\n >\n {this.#componentLocale.openExistingProject.buttonCaption}\n </button>\n </footer>\n </article>\n </section>\n </section>\n <section class=\"section-secondary scrollable\">\n {this.loading ? (\n <gx-ide-loader\n class=\"loader\"\n loaderTitle={this.#componentLocale.recentKBs.loaderTitle}\n description={this.#componentLocale.recentKBs.loaderDescription}\n show\n ></gx-ide-loader>\n ) : (\n this.#evaluateContentToRender()\n )}\n </section>\n </main>\n </Host>\n );\n }\n}\n\nexport type RecentKBData = {\n id?: string;\n name: string;\n lastOpenedDate?: Date;\n icon: string;\n};\n\nexport type SecondarySection = {\n title: string;\n cards: CardInfo[];\n};\n\nexport type CardInfo = {\n icon?: {\n src: string;\n ariaLabel: string;\n };\n title: string;\n description: string[];\n action?: {\n iconSrc: string;\n caption: string;\n callback?: () => void;\n };\n};\n\ntype LanguageMap = {\n \"en\": LocaleDateFns;\n \"ja\": LocaleDateFns;\n \"zh-CN\": LocaleDateFns;\n \"zh-TW\": LocaleDateFns;\n \"zh-HK\": LocaleDateFns;\n};\n"]}

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

@@ -2502,7 +2502,7 @@ const zhCN = {
   },
 };
-const startPageCss = ":host{display:grid;block-size:100%;overflow:auto}.main{animation:fadeIn 300ms forwards;display:grid;block-size:100%;overflow:auto;opacity:0;grid-template-rows:max-content 1fr;gap:var(--mer-spacing--xl)}@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:auto}.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 = ":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)}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -2670,9 +2670,7 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
         var _a;
         this.loading =
             (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
-        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: {
-                main: true
-            } }, h("section", {
+        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", {