@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.
- package/dist/cjs/gx-ide-plugin-details.cjs.entry.js +1 -1
- package/dist/cjs/gx-ide-plugin-details.cjs.entry.js.map +1 -1
- package/dist/cjs/gx-ide-start-page.cjs.entry.js +10 -5
- package/dist/cjs/gx-ide-start-page.cjs.entry.js.map +1 -1
- package/dist/collection/components/plugin-details/plugin-details.css +3 -1
- package/dist/collection/components/start-page/start-page.css +27 -5
- package/dist/collection/components/start-page/start-page.js +9 -4
- package/dist/collection/components/start-page/start-page.js.map +1 -1
- package/dist/collection/pages/assets/images/plugin/python-logo.svg +16 -0
- package/dist/components/gx-ide-plugin-details.js +1 -1
- package/dist/components/gx-ide-plugin-details.js.map +1 -1
- package/dist/components/gx-ide-start-page.js +10 -5
- package/dist/components/gx-ide-start-page.js.map +1 -1
- package/dist/esm/gx-ide-plugin-details.entry.js +1 -1
- package/dist/esm/gx-ide-plugin-details.entry.js.map +1 -1
- package/dist/esm/gx-ide-start-page.entry.js +10 -5
- package/dist/esm/gx-ide-start-page.entry.js.map +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/{p-60302626.entry.js → p-18bbaa49.entry.js} +26 -26
- package/dist/genexus-ide-ui/p-18bbaa49.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-d67ff6a5.entry.js → p-ab1e2886.entry.js} +51 -48
- package/dist/genexus-ide-ui/p-ab1e2886.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/genexus-ide-ui/p-60302626.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-d67ff6a5.entry.js.map +0 -1
|
@@ -4,15 +4,37 @@
|
|
|
4
4
|
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.
|
|
5
5
|
*/
|
|
6
6
|
:host {
|
|
7
|
-
--spacing
|
|
8
|
-
--spacing-body-block-
|
|
9
|
-
--spacing-body-
|
|
10
|
-
--spacing-body-inline-
|
|
7
|
+
--common-spacing: var(--mer-spacing--lg);
|
|
8
|
+
--spacing-body-block-start: var(--common-spacing);
|
|
9
|
+
--spacing-body-block-end: var(--common-spacing);
|
|
10
|
+
--spacing-body-inline-start: var(--common-spacing);
|
|
11
|
+
--spacing-body-inline-end: 0;
|
|
12
|
+
--spacing-body-inline-start: 0;
|
|
11
13
|
display: grid;
|
|
12
14
|
block-size: 100%;
|
|
13
15
|
overflow: auto;
|
|
14
16
|
}
|
|
15
17
|
|
|
18
|
+
:host(.spacing-body) .section-secondary,
|
|
19
|
+
:host(.spacing-body) .section-create-new-kb__header,
|
|
20
|
+
:host(.spacing-body) .section-create-new-kb__actions,
|
|
21
|
+
:host(.spacing-body-inline) .section-secondary,
|
|
22
|
+
:host(.spacing-body-inline) .section-create-new-kb__header,
|
|
23
|
+
:host(.spacing-body-inline) .section-create-new-kb__actions {
|
|
24
|
+
padding-inline-start: var(--common-spacing);
|
|
25
|
+
padding-inline-end: var(--common-spacing);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:host(.spacing-body-inline-start) .section-secondary,
|
|
29
|
+
:host(.spacing-body-inline-start) .section-create-new-kb__actions {
|
|
30
|
+
padding-inline-start: var(--common-spacing);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host(.spacing-body-inline-end) .section-secondary,
|
|
34
|
+
:host(.spacing-body-inline-end) .section-create-new-kb__actions {
|
|
35
|
+
padding-inline-end: var(--common-spacing);
|
|
36
|
+
}
|
|
37
|
+
|
|
16
38
|
.main {
|
|
17
39
|
animation: fadeIn var(--mer-timing--fast) forwards;
|
|
18
40
|
display: grid;
|
|
@@ -112,7 +134,7 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
|
|
|
112
134
|
gap: var(--mer-spacing--md);
|
|
113
135
|
overflow-x: auto;
|
|
114
136
|
grid-auto-flow: column;
|
|
115
|
-
grid-auto-columns:
|
|
137
|
+
grid-auto-columns: 330px;
|
|
116
138
|
}
|
|
117
139
|
|
|
118
140
|
.samples-buttons-container {
|
|
@@ -177,25 +177,30 @@ export class GxIdeStartPage {
|
|
|
177
177
|
var _a, _b;
|
|
178
178
|
this.loading =
|
|
179
179
|
(!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
|
|
180
|
+
const renderCreateProjectCard = this.createKBCallback;
|
|
181
|
+
const renderOpenProjectCard = this.openKbCallback;
|
|
180
182
|
const renderViewSamplesCard = ((_b = this.samples) === null || _b === void 0 ? void 0 : _b.length) && this.openSampleCallback;
|
|
183
|
+
const renderCardsContainer = renderCreateProjectCard || renderOpenProjectCard || renderViewSamplesCard;
|
|
181
184
|
return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
|
|
182
185
|
// Create a new Knowledge Base
|
|
183
186
|
class: "section-create-new-kb"
|
|
184
187
|
}, h("header", {
|
|
185
188
|
// main header
|
|
186
189
|
class: "section-create-new-kb__header"
|
|
187
|
-
}, 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", {
|
|
190
|
+
}, 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", {
|
|
188
191
|
// create project
|
|
189
192
|
class: "card card-filled"
|
|
190
|
-
}, 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", {
|
|
193
|
+
}, 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", {
|
|
191
194
|
// open existing project
|
|
192
195
|
class: "card-filled"
|
|
193
|
-
}, 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
|
|
196
|
+
}, 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
|
|
197
|
+
.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
|
|
198
|
+
.buttonCaption)))), renderViewSamplesCard ? (h("article", {
|
|
194
199
|
// view samples
|
|
195
200
|
class: "card-filled"
|
|
196
201
|
}, 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 => {
|
|
197
202
|
return (h("button", { class: "button-secondary", onClick: () => this.openSampleCallback(sample) }, sample.name));
|
|
198
|
-
}))))) : 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))))));
|
|
203
|
+
}))))) : 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))))));
|
|
199
204
|
}
|
|
200
205
|
static get is() { return "gx-ide-start-page"; }
|
|
201
206
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"start-page.js","sourceRoot":"","sources":["../../../src/components/start-page/start-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// Stencil\nimport { Component, Host, h, Prop, State, Element, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { formatDistanceToNow, Locale as LocaleDateFns } from \"date-fns\";\nimport { ja, zhCN, enUS } from \"date-fns/locale\";\n// import { enUS } from \"date-fns/locale\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n// Custom\nimport { Locale } from \"../../common/locale\";\n\n// const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English\n\nimport { formatDate } from \"../../common/helpers\";\n\nconst LANGS_DATE_FNS_MAP: LanguageMap = {\n \"en\": enUS,\n \"ja\": ja,\n \"zh-CN\": zhCN,\n \"zh-TW\": zhCN,\n \"zh-HK\": zhCN\n};\n\nconst DETAIL_ICON = getIconPath({\n category: \"system\",\n name: \"detail\",\n colorType: \"primary\"\n});\nconst FILTER_ICON = getIconPath({\n category: \"window-tools\",\n name: \"filter\",\n colorType: \"on-elevation\"\n});\nconst KB_DEFAULT_ICON = getIconPath({\n category: \"objects\",\n name: \"knowledge-base\"\n});\nconst SEARCH_ICON = getIconPath({\n category: \"system\",\n name: \"search\",\n colorType: \"on-elevation\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"utils/layout\",\n \"components/edit\",\n \"components/icon\",\n \"components/button\",\n \"chameleon/scrollbar\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-start-page\",\n styleUrl: \"start-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\n /**\n * The component hard-coded strings translations.\n */\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n #userLanguage: LocaleDateFns;\n\n @Element() el: HTMLGxIdeStartPageElement;\n\n /**\n * The kbs after the filter value.\n */\n @State() filteredKbs: RecentKBData[];\n\n @State() kbFilterValue: string = \"\";\n @Watch(\"kbFilterValue\")\n kbFilterValueChanged(newKbFilterValue: string) {\n this.filteredKbs = this.kbs.filter(kb =>\n kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase())\n );\n }\n\n /**\n * True if the start page is waiting, either for the kb's list or the secondary section.\n */\n @State() loading: boolean = true;\n\n /**\n * Callback invoked to create a new KB. It must be specified whether this create is create from server or not, through the parameter 'fromServer'.\n */\n @Prop() readonly createKBCallback!: (fromServer: boolean) => Promise<void>;\n\n /**\n * User's kbs array\n */\n @Prop() readonly kbs: RecentKBData[];\n @Watch(\"kbs\")\n kbsChanged(newKbs: RecentKBData[]) {\n this.filteredKbs = newKbs;\n this.kbFilterValue = \"\"; // clear filter\n }\n\n /**\n * The minimum required of kbs to display a filter.\n */\n @Prop() readonly kbsFilterThreshold: number;\n\n /**\n * Callback invoked to open a KB when the user clicks on a KB card.\n */\n @Prop() readonly openKbCallback!: (id: string) => Promise<void>;\n\n /**\n * Callback invoked when the user clicks a button to open a sample.\n */\n @Prop() readonly openSampleCallback!: (sample: SampleData) => Promise<void>;\n\n /**\n * List of samples available to be displayed in the samples card.\n */\n @Prop() readonly samples?: SampleData[];\n\n /**\n * The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs.\n */\n @Prop() readonly secondarySection?: SecondarySection;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n // initialize filteredKbs\n this.kbsChanged(this.kbs);\n\n // get user language to display the kb \"last opened\" value in the appropriate language.\n const userLanguage: keyof LanguageMap = document.documentElement\n .lang as keyof LanguageMap;\n this.#userLanguage = LANGS_DATE_FNS_MAP[userLanguage];\n }\n\n #createKBClickHandler = (fromServer: boolean) => (event: MouseEvent) => {\n event.stopPropagation();\n this.createKBCallback(fromServer);\n };\n\n #filterKbs = (event: ChEditCustomEvent<string> | InputEvent) => {\n this.kbFilterValue = event.detail as string;\n };\n\n #openKbClickHandler = (kbId: string) => (event: MouseEvent) => {\n event.stopPropagation();\n this.openKbCallback(kbId);\n };\n\n // renders\n\n #evaluateContentToRender() {\n return this.kbs && this.kbs.length > 0\n ? this.#renderKbsSection()\n : this.#renderSecondarySection();\n }\n\n #renderKbsSection = () => {\n const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;\n const kbsListEmpty = this.filteredKbs.length === 0;\n let contentToRender: HTMLGxgIdeLoaderElement | HTMLElement[];\n\n // Evaluate what is the content to display.\n if (this.filteredKbs.length > 0) {\n contentToRender = this.#renderKbs();\n } else {\n // No kb has pass the filter. Display an empty-state.\n contentToRender = (\n <gx-ide-empty-state\n isAnimated\n stateIconSrc={FILTER_ICON}\n stateTitle={this.#componentLocale.recentKBs.noMatches}\n ></gx-ide-empty-state>\n );\n }\n\n return (\n <section class=\"section-kbs\">\n <header\n class={{\n \"section-kbs__header\": true\n }}\n >\n <label\n class=\"subtitle-regular-s section-kbs__title\"\n htmlFor=\"filter-kbs\"\n >\n {this.#componentLocale.recentKBs.title}\n </label>\n <ch-edit\n // Render always, and display or hide, ro prevent FOUC, and also prevent\n // the header block-size from growing a little bit when the input renders.\n id=\"filter-kbs\"\n value={this.kbFilterValue}\n class={{\n \"input\": true,\n \"section-kbs__filter--hidden\": hideKbsFilter\n }}\n startImgSrc={SEARCH_ICON}\n placeholder={this.#componentLocale.recentKBs.filterKbsPlaceholder}\n onInput={!hideKbsFilter && this.#filterKbs}\n disabled={hideKbsFilter}\n ></ch-edit>\n </header>\n\n <div\n class={{\n \"section-kbs__list\": true,\n \"section-kbs__list--empty\": kbsListEmpty,\n \"scrollable\": true\n }}\n >\n {this.filteredKbs.length > 0 ? this.#renderKbs() : contentToRender}\n </div>\n </section>\n );\n };\n\n #renderKbs = (): HTMLElement[] => {\n return this.filteredKbs?.map((kb, index) => {\n // relative time ago\n\n const relativeDate = kb.lastOpenedDate\n ? formatDistanceToNow(new Date(kb.lastOpenedDate), {\n addSuffix: true,\n locale: this.#userLanguage\n })\n : undefined;\n\n // convert date to date format, since toISOString() requires date as Date.\n const dateAsDate = kb.lastOpenedDate\n ? new Date(kb.lastOpenedDate)\n : undefined;\n\n let dateFormated = formatDate(dateAsDate, \"date-time-short\");\n\n // icon\n const kbIcon = kb.icon ?? KB_DEFAULT_ICON;\n\n return (\n <article class=\"kb__item\" key={index}>\n <div class=\"kb__details\">\n <ch-image class=\"icon-md\" src={kbIcon}></ch-image>\n <button\n class=\"body-regular-m kb__name\"\n onClick={this.#openKbClickHandler(kb.id)}\n >\n {kb.name}\n </button>\n </div>\n {relativeDate && (\n <p class=\"body-regular-m kb__modified\">\n {`${this.#componentLocale.recentKBs.opened}`}{\" \"}\n <time dateTime={dateFormated}>{dateFormated}</time>\n </p>\n )}\n </article>\n );\n });\n };\n\n #renderSecondarySection = (): HTMLElement | null => {\n if (!this.secondarySection) {\n return null;\n }\n\n const multipleCards = this.secondarySection.cards.length > 2;\n\n return (\n <section\n // Recent Knowledge Bases\n class=\"section-no-kbs\"\n >\n <header>\n <h2 class=\"body-regular-s section-secondary__title\">\n {this.secondarySection.title}\n </h2>\n </header>\n\n <section\n class={{\n \"section-secondary__actions\": true,\n \"section-secondary__actions--two-cards\": !multipleCards,\n \"section-secondary__actions--multiple-cards\": multipleCards,\n \"scrollable\": true\n }}\n >\n {this.secondarySection.cards.map((card, index) => {\n return (\n <article class=\"card card-outlined\" key={index}>\n <span class=\"icon-capsule\">\n <ch-image\n class=\"icon-md icon-circular\"\n src={card.icon.src}\n aria-label={card.icon.ariaLabel}\n ></ch-image>\n </span>\n <header class=\"card__header\">\n <h2 class=\"subtitle-semi-bold-xs card__header-title\">\n {card.title}\n </h2>\n {card.description.map(paragraph => (\n <p class=\"body-regular-s card__header-description\">\n {paragraph}\n </p>\n ))}\n {card.action && (\n <button\n class=\"button-tertiary button-icon-and-text button-tertiary-no-padding-inline-start\"\n onClick={card.action.callback && card.action.callback}\n >\n <ch-image class=\"icon-md\" src={DETAIL_ICON}></ch-image>\n {card.action.caption}\n </button>\n )}\n </header>\n </article>\n );\n })}\n </section>\n </section>\n );\n };\n\n render() {\n this.loading =\n (!this.kbs || this.kbs?.length === 0) && !this.secondarySection;\n\n const renderViewSamplesCard =\n this.samples?.length && this.openSampleCallback;\n\n return (\n <Host class=\"scrollable\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <main class=\"main scrollable\">\n <section\n // Create a new Knowledge Base\n class=\"section-create-new-kb\"\n >\n <header\n // main header\n class=\"section-create-new-kb__header\"\n >\n <h1 class=\"heading-5 section-create-new-kb__title\">\n {this.#componentLocale.createKB.title}\n </h1>\n <p class=\"body-regular-m\">\n {this.#componentLocale.createKB.description}\n </p>\n </header>\n\n <section class=\"section-create-new-kb__actions scrollable\">\n <article\n // create project\n class=\"card card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"subtitle-semi-bold-xs card__header-title\">\n {this.#componentLocale.createProject.title}\n </h2>\n <p class=\"body-regular-s\">\n {this.#componentLocale.createProject.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <button\n class=\"button-primary\"\n onClick={this.#createKBClickHandler(false)}\n >\n {this.#componentLocale.createProject.buttonCaption}\n </button>\n </footer>\n </article>\n\n <article\n // open existing project\n class=\"card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"subtitle-semi-bold-xs\">\n {this.#componentLocale.openExistingProject.title}\n </h2>\n <p class=\"body-regular-s\">\n {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\n {renderViewSamplesCard ? (\n <article\n // view samples\n class=\"card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"subtitle-semi-bold-xs\">\n {this.#componentLocale.viewSamples.title}\n </h2>\n <p class=\"body-regular-s\">\n {this.#componentLocale.viewSamples.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <div class=\"buttons-spacer samples-buttons-container\">\n {this.samples.map(sample => {\n return (\n <button\n class=\"button-secondary\"\n onClick={() => this.openSampleCallback(sample)}\n >\n {sample.name}\n </button>\n );\n })}\n </div>\n </footer>\n </article>\n ) : null}\n </section>\n </section>\n <section class=\"section-secondary scrollable\">\n {this.loading ? (\n <gx-ide-loader\n class=\"loader\"\n loaderTitle={this.#componentLocale.recentKBs.loaderTitle}\n description={this.#componentLocale.recentKBs.loaderDescription}\n show\n ></gx-ide-loader>\n ) : (\n this.#evaluateContentToRender()\n )}\n </section>\n </main>\n </Host>\n );\n }\n}\n\nexport type CardInfo = {\n icon?: {\n src: string;\n ariaLabel: string;\n };\n title: string;\n description: string[];\n action?: {\n iconSrc: string;\n caption: string;\n callback?: () => void;\n };\n};\n\ntype LanguageMap = {\n \"en\": LocaleDateFns;\n \"ja\": LocaleDateFns;\n \"zh-CN\": LocaleDateFns;\n \"zh-TW\": LocaleDateFns;\n \"zh-HK\": LocaleDateFns;\n};\n\nexport type RecentKBData = {\n id?: string;\n name: string;\n lastOpenedDate?: Date;\n icon: string;\n};\n\nexport type SampleData = {\n name: string;\n serverUrl: string;\n kbName: string;\n};\n\nexport type SecondarySection = {\n title: string;\n cards: CardInfo[];\n};\n"]}
|
|
1
|
+
{"version":3,"file":"start-page.js","sourceRoot":"","sources":["../../../src/components/start-page/start-page.tsx"],"names":[],"mappings":"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","sourcesContent":["// Stencil\nimport { Component, Host, h, Prop, State, Element, Watch } from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\nimport { formatDistanceToNow, Locale as LocaleDateFns } from \"date-fns\";\nimport { ja, zhCN, enUS } from \"date-fns/locale\";\n// import { enUS } from \"date-fns/locale\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\n// Custom\nimport { Locale } from \"../../common/locale\";\n\n// const locale = enUS; // use `zhCN` for Chinese, `ja` for Japanese, `enUS` for English\n\nimport { formatDate } from \"../../common/helpers\";\n\nconst LANGS_DATE_FNS_MAP: LanguageMap = {\n \"en\": enUS,\n \"ja\": ja,\n \"zh-CN\": zhCN,\n \"zh-TW\": zhCN,\n \"zh-HK\": zhCN\n};\n\nconst DETAIL_ICON = getIconPath({\n category: \"system\",\n name: \"detail\",\n colorType: \"primary\"\n});\nconst FILTER_ICON = getIconPath({\n category: \"window-tools\",\n name: \"filter\",\n colorType: \"on-elevation\"\n});\nconst KB_DEFAULT_ICON = getIconPath({\n category: \"objects\",\n name: \"knowledge-base\"\n});\nconst SEARCH_ICON = getIconPath({\n category: \"system\",\n name: \"search\",\n colorType: \"on-elevation\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"utils/layout\",\n \"components/edit\",\n \"components/icon\",\n \"components/button\",\n \"chameleon/scrollbar\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-start-page\",\n styleUrl: \"start-page.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/start-page\"]\n})\nexport class GxIdeStartPage {\n /**\n * The component hard-coded strings translations.\n */\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n #userLanguage: LocaleDateFns;\n\n @Element() el: HTMLGxIdeStartPageElement;\n\n /**\n * The kbs after the filter value.\n */\n @State() filteredKbs: RecentKBData[];\n\n @State() kbFilterValue: string = \"\";\n @Watch(\"kbFilterValue\")\n kbFilterValueChanged(newKbFilterValue: string) {\n this.filteredKbs = this.kbs.filter(kb =>\n kb.name.toLowerCase().includes(newKbFilterValue.toLocaleLowerCase())\n );\n }\n\n /**\n * True if the start page is waiting, either for the kb's list or the secondary section.\n */\n @State() loading: boolean = true;\n\n /**\n * Callback invoked to create a new KB. It must be specified whether this create is create from server or not, through the parameter 'fromServer'.\n */\n @Prop() readonly createKBCallback!: (fromServer: boolean) => Promise<void>;\n\n /**\n * User's kbs array\n */\n @Prop() readonly kbs: RecentKBData[];\n @Watch(\"kbs\")\n kbsChanged(newKbs: RecentKBData[]) {\n this.filteredKbs = newKbs;\n this.kbFilterValue = \"\"; // clear filter\n }\n\n /**\n * The minimum required of kbs to display a filter.\n */\n @Prop() readonly kbsFilterThreshold: number;\n\n /**\n * Callback invoked to open a KB when the user clicks on a KB card.\n */\n @Prop() readonly openKbCallback!: (id: string) => Promise<void>;\n\n /**\n * Callback invoked when the user clicks a button to open a sample.\n */\n @Prop() readonly openSampleCallback!: (sample: SampleData) => Promise<void>;\n\n /**\n * List of samples available to be displayed in the samples card.\n */\n @Prop() readonly samples?: SampleData[];\n\n /**\n * The secondary section that will appear below the \"Create a new Knowledge Base\" main section. This section will be displayed if there are no recent kbs.\n */\n @Prop() readonly secondarySection?: SecondarySection;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n // initialize filteredKbs\n this.kbsChanged(this.kbs);\n\n // get user language to display the kb \"last opened\" value in the appropriate language.\n const userLanguage: keyof LanguageMap = document.documentElement\n .lang as keyof LanguageMap;\n this.#userLanguage = LANGS_DATE_FNS_MAP[userLanguage];\n }\n\n #createKBClickHandler = (fromServer: boolean) => (event: MouseEvent) => {\n event.stopPropagation();\n this.createKBCallback(fromServer);\n };\n\n #filterKbs = (event: ChEditCustomEvent<string> | InputEvent) => {\n this.kbFilterValue = event.detail as string;\n };\n\n #openKbClickHandler = (kbId: string) => (event: MouseEvent) => {\n event.stopPropagation();\n this.openKbCallback(kbId);\n };\n\n // renders\n\n #evaluateContentToRender() {\n return this.kbs && this.kbs.length > 0\n ? this.#renderKbsSection()\n : this.#renderSecondarySection();\n }\n\n #renderKbsSection = () => {\n const hideKbsFilter = this.kbs.length < this.kbsFilterThreshold;\n const kbsListEmpty = this.filteredKbs.length === 0;\n let contentToRender: HTMLGxgIdeLoaderElement | HTMLElement[];\n\n // Evaluate what is the content to display.\n if (this.filteredKbs.length > 0) {\n contentToRender = this.#renderKbs();\n } else {\n // No kb has pass the filter. Display an empty-state.\n contentToRender = (\n <gx-ide-empty-state\n isAnimated\n stateIconSrc={FILTER_ICON}\n stateTitle={this.#componentLocale.recentKBs.noMatches}\n ></gx-ide-empty-state>\n );\n }\n\n return (\n <section class=\"section-kbs\">\n <header\n class={{\n \"section-kbs__header\": true\n }}\n >\n <label\n class=\"subtitle-regular-s section-kbs__title\"\n htmlFor=\"filter-kbs\"\n >\n {this.#componentLocale.recentKBs.title}\n </label>\n <ch-edit\n // Render always, and display or hide, ro prevent FOUC, and also prevent\n // the header block-size from growing a little bit when the input renders.\n id=\"filter-kbs\"\n value={this.kbFilterValue}\n class={{\n \"input\": true,\n \"section-kbs__filter--hidden\": hideKbsFilter\n }}\n startImgSrc={SEARCH_ICON}\n placeholder={this.#componentLocale.recentKBs.filterKbsPlaceholder}\n onInput={!hideKbsFilter && this.#filterKbs}\n disabled={hideKbsFilter}\n ></ch-edit>\n </header>\n\n <div\n class={{\n \"section-kbs__list\": true,\n \"section-kbs__list--empty\": kbsListEmpty,\n \"scrollable\": true\n }}\n >\n {this.filteredKbs.length > 0 ? this.#renderKbs() : contentToRender}\n </div>\n </section>\n );\n };\n\n #renderKbs = (): HTMLElement[] => {\n return this.filteredKbs?.map((kb, index) => {\n // relative time ago\n\n const relativeDate = kb.lastOpenedDate\n ? formatDistanceToNow(new Date(kb.lastOpenedDate), {\n addSuffix: true,\n locale: this.#userLanguage\n })\n : undefined;\n\n // convert date to date format, since toISOString() requires date as Date.\n const dateAsDate = kb.lastOpenedDate\n ? new Date(kb.lastOpenedDate)\n : undefined;\n\n let dateFormated = formatDate(dateAsDate, \"date-time-short\");\n\n // icon\n const kbIcon = kb.icon ?? KB_DEFAULT_ICON;\n\n return (\n <article class=\"kb__item\" key={index}>\n <div class=\"kb__details\">\n <ch-image class=\"icon-md\" src={kbIcon}></ch-image>\n <button\n class=\"body-regular-m kb__name\"\n onClick={this.#openKbClickHandler(kb.id)}\n >\n {kb.name}\n </button>\n </div>\n {relativeDate && (\n <p class=\"body-regular-m kb__modified\">\n {`${this.#componentLocale.recentKBs.opened}`}{\" \"}\n <time dateTime={dateFormated}>{dateFormated}</time>\n </p>\n )}\n </article>\n );\n });\n };\n\n #renderSecondarySection = (): HTMLElement | null => {\n if (!this.secondarySection) {\n return null;\n }\n\n const multipleCards = this.secondarySection.cards.length > 2;\n\n return (\n <section\n // Recent Knowledge Bases\n class=\"section-no-kbs\"\n >\n <header>\n <h2 class=\"body-regular-s section-secondary__title\">\n {this.secondarySection.title}\n </h2>\n </header>\n\n <section\n class={{\n \"section-secondary__actions\": true,\n \"section-secondary__actions--two-cards\": !multipleCards,\n \"section-secondary__actions--multiple-cards\": multipleCards,\n \"scrollable\": true\n }}\n >\n {this.secondarySection.cards.map((card, index) => {\n return (\n <article class=\"card card-outlined\" key={index}>\n <span class=\"icon-capsule\">\n <ch-image\n class=\"icon-md icon-circular\"\n src={card.icon.src}\n aria-label={card.icon.ariaLabel}\n ></ch-image>\n </span>\n <header class=\"card__header\">\n <h2 class=\"subtitle-semi-bold-xs card__header-title\">\n {card.title}\n </h2>\n {card.description.map(paragraph => (\n <p class=\"body-regular-s card__header-description\">\n {paragraph}\n </p>\n ))}\n {card.action && (\n <button\n class=\"button-tertiary button-icon-and-text button-tertiary-no-padding-inline-start\"\n onClick={card.action.callback && card.action.callback}\n >\n <ch-image class=\"icon-md\" src={DETAIL_ICON}></ch-image>\n {card.action.caption}\n </button>\n )}\n </header>\n </article>\n );\n })}\n </section>\n </section>\n );\n };\n\n render() {\n this.loading =\n (!this.kbs || this.kbs?.length === 0) && !this.secondarySection;\n\n const renderCreateProjectCard = this.createKBCallback;\n const renderOpenProjectCard = this.openKbCallback;\n const renderViewSamplesCard =\n this.samples?.length && this.openSampleCallback;\n const renderCardsContainer =\n renderCreateProjectCard || renderOpenProjectCard || renderViewSamplesCard;\n\n return (\n <Host class=\"scrollable\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <main class=\"main scrollable\">\n <section\n // Create a new Knowledge Base\n class=\"section-create-new-kb\"\n >\n <header\n // main header\n class=\"section-create-new-kb__header\"\n >\n <h1 class=\"heading-5 section-create-new-kb__title\">\n {this.#componentLocale.createKB.title}\n </h1>\n <p class=\"body-regular-m\">\n {this.#componentLocale.createKB.description}\n </p>\n </header>\n\n {renderCardsContainer && (\n <section class=\"section-create-new-kb__actions scrollable\">\n {renderCreateProjectCard && (\n <article\n // create project\n class=\"card card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"subtitle-semi-bold-xs card__header-title\">\n {this.#componentLocale.createProject.title}\n </h2>\n <p class=\"body-regular-s\">\n {this.#componentLocale.createProject.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <button\n class=\"button-primary\"\n onClick={this.#createKBClickHandler(false)}\n >\n {this.#componentLocale.createProject.buttonCaption}\n </button>\n </footer>\n </article>\n )}\n\n {renderOpenProjectCard && (\n <article\n // open existing project\n class=\"card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"subtitle-semi-bold-xs\">\n {this.#componentLocale.openExistingProject.title}\n </h2>\n <p class=\"body-regular-s\">\n {\n this.#componentLocale.openExistingProject\n .description\n }\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#createKBClickHandler(true)}\n >\n {\n this.#componentLocale.openExistingProject\n .buttonCaption\n }\n </button>\n </footer>\n </article>\n )}\n\n {renderViewSamplesCard ? (\n <article\n // view samples\n class=\"card-filled\"\n >\n <header class=\"card__header\">\n <div class=\"card__header-description\">\n <h2 class=\"subtitle-semi-bold-xs\">\n {this.#componentLocale.viewSamples.title}\n </h2>\n <p class=\"body-regular-s\">\n {this.#componentLocale.viewSamples.description}\n </p>\n </div>\n </header>\n <footer class=\"card__footer\">\n <div class=\"buttons-spacer samples-buttons-container\">\n {this.samples.map(sample => {\n return (\n <button\n class=\"button-secondary\"\n onClick={() => this.openSampleCallback(sample)}\n >\n {sample.name}\n </button>\n );\n })}\n </div>\n </footer>\n </article>\n ) : null}\n </section>\n )}\n </section>\n <section class=\"section-secondary scrollable\">\n {this.loading ? (\n <gx-ide-loader\n class=\"loader\"\n loaderTitle={this.#componentLocale.recentKBs.loaderTitle}\n description={this.#componentLocale.recentKBs.loaderDescription}\n show\n ></gx-ide-loader>\n ) : (\n this.#evaluateContentToRender()\n )}\n </section>\n </main>\n </Host>\n );\n }\n}\n\nexport type CardInfo = {\n icon?: {\n src: string;\n ariaLabel: string;\n };\n title: string;\n description: string[];\n action?: {\n iconSrc: string;\n caption: string;\n callback?: () => void;\n };\n};\n\ntype LanguageMap = {\n \"en\": LocaleDateFns;\n \"ja\": LocaleDateFns;\n \"zh-CN\": LocaleDateFns;\n \"zh-TW\": LocaleDateFns;\n \"zh-HK\": LocaleDateFns;\n};\n\nexport type RecentKBData = {\n id?: string;\n name: string;\n lastOpenedDate?: Date;\n icon: string;\n};\n\nexport type SampleData = {\n name: string;\n serverUrl: string;\n kbName: string;\n};\n\nexport type SecondarySection = {\n title: string;\n cards: CardInfo[];\n};\n"]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
3
|
+
<svg width="800px" height="800px" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0164 2C10.8193 2 9.03825 3.72453 9.03825 5.85185V8.51852H15.9235V9.25926H5.97814C3.78107 9.25926 2 10.9838 2 13.1111L2 18.8889C2 21.0162 3.78107 22.7407 5.97814 22.7407H8.27322V19.4815C8.27322 17.3542 10.0543 15.6296 12.2514 15.6296H19.5956C21.4547 15.6296 22.9617 14.1704 22.9617 12.3704V5.85185C22.9617 3.72453 21.1807 2 18.9836 2H13.0164ZM12.0984 6.74074C12.8589 6.74074 13.4754 6.14378 13.4754 5.40741C13.4754 4.67103 12.8589 4.07407 12.0984 4.07407C11.3378 4.07407 10.7213 4.67103 10.7213 5.40741C10.7213 6.14378 11.3378 6.74074 12.0984 6.74074Z" fill="url(#paint0_linear_87_8204)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9834 30C21.1805 30 22.9616 28.2755 22.9616 26.1482V23.4815L16.0763 23.4815L16.0763 22.7408L26.0217 22.7408C28.2188 22.7408 29.9998 21.0162 29.9998 18.8889V13.1111C29.9998 10.9838 28.2188 9.25928 26.0217 9.25928L23.7266 9.25928V12.5185C23.7266 14.6459 21.9455 16.3704 19.7485 16.3704L12.4042 16.3704C10.5451 16.3704 9.03809 17.8296 9.03809 19.6296L9.03809 26.1482C9.03809 28.2755 10.8192 30 13.0162 30H18.9834ZM19.9015 25.2593C19.1409 25.2593 18.5244 25.8562 18.5244 26.5926C18.5244 27.329 19.1409 27.9259 19.9015 27.9259C20.662 27.9259 21.2785 27.329 21.2785 26.5926C21.2785 25.8562 20.662 25.2593 19.9015 25.2593Z" fill="url(#paint1_linear_87_8204)"/>
|
|
6
|
+
<defs>
|
|
7
|
+
<linearGradient id="paint0_linear_87_8204" x1="12.4809" y1="2" x2="12.4809" y2="22.7407" gradientUnits="userSpaceOnUse">
|
|
8
|
+
<stop stop-color="#327EBD"/>
|
|
9
|
+
<stop offset="1" stop-color="#1565A7"/>
|
|
10
|
+
</linearGradient>
|
|
11
|
+
<linearGradient id="paint1_linear_87_8204" x1="19.519" y1="9.25928" x2="19.519" y2="30" gradientUnits="userSpaceOnUse">
|
|
12
|
+
<stop stop-color="#FFDA4B"/>
|
|
13
|
+
<stop offset="1" stop-color="#F9C600"/>
|
|
14
|
+
</linearGradient>
|
|
15
|
+
</defs>
|
|
16
|
+
</svg>
|
|
@@ -2,7 +2,7 @@ import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil
|
|
|
2
2
|
import { g as getIconPath } from './MERCURY_ASSETS.js';
|
|
3
3
|
import { L as Locale } from './locale.js';
|
|
4
4
|
|
|
5
|
-
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;
|
|
5
|
+
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}";
|
|
6
6
|
|
|
7
7
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
8
|
if (kind === "a" && !f)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gx-ide-plugin-details.js","mappings":"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","names":["GxIdePluginDetails"],"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.js","mappings":"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","names":["GxIdePluginDetails"],"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}
|
|
@@ -2503,7 +2503,7 @@ const zhCN = {
|
|
|
2503
2503
|
},
|
|
2504
2504
|
};
|
|
2505
2505
|
|
|
2506
|
-
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(--
|
|
2506
|
+
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}";
|
|
2507
2507
|
|
|
2508
2508
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
2509
2509
|
if (kind === "a" && !f)
|
|
@@ -2677,25 +2677,30 @@ const GxIdeStartPage$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeStartPage e
|
|
|
2677
2677
|
var _a, _b;
|
|
2678
2678
|
this.loading =
|
|
2679
2679
|
(!this.kbs || ((_a = this.kbs) === null || _a === void 0 ? void 0 : _a.length) === 0) && !this.secondarySection;
|
|
2680
|
+
const renderCreateProjectCard = this.createKBCallback;
|
|
2681
|
+
const renderOpenProjectCard = this.openKbCallback;
|
|
2680
2682
|
const renderViewSamplesCard = ((_b = this.samples) === null || _b === void 0 ? void 0 : _b.length) && this.openSampleCallback;
|
|
2683
|
+
const renderCardsContainer = renderCreateProjectCard || renderOpenProjectCard || renderViewSamplesCard;
|
|
2681
2684
|
return (h(Host, { class: "scrollable" }, h("ch-theme", { model: CSS_BUNDLES }), h("main", { class: "main scrollable" }, h("section", {
|
|
2682
2685
|
// Create a new Knowledge Base
|
|
2683
2686
|
class: "section-create-new-kb"
|
|
2684
2687
|
}, h("header", {
|
|
2685
2688
|
// main header
|
|
2686
2689
|
class: "section-create-new-kb__header"
|
|
2687
|
-
}, 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", {
|
|
2690
|
+
}, 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", {
|
|
2688
2691
|
// create project
|
|
2689
2692
|
class: "card card-filled"
|
|
2690
|
-
}, 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", {
|
|
2693
|
+
}, 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", {
|
|
2691
2694
|
// open existing project
|
|
2692
2695
|
class: "card-filled"
|
|
2693
|
-
}, 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
|
|
2696
|
+
}, 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
|
|
2697
|
+
.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
|
|
2698
|
+
.buttonCaption)))), renderViewSamplesCard ? (h("article", {
|
|
2694
2699
|
// view samples
|
|
2695
2700
|
class: "card-filled"
|
|
2696
2701
|
}, 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 => {
|
|
2697
2702
|
return (h("button", { class: "button-secondary", onClick: () => this.openSampleCallback(sample) }, sample.name));
|
|
2698
|
-
}))))) : 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))))));
|
|
2703
|
+
}))))) : 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))))));
|
|
2699
2704
|
}
|
|
2700
2705
|
static get assetsDirs() { return ["gx-ide-assets/start-page"]; }
|
|
2701
2706
|
get el() { return this; }
|