@genexus/genexus-ide-ui 1.1.12 → 1.1.14

package/dist/components/gx-ide-plugin-details.js

@@ -0,0 +1,222 @@
+import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { L as Locale } from './locale.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}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdePluginDetails_componentLocale, _GxIdePluginDetails_docSectionIdDescriptionMap, _GxIdePluginDetails_versionsMenuOptionsModel, _GxIdePluginDetails_menuVersionSelectedHandler, _GxIdePluginDetails_renderUninstallButton, _GxIdePluginDetails_installClickedHandler, _GxIdePluginDetails_updateVersionHandler, _GxIdePluginDetails_openLinkHandler, _GxIdePluginDetails_uninstallClickedHandler, _GxIdePluginDetails_renderActionButtons, _GxIdePluginDetails_tabSelectionChangedHandler, _GxIdePluginDetails_renderDocSectionsSlots, _GxIdePluginDetails_returnFormatedId, _GxIdePluginDetails_renderAsideContent;
+const USER_ICON = getIconPath({
+    category: "system",
+    name: "user",
+    colorType: "on-elevation"
+});
+const CHEVRON_DOWN_ICON = getIconPath({
+    category: "system",
+    name: "chevron-down",
+    colorType: "on-primary"
+});
+const CHECK_CIRCLE_ICON = getIconPath({
+    category: "system",
+    name: "check-circle",
+    colorType: "success"
+});
+// plugin icon if no iconUri was provided
+const EXTENSION_ICON_IMG = getAssetPath(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "chameleon/scrollbar",
+    "components/button",
+    "components/dropdown",
+    "components/edit",
+    "components/icon",
+    "components/list-box",
+    "components/tab",
+    "utils/form",
+    "utils/layout",
+    "utils/spacing",
+    "utils/typography"
+];
+const GxIdePluginDetails$1 = /*@__PURE__*/ proxyCustomElement(class GxIdePluginDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdePluginDetails_componentLocale.set(this, void 0);
+        // A map between docSection "id", and docSection "description".
+        // "id" is generated inside this component.
+        _GxIdePluginDetails_docSectionIdDescriptionMap.set(this, new Map());
+        _GxIdePluginDetails_versionsMenuOptionsModel.set(this, () => {
+            var _a;
+            const versionsToUpdateMenusModel = (_a = this.data.versions) === null || _a === void 0 ? void 0 : _a.map(version => {
+                return { id: version, caption: version };
+            });
+            return versionsToUpdateMenusModel;
+        });
+        _GxIdePluginDetails_menuVersionSelectedHandler.set(this, (event) => {
+            const selectedVersion = event.detail.id;
+            this.installCallback(selectedVersion);
+        });
+        _GxIdePluginDetails_renderUninstallButton.set(this, () => {
+            return (h("button", { class: "button-tertiary", onClick: __classPrivateFieldGet(this, _GxIdePluginDetails_uninstallClickedHandler, "f") }, __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.uninstall));
+        });
+        _GxIdePluginDetails_installClickedHandler.set(this, () => {
+            this.installCallback();
+        });
+        _GxIdePluginDetails_updateVersionHandler.set(this, (id) => () => {
+            this.installCallback(id);
+        });
+        _GxIdePluginDetails_openLinkHandler.set(this, (link) => (event) => {
+            event.preventDefault();
+            this.openLinkCallback(link);
+        });
+        _GxIdePluginDetails_uninstallClickedHandler.set(this, () => {
+            this.uninstallCallback();
+        });
+        _GxIdePluginDetails_renderActionButtons.set(this, () => {
+            var _a;
+            let actionButtonCaption;
+            let actionButtonClasses = "button-primary action-button";
+            let actionButtonCallback;
+            const moreVersionsToUpdate = (_a = this.data.versions) === null || _a === void 0 ? void 0 : _a.length;
+            if (!this.data.installed) {
+                actionButtonCaption = __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.install;
+                actionButtonCallback = __classPrivateFieldGet(this, _GxIdePluginDetails_installClickedHandler, "f");
+            }
+            else if (this.data.updateVersion) {
+                actionButtonCaption = `${__classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.updateTo} ${this.data.updateVersion}`;
+                actionButtonCallback = __classPrivateFieldGet(this, _GxIdePluginDetails_updateVersionHandler, "f").call(this, this.data.updateVersion);
+            }
+            else {
+                actionButtonCaption = __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.installed;
+            }
+            if (moreVersionsToUpdate) {
+                actionButtonClasses = `${actionButtonClasses} more-versions-available`;
+            }
+            return [
+                h("div", { class: "version-buttons-container" }, h("button", { class: actionButtonClasses, onClick: actionButtonCallback }, actionButtonCaption), moreVersionsToUpdate ? (h("ch-action-menu-render", { class: "dropdown button-primary button-icon-only", blockAlign: "outside-end", inlineAlign: "inside-start", model: __classPrivateFieldGet(this, _GxIdePluginDetails_versionsMenuOptionsModel, "f").call(this), onButtonClick: __classPrivateFieldGet(this, _GxIdePluginDetails_menuVersionSelectedHandler, "f") }, h("ch-image", { src: CHEVRON_DOWN_ICON, class: "icon-md" }))) : null)
+            ];
+        });
+        _GxIdePluginDetails_tabSelectionChangedHandler.set(this, (event) => {
+            this.selectedTabId = event.detail.newSelectedId;
+        });
+        _GxIdePluginDetails_renderDocSectionsSlots.set(this, () => {
+            return this.docsTabModel.map(docSectionTab => {
+                if (docSectionTab.id === this.selectedTabId) {
+                    const markdownValue = __classPrivateFieldGet(this, _GxIdePluginDetails_docSectionIdDescriptionMap, "f").get(docSectionTab.id);
+                    return (h("ch-markdown-viewer", { slot: docSectionTab.id, key: docSectionTab.id, class: "markdown spacing-body scrollable", theme: "components/markdown-viewer", value: markdownValue }));
+                }
+            });
+        });
+        _GxIdePluginDetails_returnFormatedId.set(this, (rawId) => {
+            return rawId.toLowerCase().replace(/\s+/g, "-");
+        });
+        _GxIdePluginDetails_renderAsideContent.set(this, () => {
+            return this.data.infoCategories.map(infoCategory => {
+                return (h("div", { class: "plugin__info-category" }, h("h3", { class: "subtitle-semi-bold-s" }, infoCategory.name), h("ul", { class: {
+                        "fields__list": true,
+                        "fields__list--as-tags": infoCategory.displayAsTags
+                    } }, infoCategory.fields.map(field => {
+                    // If the field name isn’t specified, only the value is shown — usually a link.
+                    const fieldValue = typeof field.value === "string" ? field.value : (h("a", { class: "field__link", onClick: __classPrivateFieldGet(this, _GxIdePluginDetails_openLinkHandler, "f").call(this, field.value.url) }, field.value.text));
+                    return (h("li", { class: "field__li" }, field.name && !infoCategory.displayAsTags
+                        ? // displaysAsTags forces the items to be displayed as tags
+                            // no span.field__name and span.field__value
+                            [
+                                h("span", { class: "field__name body-semi-bold-s" }, field.name),
+                                h("span", { class: "field__value body-regular-s" }, fieldValue)
+                            ]
+                        : fieldValue));
+                }))));
+            });
+        });
+        this.docsTabModel = [];
+        this.selectedTabId = undefined;
+        this.data = undefined;
+        this.installCallback = undefined;
+        this.openLinkCallback = undefined;
+        this.uninstallCallback = undefined;
+    }
+    async componentWillLoad() {
+        var _a;
+        __classPrivateFieldSet(this, _GxIdePluginDetails_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        if ((_a = this.data.docSections) === null || _a === void 0 ? void 0 : _a.length) {
+            this.docsTabModel = this.data.docSections.map((docSection, i) => {
+                const formatedId = __classPrivateFieldGet(this, _GxIdePluginDetails_returnFormatedId, "f").call(this, docSection.name);
+                __classPrivateFieldGet(this, _GxIdePluginDetails_docSectionIdDescriptionMap, "f").set(formatedId, docSection.content);
+                if (i === 0) {
+                    this.selectedTabId = formatedId;
+                }
+                return {
+                    id: formatedId,
+                    name: docSection.name
+                };
+            });
+        }
+    }
+    render() {
+        const renderActionButtons = !this.data.installed ||
+            (this.data.installed && !!this.data.updateVersion);
+        const titleLinkDataText = this.data.name.text;
+        const titleLinkDataUrl = this.data.name.url;
+        const titleHasLink = titleLinkDataText && titleLinkDataUrl;
+        const titleText = titleLinkDataText || this.data.name;
+        const publisherDataText = this.data.publisher.text;
+        const publisherDataUrl = this.data.publisher.url;
+        const publisherHasLink = publisherDataText && publisherDataUrl;
+        const publisherText = publisherDataText || this.data.publisher;
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("header", { class: "header" }, h("img", { class: "plugin__icon", src: this.data.iconUrl || EXTENSION_ICON_IMG, alt: "plugin extension icon" }), h("div", { class: "plugin__details" }, titleHasLink ? (h("h2", { class: "heading-5" }, h("a", { href: titleLinkDataUrl, onClick: __classPrivateFieldGet(this, _GxIdePluginDetails_openLinkHandler, "f").call(this, titleLinkDataUrl), class: "text-underline" }, titleText))) : (h("h2", { class: "heading-5" }, titleText)), publisherHasLink ? (h("a", { href: publisherDataUrl, onClick: __classPrivateFieldGet(this, _GxIdePluginDetails_openLinkHandler, "f").call(this, publisherDataUrl), class: "text-underline plugin__publisher tiny-semi-bold-l" }, h("ch-image", { src: USER_ICON, class: "icon-md" }), publisherText)) : (h("p", { class: "plugin__publisher tiny-semi-bold-l" }, h("ch-image", { src: USER_ICON, class: "icon-md" }), publisherText)), h("p", { class: "plugin__description" }, this.data.description), h("div", { class: "buttons-spacer plugin__actions-container" }, renderActionButtons ? (__classPrivateFieldGet(this, _GxIdePluginDetails_renderActionButtons, "f").call(this)) : (
+        // installed and no updates
+        h("p", { class: "installed-container subtitle-semi-bold-s" }, h("ch-image", { src: CHECK_CIRCLE_ICON, class: "icon-md" }), __classPrivateFieldGet(this, _GxIdePluginDetails_componentLocale, "f").actions.installed)), this.data.installed && __classPrivateFieldGet(this, _GxIdePluginDetails_renderUninstallButton, "f").call(this)))), h("div", { class: "main" }, this.docsTabModel.length > 0 && (h("ch-tab-render", { class: "tab docsTab scrollable", tabListPosition: "block-start", overflow: "auto", contain: "size", model: this.docsTabModel, onSelectedItemChange: __classPrivateFieldGet(this, _GxIdePluginDetails_tabSelectionChangedHandler, "f"), selectedId: this.selectedTabId }, __classPrivateFieldGet(this, _GxIdePluginDetails_renderDocSectionsSlots, "f").call(this)))), h("div", { class: "aside spacing-body scrollable" }, __classPrivateFieldGet(this, _GxIdePluginDetails_renderAsideContent, "f").call(this)))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/plugin-details"]; }
+    get el() { return this; }
+    static get style() { return pluginDetailsCss; }
+}, [1, "gx-ide-plugin-details", {
+        "data": [16],
+        "installCallback": [16],
+        "openLinkCallback": [16],
+        "uninstallCallback": [16],
+        "docsTabModel": [32],
+        "selectedTabId": [32]
+    }]);
+_GxIdePluginDetails_componentLocale = new WeakMap(), _GxIdePluginDetails_docSectionIdDescriptionMap = new WeakMap(), _GxIdePluginDetails_versionsMenuOptionsModel = new WeakMap(), _GxIdePluginDetails_menuVersionSelectedHandler = new WeakMap(), _GxIdePluginDetails_renderUninstallButton = new WeakMap(), _GxIdePluginDetails_installClickedHandler = new WeakMap(), _GxIdePluginDetails_updateVersionHandler = new WeakMap(), _GxIdePluginDetails_openLinkHandler = new WeakMap(), _GxIdePluginDetails_uninstallClickedHandler = new WeakMap(), _GxIdePluginDetails_renderActionButtons = new WeakMap(), _GxIdePluginDetails_tabSelectionChangedHandler = new WeakMap(), _GxIdePluginDetails_renderDocSectionsSlots = new WeakMap(), _GxIdePluginDetails_returnFormatedId = new WeakMap(), _GxIdePluginDetails_renderAsideContent = new WeakMap();
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gx-ide-plugin-details"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gx-ide-plugin-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxIdePluginDetails$1);
+            }
+            break;
+    } });
+}
+
+const GxIdePluginDetails = GxIdePluginDetails$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdePluginDetails, defineCustomElement };
+
+//# sourceMappingURL=gx-ide-plugin-details.js.map

package/dist/components/gx-ide-plugin-details.js.map

@@ -0,0 +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  // 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  #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    event.preventDefault();\n    this.openLinkCallback(link);\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            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  #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                ) : (\n                  <a\n                    class=\"field__link\"\n                    onClick={this.#openLinkHandler(\n                      (field.value as LinkData).url\n                    )}\n                  >\n                    {(field.value as LinkData).text}\n                  </a>\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\">\n                  <a\n                    href={titleLinkDataUrl}\n                    onClick={this.#openLinkHandler(titleLinkDataUrl)}\n                    class=\"text-underline\"\n                  >\n                    {titleText}\n                  </a>\n                </h2>\n              ) : (\n                <h2 class=\"heading-5\">{titleText}</h2>\n              )}\n\n              {publisherHasLink ? (\n                <a\n                  href={publisherDataUrl}\n                  onClick={this.#openLinkHandler(publisherDataUrl)}\n                  class=\"text-underline plugin__publisher tiny-semi-bold-l\"\n                >\n                  <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n                  {publisherText}\n                </a>\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/components/gx-ide-plugin-explorer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface GxIdePluginExplorer extends Components.GxIdePluginExplorer, HTMLElement {}
+export const GxIdePluginExplorer: {
+    prototype: GxIdePluginExplorer;
+    new (): GxIdePluginExplorer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/gx-ide-plugin-explorer.js

@@ -0,0 +1,194 @@
+import { getAssetPath, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getIconPath } from './MERCURY_ASSETS.js';
+import { L as Locale } from './locale.js';
+import { c as config } from './config.js';
+import { d as defineCustomElement$3 } from './gx-ide-empty-state2.js';
+import { d as defineCustomElement$2 } from './ide-loader.js';
+
+const pluginExplorerCss = ":host{display:grid;block-size:100%;position:relative}.outer-container{grid-template-rows:max-content 1fr}.inner-container{position:relative}.list-box::part(item){width:100%;min-width:100%}.list-box::part(item__action){gap:4px}.list-box::part(item__caption){font-weight:600}.list-box::part(custom-container){display:flex;flex-direction:column;gap:4px;width:100%}.list-box::part(custom-image){block-size:32px;inline-size:32px;margin-inline-end:12px}.list-box::part(custom-description){font-size:12px;margin:0;opacity:0.8;line-height:1.4;margin-inline-end:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.list-box::part(item__block-end start){width:100%;min-width:100%}.list-box::part(custom-brand){font-weight:600;display:flex;gap:4px;align-items:center}.list-box::part(custom-brand-icon){--icon-path:var(--icon__system_user_neutral--enabled);display:inline-block;background-image:var(--icon-path);background-size:contain;background-repeat:no-repeat;background-position:center center;block-size:16px;inline-size:16px}.list-box::part(custom-button){--control__border-color:var(--button-background-color);--button-color:var(--mer-text__primary);--button-color--enabled:var(--mer-text__on-primary);--button-color--active:var(--mer-text__on-primary--active);display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;justify-content:center;padding-block:var(--control__padding-block);padding-inline:var(--control__padding-inline);box-sizing:border-box;background-color:var(--button-background-color);color:var(--button-color);font-weight:600;margin-block-end:auto;margin-block-start:auto;text-transform:capitalize}.list-box::part(custom-button):hover{--button-color:var(--mer-text__primary--hover)}.list-box::part(custom-button):active{--button-color:var(--mer-text__primary--active)}";
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdePluginManager_componentLocale, _GxIdePluginManager_animateEmptyState, _GxIdePluginManager_actionListButtonClickHandler, _GxIdePluginManager_mapPluginDataToActionListModel, _GxIdePluginManager_pluginsFilterInputHandler, _GxIdePluginManager_evaluateContentToDisplay, _GxIdePluginManager_renderLoader, _GxIdePluginManager_pluginSelectedHandler;
+const FILTER_ICON = getIconPath({
+    category: "system",
+    name: "filters",
+    colorType: "on-elevation"
+});
+// plugin icon if no iconUrl was provided
+const EXTENSION_ICON_IMG = getAssetPath(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/list-box",
+    "components/button",
+    "components/edit",
+    "utils/form",
+    "utils/layout",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar"
+];
+const GxIdePluginManager = /*@__PURE__*/ proxyCustomElement(class GxIdePluginManager extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdePluginManager_componentLocale.set(this, void 0);
+        _GxIdePluginManager_animateEmptyState.set(this, false);
+        _GxIdePluginManager_actionListButtonClickHandler.set(this, (pluginId, action) => (event) => {
+            event.stopPropagation();
+            this.executeActionCallback(pluginId, action);
+        });
+        _GxIdePluginManager_mapPluginDataToActionListModel.set(this, (pluginsData) => {
+            const pluginsActionListModel = [];
+            const separatorItem = { type: "separator" };
+            pluginsData === null || pluginsData === void 0 ? void 0 : pluginsData.forEach((pluginData, index) => {
+                const hasActionButton = !!pluginData.action;
+                const pluginItem = {
+                    id: pluginData.id,
+                    caption: pluginData.name,
+                    imgSrc: pluginData.iconUrl,
+                    type: "actionable",
+                    additionalInformation: {
+                        "stretch-start": {
+                            center: [
+                                {
+                                    part: "custom-image",
+                                    jsx: () => (h("img", { part: "custom-image", src: pluginData.iconUrl || EXTENSION_ICON_IMG, alt: `${__classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").logotype.replace("PLUGIN_NAME_PLACEHOLDER", pluginData.name)}`, loading: "lazy" }))
+                                }
+                            ]
+                        },
+                        "block-end": {
+                            start: [
+                                {
+                                    part: "custom-description custom-button custom-container custom-brand custom-brand-icon custom-image item__block-end start",
+                                    jsx: () => (h("div", { part: "custom-container", title: pluginData.description }, h("p", { part: "custom-description" }, pluginData.description), h("small", { part: "custom-brand" }, h("span", { part: "custom-brand-icon" }), pluginData.publisher)))
+                                }
+                                // {
+                                //   slot: "abcd"
+                                // } as ActionListItemAdditionalSlot // slot not working
+                            ]
+                        },
+                        "stretch-end": hasActionButton && {
+                            center: [
+                                {
+                                    jsx: () => (h("button", { part: "custom-button", onClick: __classPrivateFieldGet(this, _GxIdePluginManager_actionListButtonClickHandler, "f").call(this, pluginData.id, pluginData.action) }, pluginData.action))
+                                }
+                            ]
+                        }
+                    }
+                };
+                if (index !== 0) {
+                    pluginsActionListModel.push(separatorItem);
+                }
+                pluginsActionListModel.push(pluginItem);
+            });
+            return pluginsActionListModel;
+        });
+        _GxIdePluginManager_pluginsFilterInputHandler.set(this, async (event) => {
+            this.loading = true;
+            const filterValue = event.detail;
+            this.plugins = await this.filterCallback(filterValue);
+        });
+        _GxIdePluginManager_evaluateContentToDisplay.set(this, () => {
+            const pluginsToDisplay = this.pluginsActionListModel.length;
+            return pluginsToDisplay ? (h("ch-action-list-render", { model: this.pluginsActionListModel, class: "list-box", selection: "single", onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdePluginManager_pluginSelectedHandler, "f") })) : (h("gx-ide-empty-state", { isAnimated: __classPrivateFieldGet(this, _GxIdePluginManager_animateEmptyState, "f"), class: "recent-objects__empty-state", stateIconSrc: FILTER_ICON, stateTitle: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").emptyStateTitle, stateDescription: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").emptyStateDescription }));
+        });
+        _GxIdePluginManager_renderLoader.set(this, () => {
+            __classPrivateFieldSet(this, _GxIdePluginManager_animateEmptyState, true, "f");
+            return (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").loaderTitle, description: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").loaderDescription, show: true }));
+        });
+        _GxIdePluginManager_pluginSelectedHandler.set(this, (event) => {
+            var _a;
+            const eventType = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item.type;
+            if (eventType === "actionable") {
+                const pluginId = event.detail[0].item.id;
+                this.showDetailsCallback(pluginId);
+            }
+        });
+        this.loading = true;
+        this.pluginsActionListModel = [];
+        this.plugins = undefined;
+        this.filterCallback = undefined;
+        this.showDetailsCallback = undefined;
+        this.executeActionCallback = undefined;
+    }
+    pluginsChangedHandler(newPlugins) {
+        this.pluginsActionListModel =
+            __classPrivateFieldGet(this, _GxIdePluginManager_mapPluginDataToActionListModel, "f").call(this, newPlugins);
+        this.loading = false;
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdePluginManager_componentLocale, await Locale.getComponentStrings(this.el), "f");
+        this.pluginsChangedHandler(this.plugins);
+    }
+    render() {
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "outer-container field-group" }, h("ch-edit", { id: "search-plugins-input", class: "input", accessibleName: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").accessibleName, placeholder: __classPrivateFieldGet(this, _GxIdePluginManager_componentLocale, "f").searchInputPlaceholder, debounce: config.inputDebounce, onInput: __classPrivateFieldGet(this, _GxIdePluginManager_pluginsFilterInputHandler, "f"), type: "search" }), h("div", { class: "inner-container" }, this.loading
+            ? __classPrivateFieldGet(this, _GxIdePluginManager_renderLoader, "f").call(this)
+            : __classPrivateFieldGet(this, _GxIdePluginManager_evaluateContentToDisplay, "f").call(this)))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/plugin-explorer"]; }
+    get el() { return this; }
+    static get watchers() { return {
+        "plugins": ["pluginsChangedHandler"]
+    }; }
+    static get style() { return pluginExplorerCss; }
+}, [1, "gx-ide-plugin-explorer", {
+        "plugins": [1040],
+        "filterCallback": [16],
+        "showDetailsCallback": [16],
+        "executeActionCallback": [16],
+        "loading": [32],
+        "pluginsActionListModel": [32]
+    }, undefined, {
+        "plugins": ["pluginsChangedHandler"]
+    }]);
+_GxIdePluginManager_componentLocale = new WeakMap(), _GxIdePluginManager_animateEmptyState = new WeakMap(), _GxIdePluginManager_actionListButtonClickHandler = new WeakMap(), _GxIdePluginManager_mapPluginDataToActionListModel = new WeakMap(), _GxIdePluginManager_pluginsFilterInputHandler = new WeakMap(), _GxIdePluginManager_evaluateContentToDisplay = new WeakMap(), _GxIdePluginManager_renderLoader = new WeakMap(), _GxIdePluginManager_pluginSelectedHandler = new WeakMap();
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gx-ide-plugin-explorer", "gx-ide-empty-state", "gx-ide-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gx-ide-plugin-explorer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxIdePluginManager);
+            }
+            break;
+        case "gx-ide-empty-state":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "gx-ide-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const GxIdePluginExplorer = GxIdePluginManager;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdePluginExplorer, defineCustomElement };
+
+//# sourceMappingURL=gx-ide-plugin-explorer.js.map

package/dist/components/gx-ide-plugin-explorer.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-plugin-explorer.js","mappings":"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","names":[],"sources":["src/components/plugin-explorer/plugin-explorer.scss?tag=gx-ide-plugin-explorer&encapsulation=shadow","src/components/plugin-explorer/plugin-explorer.tsx"],"sourcesContent":["@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: grid;\n  block-size: 100%;\n  position: relative;\n}\n\n.outer-container {\n  grid-template-rows: max-content 1fr;\n}\n.inner-container {\n  position: relative;\n}\n\n.list-box::part(item) {\n  width: 100%;\n  min-width: 100%;\n}\n.list-box::part(item__action) {\n  gap: 4px;\n}\n.list-box::part(item__caption) {\n  font-weight: 600;\n}\n.list-box::part(custom-container) {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  width: 100%;\n}\n.list-box::part(custom-image) {\n  block-size: 32px;\n  inline-size: 32px;\n  margin-inline-end: 12px;\n}\n.list-box::part(custom-description) {\n  font-size: 12px;\n  margin: 0;\n  opacity: 0.8;\n  line-height: 1.4;\n  margin-inline-end: 8px;\n  @include ellipsis();\n}\n.list-box::part(item__block-end start) {\n  width: 100%;\n  min-width: 100%;\n}\n.list-box::part(custom-brand) {\n  font-weight: 600;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n.list-box::part(custom-brand-icon) {\n  // --icon-path: var(--icon__system_publish_on-elevation--enabled);\n  --icon-path: var(--icon__system_user_neutral--enabled);\n  display: inline-block;\n  background-image: var(--icon-path);\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center center;\n  block-size: 16px;\n  inline-size: 16px;\n}\n.list-box::part(custom-button) {\n  // WA: Style the button like a Mercury primary button\n  // \"Slot\" not working apparently.\n  --control__border-color: var(--button-background-color);\n  --button-color: var(--mer-text__primary);\n  --button-color--enabled: var(--mer-text__on-primary);\n  --button-color--active: var(--mer-text__on-primary--active);\n  display: inline-grid;\n  grid-auto-flow: column;\n  grid-auto-columns: max-content;\n  justify-content: center;\n  padding-block: var(--control__padding-block);\n  padding-inline: var(--control__padding-inline);\n  box-sizing: border-box;\n  background-color: var(--button-background-color);\n  color: var(--button-color);\n  font-weight: 600;\n  margin-block-end: auto;\n  margin-block-start: auto;\n  text-transform: capitalize;\n}\n.list-box::part(custom-button):hover {\n  --button-color: var(--mer-text__primary--hover);\n}\n.list-box::part(custom-button):active {\n  --button-color: var(--mer-text__primary--active);\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  State,\n  Element,\n  h,\n  Watch,\n  getAssetPath\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { config } from \"../../common/config\";\n\nimport { ActionListModel } from \"@genexus/chameleon-controls-library\";\nimport {\n  ActionListItemModel,\n  ActionListItemModelExtended,\n  ActionListItemSeparator\n} from \"@genexus/chameleon-controls-library/dist/types/components/action-list/types\";\n\nconst FILTER_ICON = getIconPath({\n  category: \"system\",\n  name: \"filters\",\n  colorType: \"on-elevation\"\n});\n\n// plugin icon if no iconUrl 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  \"components/list-box\",\n  \"components/button\",\n  \"components/edit\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\n@Component({\n  tag: \"gx-ide-plugin-explorer\",\n  styleUrl: \"plugin-explorer.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/plugin-explorer\"]\n})\nexport class GxIdePluginManager {\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  #animateEmptyState: boolean = false;\n\n  @Element() el: HTMLGxIdePluginExplorerElement;\n\n  /**\n   * If true it will hide the content, and display a loader\n   */\n  @State() loading: boolean = true;\n\n  /**\n   * The plugins model as ActionListModel, which is the model the ch-action-list expects\n   */\n  @State() pluginsActionListModel: ActionListModel = [];\n\n  /**\n   * List of plugins to display. Usually used to initialize the component.\n   */\n  @Prop({ mutable: true }) plugins: PluginData[];\n  @Watch(\"plugins\")\n  pluginsChangedHandler(newPlugins: PluginData[]) {\n    this.pluginsActionListModel =\n      this.#mapPluginDataToActionListModel(newPlugins);\n    this.loading = false;\n  }\n\n  /**\n   * Callback that should be invoked when the user updates the filter.\n   * A debounce should be applied before invoking this function.\n   */\n  @Prop() readonly filterCallback!: (text: string) => Promise<PluginData[]>;\n\n  /**\n   * Callback that should be invoked when the user clicks or presses Enter\n   * on a selected plugin item.\n   */\n  @Prop() readonly showDetailsCallback!: (pluginId: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user clicks on a plugin's action button.\n   */\n  @Prop() readonly executeActionCallback!: (\n    pluginId: string,\n    action: PluginAction\n  ) => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.pluginsChangedHandler(this.plugins);\n  }\n\n  #actionListButtonClickHandler =\n    (pluginId: string, action: PluginAction) => (event: MouseEvent) => {\n      event.stopPropagation();\n      this.executeActionCallback(pluginId, action);\n    };\n\n  #mapPluginDataToActionListModel = (\n    pluginsData: PluginData[]\n  ): ActionListModel => {\n    const pluginsActionListModel: ActionListModel = [];\n    const separatorItem: ActionListItemSeparator = { type: \"separator\" };\n\n    pluginsData?.forEach((pluginData, index) => {\n      const hasActionButton = !!pluginData.action;\n      const pluginItem = {\n        id: pluginData.id,\n        caption: pluginData.name,\n        imgSrc: pluginData.iconUrl,\n        type: \"actionable\",\n\n        additionalInformation: {\n          \"stretch-start\": {\n            center: [\n              {\n                part: \"custom-image\",\n                jsx: () => (\n                  <img\n                    part=\"custom-image\"\n                    src={pluginData.iconUrl || EXTENSION_ICON_IMG}\n                    alt={`${this.#componentLocale.logotype.replace(\n                      \"PLUGIN_NAME_PLACEHOLDER\",\n                      pluginData.name\n                    )}`}\n                    loading=\"lazy\"\n                  />\n                )\n              }\n            ]\n          },\n          \"block-end\": {\n            start: [\n              {\n                part: \"custom-description custom-button custom-container custom-brand custom-brand-icon custom-image item__block-end start\",\n                jsx: () => (\n                  <div part=\"custom-container\" title={pluginData.description}>\n                    <p part=\"custom-description\">{pluginData.description}</p>\n                    <small part=\"custom-brand\">\n                      <span part=\"custom-brand-icon\"></span>\n                      {pluginData.publisher}\n                    </small>\n                  </div>\n                )\n              }\n              // {\n              //   slot: \"abcd\"\n              // } as ActionListItemAdditionalSlot // slot not working\n            ]\n          },\n          \"stretch-end\": hasActionButton && {\n            center: [\n              {\n                jsx: () => (\n                  <button\n                    part=\"custom-button\"\n                    onClick={this.#actionListButtonClickHandler(\n                      pluginData.id,\n                      pluginData.action\n                    )}\n                  >\n                    {pluginData.action}\n                  </button>\n                )\n              }\n            ]\n          }\n        }\n      } as ActionListItemModel;\n      if (index !== 0) {\n        pluginsActionListModel.push(separatorItem);\n      }\n      pluginsActionListModel.push(pluginItem);\n    });\n\n    return pluginsActionListModel;\n  };\n\n  #pluginsFilterInputHandler = async (\n    event: CustomEvent<string> | InputEvent\n  ) => {\n    this.loading = true;\n    const filterValue = event.detail as string;\n    this.plugins = await this.filterCallback(filterValue);\n  };\n\n  #evaluateContentToDisplay = () => {\n    const pluginsToDisplay = this.pluginsActionListModel.length;\n    return pluginsToDisplay ? (\n      <ch-action-list-render\n        model={this.pluginsActionListModel}\n        class=\"list-box\"\n        selection=\"single\"\n        onSelectedItemsChange={this.#pluginSelectedHandler}\n      >\n        {/* <p slot=\"abcd\">Slot for \"abcd\" id</p> */}\n      </ch-action-list-render>\n    ) : (\n      <gx-ide-empty-state\n        isAnimated={this.#animateEmptyState}\n        class=\"recent-objects__empty-state\"\n        stateIconSrc={FILTER_ICON}\n        stateTitle={this.#componentLocale.emptyStateTitle}\n        stateDescription={this.#componentLocale.emptyStateDescription}\n      ></gx-ide-empty-state>\n    );\n  };\n\n  #renderLoader = () => {\n    this.#animateEmptyState = true;\n    return (\n      <gx-ide-loader\n        loaderTitle={this.#componentLocale.loaderTitle}\n        description={this.#componentLocale.loaderDescription}\n        show\n      ></gx-ide-loader>\n    );\n  };\n\n  #pluginSelectedHandler = (\n    event: CustomEvent<ActionListItemModelExtended[]>\n  ) => {\n    const eventType = event.detail[0]?.item.type;\n    if (eventType === \"actionable\") {\n      const pluginId = event.detail[0].item.id;\n      this.showDetailsCallback(pluginId);\n    }\n  };\n\n  render() {\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n\n        <div class=\"outer-container field-group\">\n          <ch-edit\n            id=\"search-plugins-input\"\n            class=\"input\"\n            accessibleName={this.#componentLocale.accessibleName}\n            placeholder={this.#componentLocale.searchInputPlaceholder}\n            debounce={config.inputDebounce}\n            onInput={this.#pluginsFilterInputHandler}\n            type=\"search\"\n          ></ch-edit>\n          <div class=\"inner-container\">\n            {this.loading\n              ? this.#renderLoader()\n              : this.#evaluateContentToDisplay()}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type PluginData = {\n  id: string;\n  iconUrl: string;\n  name: string;\n  description: string;\n  publisher: string;\n  action?: PluginAction;\n};\n\nexport type PluginAction = \"install\" | \"update\";\n"],"version":3}

package/dist/components/gx-ide-sc-chat-container.js

@@ -69,7 +69,6 @@ To create code blocks, you’ll use three backticks (\` \`\`\` \`) or three tild
 \`\`\`
 `;
 const sendChatToLLM = (chatRef) => () => {
-    console.log("dsa");
     chatRef.generatingResponse = true;
     chatRef.addNewMessage({
         id: `${new Date().getTime()}`,