@genexus/genexus-ide-ui 0.0.108 → 0.0.109

package/dist/components/gx-ide-manage-module-references.js

@@ -0,0 +1,432 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as renderModuleDataProperties } from './common.js';
+import { L as Locale } from './locale.js';
+import { d as defineCustomElement$t } from './ch-grid2.js';
+import { d as defineCustomElement$s } from './ch-grid-column2.js';
+import { d as defineCustomElement$r } from './ch-grid-column-resize2.js';
+import { d as defineCustomElement$q } from './ch-grid-column-settings2.js';
+import { d as defineCustomElement$p } from './ch-grid-columnset2.js';
+import { d as defineCustomElement$o } from './ch-grid-settings2.js';
+import { d as defineCustomElement$n } from './ch-grid-settings-columns2.js';
+import { d as defineCustomElement$m } from './icon.js';
+import { d as defineCustomElement$l } from './ch-window2.js';
+import { d as defineCustomElement$k } from './ch-window-close2.js';
+import { d as defineCustomElement$j } from './container.js';
+import { d as defineCustomElement$i } from './list-selector.js';
+import { d as defineCustomElement$h } from './list-selector-item.js';
+import { d as defineCustomElement$g } from './title.js';
+import { d as defineCustomElement$f } from './button.js';
+import { d as defineCustomElement$e } from './buttons-container.js';
+import { d as defineCustomElement$d } from './combo-box.js';
+import { d as defineCustomElement$c } from './combo-box-item.js';
+import { d as defineCustomElement$b } from './form-checkbox.js';
+import { d as defineCustomElement$a } from './form-radio.js';
+import { d as defineCustomElement$9 } from './form-text.js';
+import { d as defineCustomElement$8 } from './gxg-grid2.js';
+import { d as defineCustomElement$7 } from './icon2.js';
+import { d as defineCustomElement$6 } from './gxg-label2.js';
+import { d as defineCustomElement$5 } from './text.js';
+import { d as defineCustomElement$4 } from './title2.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
+import { d as defineCustomElement$2 } from './gxg-top-state-bar2.js';
+
+const manageModuleReferencesCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}p,ul{font-size:var(--font-size-lg);margin:0}p{line-height:1.6em}.header{align-items:center;grid-template-columns:1fr auto;grid-template-rows:1fr}.main{display:grid;grid-template-columns:1.5fr 2fr;grid-template-rows:1fr;height:100%;overflow:auto}ch-grid-columnset{display:none}.grid-cell-module__info{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mer-spacing--xxs)}.grid-cell-module__name{font-weight:var(--mer-font__weight--bold)}.servers-container{display:none;height:100%}.servers-container__header{display:flex;align-items:center;justify-content:space-between;padding:var(--gxg-list-box-main__padding) var(--gxg-list-box-main__padding) 0 var(--gxg-list-box-main__padding)}.servers-container__header gxg-button{width:100%}.modules__combo-container{display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.modules__combo{display:flex;flex-direction:row;gap:var(--mer-spacing--xs)}.modules__combo gxg-combo-box{flex:1}.modules__menu-container{position:relative}.modules__menu{display:none;width:200px;position:fixed;z-index:10;right:0;transform:translateX(-100%)}.modules__menu--visible{display:block}.modules__header{padding:var(--gxg-list-box-main__padding);display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.modules__container{border-inline-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color);display:grid;grid-template-rows:auto 1fr;height:100%;overflow:auto}.module-info{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:auto}.module-info__name{display:flex;align-items:center;gap:var(--mer-spacing--sm);--ds-icon-size-box--regular:24px;--ds-icon-size--regular:24px;font-weight:var(--mer-font__weight--bold)}.module-info__header{padding:var(--gx-ide-container__padding);display:flex;flex-direction:column;gap:var(--mer-spacing--xs);border-block-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color)}.module-info__action-container{display:flex;flex-direction:row;align-items:center;gap:var(--mer-spacing--xs)}.module-info__action-container:before{content:\"\";width:var(--mer-spacing--xs);height:var(--mer-spacing--xs);border-radius:50%;display:block;background-color:var(--mer-icon__primary--disabled)}.module-info__action-container--installed:before{background-color:var(--mer-icon__primary)}.module-info__divider{width:calc(100% - var(--gx-ide-container__padding) * 4);padding:0 var(--gx-ide-container__padding);margin:0 auto;border:0;border-block-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color)}.module-info__properties{display:flex;flex-direction:column;padding:var(--gx-ide-container__padding);gap:var(--mer-spacing--xs);overflow:auto}.md-property{display:grid;gap:var(--mer-spacing--xs)}.md-property--inline{grid-template-columns:auto 1fr}.md-property__key{font-weight:var(--font-weight-bold);max-width:150px}.md-property__value{font-size:var(--mer-font__size--xxs)}.md-property__key>*,.md-property__value>*{display:inline-block}.md-property__list{display:flex;flex-direction:column;gap:var(--mer-spacing--xs)}.md-property__list>ul{margin:0;padding:0;list-style-type:none;display:flex;flex-direction:column;gap:var(--mer-spacing--xxs);margin-inline-start:var(--mer-spacing--xs)}.md-property__list>ul li{position:relative;padding-inline-start:12px;line-height:var(--ds-base-font-line-height--comfortable)}.md-property__list>ul li::before{content:\"\";position:absolute;left:0;top:7px;display:inline-block;width:var(--mer-spacing--xxs);height:var(--mer-spacing--xxs);background-color:var(--mer-text__on-surface)}.md-property,.md-property__list{border-block-end:var(--mer-border__width--sm) solid var(--gx-ide-container-border-color);padding-block-end:var(--mer-spacing--xs)}.md-property:last-child,.md-property__list:last-child{border-block-end:0;padding-block-end:0}";
+
+const GxManageModuleReferences = /*@__PURE__*/ proxyCustomElement(class GxManageModuleReferences extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
+        this.renderedFirstTime = false;
+        // 9.LOCAL METHODS //
+        this.getActionFromCurrentModuleVersion = () => {
+            const selected = this.selectedModule.versions.find(({ id }) => id === this.selectedModule.currentVersion);
+            return selected.action;
+        };
+        /**
+         * Callback invoked to get the progress when module is performing an action
+         */
+        this.onProgress = (message, progress, state) => {
+            const data = { message, progress, state };
+            this.selectedModuleAction = Object.assign({}, data);
+            this.progressValue = this.selectedModuleAction.progress;
+            this.progressState = this.selectedModuleAction.state;
+        };
+        // 10.LOCAL METHODS //
+        /**
+         * Used for changing the selected module
+         */
+        this.handleModuleChange = (row) => {
+            const foundModule = this.modulesAll.find(item => item.id === row.rowsId[0]);
+            this.selectedModule = foundModule;
+        };
+        /**
+         * Change the server selected value in response to callbackServerSelected callback
+         */
+        this.serverSelectedCallbackHandler = async (id) => {
+            const resolvedObjects = await this.serverSelectedCallback(id);
+            this.selectedServerId = id;
+            this.modulesAll = [...resolvedObjects];
+            this.filterModulesByType("browse");
+            this.selectedModule = this.filteredModules[0];
+        };
+        this.handleFilterChange = (value) => {
+            const trimmedValue = value.trim();
+            if (trimmedValue) {
+                const lowerCaseValue = trimmedValue.toLowerCase();
+                this.filteredModules = this.modulesAll.filter(module => module.name.toLowerCase().includes(lowerCaseValue));
+            }
+            else {
+                this.filteredModules = this.modulesAll;
+            }
+        };
+        /**
+         * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback
+         */
+        this.executeActionCallbackHandler = async (module) => {
+            const actionCompleted = await this.executeActionCallback(this.selectedServerId, module.id, this.getActionFromCurrentModuleVersion(), this.onProgress);
+            this.actionCompleted = actionCompleted;
+        };
+        this.filterModulesByType = (type) => {
+            // browse
+            if (type === "browse") {
+                this.filteredModules = this.modulesAll;
+            }
+            // installed
+            else if (type === "installed") {
+                this.filteredModules = this.modulesAll.filter((module) => {
+                    const versionData = module.versions.find(version => {
+                        return version.id === module.currentVersion;
+                    });
+                    return (versionData &&
+                        (versionData.action === "restore" || versionData.action === "update"));
+                });
+            }
+            else if (type === "updates") {
+                this.filteredModules = this.modulesAll.filter((module) => {
+                    const versionData = module.versions.find(version => {
+                        return version.id === module.currentVersion;
+                    });
+                    return versionData && versionData.action === "update";
+                });
+            }
+        };
+        this.moduleMenuSelectionChangedHandler = async (e) => {
+            const itemId = e.detail[0].itemId;
+            if (itemId === "add") {
+                if (this.addServerCallback) {
+                    await this.addServerCallback();
+                }
+            }
+            else if (itemId === "edit") {
+                console.log(this.modulesList.value);
+            }
+            else if (itemId === "upload") {
+                console.log("upload");
+            }
+        };
+        this.renderMenu = () => {
+            return (h("gx-ide-list-selector", { onSelectionChanged: this.moduleMenuSelectionChangedHandler, class: "modules__menu", type: "single-selection", listName: "module-menu", ellipsis: true, style: {
+                    left: this.moduleMenuLeftPosition,
+                    top: this.moduleMenuTopPosition
+                } }, h("gx-ide-list-selector-item", { itemId: "add", itemValue: "Add", icon: "gemini-tools/add" }), h("gx-ide-list-selector-item", { itemId: "edit", itemValue: "Edit", icon: "gemini-tools/edit" }), h("gx-ide-list-selector-item", { itemId: "upload", itemValue: "Upload from file", icon: "gemini-tools/file" })));
+        };
+        this.showModuleMenu = async (e) => {
+            if (this.serverContextMenuCallback) {
+                const buttonBoundingClientRect = e.target.getBoundingClientRect();
+                await this.serverContextMenuCallback({
+                    selection: [this.selectedServerId],
+                    clientX: buttonBoundingClientRect.x,
+                    clientY: buttonBoundingClientRect.y
+                });
+            }
+        };
+        this.renderModulesGrid = () => {
+            return (h("gxg-grid", { noBorder: true, fullHeight: true }, h("ch-grid", { rowSelectionMode: "single", part: "ch-grid-pending-commits", class: "no-border",
+                /* TODO: El error es aqui ya que se esta enviando el valor del row Id correspondiente a la primera carga del grid con el primer server */
+                onSelectionChanged: (row) => this.handleModuleChange(row.detail) }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, size: "min-content" }), h("ch-grid-column", { settingable: false }), h("ch-grid-column", { settingable: false, size: "min-content" })), this.filteredModules.map((item) => (h("ch-grid-row", { rowid: item.id, key: item.id, selected: this.selectedModule && this.selectedModule.id === item.id }, h("ch-grid-cell", null, h("gxg-icon", { type: "objects/module", color: "auto", size: "small" })), h("ch-grid-cell", { class: "grid-cell-module__info" }, h("span", { class: "grid-cell-module__name" }, item.name), h("span", { class: "grid-cell-module__description" }, item.description)), h("ch-grid-cell", null, this.selectedModule && this.selectedModule.id === item.id ? (h("gxg-button", { disabled: !this.actionCompleted, fit: true, part: "module-action", onClick: () => {
+                    this.actionCompleted = false;
+                    this.closeProgressBar = false;
+                    this.executeActionCallbackHandler(item);
+                } }, this.getActionFromCurrentModuleVersion())) : null)))))));
+        };
+        this.moduleIconColor = () => {
+            return this.getActionFromCurrentModuleVersion() === "install"
+                ? "mercury-primary-disabled"
+                : "mercury-primary";
+        };
+        /* module details/information renders*/
+        this.renderModuleName = () => {
+            return (h("gxg-title", { part: "module-info__name", type: "title-05" }, h("div", { class: "module-info__name" }, h("gxg-icon", { type: "objects/module", color: this.moduleIconColor() }), this.selectedModule.name)));
+        };
+        this.renderModuleAction = () => {
+            return this.getActionFromCurrentModuleVersion() === "install" ? (h("div", { class: "module-info__action-container" }, h("gxg-text", { part: "not-installed" }, this._componentLocale.modulesInformation.moduleProperties
+                .notInstalled))) : (h("div", { class: "module-info__action-container module-info__action-container--installed" }, h("gxg-text", { part: "installed" }, ` ${this._componentLocale.modulesInformation.moduleProperties.installedVersion} : ${this.selectedModule.currentVersion}`)));
+        };
+        this.moduleVersionsValueChangedHandler = (e) => {
+            const moduleId = e.detail;
+            this.selectedModule = Object.assign(Object.assign({}, this.selectedModule), { currentVersion: moduleId });
+        };
+        this.renderModuleVersions = () => {
+            return (h("div", { part: "available-versions" }, h("gxg-combo-box", { id: "versions-combo-box", "disable-filter": true, value: this.selectedModule.versions[0]["id"], part: "module-versions", "display-validation-styles": true, "display-validation-message": true, label: this._componentLocale.modulesInformation.moduleProperties
+                    .availableVersions, labelPosition: "start", centerLabel: true, ref: el => (this.modulesList = el), onValueChanged: this.moduleVersionsValueChangedHandler }, this.selectedModule.versions.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: () => (this.selectedModule = Object.assign(Object.assign({}, this.selectedModule), { currentVersion: item.id })) }, item.id))))));
+        };
+        this.selectedButtonChangedHandler = (e) => {
+            const type = e.detail.replace("btn-", "");
+            this.filterModulesByType(type);
+        };
+        this.serverItemSelectedHandler = (e) => {
+            const serverId = e.detail.value;
+            this.serverSelectedCallbackHandler(serverId);
+        };
+        this.serverValueChangedHandler = (e) => {
+            const serverId = e.detail;
+            this.serverSelectedCallbackHandler(serverId);
+        };
+        this.progressBarCloseHandler = () => {
+            setTimeout(() => {
+                this.actionCompleted = true;
+                this.closeProgressBar = true;
+                // reset
+                this.progressValue = 0;
+                this.progressState = "in-progress";
+            }, 400);
+            // delay to force the footer line disappear after the top-state-bar has been closed.
+        };
+        this.modulesAll = [];
+        this.filteredModules = [];
+        this.selectedModule = undefined;
+        this.selectedServerId = undefined;
+        this.selectedModuleAction = {
+            message: "",
+            progress: 0,
+            state: "in-progress"
+        };
+        this.actionCompleted = true;
+        this.closeProgressBar = true;
+        this.progressValue = 0;
+        this.progressState = "in-progress";
+        this.servers = [];
+        this.serverSelectedCallback = undefined;
+        this.executeActionCallback = undefined;
+        this.addServerCallback = undefined;
+        this.serverContextMenuCallback = undefined;
+    }
+    // 6.COMPONENT LIFECYCLE EVENTS //
+    async componentDidLoad() { }
+    componentDidRender() {
+        if (!this.renderedFirstTime) {
+            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+            this.renderedFirstTime = true;
+        }
+    }
+    async componentWillLoad() {
+        this._componentLocale = await Locale.getComponentStrings(this.el);
+        await this.serverSelectedCallbackHandler(this.servers[0].id);
+    }
+    // 7.LISTENERS //
+    onPropValueChange(newModulesData) {
+        this.filteredModules = [...newModulesData];
+    }
+    // 8.PUBLIC METHODS API //
+    /**
+     * validate
+     */
+    async validate() {
+        return true;
+    }
+    // 11.RENDER() FUNCTION //
+    render() {
+        return (h(Host, { class: {
+                "gx-ide-component": true
+            } }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noAboveFooterPadding: true, noBorderAboveFooter: this.closeProgressBar, noContentPadding: true, part: "servers", containerTitle: this._componentLocale.componentName }, h("main", { class: "main" }, h("div", { class: "modules__container" }, h("header", { class: "modules__header" }, h("div", { class: "modules__combo-container" }, h("gxg-label", null, this._componentLocale.modules.selectServer), h("div", { class: "modules__combo" }, h("gxg-combo-box", { disableFilter: true, onValueChanged: this.serverValueChangedHandler }, this.servers.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: this.serverItemSelectedHandler }, item.name)))), h("span", { class: "modules__menu-container" }, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.showModuleMenu }), this.renderMenu()))), h("gxg-form-text", { label: this._componentLocale.modules.searchModules, labelPosition: "above", centerLabel: false, onValueChanged: (event) => {
+                this.handleFilterChange(event.detail);
+            } }), h("gxg-buttons-container", { reduced: true, fullWidth: true, class: "modules__browser", onSelectedButtonChanged: this.selectedButtonChangedHandler }, h("gxg-button", { id: "btn-browse", selected: true }, this._componentLocale.modules.tabs.browse), h("gxg-button", { id: "btn-installed" }, this._componentLocale.modules.tabs.installed), h("gxg-button", { id: "btn-updates" }, this._componentLocale.modules.tabs.updates))), this.renderModulesGrid()), this.selectedModule ? (h("div", { class: "module-info" }, h("header", { class: "module-info__header" }, this.renderModuleName(), this.renderModuleAction(), this.renderModuleVersions()), h("div", { class: "module-info__properties gxg-scrollbar" }, renderModuleDataProperties(this.selectedModule.properties)))) : null), h("gxg-top-state-bar", { slot: "footer-above", part: "progress-bar", stateType: this.progressState, noBorder: true, caption: this.selectedModuleAction.message ||
+                this._componentLocale.progressDefaultCaption, progress: this.progressValue, active: !this.actionCompleted || !this.closeProgressBar, autoClose: false, withClose: true, closedCallback: this.progressBarCloseHandler })))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/manage-module-references"]; }
+    get el() { return this; }
+    static get watchers() { return {
+        "modulesAll": ["onPropValueChange"]
+    }; }
+    static get style() { return manageModuleReferencesCss; }
+}, [1, "gx-ide-manage-module-references", {
+        "servers": [16],
+        "serverSelectedCallback": [16],
+        "executeActionCallback": [16],
+        "addServerCallback": [16],
+        "serverContextMenuCallback": [16],
+        "modulesAll": [32],
+        "filteredModules": [32],
+        "selectedModule": [32],
+        "selectedServerId": [32],
+        "selectedModuleAction": [32],
+        "actionCompleted": [32],
+        "closeProgressBar": [32],
+        "progressValue": [32],
+        "progressState": [32],
+        "validate": [64]
+    }, undefined, {
+        "modulesAll": ["onPropValueChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["gx-ide-manage-module-references", "ch-grid", "ch-grid-column", "ch-grid-column-resize", "ch-grid-column-settings", "ch-grid-columnset", "ch-grid-settings", "ch-grid-settings-columns", "ch-icon", "ch-window", "ch-window-close", "gx-ide-container", "gx-ide-list-selector", "gx-ide-list-selector-item", "gx-ide-title", "gxg-button", "gxg-buttons-container", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-grid", "gxg-icon", "gxg-label", "gxg-text", "gxg-title", "gxg-tooltip", "gxg-top-state-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "gx-ide-manage-module-references":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, GxManageModuleReferences);
+            }
+            break;
+        case "ch-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$t();
+            }
+            break;
+        case "ch-grid-column":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$s();
+            }
+            break;
+        case "ch-grid-column-resize":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "ch-grid-column-settings":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
+        case "ch-grid-columnset":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "ch-grid-settings":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "ch-grid-settings-columns":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "ch-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "ch-window":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "ch-window-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "gx-ide-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "gx-ide-list-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "gx-ide-list-selector-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "gx-ide-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "gxg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "gxg-buttons-container":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "gxg-combo-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "gxg-combo-box-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "gxg-form-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "gxg-form-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "gxg-form-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "gxg-grid":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "gxg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "gxg-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "gxg-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "gxg-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "gxg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "gxg-top-state-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const GxIdeManageModuleReferences = GxManageModuleReferences;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeManageModuleReferences, defineCustomElement };
+
+//# sourceMappingURL=gx-ide-manage-module-references.js.map

package/dist/components/gx-ide-manage-module-references.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-manage-module-references.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,MAAM,yBAAyB,GAAG,wjdAAwjd;;MCmC7kd,wBAAwB;;;;;;QAO3B,sBAAiB,GAAG,KAAK,CAAC;;QAgG1B,sCAAiC,GAAG;YAC1C,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,IAAI,CAChD,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC,cAAc,CAAC,cAAc,CACtD,CAAC;YACF,OAAO,QAAQ,CAAC,MAAM,CAAC;SACxB,CAAC;;;;QAKM,eAAU,GAAG,CACnB,OAAe,EACf,QAAgB,EAChB,KAAsB;YAEtB,MAAM,IAAI,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,oBAAoB,qBAAQ,IAAI,CAAE,CAAC;YACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC;YACxD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC;SACtD,CAAC;;;;;QAOM,uBAAkB,GAAG,CAAC,GAAQ;YACpC,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5E,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;SACnC,CAAC;;;;QAKM,kCAA6B,GAAG,OAAO,EAAO;YACpD,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,sBAAsB,CAAC,EAAE,CAAC,CAAC;YAE9D,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;YAE3B,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,eAAe,CAAC,CAAC;YACvC,IAAI,CAAC,mBAAmB,CAAC,QAAQ,CAAC,CAAC;YACnC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;SAC/C,CAAC;QACM,uBAAkB,GAAG,CAAC,KAAa;YACzC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;YAElC,IAAI,YAAY,EAAE;gBAChB,MAAM,cAAc,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;gBAClD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,IAClD,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,CACnD,CAAC;aACH;iBAAM;gBACL,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;aACxC;SACF,CAAC;;;;QAKM,iCAA4B,GAAG,OAAO,MAAkB;YAC9D,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,qBAAqB,CACtD,IAAI,CAAC,gBAAgB,EACrB,MAAM,CAAC,EAAE,EACT,IAAI,CAAC,iCAAiC,EAAE,EACxC,IAAI,CAAC,UAAU,CAChB,CAAC;YACF,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;SACxC,CAAC;QAEM,wBAAmB,GAAG,CAAC,IAAsB;;YAEnD,IAAI,IAAI,KAAK,QAAQ,EAAE;gBACrB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;aACxC;;iBAEI,IAAI,IAAI,KAAK,WAAW,EAAE;gBAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAkB;oBAC/D,MAAM,WAAW,GAAsB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO;wBACjE,OAAO,OAAO,CAAC,EAAE,KAAK,MAAM,CAAC,cAAc,CAAC;qBAC7C,CAAC,CAAC;oBACH,QACE,WAAW;yBACV,WAAW,CAAC,MAAM,KAAK,SAAS,IAAI,WAAW,CAAC,MAAM,KAAK,QAAQ,CAAC,EACrE;iBACH,CAAC,CAAC;aACJ;iBAAM,IAAI,IAAI,KAAK,SAAS,EAAE;gBAC7B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,MAAkB;oBAC/D,MAAM,WAAW,GAAsB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO;wBACjE,OAAO,OAAO,CAAC,EAAE,KAAK,MAAM,CAAC,cAAc,CAAC;qBAC7C,CAAC,CAAC;oBACH,OAAO,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,QAAQ,CAAC;iBACvD,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,sCAAiC,GAAG,OAC1C,CAA0B;YAE1B,MAAM,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YAClC,IAAI,MAAM,KAAK,KAAK,EAAE;gBACpB,IAAI,IAAI,CAAC,iBAAiB,EAAE;oBAC1B,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;iBAChC;aACF;iBAAM,IAAI,MAAM,KAAK,MAAM,EAAE;gBAC5B,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;aACrC;iBAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;gBAC9B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aACvB;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,QACE,4BACE,kBAAkB,EAAE,IAAI,CAAC,iCAAiC,EAC1D,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,kBAAkB,EACvB,QAAQ,EAAC,aAAa,EACtB,QAAQ,QACR,KAAK,EAAE;oBACL,IAAI,EAAE,IAAI,CAAC,sBAAsB;oBACjC,GAAG,EAAE,IAAI,CAAC,qBAAqB;iBAChC,IAED,iCACE,MAAM,EAAC,KAAK,EACZ,SAAS,EAAC,KAAK,EACf,IAAI,EAAC,kBAAkB,GACI,EAC7B,iCACE,MAAM,EAAC,MAAM,EACb,SAAS,EAAC,MAAM,EAChB,IAAI,EAAC,mBAAmB,GACG,EAC7B,iCACE,MAAM,EAAC,QAAQ,EACf,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,mBAAmB,GACG,CACR,EACvB;SACH,CAAC;QAEM,mBAAc,GAAG,OAAO,CAAa;YAC3C,IAAI,IAAI,CAAC,yBAAyB,EAAE;gBAClC,MAAM,wBAAwB,GAC5B,CAAC,CAAC,MACH,CAAC,qBAAqB,EAAE,CAAC;gBAC1B,MAAM,IAAI,CAAC,yBAAyB,CAAC;oBACnC,SAAS,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC;oBAClC,OAAO,EAAE,wBAAwB,CAAC,CAAC;oBACnC,OAAO,EAAE,wBAAwB,CAAC,CAAC;iBACpC,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,sBAAiB,GAAG;YAC1B,QACE,gBAAU,QAAQ,QAAC,UAAU,UAC3B,eACE,gBAAgB,EAAC,QAAQ,EACzB,IAAI,EAAC,yBAAyB,EAC9B,KAAK,EAAC,WAAW;;gBAEjB,kBAAkB,EAAE,CAAC,GAAQ,KAAK,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,MAAM,CAAC,IAErE,6BACE,sBACE,WAAW,EAAE,KAAK,EAClB,IAAI,EAAC,aAAa,GACF,EAElB,sBAAgB,WAAW,EAAE,KAAK,GAAmB,EACrD,sBACE,WAAW,EAAE,KAAK,EAClB,IAAI,EAAC,aAAa,GACF,CACA,EAEnB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,IAAgB,MACzC,mBACE,KAAK,EAAE,IAAI,CAAC,EAAE,EACd,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,QAAQ,EACN,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,IAG3D,wBACE,gBACE,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,OAAO,GACF,CACC,EACf,oBAAc,KAAK,EAAC,wBAAwB,IAC1C,YAAM,KAAK,EAAC,wBAAwB,IAAE,IAAI,CAAC,IAAI,CAAQ,EACvD,YAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACM,EAEf,wBACG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,IACxD,kBACE,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAC/B,GAAG,QACH,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE;oBACP,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;oBAC9B,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,CAAC;iBACzC,IAEA,IAAI,CAAC,iCAAiC,EAAE,CAC9B,IACX,IAAI,CACK,CACH,CACf,CAAC,CACM,CACD,EACX;SACH,CAAC;QAEM,oBAAe,GAAG;YACxB,OAAO,IAAI,CAAC,iCAAiC,EAAE,KAAK,SAAS;kBACzD,0BAA0B;kBAC1B,iBAAiB,CAAC;SACvB,CAAC;;QAGM,qBAAgB,GAAG;YACzB,QACE,iBAAW,IAAI,EAAC,mBAAmB,EAAC,IAAI,EAAC,UAAU,IACjD,WAAK,KAAK,EAAC,mBAAmB,IAC5B,gBACE,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,GACnB,EACX,IAAI,CAAC,cAAc,CAAC,IAAI,CACrB,CACI,EACZ;SACH,CAAC;QACM,uBAAkB,GAAG;YAC3B,OAAO,IAAI,CAAC,iCAAiC,EAAE,KAAK,SAAS,IAC3D,WAAK,KAAK,EAAC,+BAA+B,IACxC,gBAAU,IAAI,EAAC,eAAe,IAE1B,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,gBAAgB;iBACtD,YAAY,CAER,CACP,KAEN,WAAK,KAAK,EAAC,wEAAwE,IACjF,gBAAU,IAAI,EAAC,WAAW,IACvB,IAAI,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,gBAAgB,MAAM,IAAI,CAAC,cAAc,CAAC,cAAc,EAAE,CAChH,CACP,CACP,CAAC;SACH,CAAC;QAEM,sCAAiC,GAAG,CAAC,CAAmB;YAC9D,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,cAAc,mCACd,IAAI,CAAC,cAAc,KACtB,cAAc,EAAE,QAAQ,GACzB,CAAC;SACH,CAAC;QAEM,yBAAoB,GAAG;YAC7B,QACE,WAAK,IAAI,EAAC,oBAAoB,IAC5B,qBACE,EAAE,EAAC,oBAAoB,0BAEvB,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC5C,IAAI,EAAC,iBAAiB,yEAGtB,KAAK,EACH,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,gBAAgB;qBACtD,iBAAiB,EAEtB,aAAa,EAAC,OAAO,EACrB,WAAW,QACX,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAA4B,CAAC,EAC5D,cAAc,EAAE,IAAI,CAAC,iCAAiC,IAErD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,KACpC,0BACE,KAAK,EAAE,IAAI,CAAC,EAAE,EACd,cAAc,EAAE,OACb,IAAI,CAAC,cAAc,mCACf,IAAI,CAAC,cAAc,KACtB,cAAc,EAAE,IAAI,CAAC,EAAE,GACxB,CAAC,IAGH,IAAI,CAAC,EAAE,CACW,CACtB,CAAC,CACY,CACZ,EACN;SACH,CAAC;QAEM,iCAA4B,GAAG,CAAC,CAAsB;YAC5D,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAqB,CAAC;YAC9D,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;SAChC,CAAC;QAEM,8BAAyB,GAAG,CAClC,CAKE;YAEF,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC,CAAC;SAC9C,CAAC;QAEM,8BAAyB,GAAG,CAAC,CAAmB;YACtD,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,6BAA6B,CAAC,QAAQ,CAAC,CAAC;SAC9C,CAAC;QAEM,4BAAuB,GAAG;YAChC,UAAU,CAAC;gBACT,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;gBAC5B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;;gBAE7B,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC;gBACvB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;aACpC,EAAE,GAAG,CAAC,CAAC;;SAET,CAAC;0BAvakC,EAAE;+BACG,EAAE;;;oCAGC;YAC1C,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,CAAC;YACX,KAAK,EAAE,aAAa;SACrB;+BAC0B,IAAI;gCACH,IAAI;6BACC,CAAC;6BACQ,aAAa;uBAOR,EAAE;;;;;;;IA+BjD,MAAM,gBAAgB,MAAK;IAE3B,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,CAAC,2BAA2B,CAAC,IAAI,CACnC,IAAI,CAAC,gBAAgB,CAAC,aAAa,CACpC,CAAC;YACF,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;SAC/B;KACF;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,gBAAgB,GAAG,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAClE,MAAM,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;KAC9D;;IAKD,iBAAiB,CAAC,cAA4B;QAC5C,IAAI,CAAC,eAAe,GAAG,CAAC,GAAG,cAAc,CAAC,CAAC;KAC5C;;;;;IAQD,MAAM,QAAQ;QACZ,OAAO,IAAI,CAAC;KACb;;IA0VD,MAAM;QACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;aACzB,IAED,WAAK,KAAK,EAAC,qBAAqB,IAC9B,wBACE,oBAAoB,QACpB,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,EAC1C,gBAAgB,QAChB,IAAI,EAAC,SAAS,EACd,cAAc,EAAE,IAAI,CAAC,gBAAgB,CAAC,aAAa,IAGnD,YAAM,KAAK,EAAC,MAAM,IAChB,WAAK,KAAK,EAAC,oBAAoB,IAC7B,cAAQ,KAAK,EAAC,iBAAiB,IAC7B,WAAK,KAAK,EAAC,0BAA0B,IACnC,qBACG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,YAAY,CACjC,EACZ,WAAK,KAAK,EAAC,gBAAgB,IACzB,qBACE,aAAa,QACb,cAAc,EAAE,IAAI,CAAC,yBAAyB,IAE7C,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,KACpB,0BACE,KAAK,EAAE,IAAI,CAAC,EAAE,EACd,cAAc,EAAE,IAAI,CAAC,yBAAyB,IAE7C,IAAI,CAAC,IAAI,CACS,CACtB,CAAC,CACY,EAChB,YAAM,KAAK,EAAC,yBAAyB,IACnC,kBACE,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,mCAAmC,EACxC,OAAO,EAAE,IAAI,CAAC,cAAc,GAChB,EACb,IAAI,CAAC,UAAU,EAAE,CACb,CACH,CACF,EACN,qBACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,aAAa,EAClD,aAAa,EAAC,OAAO,EACrB,WAAW,EAAE,KAAK,EAClB,cAAc,EAAE,CAAC,KAAU;gBACzB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aACvC,GACc,EACjB,6BACE,OAAO,QACP,SAAS,QACT,KAAK,EAAC,kBAAkB,EACxB,uBAAuB,EAAE,IAAI,CAAC,4BAA4B,IAE1D,kBAAY,EAAE,EAAC,YAAY,EAAC,QAAQ,UACjC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAC/B,EACb,kBAAY,EAAE,EAAC,eAAe,IAC3B,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAClC,EACb,kBAAY,EAAE,EAAC,aAAa,IACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAChC,CACS,CACjB,EAGR,IAAI,CAAC,iBAAiB,EAAE,CACrB,EAGL,IAAI,CAAC,cAAc,IAClB,WAAK,KAAK,EAAC,aAAa,IACtB,cAAQ,KAAK,EAAC,qBAAqB,IAChC,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,kBAAkB,EAAE,EACzB,IAAI,CAAC,oBAAoB,EAAE,CACrB,EACT,WAAK,KAAK,EAAC,uCAAuC,IAC/C,0BAA0B,CAAC,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,CACvD,CACF,IACJ,IAAI,CACH,EAGP,yBACE,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,QAAQ,QACR,OAAO,EACL,IAAI,CAAC,oBAAoB,CAAC,OAAO;gBACjC,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,EAE9C,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,MAAM,EAAE,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,gBAAgB,EACvD,SAAS,EAAE,KAAK,EAChB,SAAS,QACT,cAAc,EAAE,IAAI,CAAC,uBAAuB,GACzB,CACJ,CACf,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modules/manage-module-references/manage-module-references.scss?tag=gx-ide-manage-module-references&encapsulation=shadow","src/components/modules/manage-module-references/manage-module-references.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-common.scss\";\n@import \"../../../global/gx-ide-mixins.scss\";\n\n/*--- General ---*/\np,\nul {\n  font-size: var(--font-size-lg);\n  margin: 0;\n}\np {\n  line-height: 1.6em;\n}\n/*--- Header ---*/\n.header {\n  align-items: center;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: 1fr;\n}\n.main {\n  display: grid;\n  //grid-template-columns: 1fr 2fr 1fr;\n  grid-template-columns: 1.5fr 2fr;\n  grid-template-rows: 1fr;\n  height: 100%;\n  overflow: auto;\n}\nch-grid-columnset {\n  display: none;\n}\n.grid-cell-module {\n  &__info {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--mer-spacing--xxs);\n  }\n  &__name {\n    font-weight: var(--mer-font__weight--bold);\n  }\n}\n\n/*--- Servers Container ---*/\n.servers-container {\n  display: none;\n  height: 100%;\n  &__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--gxg-list-box-main__padding) var(--gxg-list-box-main__padding)\n      0 var(--gxg-list-box-main__padding);\n\n    gxg-button {\n      width: 100%;\n    }\n  }\n}\n\n/*--- Modules (Header) ---*/\n.modules {\n  &__combo-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n  }\n  &__combo {\n    gxg-combo-box {\n      flex: 1;\n    }\n    display: flex;\n    flex-direction: row;\n    gap: var(--mer-spacing--xs);\n  }\n  &__menu-container {\n    position: relative;\n  }\n  &__menu {\n    display: none;\n    width: 200px;\n    position: fixed;\n    z-index: 10;\n    right: 0;\n    transform: translateX(-100%);\n\n    &--visible {\n      display: block;\n    }\n  }\n  &__header {\n    padding: var(--gxg-list-box-main__padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n  }\n  &__container {\n    border-inline-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n    display: grid;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    overflow: auto;\n  }\n}\n\n/*--- Module Info ---*/\n.module-info {\n  display: grid;\n  grid-template-rows: auto 1fr;\n  height: 100%;\n  overflow: auto;\n\n  &__name {\n    display: flex;\n    align-items: center;\n    gap: var(--mer-spacing--sm);\n    --ds-icon-size-box--regular: 24px;\n    --ds-icon-size--regular: 24px;\n    font-weight: var(--mer-font__weight--bold);\n  }\n\n  &__header {\n    padding: var(--gx-ide-container__padding);\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    border-block-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n  }\n\n  &__action-container {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--mer-spacing--xs);\n    &:before {\n      content: \"\";\n      width: var(--mer-spacing--xs);\n      height: var(--mer-spacing--xs);\n      border-radius: 50%;\n      display: block;\n      background-color: var(--mer-icon__primary--disabled);\n    }\n    &--installed:before {\n      background-color: var(--mer-icon__primary);\n    }\n  }\n\n  &__divider {\n    width: calc(100% - var(--gx-ide-container__padding) * 4);\n    padding: 0 var(--gx-ide-container__padding);\n    margin: 0 auto;\n    border: 0;\n    border-block-end: var(--mer-border__width--sm) solid\n      var(--gx-ide-container-border-color);\n  }\n  &__properties {\n    display: flex;\n    flex-direction: column;\n    padding: var(--gx-ide-container__padding);\n    gap: var(--mer-spacing--xs);\n    overflow: auto;\n  }\n}\n\n.md-property {\n  display: grid;\n  gap: var(--mer-spacing--xs);\n\n  &--inline {\n    grid-template-columns: auto 1fr;\n  }\n  &--block {\n  }\n  &__key {\n    font-weight: var(--font-weight-bold);\n    max-width: 150px;\n  }\n  &__value {\n    font-size: var(--mer-font__size--xxs);\n  }\n  &__key,\n  &__value {\n    > * {\n      display: inline-block;\n    }\n  }\n  &__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--mer-spacing--xs);\n    > ul {\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      display: flex;\n      flex-direction: column;\n      gap: var(--mer-spacing--xxs);\n      margin-inline-start: var(--mer-spacing--xs);\n\n      li {\n        position: relative;\n        padding-inline-start: 12px;\n        line-height: var(--ds-base-font-line-height--comfortable);\n        &::before {\n          content: \"\";\n          position: absolute;\n          left: 0;\n          top: 7px;\n          display: inline-block;\n          width: var(--mer-spacing--xxs);\n          height: var(--mer-spacing--xxs);\n          background-color: var(--mer-text__on-surface);\n        }\n      }\n    }\n  }\n}\n\n.md-property,\n.md-property__list {\n  border-block-end: var(--mer-border__width--sm) solid\n    var(--gx-ide-container-border-color);\n  padding-block-end: var(--mer-spacing--xs);\n\n  &:last-child {\n    border-block-end: 0;\n    padding-block-end: 0;\n  }\n}\n","/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  State,\n  Watch\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\nimport { Color } from \"@genexus/gemini\";\nimport { topStateBarType } from \"@genexus/gemini\";\n/* CUSTOM IMPORTS */\nimport {\n  ModuleServerData,\n  ModuleData,\n  ModuleActionType,\n  ModuleFilterType,\n  ModuleVersionData\n} from \"../types\";\nimport { renderModuleDataProperties } from \"../../../common/common\";\nimport { Locale } from \"../../../common/locale\";\nimport { ItemData } from \"../../../components/_helpers/list-selector/list-selector-item/list-selector-item\";\nimport { ContextMenuInfo } from \"../../../common/types\";\n\n@Component({\n  tag: \"gx-ide-manage-module-references\",\n  styleUrl: \"manage-module-references.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/manage-module-references\"]\n})\nexport class GxManageModuleReferences {\n  // 1.OWN PROPERTIES | WATCH'S //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeManageModuleReferencesElement;\n  private modulesList!: HTMLGxgComboBoxElement;\n  private moduleMenuLeftPosition: string;\n  private moduleMenuTopPosition: string;\n\n  // 3.STATE() VARIABLES //\n\n  @State() modulesAll: ModuleData[] = [];\n  @State() filteredModules: ModuleData[] = [];\n  @State() selectedModule: ModuleData;\n  @State() selectedServerId: string;\n  @State() selectedModuleAction: ActionInfo = {\n    message: \"\",\n    progress: 0,\n    state: \"in-progress\"\n  };\n  @State() actionCompleted = true;\n  @State() closeProgressBar = true;\n  @State() progressValue: number = 0;\n  @State() progressState: topStateBarType = \"in-progress\";\n\n  // 4.PUBLIC PROPERTY API //\n\n  /**\n   * List of module servers currently cataloged\n   */\n  @Prop() readonly servers: ModuleServerData[] = [];\n\n  /**\n   * Callback invoked when a server is selected. Returns the set of modules available on that server.\n   */\n  @Prop() readonly serverSelectedCallback: ServerSelectedCallback;\n\n  /**\n   * Callback invoked when the user wants to execute the action corresponding to a selected module. When the action begins to be executed, the component must be able to show the progress of the action. For this, the onProgress parameter is available, which is in turn a callback used by the host to notify the progress by text message and percentage.\n   */\n  @Prop() readonly executeActionCallback: ExecuteActionCallback;\n\n  /**\n   * Callback invoked when Add button is clicked\n   */\n  @Prop() readonly addServerCallback: AddServerCallback;\n\n  /**\n   * Callback invoked when an element is right clicked on servers list\n   */\n  @Prop() readonly serverContextMenuCallback: ServerContextMenuCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * This event is emitted once just after the component is fully loaded and the first render() occurs\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<boolean>;\n\n  // 6.COMPONENT LIFECYCLE EVENTS //\n\n  async componentDidLoad() {}\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    await this.serverSelectedCallbackHandler(this.servers[0].id);\n  }\n\n  // 7.LISTENERS //\n\n  @Watch(\"modulesAll\")\n  onPropValueChange(newModulesData: ModuleData[]) {\n    this.filteredModules = [...newModulesData];\n  }\n\n  // 8.PUBLIC METHODS API //\n\n  /**\n   * validate\n   */\n  @Method()\n  async validate(): Promise<boolean> {\n    return true;\n  }\n\n  // 9.LOCAL METHODS //\n\n  private getActionFromCurrentModuleVersion = (): ModuleActionType => {\n    const selected = this.selectedModule.versions.find(\n      ({ id }) => id === this.selectedModule.currentVersion\n    );\n    return selected.action;\n  };\n\n  /**\n   * Callback invoked to get the progress when module is performing an action\n   */\n  private onProgress = (\n    message: string,\n    progress: number,\n    state: topStateBarType\n  ): void => {\n    const data = { message, progress, state };\n    this.selectedModuleAction = { ...data };\n    this.progressValue = this.selectedModuleAction.progress;\n    this.progressState = this.selectedModuleAction.state;\n  };\n\n  // 10.LOCAL METHODS //\n\n  /**\n   * Used for changing the selected module\n   */\n  private handleModuleChange = (row: any) => {\n    const foundModule = this.modulesAll.find(item => item.id === row.rowsId[0]);\n    this.selectedModule = foundModule;\n  };\n\n  /**\n   * Change the server selected value in response to callbackServerSelected callback\n   */\n  private serverSelectedCallbackHandler = async (id: any) => {\n    const resolvedObjects = await this.serverSelectedCallback(id);\n\n    this.selectedServerId = id;\n\n    this.modulesAll = [...resolvedObjects];\n    this.filterModulesByType(\"browse\");\n    this.selectedModule = this.filteredModules[0];\n  };\n  private handleFilterChange = (value: string) => {\n    const trimmedValue = value.trim();\n\n    if (trimmedValue) {\n      const lowerCaseValue = trimmedValue.toLowerCase();\n      this.filteredModules = this.modulesAll.filter(module =>\n        module.name.toLowerCase().includes(lowerCaseValue)\n      );\n    } else {\n      this.filteredModules = this.modulesAll;\n    }\n  };\n\n  /**\n   * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback\n   */\n  private executeActionCallbackHandler = async (module: ModuleData) => {\n    const actionCompleted = await this.executeActionCallback(\n      this.selectedServerId,\n      module.id,\n      this.getActionFromCurrentModuleVersion(),\n      this.onProgress\n    );\n    this.actionCompleted = actionCompleted;\n  };\n\n  private filterModulesByType = (type: ModuleFilterType) => {\n    // browse\n    if (type === \"browse\") {\n      this.filteredModules = this.modulesAll;\n    }\n    // installed\n    else if (type === \"installed\") {\n      this.filteredModules = this.modulesAll.filter((module: ModuleData) => {\n        const versionData: ModuleVersionData = module.versions.find(version => {\n          return version.id === module.currentVersion;\n        });\n        return (\n          versionData &&\n          (versionData.action === \"restore\" || versionData.action === \"update\")\n        );\n      });\n    } else if (type === \"updates\") {\n      this.filteredModules = this.modulesAll.filter((module: ModuleData) => {\n        const versionData: ModuleVersionData = module.versions.find(version => {\n          return version.id === module.currentVersion;\n        });\n        return versionData && versionData.action === \"update\";\n      });\n    }\n  };\n\n  private moduleMenuSelectionChangedHandler = async (\n    e: CustomEvent<ItemData[]>\n  ) => {\n    const itemId = e.detail[0].itemId;\n    if (itemId === \"add\") {\n      if (this.addServerCallback) {\n        await this.addServerCallback();\n      }\n    } else if (itemId === \"edit\") {\n      console.log(this.modulesList.value);\n    } else if (itemId === \"upload\") {\n      console.log(\"upload\");\n    }\n  };\n\n  private renderMenu = () => {\n    return (\n      <gx-ide-list-selector\n        onSelectionChanged={this.moduleMenuSelectionChangedHandler}\n        class=\"modules__menu\"\n        type=\"single-selection\"\n        listName=\"module-menu\"\n        ellipsis\n        style={{\n          left: this.moduleMenuLeftPosition,\n          top: this.moduleMenuTopPosition\n        }}\n      >\n        <gx-ide-list-selector-item\n          itemId=\"add\"\n          itemValue=\"Add\"\n          icon=\"gemini-tools/add\"\n        ></gx-ide-list-selector-item>\n        <gx-ide-list-selector-item\n          itemId=\"edit\"\n          itemValue=\"Edit\"\n          icon=\"gemini-tools/edit\"\n        ></gx-ide-list-selector-item>\n        <gx-ide-list-selector-item\n          itemId=\"upload\"\n          itemValue=\"Upload from file\"\n          icon=\"gemini-tools/file\"\n        ></gx-ide-list-selector-item>\n      </gx-ide-list-selector>\n    );\n  };\n\n  private showModuleMenu = async (e: MouseEvent) => {\n    if (this.serverContextMenuCallback) {\n      const buttonBoundingClientRect = (\n        e.target as HTMLElement\n      ).getBoundingClientRect();\n      await this.serverContextMenuCallback({\n        selection: [this.selectedServerId],\n        clientX: buttonBoundingClientRect.x,\n        clientY: buttonBoundingClientRect.y\n      });\n    }\n  };\n\n  private renderModulesGrid = (): Element => {\n    return (\n      <gxg-grid noBorder fullHeight>\n        <ch-grid\n          rowSelectionMode=\"single\"\n          part=\"ch-grid-pending-commits\"\n          class=\"no-border\"\n          /* TODO: El error es aqui ya que se esta enviando el valor del row Id correspondiente a la primera carga del grid con el primer server */\n          onSelectionChanged={(row: any) => this.handleModuleChange(row.detail)}\n        >\n          <ch-grid-columnset>\n            <ch-grid-column\n              settingable={false}\n              size=\"min-content\"\n            ></ch-grid-column>\n\n            <ch-grid-column settingable={false}></ch-grid-column>\n            <ch-grid-column\n              settingable={false}\n              size=\"min-content\"\n            ></ch-grid-column>\n          </ch-grid-columnset>\n\n          {this.filteredModules.map((item: ModuleData) => (\n            <ch-grid-row\n              rowid={item.id}\n              key={item.id}\n              selected={\n                this.selectedModule && this.selectedModule.id === item.id\n              }\n            >\n              <ch-grid-cell>\n                <gxg-icon\n                  type=\"objects/module\"\n                  color=\"auto\"\n                  size=\"small\"\n                ></gxg-icon>\n              </ch-grid-cell>\n              <ch-grid-cell class=\"grid-cell-module__info\">\n                <span class=\"grid-cell-module__name\">{item.name}</span>\n                <span class=\"grid-cell-module__description\">\n                  {item.description}\n                </span>\n              </ch-grid-cell>\n\n              <ch-grid-cell>\n                {this.selectedModule && this.selectedModule.id === item.id ? (\n                  <gxg-button\n                    disabled={!this.actionCompleted}\n                    fit\n                    part=\"module-action\"\n                    onClick={() => {\n                      this.actionCompleted = false;\n                      this.closeProgressBar = false;\n                      this.executeActionCallbackHandler(item);\n                    }}\n                  >\n                    {this.getActionFromCurrentModuleVersion()}\n                  </gxg-button>\n                ) : null}\n              </ch-grid-cell>\n            </ch-grid-row>\n          ))}\n        </ch-grid>\n      </gxg-grid>\n    );\n  };\n\n  private moduleIconColor = (): Color => {\n    return this.getActionFromCurrentModuleVersion() === \"install\"\n      ? \"mercury-primary-disabled\"\n      : \"mercury-primary\";\n  };\n\n  /* module details/information renders*/\n  private renderModuleName = () => {\n    return (\n      <gxg-title part=\"module-info__name\" type=\"title-05\">\n        <div class=\"module-info__name\">\n          <gxg-icon\n            type=\"objects/module\"\n            color={this.moduleIconColor()}\n          ></gxg-icon>\n          {this.selectedModule.name}\n        </div>\n      </gxg-title>\n    );\n  };\n  private renderModuleAction = () => {\n    return this.getActionFromCurrentModuleVersion() === \"install\" ? (\n      <div class=\"module-info__action-container\">\n        <gxg-text part=\"not-installed\">\n          {\n            this._componentLocale.modulesInformation.moduleProperties\n              .notInstalled\n          }\n        </gxg-text>\n      </div>\n    ) : (\n      <div class=\"module-info__action-container module-info__action-container--installed\">\n        <gxg-text part=\"installed\">\n          {` ${this._componentLocale.modulesInformation.moduleProperties.installedVersion} : ${this.selectedModule.currentVersion}`}\n        </gxg-text>\n      </div>\n    );\n  };\n\n  private moduleVersionsValueChangedHandler = (e: CustomEvent<any>) => {\n    const moduleId = e.detail;\n    this.selectedModule = {\n      ...this.selectedModule,\n      currentVersion: moduleId\n    };\n  };\n\n  private renderModuleVersions = () => {\n    return (\n      <div part=\"available-versions\">\n        <gxg-combo-box\n          id=\"versions-combo-box\"\n          disable-filter\n          value={this.selectedModule.versions[0][\"id\"]}\n          part=\"module-versions\"\n          display-validation-styles\n          display-validation-message\n          label={\n            this._componentLocale.modulesInformation.moduleProperties\n              .availableVersions\n          }\n          labelPosition=\"start\"\n          centerLabel\n          ref={el => (this.modulesList = el as HTMLGxgComboBoxElement)}\n          onValueChanged={this.moduleVersionsValueChangedHandler}\n        >\n          {this.selectedModule.versions.map(item => (\n            <gxg-combo-box-item\n              value={item.id}\n              onItemSelected={() =>\n                (this.selectedModule = {\n                  ...this.selectedModule,\n                  currentVersion: item.id\n                })\n              }\n            >\n              {item.id}\n            </gxg-combo-box-item>\n          ))}\n        </gxg-combo-box>\n      </div>\n    );\n  };\n\n  private selectedButtonChangedHandler = (e: CustomEvent<string>) => {\n    const type = e.detail.replace(\"btn-\", \"\") as ModuleFilterType;\n    this.filterModulesByType(type);\n  };\n\n  private serverItemSelectedHandler = (\n    e: CustomEvent<{\n      el: HTMLGxgComboBoxItemElement;\n      index: number;\n      value: any;\n      icon?: string;\n    }>\n  ) => {\n    const serverId = e.detail.value;\n    this.serverSelectedCallbackHandler(serverId);\n  };\n\n  private serverValueChangedHandler = (e: CustomEvent<any>) => {\n    const serverId = e.detail;\n    this.serverSelectedCallbackHandler(serverId);\n  };\n\n  private progressBarCloseHandler = () => {\n    setTimeout(() => {\n      this.actionCompleted = true;\n      this.closeProgressBar = true;\n      // reset\n      this.progressValue = 0;\n      this.progressState = \"in-progress\";\n    }, 400);\n    // delay to force the footer line disappear after the top-state-bar has been closed.\n  };\n\n  // 11.RENDER() FUNCTION //\n\n  render(): void {\n    return (\n      <Host\n        class={{\n          \"gx-ide-component\": true\n        }}\n      >\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noAboveFooterPadding\n            noBorderAboveFooter={this.closeProgressBar}\n            noContentPadding\n            part=\"servers\"\n            containerTitle={this._componentLocale.componentName}\n          >\n            {/* Servers*/}\n            <main class=\"main\">\n              <div class=\"modules__container\">\n                <header class=\"modules__header\">\n                  <div class=\"modules__combo-container\">\n                    <gxg-label>\n                      {this._componentLocale.modules.selectServer}\n                    </gxg-label>\n                    <div class=\"modules__combo\">\n                      <gxg-combo-box\n                        disableFilter\n                        onValueChanged={this.serverValueChangedHandler}\n                      >\n                        {this.servers.map(item => (\n                          <gxg-combo-box-item\n                            value={item.id}\n                            onItemSelected={this.serverItemSelectedHandler}\n                          >\n                            {item.name}\n                          </gxg-combo-box-item>\n                        ))}\n                      </gxg-combo-box>\n                      <span class=\"modules__menu-container\">\n                        <gxg-button\n                          type=\"secondary-icon-only\"\n                          icon=\"gemini-tools/show-more-horizontal\"\n                          onClick={this.showModuleMenu}\n                        ></gxg-button>\n                        {this.renderMenu()}\n                      </span>\n                    </div>\n                  </div>\n                  <gxg-form-text\n                    label={this._componentLocale.modules.searchModules}\n                    labelPosition=\"above\"\n                    centerLabel={false}\n                    onValueChanged={(event: any) => {\n                      this.handleFilterChange(event.detail);\n                    }}\n                  ></gxg-form-text>\n                  <gxg-buttons-container\n                    reduced\n                    fullWidth\n                    class=\"modules__browser\"\n                    onSelectedButtonChanged={this.selectedButtonChangedHandler}\n                  >\n                    <gxg-button id=\"btn-browse\" selected>\n                      {this._componentLocale.modules.tabs.browse}\n                    </gxg-button>\n                    <gxg-button id=\"btn-installed\">\n                      {this._componentLocale.modules.tabs.installed}\n                    </gxg-button>\n                    <gxg-button id=\"btn-updates\">\n                      {this._componentLocale.modules.tabs.updates}\n                    </gxg-button>\n                  </gxg-buttons-container>\n                </header>\n\n                {/* modules grid*/}\n                {this.renderModulesGrid()}\n              </div>\n\n              {/* Module Information*/}\n              {this.selectedModule ? (\n                <div class=\"module-info\">\n                  <header class=\"module-info__header\">\n                    {this.renderModuleName()}\n                    {this.renderModuleAction()}\n                    {this.renderModuleVersions()}\n                  </header>\n                  <div class=\"module-info__properties gxg-scrollbar\">\n                    {renderModuleDataProperties(this.selectedModule.properties)}\n                  </div>\n                </div>\n              ) : null}\n            </main>\n\n            {/* Top State Bar*/}\n            <gxg-top-state-bar\n              slot=\"footer-above\"\n              part=\"progress-bar\"\n              stateType={this.progressState}\n              noBorder\n              caption={\n                this.selectedModuleAction.message ||\n                this._componentLocale.progressDefaultCaption\n              }\n              progress={this.progressValue}\n              active={!this.actionCompleted || !this.closeProgressBar}\n              autoClose={false}\n              withClose\n              closedCallback={this.progressBarCloseHandler}\n            ></gxg-top-state-bar>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type ExecuteActionCallback = (\n  serverId: string,\n  moduleId: string,\n  action: ModuleActionType,\n  onProgress: (\n    message: string,\n    progress: number,\n    state: topStateBarType\n  ) => void\n) => Promise<boolean>;\n\nexport type ServerSelectedCallback = (id: string) => Promise<ModuleData[]>;\n\nexport type AddServerCallback = () => Promise<void>;\n\nexport type ServerContextMenuCallback = (\n  contextMenuInfo: ContextMenuInfo\n) => Promise<void>;\nexport interface ActionInfo {\n  message: string;\n  progress: number;\n  state: topStateBarType;\n}\n"],"version":3}

package/dist/components/gx-ide-new-environment.js

@@ -9,7 +9,7 @@ import { d as defineCustomElement$o } from './ch-shortcuts2.js';
 import { d as defineCustomElement$n } from './ch-window2.js';
 import { d as defineCustomElement$m } from './ch-window-close2.js';
 import { d as defineCustomElement$l } from './container.js';
-import { d as defineCustomElement$k } from './title2.js';
+import { d as defineCustomElement$k } from './title.js';
 import { d as defineCustomElement$j } from './button.js';
 import { d as defineCustomElement$i } from './combo-box.js';
 import { d as defineCustomElement$h } from './combo-box-item.js';
@@ -26,7 +26,7 @@ import { d as defineCustomElement$7 } from './tab-bar.js';
 import { d as defineCustomElement$6 } from './tab-button.js';
 import { d as defineCustomElement$5 } from './tabs.js';
 import { d as defineCustomElement$4 } from './text.js';
-import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$3 } from './title2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
 const newEnvironmentCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block;border:1px solid var(--gxg-border-color--regular);background-color:var(--mer-color__surface)}.header{display:flex}.header__label{flex:none}.main{height:100%}.gxg-tabs{margin-top:0;box-shadow:none}.tab__basic__single-runtime{display:flex;align-items:center;justify-content:center;gap:var(--mer-spacing--xxs)}.basic-main{display:flex;height:100%}.basic-main__back-end{flex:1}.basic-main__front-end{flex:1}.advanced-second-row{grid-template-columns:repeat(2, 1fr);grid-template-rows:1fr}.advanced-second-row>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left{grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(4, 1fr);grid-template-columns:1fr auto}.advanced-second-row-col-left>*{display:flex;align-items:self-end}.advanced-second-row-col-left>*:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-left>*:nth-child(2){grid-area:1/2/2/3}.advanced-second-row-col-left>*:nth-child(3){grid-area:2/1/3/2}.advanced-second-row-col-left>*:nth-child(4){grid-area:2/2/3/3}.advanced-second-row-col-left>*:nth-child(5){grid-area:3/1/4/2}.advanced-second-row-col-left>*:nth-child(6){grid-area:3/2/4/3}.advanced-second-row-col-left>*:nth-child(7){grid-area:4/1/5/2}.advanced-second-row-col-left>*:nth-child(8){grid-area:4/2/5/3}.advanced-second-row-col-right{grid-template-columns:1fr;grid-template-rows:repeat(4, 1fr);grid-auto-rows:1fr}.advanced-second-row-col-right *:nth-child(1){grid-area:1/1/2/2}.advanced-second-row-col-right *:nth-child(2){grid-area:2/1/3/2}.advanced-second-row-col-right *:nth-child(3){grid-area:3/1/4/2}.advanced-second-row-col-right *:nth-child(4){grid-area:4/1/5/2}";