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

@genexus/genexus-ide-ui 1.1.45 → 1.1.47

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

package/dist/esm/gx-ide-plugin-details.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { g as getAssetPath, r as registerInstance, h, H as Host, a as getElement
 import { g as getIconPath } from './MERCURY_ASSETS-ccf43ae3.js';
 import { L as Locale } from './locale-e5107fad.js';
-const pluginDetailsCss = ":host{display:grid;block-size:100%;grid-template-areas:\"header header\" \"main aside\";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:12px}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:\"plugin-icon plugin-details\";grid-template-columns:64px 1fr;column-gap:16px;padding:24px 24px 16px 24px}.plugin__icon{grid-area:plugin-icon;max-width:100%}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:8px}.plugin__publisher{display:flex;align-items:center;gap:4px}.plugin__description{line-height:1.5}.plugin__actions-container{margin-block-start:8px;align-items:center}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:6px}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:12px}.plugin__info-category{display:flex;flex-direction:column;gap:8px}.plugin__info-category:not(:first-child){padding-block-start:16px;margin-block-start:16px;border-block-start:1px solid var(--mer-border-color__on-elevation--01)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:8px}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:16px}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:6px}.fields__list--as-tags .field__li{border:1px solid var(--mer-border-color__on-elevation--01);padding:2px 8px;border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--mer-text__on-surface)}.fields__list--as-tags .field__link:hover{color:var(--mer-accent__primary)}.fields__list--as-tags .field__link:active{color:var(--mer-accent__primary--hover)}.field__name,.field__value{flex:1}.field__link{color:var(--mer-accent__primary)}.field__link:hover{color:var(--mer-accent__primary--hover)}.field__link:active{color:var(--mer-accent__primary--active)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--mer-icon__box--md) ) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:center;gap:1px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}";
+const pluginDetailsCss = ":host{display:grid;block-size:100%;grid-template-areas:\"header header\" \"main aside\";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:12px}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:\"plugin-icon plugin-details\";grid-template-columns:64px 1fr;column-gap:16px;padding:24px 24px 16px 24px}.plugin__icon{grid-area:plugin-icon;inline-size:100%;block-size:auto;display:block}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:8px}.plugin__publisher{display:flex;align-items:center;gap:4px}.plugin__description{line-height:1.5}.plugin__actions-container{margin-block-start:8px;align-items:center}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:6px}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:12px}.plugin__info-category{display:flex;flex-direction:column;gap:8px}.plugin__info-category:not(:first-child){padding-block-start:16px;margin-block-start:16px;border-block-start:1px solid var(--mer-border-color__on-elevation--01)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:8px}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:16px}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:6px}.fields__list--as-tags .field__li{border:1px solid var(--mer-border-color__on-elevation--01);padding:2px 8px;border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--mer-text__on-surface)}.fields__list--as-tags .field__link:hover{color:var(--mer-accent__primary)}.fields__list--as-tags .field__link:active{color:var(--mer-accent__primary--hover)}.field__name,.field__value{flex:1}.field__link{color:var(--mer-accent__primary)}.field__link:hover{color:var(--mer-accent__primary--hover)}.field__link:active{color:var(--mer-accent__primary--active)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--mer-icon__box--md) ) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:center;gap:1px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)

package/dist/esm/gx-ide-plugin-details.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"gx-ide-plugin-details.entry.js","mappings":"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","names":[],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":[":host {\n display: grid;\n block-size: 100%;\n grid-template-areas:\n \"header header\"\n \"main aside\";\n grid-template-rows: max-content 1fr;\n grid-template-columns: 1fr 280px;\n row-gap: 12px;\n}\n\n.section {\n display: contents;\n}\n\n// header\n.header {\n display: grid;\n grid-area: header;\n grid-template-areas: \"plugin-icon plugin-details\";\n grid-template-columns: 64px 1fr;\n column-gap: 16px;\n padding: 24px 24px 16px 24px;\n}\n.plugin__icon {\n grid-area: plugin-icon;\n max-width: 100%;\n}\n.plugin__details {\n grid-area: plugin-details;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.plugin__publisher {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.plugin__description {\n line-height: 1.5; // WA: Text appears too tight.\n}\n.plugin__actions-container {\n margin-block-start: 8px;\n align-items: center;\n}\n.action-button {\n min-inline-size: 100px;\n\n &.more-versions-available {\n border-start-end-radius: 0 !important;\n border-end-end-radius: 0 !important;\n }\n}\n.installed-container {\n display: flex;\n align-items: center;\n gap: 6px;\n\n // WA Biggest Mercury icon (icon-md) looks small in this case.\n // Mercury should expose more icon sizes.\n ch-image {\n --ch-image-size: 20px;\n }\n}\n\n// main\n.main {\n grid-area: main;\n}\n.docsTab {\n block-size: 100%;\n}\n\n// aside\n.aside {\n grid-area: aside;\n overflow: auto;\n border-block-start: 1px solid var(--items-container__border-color);\n}\n.fields__list {\n list-style: none;\n padding: 0;\n margin: 0;\n font-size: 12px;\n}\n.plugin__info-category {\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &:not(:first-child) {\n $space: 16px;\n padding-block-start: $space;\n margin-block-start: $space;\n border-block-start: 1px solid var(--mer-border-color__on-elevation--01);\n }\n}\n.fields__list:not(.fields__list--as-tags) {\n display: flex;\n flex-direction: column;\n gap: 8px;\n .field__li {\n display: flex;\n gap: 16px;\n }\n}\n.fields__list--as-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n\n .field__li {\n border: 1px solid var(--mer-border-color__on-elevation--01);\n padding: 2px 8px;\n border-radius: 4px;\n\n text-transform: lowercase;\n }\n .field__link {\n color: var(--mer-text__on-surface);\n\n &:hover {\n color: var(--mer-accent__primary);\n }\n &:active {\n color: var(--mer-accent__primary--hover);\n }\n }\n}\n\n.field__name,\n.field__value {\n flex: 1;\n}\n// WA: Link styles should be defined Mercury\n.field__link {\n color: var(--mer-accent__primary);\n &:hover {\n color: var(--mer-accent__primary--hover);\n }\n &:active {\n color: var(--mer-accent__primary--active);\n }\n}\n// WA: Remove tab elevation background color\n.docsTab {\n background-color: transparent !important;\n}\n\n// WA: Styles for \"button-icon-only\" should be defined on mercury\n.dropdown.button-icon-only::part(expandable-button) {\n padding: calc(\n (\n var(--control__block-size) - 2 * var(--control__border-width) -\n var(--mer-icon__box--md)\n ) / 2\n ) !important;\n border-start-start-radius: 0 !important;\n border-end-start-radius: 0 !important;\n}\n\n.version-buttons-container {\n display: flex;\n align-items: center;\n gap: 1px;\n}\n\nch-markdown-viewer {\n block-size: 100%;\n overflow: auto;\n}\n\n// WA: Need text with underline. This should be defined on Mercury\n.text-underline {\n text-decoration: underline;\n}\n","import {\n Component,\n Host,\n State,\n Prop,\n Element,\n h,\n getAssetPath,\n JSX\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ActionMenuModel, TabModel } from \"@genexus/chameleon-controls-library\";\nimport { TabItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tab/types\";\n\nconst USER_ICON = getIconPath({\n category: \"system\",\n name: \"user\",\n colorType: \"on-elevation\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n category: \"system\",\n name: \"chevron-down\",\n colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n category: \"system\",\n name: \"check-circle\",\n colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/dropdown\",\n \"components/edit\",\n \"components/icon\",\n \"components/list-box\",\n \"components/tab\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/spacing\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-plugin-details\",\n styleUrl: \"plugin-details.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\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\n #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n // A map between docSection \"id\", and docSection \"description\".\n // \"id\" is generated inside this component.\n #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n @Element() el: HTMLGxIdePluginDetailsElement;\n\n @State() docsTabModel: TabModel = [];\n @State() selectedTabId: string;\n\n /\n Specifies all the information related to a plugin.\n /\n @Prop() readonly data!: PluginDetailsData;\n\n /\n Callback that should be invoked when the user performs the install or update action.\n * Receives an optional version string when a specific version is selected.\n /\n @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n /\n Callback that should be invoked when the user attempts to open any link displayed in this component.\n /\n @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n /\n Callback that should be invoked when the user performs the uninstall action.\n /\n @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n if (this.data.docSections?.length) {\n this.docsTabModel = this.data.docSections.map((docSection, i) => {\n const formatedId = this.#returnFormatedId(docSection.name);\n\n this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n if (i === 0) {\n this.selectedTabId = formatedId;\n }\n return {\n id: formatedId,\n name: docSection.name\n } as TabItemModel;\n });\n }\n }\n\n componentDidLoad() {\n this.#chMarkdownViewer.addEventListener(\"click\", event => {\n // Listens for clicks on links inside <ch-markdown-viewer>.\n // If a link (<a>) is clicked and openLinkCallback is defined,\n // it prevents the default navigation and delegates the event\n // to this.#openLinkHandler, passing the link's href.\n const path = event.composedPath() as EventTarget[];\n\n const link = path.find(el => el instanceof HTMLAnchorElement) as\n \| HTMLAnchorElement\n \| undefined;\n\n if (link?.href) {\n this.#openLinkHandler(link.href)(event);\n }\n });\n }\n\n #versionsMenuOptionsModel = (): ActionMenuModel => {\n const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n version => {\n return { id: version, caption: version };\n }\n );\n return versionsToUpdateMenusModel;\n };\n\n #menuVersionSelectedHandler = (\n event: CustomEvent<{\n id?: string;\n }>\n ) => {\n const selectedVersion = event.detail.id;\n this.installCallback(selectedVersion);\n };\n\n #renderUninstallButton = (): JSX.Element => {\n return (\n <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n {this.#componentLocale.actions.uninstall}\n </button>\n );\n };\n\n #installClickedHandler = () => {\n this.installCallback();\n };\n\n #updateVersionHandler = (id: string) => () => {\n this.installCallback(id);\n };\n\n #openLinkHandler = (link: string) => (event: MouseEvent) => {\n if (this.openLinkCallback) {\n event.preventDefault();\n this.openLinkCallback(link);\n }\n };\n\n #uninstallClickedHandler = () => {\n this.uninstallCallback();\n };\n\n #renderActionButtons = (): JSX.Element => {\n let actionButtonCaption;\n let actionButtonClasses = \"button-primary action-button\";\n let actionButtonCallback;\n const moreVersionsToUpdate = this.data.versions?.length;\n\n if (!this.data.installed) {\n actionButtonCaption = this.#componentLocale.actions.install;\n actionButtonCallback = this.#installClickedHandler;\n } else if (this.data.updateVersion) {\n actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n this.data.updateVersion\n }`;\n actionButtonCallback = this.#updateVersionHandler(\n this.data.updateVersion\n );\n } else {\n actionButtonCaption = this.#componentLocale.actions.installed;\n }\n\n if (moreVersionsToUpdate) {\n actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n }\n\n return [\n <div class=\"version-buttons-container\">\n <button class={actionButtonClasses} onClick={actionButtonCallback}>\n {actionButtonCaption}\n </button>\n {moreVersionsToUpdate ? (\n <ch-action-menu-render\n class=\"dropdown button-primary button-icon-only\"\n blockAlign=\"outside-end\"\n inlineAlign=\"inside-start\"\n model={this.#versionsMenuOptionsModel()}\n onButtonClick={this.#menuVersionSelectedHandler}\n >\n <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-md\"></ch-image>\n </ch-action-menu-render>\n ) : null}\n </div>\n ];\n };\n\n #tabSelectionChangedHandler = (\n event: CustomEvent<{\n lastSelectedIndex: number;\n newSelectedId: string;\n newSelectedIndex: number;\n }>\n ): void => {\n this.selectedTabId = event.detail.newSelectedId;\n };\n\n #renderDocSectionsSlots = (): JSX.Element => {\n return this.docsTabModel.map(docSectionTab => {\n if (docSectionTab.id === this.selectedTabId) {\n const markdownValue = this.#docSectionIdDescriptionMap.get(\n docSectionTab.id\n );\n\n return (\n <ch-markdown-viewer\n ref={(el: HTMLChMarkdownViewerElement) =>\n (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n }\n slot={docSectionTab.id}\n key={docSectionTab.id}\n class=\"markdown spacing-body scrollable\"\n theme=\"components/markdown-viewer\"\n value={markdownValue}\n ></ch-markdown-viewer>\n );\n }\n });\n };\n\n #returnFormatedId = (rawId: string): string => {\n return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n };\n\n #renderLinkTag = (\n href: string,\n label: string,\n cssClass?: string,\n chImageSrc?: string\n ): HTMLAnchorElement => {\n return (\n <a\n href={href}\n target=\"_blank\"\n onClick={this.#openLinkHandler(href)}\n class={cssClass}\n >\n {chImageSrc && <ch-image src={chImageSrc} class=\"icon-md\"></ch-image>}\n {label}\n </a>\n );\n };\n\n #renderAsideContent = (): JSX.Element => {\n return this.data.infoCategories.map(infoCategory => {\n return (\n <div class=\"plugin__info-category\">\n <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n <ul\n class={{\n \"fields__list\": true,\n \"fields__list--as-tags\": infoCategory.displayAsTags\n }}\n >\n {infoCategory.fields.map(field => {\n // If the field name isn’t specified, only the value is shown — usually a link.\n const fieldValue: string \| HTMLAnchorElement =\n typeof field.value === \"string\"\n ? (field.value as string)\n : this.#renderLinkTag(\n (field.value as LinkData).url,\n (field.value as LinkData).text,\n \"field__link\"\n );\n return (\n <li class=\"field__li\">\n {field.name && !infoCategory.displayAsTags\n ? // displaysAsTags forces the items to be displayed as tags\n // no span.field__name and span.field__value\n [\n <span class=\"field__name body-semi-bold-s\">\n {field.name}\n </span>,\n <span class=\"field__value body-regular-s\">\n {fieldValue}\n </span>\n ]\n : fieldValue}\n </li>\n );\n })}\n </ul>\n </div>\n );\n });\n };\n\n render() {\n const renderActionButtons =\n !this.data.installed \|\|\n (this.data.installed && !!this.data.updateVersion);\n\n const titleLinkDataText = (this.data.name as LinkData).text;\n const titleLinkDataUrl = (this.data.name as LinkData).url;\n const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n const titleText = titleLinkDataText \|\| this.data.name;\n\n const publisherDataText = (this.data.publisher as LinkData).text;\n const publisherDataUrl = (this.data.publisher as LinkData).url;\n const publisherHasLink = publisherDataText && publisherDataUrl;\n const publisherText = publisherDataText \|\| this.data.publisher;\n\n return (\n <Host class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n <header class=\"header\">\n <img\n class=\"plugin__icon\"\n src={this.data.iconUrl \|\| EXTENSION_ICON_IMG}\n alt=\"plugin extension icon\"\n />\n <div class=\"plugin__details\">\n {titleHasLink ? (\n <h2 class=\"heading-5 has-link\">\n {this.#renderLinkTag(\n titleLinkDataUrl,\n titleText as string,\n \"text-underline\"\n )}\n </h2>\n ) : (\n <h2 class=\"heading-5\">{titleText}</h2>\n )}\n {publisherHasLink ? (\n this.#renderLinkTag(\n publisherDataUrl,\n titleText as string,\n \"text-underline plugin__publisher tiny-semi-bold-l\",\n USER_ICON\n )\n ) : (\n <p class=\"plugin__publisher tiny-semi-bold-l\">\n <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n {publisherText}\n </p>\n )}\n\n <p class=\"plugin__description\">{this.data.description}</p>\n <div class=\"buttons-spacer plugin__actions-container\">\n {renderActionButtons ? (\n this.#renderActionButtons()\n ) : (\n // installed and no updates\n <p class=\"installed-container subtitle-semi-bold-s\">\n <ch-image\n src={CHECK_CIRCLE_ICON}\n class=\"icon-md\"\n ></ch-image>\n {this.#componentLocale.actions.installed}\n </p>\n )}\n {this.data.installed && this.#renderUninstallButton()}\n </div>\n </div>\n </header>\n <div class=\"main\">\n {this.docsTabModel.length > 0 && (\n <ch-tab-render\n class=\"tab docsTab scrollable\"\n tabListPosition=\"block-start\"\n overflow=\"auto\"\n contain=\"size\"\n model={this.docsTabModel}\n onSelectedItemChange={this.#tabSelectionChangedHandler}\n selectedId={this.selectedTabId}\n >\n {this.#renderDocSectionsSlots()}\n </ch-tab-render>\n )}\n </div>\n <div class=\"aside spacing-body scrollable\">\n {this.#renderAsideContent()}\n </div>\n </section>\n {/ <slot></slot> */}\n </Host>\n );\n }\n}\n\n// plugin-details.types.ts\n\nexport type LinkData = {\n text: string;\n url: string;\n};\n\nexport type PluginFieldData = {\n name?: string;\n value: string \| LinkData;\n};\n\nexport type PluginInfoCategoryData = {\n name: string;\n fields: PluginFieldData[];\n displayAsTags: boolean;\n};\n\nexport type DocSectionData = {\n name: string;\n content: string;\n};\n\nexport type PluginDetailsData = {\n id: string;\n name: string \| LinkData;\n publisher: string \| LinkData;\n installed: boolean;\n updateVersion?: string;\n versions: string[];\n iconUrl: string;\n description: string;\n docSections: DocSectionData[];\n infoCategories: PluginInfoCategoryData[];\n};\n"],"version":3}
1	+ {"file":"gx-ide-plugin-details.entry.js","mappings":"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","names":[],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":[":host {\n display: grid;\n block-size: 100%;\n grid-template-areas:\n \"header header\"\n \"main aside\";\n grid-template-rows: max-content 1fr;\n grid-template-columns: 1fr 280px;\n row-gap: 12px;\n}\n\n.section {\n display: contents;\n}\n\n// header\n.header {\n display: grid;\n grid-area: header;\n grid-template-areas: \"plugin-icon plugin-details\";\n grid-template-columns: 64px 1fr;\n column-gap: 16px;\n padding: 24px 24px 16px 24px;\n}\n.plugin__icon {\n grid-area: plugin-icon;\n inline-size: 100%;\n block-size: auto;\n display: block;\n}\n.plugin__details {\n grid-area: plugin-details;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.plugin__publisher {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.plugin__description {\n line-height: 1.5; // WA: Text appears too tight.\n}\n.plugin__actions-container {\n margin-block-start: 8px;\n align-items: center;\n}\n.action-button {\n min-inline-size: 100px;\n\n &.more-versions-available {\n border-start-end-radius: 0 !important;\n border-end-end-radius: 0 !important;\n }\n}\n.installed-container {\n display: flex;\n align-items: center;\n gap: 6px;\n\n // WA Biggest Mercury icon (icon-md) looks small in this case.\n // Mercury should expose more icon sizes.\n ch-image {\n --ch-image-size: 20px;\n }\n}\n\n// main\n.main {\n grid-area: main;\n}\n.docsTab {\n block-size: 100%;\n}\n\n// aside\n.aside {\n grid-area: aside;\n overflow: auto;\n border-block-start: 1px solid var(--items-container__border-color);\n}\n.fields__list {\n list-style: none;\n padding: 0;\n margin: 0;\n font-size: 12px;\n}\n.plugin__info-category {\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &:not(:first-child) {\n $space: 16px;\n padding-block-start: $space;\n margin-block-start: $space;\n border-block-start: 1px solid var(--mer-border-color__on-elevation--01);\n }\n}\n.fields__list:not(.fields__list--as-tags) {\n display: flex;\n flex-direction: column;\n gap: 8px;\n .field__li {\n display: flex;\n gap: 16px;\n }\n}\n.fields__list--as-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n\n .field__li {\n border: 1px solid var(--mer-border-color__on-elevation--01);\n padding: 2px 8px;\n border-radius: 4px;\n\n text-transform: lowercase;\n }\n .field__link {\n color: var(--mer-text__on-surface);\n\n &:hover {\n color: var(--mer-accent__primary);\n }\n &:active {\n color: var(--mer-accent__primary--hover);\n }\n }\n}\n\n.field__name,\n.field__value {\n flex: 1;\n}\n// WA: Link styles should be defined Mercury\n.field__link {\n color: var(--mer-accent__primary);\n &:hover {\n color: var(--mer-accent__primary--hover);\n }\n &:active {\n color: var(--mer-accent__primary--active);\n }\n}\n// WA: Remove tab elevation background color\n.docsTab {\n background-color: transparent !important;\n}\n\n// WA: Styles for \"button-icon-only\" should be defined on mercury\n.dropdown.button-icon-only::part(expandable-button) {\n padding: calc(\n (\n var(--control__block-size) - 2 \n var(--control__border-width) - var(--mer-icon__box--md)\n ) /\n 2\n ) !important;\n border-start-start-radius: 0 !important;\n border-end-start-radius: 0 !important;\n}\n\n.version-buttons-container {\n display: flex;\n align-items: center;\n gap: 1px;\n}\n\nch-markdown-viewer {\n block-size: 100%;\n overflow: auto;\n}\n\n// WA: Need text with underline. This should be defined on Mercury\n.text-underline {\n text-decoration: underline;\n}\n","import {\n Component,\n Host,\n State,\n Prop,\n Element,\n h,\n getAssetPath,\n JSX\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ActionMenuModel, TabModel } from \"@genexus/chameleon-controls-library\";\nimport { TabItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tab/types\";\n\nconst USER_ICON = getIconPath({\n category: \"system\",\n name: \"user\",\n colorType: \"on-elevation\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n category: \"system\",\n name: \"chevron-down\",\n colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n category: \"system\",\n name: \"check-circle\",\n colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/dropdown\",\n \"components/edit\",\n \"components/icon\",\n \"components/list-box\",\n \"components/tab\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/spacing\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-plugin-details\",\n styleUrl: \"plugin-details.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\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\n #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n // A map between docSection \"id\", and docSection \"description\".\n // \"id\" is generated inside this component.\n #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n @Element() el: HTMLGxIdePluginDetailsElement;\n\n @State() docsTabModel: TabModel = [];\n @State() selectedTabId: string;\n\n /\n Specifies all the information related to a plugin.\n /\n @Prop() readonly data!: PluginDetailsData;\n\n /\n Callback that should be invoked when the user performs the install or update action.\n * Receives an optional version string when a specific version is selected.\n /\n @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n /\n Callback that should be invoked when the user attempts to open any link displayed in this component.\n /\n @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n /\n Callback that should be invoked when the user performs the uninstall action.\n /\n @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n if (this.data.docSections?.length) {\n this.docsTabModel = this.data.docSections.map((docSection, i) => {\n const formatedId = this.#returnFormatedId(docSection.name);\n\n this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n if (i === 0) {\n this.selectedTabId = formatedId;\n }\n return {\n id: formatedId,\n name: docSection.name\n } as TabItemModel;\n });\n }\n }\n\n componentDidLoad() {\n this.#chMarkdownViewer.addEventListener(\"click\", event => {\n // Listens for clicks on links inside <ch-markdown-viewer>.\n // If a link (<a>) is clicked and openLinkCallback is defined,\n // it prevents the default navigation and delegates the event\n // to this.#openLinkHandler, passing the link's href.\n const path = event.composedPath() as EventTarget[];\n\n const link = path.find(el => el instanceof HTMLAnchorElement) as\n \| HTMLAnchorElement\n \| undefined;\n\n if (link?.href) {\n this.#openLinkHandler(link.href)(event);\n }\n });\n }\n\n #versionsMenuOptionsModel = (): ActionMenuModel => {\n const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n version => {\n return { id: version, caption: version };\n }\n );\n return versionsToUpdateMenusModel;\n };\n\n #menuVersionSelectedHandler = (\n event: CustomEvent<{\n id?: string;\n }>\n ) => {\n const selectedVersion = event.detail.id;\n this.installCallback(selectedVersion);\n };\n\n #renderUninstallButton = (): JSX.Element => {\n return (\n <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n {this.#componentLocale.actions.uninstall}\n </button>\n );\n };\n\n #installClickedHandler = () => {\n this.installCallback();\n };\n\n #updateVersionHandler = (id: string) => () => {\n this.installCallback(id);\n };\n\n #openLinkHandler = (link: string) => (event: MouseEvent) => {\n if (this.openLinkCallback) {\n event.preventDefault();\n this.openLinkCallback(link);\n }\n };\n\n #uninstallClickedHandler = () => {\n this.uninstallCallback();\n };\n\n #renderActionButtons = (): JSX.Element => {\n let actionButtonCaption;\n let actionButtonClasses = \"button-primary action-button\";\n let actionButtonCallback;\n const moreVersionsToUpdate = this.data.versions?.length;\n\n if (!this.data.installed) {\n actionButtonCaption = this.#componentLocale.actions.install;\n actionButtonCallback = this.#installClickedHandler;\n } else if (this.data.updateVersion) {\n actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n this.data.updateVersion\n }`;\n actionButtonCallback = this.#updateVersionHandler(\n this.data.updateVersion\n );\n } else {\n actionButtonCaption = this.#componentLocale.actions.installed;\n }\n\n if (moreVersionsToUpdate) {\n actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n }\n\n return [\n <div class=\"version-buttons-container\">\n <button class={actionButtonClasses} onClick={actionButtonCallback}>\n {actionButtonCaption}\n </button>\n {moreVersionsToUpdate ? (\n <ch-action-menu-render\n class=\"dropdown button-primary button-icon-only\"\n blockAlign=\"outside-end\"\n inlineAlign=\"inside-start\"\n model={this.#versionsMenuOptionsModel()}\n onButtonClick={this.#menuVersionSelectedHandler}\n >\n <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-md\"></ch-image>\n </ch-action-menu-render>\n ) : null}\n </div>\n ];\n };\n\n #tabSelectionChangedHandler = (\n event: CustomEvent<{\n lastSelectedIndex: number;\n newSelectedId: string;\n newSelectedIndex: number;\n }>\n ): void => {\n this.selectedTabId = event.detail.newSelectedId;\n };\n\n #renderDocSectionsSlots = (): JSX.Element => {\n return this.docsTabModel.map(docSectionTab => {\n if (docSectionTab.id === this.selectedTabId) {\n const markdownValue = this.#docSectionIdDescriptionMap.get(\n docSectionTab.id\n );\n\n return (\n <ch-markdown-viewer\n ref={(el: HTMLChMarkdownViewerElement) =>\n (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n }\n slot={docSectionTab.id}\n key={docSectionTab.id}\n class=\"markdown spacing-body scrollable\"\n theme=\"components/markdown-viewer\"\n value={markdownValue}\n ></ch-markdown-viewer>\n );\n }\n });\n };\n\n #returnFormatedId = (rawId: string): string => {\n return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n };\n\n #renderLinkTag = (\n href: string,\n label: string,\n cssClass?: string,\n chImageSrc?: string\n ): HTMLAnchorElement => {\n return (\n <a\n href={href}\n target=\"_blank\"\n onClick={this.#openLinkHandler(href)}\n class={cssClass}\n >\n {chImageSrc && <ch-image src={chImageSrc} class=\"icon-md\"></ch-image>}\n {label}\n </a>\n );\n };\n\n #renderAsideContent = (): JSX.Element => {\n return this.data.infoCategories.map(infoCategory => {\n return (\n <div class=\"plugin__info-category\">\n <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n <ul\n class={{\n \"fields__list\": true,\n \"fields__list--as-tags\": infoCategory.displayAsTags\n }}\n >\n {infoCategory.fields.map(field => {\n // If the field name isn’t specified, only the value is shown — usually a link.\n const fieldValue: string \| HTMLAnchorElement =\n typeof field.value === \"string\"\n ? (field.value as string)\n : this.#renderLinkTag(\n (field.value as LinkData).url,\n (field.value as LinkData).text,\n \"field__link\"\n );\n return (\n <li class=\"field__li\">\n {field.name && !infoCategory.displayAsTags\n ? // displaysAsTags forces the items to be displayed as tags\n // no span.field__name and span.field__value\n [\n <span class=\"field__name body-semi-bold-s\">\n {field.name}\n </span>,\n <span class=\"field__value body-regular-s\">\n {fieldValue}\n </span>\n ]\n : fieldValue}\n </li>\n );\n })}\n </ul>\n </div>\n );\n });\n };\n\n render() {\n const renderActionButtons =\n !this.data.installed \|\|\n (this.data.installed && !!this.data.updateVersion);\n\n const titleLinkDataText = (this.data.name as LinkData).text;\n const titleLinkDataUrl = (this.data.name as LinkData).url;\n const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n const titleText = titleLinkDataText \|\| this.data.name;\n\n const publisherDataText = (this.data.publisher as LinkData).text;\n const publisherDataUrl = (this.data.publisher as LinkData).url;\n const publisherHasLink = publisherDataText && publisherDataUrl;\n const publisherText = publisherDataText \|\| this.data.publisher;\n\n return (\n <Host class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n <header class=\"header\">\n <img\n class=\"plugin__icon\"\n src={this.data.iconUrl \|\| EXTENSION_ICON_IMG}\n alt=\"plugin extension icon\"\n />\n <div class=\"plugin__details\">\n {titleHasLink ? (\n <h2 class=\"heading-5 has-link\">\n {this.#renderLinkTag(\n titleLinkDataUrl,\n titleText as string,\n \"text-underline\"\n )}\n </h2>\n ) : (\n <h2 class=\"heading-5\">{titleText}</h2>\n )}\n {publisherHasLink ? (\n this.#renderLinkTag(\n publisherDataUrl,\n titleText as string,\n \"text-underline plugin__publisher tiny-semi-bold-l\",\n USER_ICON\n )\n ) : (\n <p class=\"plugin__publisher tiny-semi-bold-l\">\n <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n {publisherText}\n </p>\n )}\n\n <p class=\"plugin__description\">{this.data.description}</p>\n <div class=\"buttons-spacer plugin__actions-container\">\n {renderActionButtons ? (\n this.#renderActionButtons()\n ) : (\n // installed and no updates\n <p class=\"installed-container subtitle-semi-bold-s\">\n <ch-image\n src={CHECK_CIRCLE_ICON}\n class=\"icon-md\"\n ></ch-image>\n {this.#componentLocale.actions.installed}\n </p>\n )}\n {this.data.installed && this.#renderUninstallButton()}\n </div>\n </div>\n </header>\n <div class=\"main\">\n {this.docsTabModel.length > 0 && (\n <ch-tab-render\n class=\"tab docsTab scrollable\"\n tabListPosition=\"block-start\"\n overflow=\"auto\"\n contain=\"size\"\n model={this.docsTabModel}\n onSelectedItemChange={this.#tabSelectionChangedHandler}\n selectedId={this.selectedTabId}\n >\n {this.#renderDocSectionsSlots()}\n </ch-tab-render>\n )}\n </div>\n <div class=\"aside spacing-body scrollable\">\n {this.#renderAsideContent()}\n </div>\n </section>\n {/ <slot></slot> */}\n </Host>\n );\n }\n}\n\n// plugin-details.types.ts\n\nexport type LinkData = {\n text: string;\n url: string;\n};\n\nexport type PluginFieldData = {\n name?: string;\n value: string \| LinkData;\n};\n\nexport type PluginInfoCategoryData = {\n name: string;\n fields: PluginFieldData[];\n displayAsTags: boolean;\n};\n\nexport type DocSectionData = {\n name: string;\n content: string;\n};\n\nexport type PluginDetailsData = {\n id: string;\n name: string \| LinkData;\n publisher: string \| LinkData;\n installed: boolean;\n updateVersion?: string;\n versions: string[];\n iconUrl: string;\n description: string;\n docSections: DocSectionData[];\n infoCategories: PluginInfoCategoryData[];\n};\n"],"version":3}

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

@@ -2501,7 +2501,7 @@ const zhCN = {
   },
 };
-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  --spacing-body-block-start: var(--mer-spacing--lg);\n  --spacing-body-block-end: var(--mer-spacing--lg);\n  --spacing-body-inline-start: var(--mer-spacing--lg);\n  --spacing-body-inline-end: var(--mer-spacing--lg);\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\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: 372px;\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}";
+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)
@@ -2673,25 +2673,30 @@ const GxIdeStartPage = class {
         var _a, _b;
         this.loading =
             (!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
+        const renderCreateProjectCard = this.createKBCallback;
+        const renderOpenProjectCard = this.openKbCallback;
         const renderViewSamplesCard = ((_b = this.samples) === null || _b === void 0 ? void 0 : _b.length) && this.openSampleCallback;
+        const renderCardsContainer = renderCreateProjectCard || renderOpenProjectCard || renderViewSamplesCard;
         return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
             // Create a new Knowledge Base
             class: "section-create-new-kb"
         }, h("header", {
             // main header
             class: "section-create-new-kb__header"
-        }, h("h1", { class: "heading-5 section-create-new-kb__title" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.title), h("p", { class: "body-regular-m" }, __classPrivateFieldGet(this, _GxIdeStartPage_componentLocale, "f").createKB.description)), h("section", { class: "section-create-new-kb__actions scrollable" }, h("article", {
+        }, 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-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", {
+        }, 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-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", {
+        }, 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))))));
+        }))))) : 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 getElement(this); }