@genexus/genexus-ide-ui 3.2.20 → 3.2.22

package/dist/types/components.d.ts

@@ -56,8 +56,8 @@ import { CancelCallback as CancelCallback15, CreateCallback as CreateCallback2,
 import { NewVersionData } from "./components/new-version/new-version";
 import { CancelCallback as CancelCallback16, LoadCallback as LoadCallback2, NewObjectCallback, OpenSelectionCallback, SelectModuleCallback as SelectModuleCallback4 } from "./components/object-selector/object-selector";
 import { CancelCallback as CancelCallback17, ImportCallback as ImportCallback1, LoadCallback as LoadCallback3, SelectParentCallback } from "./components/open-api-import/open-api-import";
-import { PluginDetailsData } from "./components/plugin-details/plugin-details";
-import { PluginAction, PluginData } from "./components/plugin-explorer/plugin-explorer";
+import { PluginDetailsData, PluginInstallProgress } from "./components/plugin-details/plugin-details";
+import { PluginAction, PluginGroupData } from "./components/plugin-explorer/plugin-explorer";
 import { TopStateBarType } from "./components/_helpers/progress-bar/progress-bar";
 import { LoadReferencesCallback, ObjectData as ObjectData1, OpenObjectCallback, OpenSelectorDialogCallback, SelectorSourceCallback, SelectReferenceCallback } from "./components/references/references";
 import { RestoreVersionData } from "./components/restore-version/restore-version";
@@ -136,8 +136,8 @@ export { CancelCallback as CancelCallback15, CreateCallback as CreateCallback2,
 export { NewVersionData } from "./components/new-version/new-version";
 export { CancelCallback as CancelCallback16, LoadCallback as LoadCallback2, NewObjectCallback, OpenSelectionCallback, SelectModuleCallback as SelectModuleCallback4 } from "./components/object-selector/object-selector";
 export { CancelCallback as CancelCallback17, ImportCallback as ImportCallback1, LoadCallback as LoadCallback3, SelectParentCallback } from "./components/open-api-import/open-api-import";
-export { PluginDetailsData } from "./components/plugin-details/plugin-details";
-export { PluginAction, PluginData } from "./components/plugin-explorer/plugin-explorer";
+export { PluginDetailsData, PluginInstallProgress } from "./components/plugin-details/plugin-details";
+export { PluginAction, PluginGroupData } from "./components/plugin-explorer/plugin-explorer";
 export { TopStateBarType } from "./components/_helpers/progress-bar/progress-bar";
 export { LoadReferencesCallback, ObjectData as ObjectData1, OpenObjectCallback, OpenSelectorDialogCallback, SelectorSourceCallback, SelectReferenceCallback } from "./components/references/references";
 export { RestoreVersionData } from "./components/restore-version/restore-version";
@@ -890,6 +890,10 @@ export namespace Components {
           * Callback invoked on every input change. Receives the name of the property that changed and its new value. The host is expected to apply the change and push an updated `properties` array back to the component.
          */
         "propertyChangeCallback": PropertyChangeCallback;
+        /**
+          * Suspends or reactivates the shortcuts.
+         */
+        "suspendShortcuts": (suspendShortcuts: boolean) => Promise<void>;
     }
     interface GxIdeDeploymentTool {
         /**
@@ -1971,14 +1975,22 @@ export namespace Components {
         "suspendShortcuts": (suspendShortcuts: boolean) => Promise<void>;
     }
     interface GxIdePluginDetails {
+        /**
+          * Callback that should be invoked when the user cancels an in-progress install/update from the progress bar.
+         */
+        "cancelCallback": () => Promise<void>;
         /**
           * Specifies all the information related to a plugin.
          */
         "data": PluginDetailsData;
         /**
-          * Callback that should be invoked when the user performs the install or update action. Receives an optional version string when a specific version is selected.
+          * Callback that should be invoked when the user performs the install or update action. Receives the ordinal versionId of the selected version (undefined installs the latest).
          */
-        "installCallback": (version?: string) => Promise<void>;
+        "installCallback": (versionId?: number) => Promise<void>;
+        /**
+          * When set, the component is installing this plugin and shows a determinate progress bar instead of the action button.
+         */
+        "installProgress"?: PluginInstallProgress;
         /**
           * Callback that should be invoked when the user attempts to open any link displayed in this component.
          */
@@ -1999,11 +2011,13 @@ export namespace Components {
         /**
           * Callback that should be invoked when the user updates the filter. A debounce should be applied before invoking this function.
          */
-        "filterCallback": (text: string) => Promise<PluginData[]>;
+        "filterCallback": (
+    text: string
+  ) => Promise<PluginGroupData[]>;
         /**
-          * List of plugins to display. Usually used to initialize the component.
+          * List of plugin groups to display. Each group is rendered as a native action-list group (with a separator between groups) and its header caption includes the total number of plugins in the group. Usually used to initialize the component.
          */
-        "plugins": PluginData[];
+        "plugins": PluginGroupData[];
         /**
           * Callback that should be invoked when the user clicks or presses Enter on a selected plugin item.
          */
@@ -5979,14 +5993,22 @@ declare namespace LocalJSX {
         "selectParentCallback"?: SelectParentCallback;
     }
     interface GxIdePluginDetails {
+        /**
+          * Callback that should be invoked when the user cancels an in-progress install/update from the progress bar.
+         */
+        "cancelCallback": () => Promise<void>;
         /**
           * Specifies all the information related to a plugin.
          */
         "data": PluginDetailsData;
         /**
-          * Callback that should be invoked when the user performs the install or update action. Receives an optional version string when a specific version is selected.
+          * Callback that should be invoked when the user performs the install or update action. Receives the ordinal versionId of the selected version (undefined installs the latest).
+         */
+        "installCallback": (versionId?: number) => Promise<void>;
+        /**
+          * When set, the component is installing this plugin and shows a determinate progress bar instead of the action button.
          */
-        "installCallback": (version?: string) => Promise<void>;
+        "installProgress"?: PluginInstallProgress;
         /**
           * Callback that should be invoked when the user attempts to open any link displayed in this component.
          */
@@ -6007,11 +6029,13 @@ declare namespace LocalJSX {
         /**
           * Callback that should be invoked when the user updates the filter. A debounce should be applied before invoking this function.
          */
-        "filterCallback": (text: string) => Promise<PluginData[]>;
+        "filterCallback": (
+    text: string
+  ) => Promise<PluginGroupData[]>;
         /**
-          * List of plugins to display. Usually used to initialize the component.
+          * List of plugin groups to display. Each group is rendered as a native action-list group (with a separator between groups) and its header caption includes the total number of plugins in the group. Usually used to initialize the component.
          */
-        "plugins"?: PluginData[];
+        "plugins"?: PluginGroupData[];
         /**
           * Callback that should be invoked when the user clicks or presses Enter on a selected plugin item.
          */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "3.2.20",
+  "version": "3.2.22",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/genexus-ide-ui/p-514445ac.entry.js

@@ -1,291 +0,0 @@
-import { g as i, r as t, h as s, H as e, a } from "./p-9b9ccd0c.js";
-
-import { g as n } from "./p-d42e842b.js";
-
-import "./p-6534555e.js";
-
-import "lit";
-
-import "lit/directives/when.js";
-
-import "lit/directives/if-defined.js";
-
-import { L as o } from "./p-311eedf3.js";
-
-const r = 'ch-tab-render.tab{background-color:transparent;border-color:transparent}ch-tab-render.tab::part(tab-list block-start){border-block-end:none}ch-tab-render.tab::part(tab block closable),ch-tab-render.tab::part(tab block not-closable){background-color:transparent}: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:var(--spacing-gap-l)}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:"plugin-icon plugin-details";grid-template-columns:64px 1fr;column-gap:var(--spacing-gap-xl);padding-block-start:var(--spacing-padding-xxl);padding-block-end:var(--spacing-padding-xl);padding-inline:var(--spacing-padding-xxl)}.plugin__icon{grid-area:plugin-icon;inline-size:100%;block-size:auto;display:block}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__publisher{display:flex;align-items:center;gap:var(--spacing-gap-xs)}.plugin__description{line-height:var(--line-height-spacious)}.plugin__actions-container{margin-block-start:var(--spacing-padding-m);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:var(--spacing-gap-m)}.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:var(--font-size-body-s)}.plugin__info-category{display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.plugin__info-category:not(:first-child){padding-block-start:var(--spacing-padding-xl);margin-block-start:var(--spacing-padding-xl);border-block-start:1px solid var(--color-border-surface-on-elevation-1)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:var(--spacing-gap-m)}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:var(--spacing-gap-xl)}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-gap-m)}.fields__list--as-tags .field__li{border:1px solid var(--color-border-surface-on-elevation-1);padding-block:var(--spacing-padding-xxs);padding-inline:var(--spacing-padding-m);border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--color-text-neutral-strawberry)}.fields__list--as-tags .field__link:hover{color:var(--color-accent-primary-default)}.fields__list--as-tags .field__link:active{color:var(--color-accent-primary-hover)}.field__name,.field__value{flex:1}.field__link{color:var(--color-accent-primary-default)}.field__link:hover{color:var(--color-accent-primary-hover)}.field__link:active{color:var(--color-accent-primary-pressed)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( (var(--control-block-size) - 2 * var(--control-border-width) - 16px) / 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 l = undefined && undefined.__classPrivateFieldGet || function(i, t, s, e) {
-  if (s === "a" && !e) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof t === "function" ? i !== t || !e : !t.has(i)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return s === "m" ? e : s === "a" ? e.call(i) : e ? e.value : t.get(i);
-};
-
-var c = undefined && undefined.__classPrivateFieldSet || function(i, t, s, e, a) {
-  if (e === "m") throw new TypeError("Private method is not writable");
-  if (e === "a" && !a) throw new TypeError("Private accessor was defined without a setter");
-  if (typeof t === "function" ? i !== t || !a : !t.has(i)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return e === "a" ? a.call(i, s) : a ? a.value = s : t.set(i, s), s;
-};
-
-var d, p, h, g, f, u, m, b, _, v, k, w, y, x, M, W;
-
-const z = n({
-  category: "system",
-  name: "user",
-  colorType: "on-surface"
-});
-
-const T = n({
-  category: "system",
-  name: "chevron-down",
-  colorType: "on-primary"
-});
-
-const j = n({
-  category: "system",
-  name: "check-circle",
-  colorType: "success"
-});
-
-// plugin icon if no iconUri was provided
-const C = i(`./gx-ide-assets/plugin-manager/images/plugin-icon.svg`);
-
-const E = [ "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 L = class {
-  constructor(i) {
-    t(this, i);
-    /**
-         * The component hard-coded strings translations.
-         */
-    // eslint-disable-next-line @stencil-community/own-props-must-be-private
-        d.set(this, void 0);
-    p.set(this, void 0);
-    // A map between docSection "id", and docSection "description".
-    // "id" is generated inside this component.
-        h.set(this, new Map);
-    g.set(this, (() => {
-      var i;
-      const t = (i = this.data.versions) === null || i === void 0 ? void 0 : i.map((i => ({
-        id: i,
-        caption: i
-      })));
-      return t;
-    }));
-    f.set(this, (i => {
-      const t = i.detail.id;
-      this.installCallback(t);
-    }));
-    u.set(this, (() => s("button", {
-      class: "button-tertiary",
-      onClick: l(this, v, "f")
-    }, l(this, d, "f").actions.uninstall)));
-    m.set(this, (() => {
-      this.installCallback();
-    }));
-    b.set(this, (i => () => {
-      this.installCallback(i);
-    }));
-    _.set(this, (i => t => {
-      if (this.openLinkCallback) {
-        t.preventDefault();
-        this.openLinkCallback(i);
-      }
-    }));
-    v.set(this, (() => {
-      this.uninstallCallback();
-    }));
-    k.set(this, (() => {
-      var i;
-      let t;
-      let e = "button-primary action-button";
-      let a;
-      const n = (i = this.data.versions) === null || i === void 0 ? void 0 : i.length;
-      if (!this.data.installed) {
-        t = l(this, d, "f").actions.install;
-        a = l(this, m, "f");
-      } else if (this.data.updateVersion) {
-        t = `${l(this, d, "f").actions.updateTo} ${this.data.updateVersion}`;
-        a = l(this, b, "f").call(this, this.data.updateVersion);
-      } else {
-        t = l(this, d, "f").actions.installed;
-      }
-      if (n) {
-        e = `${e} more-versions-available`;
-      }
-      return [ s("div", {
-        class: "version-buttons-container"
-      }, s("button", {
-        class: e,
-        onClick: a
-      }, t), n ? s("ch-action-menu-render", {
-        class: "dropdown button-primary button-icon-only",
-        blockAlign: "outside-end",
-        inlineAlign: "inside-start",
-        model: l(this, g, "f").call(this),
-        onButtonClick: l(this, f, "f")
-      }, s("ch-image", {
-        src: T,
-        class: "icon-m"
-      })) : null) ];
-    }));
-    w.set(this, (i => {
-      this.selectedTabId = i.detail.newSelectedId;
-    }));
-    y.set(this, (() => this.docsTabModel.map((i => {
-      if (i.id === this.selectedTabId) {
-        const t = l(this, h, "f").get(i.id);
-        return s("ch-markdown-viewer", {
-          ref: i => c(this, p, i, "f"),
-          slot: i.id,
-          key: i.id,
-          class: "markdown spacing-body scrollable",
-          theme: "components/markdown-viewer",
-          value: t
-        });
-      }
-    }))));
-    x.set(this, (i => i.toLowerCase().replace(/\s+/g, "-")));
-    M.set(this, ((i, t, e, a) => s("a", {
-      href: i,
-      target: "_blank",
-      onClick: l(this, _, "f").call(this, i),
-      class: e
-    }, a && s("ch-image", {
-      src: a,
-      class: "icon-m"
-    }), t)));
-    W.set(this, (() => this.data.infoCategories.map((i => s("div", {
-      class: "plugin__info-category"
-    }, s("h3", {
-      class: "subtitle-semi-bold-s"
-    }, i.name), s("ul", {
-      class: {
-        fields__list: true,
-        "fields__list--as-tags": i.displayAsTags
-      }
-    }, i.fields.map((t => {
-      // If the field name isn’t specified, only the value is shown — usually a link.
-      const e = typeof t.value === "string" ? t.value : l(this, M, "f").call(this, t.value.url, t.value.text, "field__link");
-      return s("li", {
-        class: "field__li"
-      }, t.name && !i.displayAsTags ? // displaysAsTags forces the items to be displayed as tags
-      // no span.field__name and span.field__value
-      [ s("span", {
-        class: "field__name body-semi-bold-s"
-      }, t.name), s("span", {
-        class: "field__value body-regular-s"
-      }, e) ] : e);
-    }))))))));
-    this.docsTabModel = [];
-    this.selectedTabId = undefined;
-    this.data = undefined;
-    this.installCallback = undefined;
-    this.openLinkCallback = undefined;
-    this.uninstallCallback = undefined;
-  }
-  async componentWillLoad() {
-    var i;
-    c(this, d, await o.getComponentStrings(this.el), "f");
-    if ((i = this.data.docSections) === null || i === void 0 ? void 0 : i.length) {
-      this.docsTabModel = this.data.docSections.map(((i, t) => {
-        const s = l(this, x, "f").call(this, i.name);
-        l(this, h, "f").set(s, i.content);
-        if (t === 0) {
-          this.selectedTabId = s;
-        }
-        return {
-          id: s,
-          name: i.name
-        };
-      }));
-    }
-  }
-  componentDidLoad() {
-    l(this, p, "f").addEventListener("click", (i => {
-      // Listens for clicks on links inside <ch-markdown-viewer>.
-      // If a link (<a>) is clicked and openLinkCallback is defined,
-      // it prevents the default navigation and delegates the event
-      // to this.#openLinkHandler, passing the link's href.
-      const t = i.composedPath();
-      const s = t.find((i => i instanceof HTMLAnchorElement));
-      if (s === null || s === void 0 ? void 0 : s.href) {
-        l(this, _, "f").call(this, s.href)(i);
-      }
-    }));
-  }
-  render() {
-    const i = !this.data.installed || this.data.installed && !!this.data.updateVersion;
-    const t = this.data.name.text;
-    const a = this.data.name.url;
-    const n = t && a;
-    const o = t || this.data.name;
-    const r = this.data.publisher.text;
-    const c = this.data.publisher.url;
-    const p = r && c;
-    const h = r || this.data.publisher;
-    return s(e, {
-      class: "widget"
-    }, s("ch-theme", {
-      model: E
-    }), s("section", {
-      class: "section"
-    }, s("header", {
-      class: "header"
-    }, s("img", {
-      class: "plugin__icon",
-      src: this.data.iconUrl || C,
-      alt: "plugin extension icon"
-    }), s("div", {
-      class: "plugin__details"
-    }, n ? s("h2", {
-      class: "heading-5 has-link"
-    }, l(this, M, "f").call(this, a, o, "text-underline")) : s("h2", {
-      class: "heading-5"
-    }, o), p ? l(this, M, "f").call(this, c, o, "text-underline plugin__publisher caption-semi-bold-l", z) : s("p", {
-      class: "plugin__publisher caption-semi-bold-l"
-    }, s("ch-image", {
-      src: z,
-      class: "icon-s"
-    }), h), s("p", {
-      class: "plugin__description"
-    }, this.data.description), s("div", {
-      class: "buttons-spacer plugin__actions-container"
-    }, i ? l(this, k, "f").call(this) : 
-    // installed and no updates
-    s("p", {
-      class: "installed-container subtitle-semi-bold-s"
-    }, s("ch-image", {
-      src: j,
-      class: "icon-s"
-    }), l(this, d, "f").actions.installed), this.data.installed && l(this, u, "f").call(this)))), s("div", {
-      class: "main"
-    }, this.docsTabModel.length > 0 && s("ch-tab-render", {
-      class: "tab docsTab scrollable",
-      tabListPosition: "block-start",
-      overflow: "auto",
-      contain: "size",
-      model: this.docsTabModel,
-      onSelectedItemChange: l(this, w, "f"),
-      selectedId: this.selectedTabId
-    }, l(this, y, "f").call(this))), s("div", {
-      class: "aside spacing-body scrollable"
-    }, l(this, W, "f").call(this))));
-  }
-  static get assetsDirs() {
-    return [ "gx-ide-assets/plugin-details" ];
-  }
-  get el() {
-    return a(this);
-  }
-};
-
-d = new WeakMap, p = new WeakMap, h = new WeakMap, g = new WeakMap, f = new WeakMap, 
-u = new WeakMap, m = new WeakMap, b = new WeakMap, _ = new WeakMap, v = new WeakMap, 
-k = new WeakMap, w = new WeakMap, y = new WeakMap, x = new WeakMap, M = new WeakMap, 
-W = new WeakMap;
-
-L.style = r;
-
-export { L as gx_ide_plugin_details };
-//# sourceMappingURL=p-514445ac.entry.js.map

package/dist/genexus-ide-ui/p-514445ac.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["pluginDetailsCss","USER_ICON","getIconPath","category","name","colorType","CHEVRON_DOWN_ICON","CHECK_CIRCLE_ICON","EXTENSION_ICON_IMG","getAssetPath","CSS_BUNDLES","GxIdePluginDetails","_GxIdePluginDetails_componentLocale","set","this","_GxIdePluginDetails_chMarkdownViewer","_GxIdePluginDetails_docSectionIdDescriptionMap","Map","_GxIdePluginDetails_versionsMenuOptionsModel","versionsToUpdateMenusModel","_a","data","versions","map","version","id","caption","_GxIdePluginDetails_menuVersionSelectedHandler","event","selectedVersion","detail","installCallback","_GxIdePluginDetails_renderUninstallButton","h","class","onClick","__classPrivateFieldGet","_GxIdePluginDetails_uninstallClickedHandler","actions","uninstall","_GxIdePluginDetails_installClickedHandler","_GxIdePluginDetails_updateVersionHandler","_GxIdePluginDetails_openLinkHandler","link","openLinkCallback","preventDefault","uninstallCallback","_GxIdePluginDetails_renderActionButtons","actionButtonCaption","actionButtonClasses","actionButtonCallback","moreVersionsToUpdate","length","installed","install","updateVersion","updateTo","call","blockAlign","inlineAlign","model","onButtonClick","src","_GxIdePluginDetails_tabSelectionChangedHandler","selectedTabId","newSelectedId","_GxIdePluginDetails_renderDocSectionsSlots","docsTabModel","docSectionTab","markdownValue","get","ref","el","__classPrivateFieldSet","slot","key","theme","value","_GxIdePluginDetails_returnFormatedId","rawId","toLowerCase","replace","_GxIdePluginDetails_renderLinkTag","href","label","cssClass","chImageSrc","target","_GxIdePluginDetails_renderAsideContent","infoCategories","infoCategory","fields__list","displayAsTags","fields","field","fieldValue","url","text","componentWillLoad","Locale","getComponentStrings","docSections","docSection","i","formatedId","content","componentDidLoad","addEventListener","path","composedPath","find","HTMLAnchorElement","render","renderActionButtons","titleLinkDataText","titleLinkDataUrl","titleHasLink","titleText","publisherDataText","publisher","publisherDataUrl","publisherHasLink","publisherText","Host","iconUrl","alt","description","tabListPosition","overflow","contain","onSelectedItemChange","selectedId"],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":["@import \"../../global/temporary-mercury-overrides/_tab.scss\";\n\n: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: var(--spacing-gap-l);\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: var(--spacing-gap-xl);\n  padding-block-start: var(--spacing-padding-xxl);\n  padding-block-end: var(--spacing-padding-xl);\n  padding-inline: var(--spacing-padding-xxl);\n}\n.plugin__icon {\n  grid-area: plugin-icon;\n  inline-size: 100%;\n  block-size: auto;\n  display: block;\n}\n.plugin__details {\n  grid-area: plugin-details;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-m);\n}\n.plugin__publisher {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-gap-xs);\n}\n.plugin__description {\n  line-height: var(--line-height-spacious); // WA: Text appears too tight.\n}\n.plugin__actions-container {\n  margin-block-start: var(--spacing-padding-m);\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: var(--spacing-gap-m);\n\n  // WA Biggest Mercury icon (icon-s) 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: var(--font-size-body-s);\n}\n.plugin__info-category {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-m);\n\n  &:not(:first-child) {\n    padding-block-start: var(--spacing-padding-xl);\n    margin-block-start: var(--spacing-padding-xl);\n    border-block-start: 1px solid var(--color-border-surface-on-elevation-1);\n  }\n}\n.fields__list:not(.fields__list--as-tags) {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-m);\n  .field__li {\n    display: flex;\n    gap: var(--spacing-gap-xl);\n  }\n}\n.fields__list--as-tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--spacing-gap-m);\n\n  .field__li {\n    border: 1px solid var(--color-border-surface-on-elevation-1);\n    padding-block: var(--spacing-padding-xxs);\n    padding-inline: var(--spacing-padding-m);\n    border-radius: 4px;\n\n    text-transform: lowercase;\n  }\n  .field__link {\n    color: var(--color-text-neutral-strawberry);\n\n    &:hover {\n      color: var(--color-accent-primary-default);\n    }\n    &:active {\n      color: var(--color-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(--color-accent-primary-default);\n  &:hover {\n    color: var(--color-accent-primary-hover);\n  }\n  &:active {\n    color: var(--color-accent-primary-pressed);\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    (var(--control-block-size) - 2 * var(--control-border-width) - 16px) / 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-surface\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"system\",\n  name: \"chevron-down\",\n  colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n  category: \"system\",\n  name: \"check-circle\",\n  colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n  `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"chameleon/scrollbar\",\n  \"components/button\",\n  \"components/dropdown\",\n  \"components/edit\",\n  \"components/icon\",\n  \"components/list-box\",\n  \"components/tab\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/spacing\",\n  \"utils/typography\"\n];\n\n@Component({\n  tag: \"gx-ide-plugin-details\",\n  styleUrl: \"plugin-details.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n  // A map between docSection \"id\", and docSection \"description\".\n  // \"id\" is generated inside this component.\n  #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n  @Element() el: HTMLGxIdePluginDetailsElement;\n\n  @State() docsTabModel: TabModel = [];\n  @State() selectedTabId: string;\n\n  /**\n   * Specifies all the information related to a plugin.\n   */\n  @Prop() readonly data!: PluginDetailsData;\n\n  /**\n   * Callback that should be invoked when the user performs the install or update action.\n   * Receives an optional version string when a specific version is selected.\n   */\n  @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user attempts to open any link displayed in this component.\n   */\n  @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n  /**\n   * Callback that should be invoked when the user performs the uninstall action.\n   */\n  @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n    if (this.data.docSections?.length) {\n      this.docsTabModel = this.data.docSections.map((docSection, i) => {\n        const formatedId = this.#returnFormatedId(docSection.name);\n\n        this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n        if (i === 0) {\n          this.selectedTabId = formatedId;\n        }\n        return {\n          id: formatedId,\n          name: docSection.name\n        } as TabItemModel;\n      });\n    }\n  }\n\n  componentDidLoad() {\n    this.#chMarkdownViewer.addEventListener(\"click\", event => {\n      // Listens for clicks on links inside <ch-markdown-viewer>.\n      // If a link (<a>) is clicked and openLinkCallback is defined,\n      // it prevents the default navigation and delegates the event\n      // to this.#openLinkHandler, passing the link's href.\n      const path = event.composedPath() as EventTarget[];\n\n      const link = path.find(el => el instanceof HTMLAnchorElement) as\n        | HTMLAnchorElement\n        | undefined;\n\n      if (link?.href) {\n        this.#openLinkHandler(link.href)(event);\n      }\n    });\n  }\n\n  #versionsMenuOptionsModel = (): ActionMenuModel => {\n    const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n      version => {\n        return { id: version, caption: version };\n      }\n    );\n    return versionsToUpdateMenusModel;\n  };\n\n  #menuVersionSelectedHandler = (\n    event: CustomEvent<{\n      id?: string;\n    }>\n  ) => {\n    const selectedVersion = event.detail.id;\n    this.installCallback(selectedVersion);\n  };\n\n  #renderUninstallButton = (): JSX.Element => {\n    return (\n      <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n        {this.#componentLocale.actions.uninstall}\n      </button>\n    );\n  };\n\n  #installClickedHandler = () => {\n    this.installCallback();\n  };\n\n  #updateVersionHandler = (id: string) => () => {\n    this.installCallback(id);\n  };\n\n  #openLinkHandler = (link: string) => (event: MouseEvent) => {\n    if (this.openLinkCallback) {\n      event.preventDefault();\n      this.openLinkCallback(link);\n    }\n  };\n\n  #uninstallClickedHandler = () => {\n    this.uninstallCallback();\n  };\n\n  #renderActionButtons = (): JSX.Element => {\n    let actionButtonCaption;\n    let actionButtonClasses = \"button-primary action-button\";\n    let actionButtonCallback;\n    const moreVersionsToUpdate = this.data.versions?.length;\n\n    if (!this.data.installed) {\n      actionButtonCaption = this.#componentLocale.actions.install;\n      actionButtonCallback = this.#installClickedHandler;\n    } else if (this.data.updateVersion) {\n      actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n        this.data.updateVersion\n      }`;\n      actionButtonCallback = this.#updateVersionHandler(\n        this.data.updateVersion\n      );\n    } else {\n      actionButtonCaption = this.#componentLocale.actions.installed;\n    }\n\n    if (moreVersionsToUpdate) {\n      actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n    }\n\n    return [\n      <div class=\"version-buttons-container\">\n        <button class={actionButtonClasses} onClick={actionButtonCallback}>\n          {actionButtonCaption}\n        </button>\n        {moreVersionsToUpdate ? (\n          <ch-action-menu-render\n            class=\"dropdown button-primary button-icon-only\"\n            blockAlign=\"outside-end\"\n            inlineAlign=\"inside-start\"\n            model={this.#versionsMenuOptionsModel()}\n            onButtonClick={this.#menuVersionSelectedHandler}\n          >\n            <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-m\"></ch-image>\n          </ch-action-menu-render>\n        ) : null}\n      </div>\n    ];\n  };\n\n  #tabSelectionChangedHandler = (\n    event: CustomEvent<{\n      lastSelectedIndex: number;\n      newSelectedId: string;\n      newSelectedIndex: number;\n    }>\n  ): void => {\n    this.selectedTabId = event.detail.newSelectedId;\n  };\n\n  #renderDocSectionsSlots = (): JSX.Element => {\n    return this.docsTabModel.map(docSectionTab => {\n      if (docSectionTab.id === this.selectedTabId) {\n        const markdownValue = this.#docSectionIdDescriptionMap.get(\n          docSectionTab.id\n        );\n\n        return (\n          <ch-markdown-viewer\n            ref={(el: HTMLChMarkdownViewerElement) =>\n              (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n            }\n            slot={docSectionTab.id}\n            key={docSectionTab.id}\n            class=\"markdown spacing-body scrollable\"\n            theme=\"components/markdown-viewer\"\n            value={markdownValue}\n          ></ch-markdown-viewer>\n        );\n      }\n    });\n  };\n\n  #returnFormatedId = (rawId: string): string => {\n    return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n  };\n\n  #renderLinkTag = (\n    href: string,\n    label: string,\n    cssClass?: string,\n    chImageSrc?: string\n  ): HTMLAnchorElement => {\n    return (\n      <a\n        href={href}\n        target=\"_blank\"\n        onClick={this.#openLinkHandler(href)}\n        class={cssClass}\n      >\n        {chImageSrc && <ch-image src={chImageSrc} class=\"icon-m\"></ch-image>}\n        {label}\n      </a>\n    );\n  };\n\n  #renderAsideContent = (): JSX.Element => {\n    return this.data.infoCategories.map(infoCategory => {\n      return (\n        <div class=\"plugin__info-category\">\n          <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n          <ul\n            class={{\n              \"fields__list\": true,\n              \"fields__list--as-tags\": infoCategory.displayAsTags\n            }}\n          >\n            {infoCategory.fields.map(field => {\n              // If the field name isn’t specified, only the value is shown — usually a link.\n              const fieldValue: string | HTMLAnchorElement =\n                typeof field.value === \"string\"\n                  ? (field.value as string)\n                  : this.#renderLinkTag(\n                      (field.value as LinkData).url,\n                      (field.value as LinkData).text,\n                      \"field__link\"\n                    );\n              return (\n                <li class=\"field__li\">\n                  {field.name && !infoCategory.displayAsTags\n                    ? // displaysAsTags forces the items to be displayed as tags\n                      // no span.field__name and span.field__value\n                      [\n                        <span class=\"field__name body-semi-bold-s\">\n                          {field.name}\n                        </span>,\n                        <span class=\"field__value body-regular-s\">\n                          {fieldValue}\n                        </span>\n                      ]\n                    : fieldValue}\n                </li>\n              );\n            })}\n          </ul>\n        </div>\n      );\n    });\n  };\n\n  render() {\n    const renderActionButtons =\n      !this.data.installed ||\n      (this.data.installed && !!this.data.updateVersion);\n\n    const titleLinkDataText = (this.data.name as LinkData).text;\n    const titleLinkDataUrl = (this.data.name as LinkData).url;\n    const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n    const titleText = titleLinkDataText || this.data.name;\n\n    const publisherDataText = (this.data.publisher as LinkData).text;\n    const publisherDataUrl = (this.data.publisher as LinkData).url;\n    const publisherHasLink = publisherDataText && publisherDataUrl;\n    const publisherText = publisherDataText || this.data.publisher;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <header class=\"header\">\n            <img\n              class=\"plugin__icon\"\n              src={this.data.iconUrl || EXTENSION_ICON_IMG}\n              alt=\"plugin extension icon\"\n            />\n            <div class=\"plugin__details\">\n              {titleHasLink ? (\n                <h2 class=\"heading-5 has-link\">\n                  {this.#renderLinkTag(\n                    titleLinkDataUrl,\n                    titleText as string,\n                    \"text-underline\"\n                  )}\n                </h2>\n              ) : (\n                <h2 class=\"heading-5\">{titleText}</h2>\n              )}\n              {publisherHasLink ? (\n                this.#renderLinkTag(\n                  publisherDataUrl,\n                  titleText as string,\n                  \"text-underline plugin__publisher caption-semi-bold-l\",\n                  USER_ICON\n                )\n              ) : (\n                <p class=\"plugin__publisher caption-semi-bold-l\">\n                  <ch-image src={USER_ICON} class=\"icon-s\"></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 src={CHECK_CIRCLE_ICON} class=\"icon-s\"></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"],"mappings":"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"}

package/dist/genexus-ide-ui/p-b3c5c315.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["progressBarCss","CSS_BUNDLES","CLOSE_ICON","getIconPath","category","name","colorType","PROGRESS_TRANSITION_SPEED","GxIdeProgressBar","this","evaluateInitialProgress","progress","undefined","stateType","el","style","setProperty","closeClickHandler","active","closedCallback","renderClose","closeType","h","class","onClick","role","tabIndex","visible","src","watchActiveHandler","setTimeout","topStateBarVisible","progressBarClosed","emit","watchProgressHandler","componentWillLoad","reset","disableTransition","render","Host","model","minimal","id","part","caption"],"sources":["src/components/_helpers/progress-bar/progress-bar.scss?tag=gx-ide-progress-bar&encapsulation=shadow","src/components/_helpers/progress-bar/progress-bar.tsx"],"sourcesContent":["// --progress-bar-transition-speed is defined on the Host in the .tsx\n$border: 1px solid var(--color-border-surface-on-elevation-1);\n\n:host {\n  --top-bar-progress: 0%;\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: var(--timing-fast) grid-template-rows;\n  overflow: hidden;\n\n  //icon\n  --ds-icon-size-box--small: var(--font-size-body-s);\n  --ds-icon-size--small: 100%;\n\n  > * {\n    overflow: hidden;\n  }\n}\n:host(.disable-transition) {\n  --progress-bar-transition-speed: 0 !important;\n}\n:host(.visible) {\n  grid-template-rows: 1fr;\n}\n.top-state-bar {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-gap-l);\n\n  > * {\n    position: relative;\n    z-index: 1;\n  }\n  border-radius: 4px;\n  list-style: var(--font-size-body-s);\n  display: flex;\n\n  &__outer-wrapper {\n    &::after,\n    &::before {\n      border-radius: 4px;\n    }\n    &::before {\n      content: \"\";\n      inline-size: 100%;\n      block-size: 100%;\n      inset-inline-start: 0;\n      inset-block-start: 0;\n      position: absolute;\n      background-color: var(--color-accent-surface-elevation-3);\n      z-index: 0;\n    }\n    &::after {\n      content: \"\";\n      inset-inline-start: 1px;\n      inset-block-start: 1px;\n      inline-size: calc(100% - 1px * 2);\n      block-size: calc(100% - 1px * 2);\n      position: absolute;\n      background-color: var(--color-accent-surface-surface);\n      z-index: 1;\n    }\n\n    position: relative;\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-gap-l);\n    padding: var(--spacing-padding-l) var(--spacing-padding-l);\n  }\n  &__inner-wrapper {\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: var(--spacing-gap-m);\n    position: relative;\n    z-index: 2;\n  }\n  &__caption {\n    color: var(--color-text-neutral-strawberry);\n    font-size: var(--font-size-body-s);\n    line-height: var(--font-size-body-s);\n    font-weight: var(--font-style-regular);\n    display: flex;\n    align-items: center;\n    font-style: italic;\n  }\n  &__progress-wrapper {\n    block-size: 4px;\n    background-color: var(--color-accent-surface-elevation-1);\n    position: relative;\n    z-index: 2;\n  }\n  &__close {\n    cursor: pointer;\n    transition: var(--timing-fast) background-color;\n  }\n  &__inner-wrapper,\n  &__progress-wrapper,\n  &__close {\n    opacity: 0;\n    transition: 150ms opacity;\n  }\n\n  /*states*/\n  &--accent {\n    .progress-bar {\n      background-color: var(--color-accent-primary-default);\n    }\n  }\n  &--success {\n    .progress-bar {\n      background-color: var(--color-border-success-default);\n    }\n  }\n  &--warning {\n    .progress-bar {\n      background-color: var(--color-border-warning-default);\n    }\n  }\n  &--error {\n    .progress-bar {\n      background-color: var(--color-border-error-default);\n    }\n  }\n  &--in-progress {\n    .top-state-bar__outer-wrapper:before {\n      block-size: 0;\n      inline-size: 120%;\n      padding-block-start: 60%;\n      padding-block-end: 60%;\n      background: linear-gradient(\n        90deg,\n        rgba(91, 167, 255, 0.4) 0%,\n        rgba(63, 168, 155, 0.4) 100%\n      );\n      inset-block-start: 50%;\n      inset-inline-start: 50%;\n      transform: translate(-50%, -50%);\n      -webkit-animation: inProgressBackgroundColor 1s linear infinite;\n      animation: inProgressBackgroundColor 1s linear infinite;\n    }\n    .progress-bar {\n      position: relative;\n      overflow: hidden;\n      z-index: 1;\n      &:after {\n        content: \"\";\n        position: absolute;\n        z-index: 0;\n        inline-size: 300%;\n        block-size: 100%;\n        inset-inline-start: 0;\n        background: linear-gradient(\n          90deg,\n          rgba(147, 245, 235, 1) 0%,\n          rgba(26, 163, 255, 1) 33%,\n          rgba(147, 245, 235, 1) 66%,\n          rgba(26, 163, 255, 1) 100%\n        );\n        animation-name: inProgressBar;\n        animation-duration: 2s;\n        animation-iteration-count: infinite;\n      }\n    }\n  }\n  &--visible {\n    .top-state-bar__inner-wrapper,\n    .top-state-bar__progress-wrapper,\n    .top-state-bar__close {\n      opacity: 1;\n    }\n    .top-state-bar__close {\n      &:hover {\n        opacity: 0.75;\n      }\n      &:active {\n        opacity: 0.5;\n      }\n    }\n  }\n}\n\n// With Close Button (some spacing needs to be adjusted)\n:host(.with-close-button) {\n  .top-state-bar {\n    &__outer-wrapper {\n      padding-block-start: 4px;\n      gap: var(--spacing-gap-xs);\n    }\n  }\n}\n\n/*in progress animation*/\n@-webkit-keyframes inProgressBackgroundColor {\n  0% {\n    transform: translate(-50%, -50%) rotate(0);\n  }\n  100% {\n    transform: translate(-50%, -50%) rotate(1turn);\n  }\n}\n@-webkit-keyframes inProgressBar {\n  0% {\n    inset-inline-start: 0%;\n  }\n  100% {\n    inset-inline-start: -200%;\n  }\n}\n@-moz-keyframes inProgressBar {\n  0% {\n    inset-inline-start: 0%;\n  }\n  100% {\n    inset-inline-start: 200%;\n  }\n}\n@keyframes inProgressBar {\n  0% {\n    inset-inline-start: 0%;\n  }\n  100% {\n    inset-inline-start: -200%;\n  }\n}\n\n.progress-bar {\n  display: block;\n  transition: all var(--progress-bar-transition-speed);\n  inline-size: var(--top-bar-progress);\n  border-radius: calc(4px / 2);\n  block-size: 100%;\n}\n\n:host(.no-border),\n:host(.border-block-start),\n:host(.border-block-end) {\n  .top-state-bar__outer-wrapper {\n    &:before {\n      display: none;\n    }\n  }\n}\n:host(.border-block-start) {\n  .top-state-bar__outer-wrapper {\n    border-block-start: $border;\n  }\n}\n:host(.border-block-end) {\n  .top-state-bar__outer-wrapper {\n    border-block-end: $border;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method\n} from \"@stencil/core\";\nimport { MercuryBundles, getIconPath } from \"@genexus/mercury\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"components/button\",\n  \"components/icon\",\n  \"components/combo-box\",\n  \"components/edit\",\n  \"components/tabular-grid\"\n];\n\nconst CLOSE_ICON = getIconPath({\n  category: \"system\",\n  name: \"close\",\n  colorType: \"primary\"\n});\nconst PROGRESS_TRANSITION_SPEED = 200;\n\n@Component({\n  tag: \"gx-ide-progress-bar\",\n  styleUrl: \"progress-bar.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/progress-bar\"]\n})\nexport class GxIdeProgressBar {\n  @Element() el: HTMLGxIdeProgressBarElement;\n\n  /**\n   * If true it will display the caption\n   */\n  @State() topStateBarVisible: boolean = false;\n\n  /**\n   * If true the progress will be updated instantly, without transition. This is required when the host user is calling the \"reset\" method.\n   */\n  @State() disableTransition: boolean = false;\n\n  /**\n   * If true it will display bar\n   */\n  @State() visible: boolean = false;\n\n  /**\n   * The top-bar title\n   */\n  @Prop() readonly caption: string;\n\n  /**\n   * It will only display the bar (no title, no close button)\n   */\n  @Prop({ reflect: true }) readonly minimal: boolean = false;\n\n  /**\n   * The top-bar active state. If false it will be hidden\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n  @Watch(\"active\")\n  watchActiveHandler(active: boolean) {\n    if (active) {\n      this.visible = true;\n      setTimeout(() => {\n        this.topStateBarVisible = true;\n      }, 300);\n    } else {\n      this.topStateBarVisible = false;\n      setTimeout(() => {\n        this.visible = false;\n        this.el.style.setProperty(\"--top-bar-progress\", `0%`);\n        this.progressBarClosed.emit();\n      }, 300);\n    }\n  }\n\n  /**\n   * The top-bar state\n   */\n  @Prop({ mutable: true }) stateType: TopStateBarType = \"in-progress\";\n\n  /**\n   * The progress bar progress\n   */\n  @Prop({ mutable: true }) progress: number = undefined;\n  @Watch(\"progress\")\n  watchProgressHandler(progress: number) {\n    if (progress >= 0 && progress <= 100) {\n      this.el.style.setProperty(\"--top-bar-progress\", `${progress}%`);\n    }\n    if (progress === 100 && this.closeType === \"auto-close\") {\n      setTimeout(() => {\n        this.active = false;\n      }, 200);\n    }\n  }\n\n  /**\n   * How to display the close button\n   */\n  @Prop() readonly closeType: \"auto-close\" | \"button\" = \"button\";\n\n  /**\n   * A callback that gets called when the top-state-bar is closed\n   */\n  @Prop() readonly closedCallback: () => void = () => {};\n\n  /**\n   * Emitted every time the progress bar is closed.\n   */\n  @Event() progressBarClosed: EventEmitter;\n\n  componentWillLoad() {\n    this.evaluateInitialProgress();\n    if (this.active) {\n      this.visible = true;\n      this.topStateBarVisible = true;\n    }\n  }\n\n  /**\n   * Sets the progress bar to zero instantly (no transition) and changes the type\n   * to 'accent'. Useful when reusing the progress bar for a new process.\n   */\n  @Method()\n  async reset() {\n    // Resetting involves setting the progress to zero. In this case it is preferable\n    // to disable the transition.\n    this.disableTransition = true;\n    this.progress = 0;\n    this.stateType = \"accent\";\n    setTimeout(() => {\n      this.disableTransition = false; // enable transition for the nex process.\n    }, PROGRESS_TRANSITION_SPEED);\n  }\n\n  private evaluateInitialProgress = () => {\n    if (\n      this.progress === undefined &&\n      (this.stateType === \"error\" ||\n        this.stateType === \"warning\" ||\n        this.stateType === \"success\")\n    ) {\n      this.progress = 100;\n    } else if (\n      this.progress === undefined &&\n      this.stateType === \"in-progress\"\n    ) {\n      this.progress = 0;\n    }\n    this.el.style.setProperty(\"--top-bar-progress\", `${this.progress}%`);\n  };\n\n  private closeClickHandler = () => {\n    this.active = false;\n    this.closedCallback();\n  };\n\n  private renderClose = () => {\n    return (\n      this.closeType === \"button\" && (\n        <button\n          class=\"button-tertiary button-icon-only\"\n          aria-label=\"close\"\n          onClick={this.closeClickHandler}\n          role=\"button\"\n          tabIndex={this.visible ? 0 : -1}\n        >\n          <ch-image src={CLOSE_ICON} class=\"icon-m\"></ch-image>\n        </button>\n      )\n    );\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"visible\": this.visible,\n          \"with-close-button\": this.closeType === \"button\",\n          \"disable-transition\": this.disableTransition\n        }}\n        aria-hidden={!this.active}\n        style={{\n          \"--progress-bar-transition-speed\": `${PROGRESS_TRANSITION_SPEED}ms`\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div\n          role=\"status\"\n          aria-labelledby=\"label\"\n          aria-hidden={!this.active}\n          class={{\n            \"top-state-bar\": true,\n            [`top-state-bar--${this.stateType}`]: true,\n            \"top-state-bar--visible\": this.topStateBarVisible\n          }}\n        >\n          <div class=\"top-state-bar__outer-wrapper\">\n            {!this.minimal ? (\n              <div class=\"top-state-bar__inner-wrapper\">\n                <label\n                  id=\"label\"\n                  class={{\n                    \"top-state-bar__caption\": true\n                  }}\n                  part=\"label\"\n                >\n                  {this.caption}\n                </label>\n\n                {this.renderClose()}\n              </div>\n            ) : null}\n            <div\n              class={{\n                \"top-state-bar__progress-wrapper\": true\n              }}\n              part=\"progress-wrapper\"\n            >\n              <span class=\"progress-bar\"></span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type TopStateBarType =\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"in-progress\";\n"],"mappings":";;;;;;;;;;;;AAAA,MAAMA,IAAiB;;ACcvB,MAAMC,IAA8B,EAClC,qBACA,cACA,gBACA,oBACA,qBACA,mBACA,wBACA,mBACA;;AAGF,MAAMC,IAAaC,EAAY;EAC7BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAEb,MAAMC,IAA4B;;MAQrBC,IAAgB;;;;IA6GnBC,KAAAC,0BAA0B;MAChC,IACED,KAAKE,aAAaC,cACjBH,KAAKI,cAAc,WAClBJ,KAAKI,cAAc,aACnBJ,KAAKI,cAAc,YACrB;QACAJ,KAAKE,WAAW;aACX,IACLF,KAAKE,aAAaC,aAClBH,KAAKI,cAAc,eACnB;QACAJ,KAAKE,WAAW;;MAElBF,KAAKK,GAAGC,MAAMC,YAAY,sBAAsB,GAAGP,KAAKE;AAAY;IAG9DF,KAAAQ,oBAAoB;MAC1BR,KAAKS,SAAS;MACdT,KAAKU;AAAgB;IAGfV,KAAAW,cAAc,MAElBX,KAAKY,cAAc,YACjBC,EAAA;MACEC,OAAM;MAAkC,cAC7B;MACXC,SAASf,KAAKQ;MACdQ,MAAK;MACLC,UAAUjB,KAAKkB,UAAU,KAAK;OAE9BL,EAAA;MAAUM,KAAK1B;MAAYqB,OAAM;;8BAvIF;6BAKD;mBAKV;;mBAUyB;kBAKV;qBAqBW;oBAKVX;qBAgBU;0BAKR;;EA7C9C,kBAAAiB,CAAmBX;IACjB,IAAIA,GAAQ;MACVT,KAAKkB,UAAU;MACfG,YAAW;QACTrB,KAAKsB,qBAAqB;AAAI,UAC7B;WACE;MACLtB,KAAKsB,qBAAqB;MAC1BD,YAAW;QACTrB,KAAKkB,UAAU;QACflB,KAAKK,GAAGC,MAAMC,YAAY,sBAAsB;QAChDP,KAAKuB,kBAAkBC;AAAM,UAC5B;;;EAcP,oBAAAC,CAAqBvB;IACnB,IAAIA,KAAY,KAAKA,KAAY,KAAK;MACpCF,KAAKK,GAAGC,MAAMC,YAAY,sBAAsB,GAAGL;;IAErD,IAAIA,MAAa,OAAOF,KAAKY,cAAc,cAAc;MACvDS,YAAW;QACTrB,KAAKS,SAAS;AAAK,UAClB;;;EAmBP,iBAAAiB;IACE1B,KAAKC;IACL,IAAID,KAAKS,QAAQ;MACfT,KAAKkB,UAAU;MACflB,KAAKsB,qBAAqB;;;;;;SAS9B,WAAMK;;;IAGJ3B,KAAK4B,oBAAoB;IACzB5B,KAAKE,WAAW;IAChBF,KAAKI,YAAY;IACjBiB,YAAW;MACTrB,KAAK4B,oBAAoB;+EAAK;YAC7B9B;;EAyCL,MAAA+B;IACE,OACEhB,EAACiB,GAAI;MACHhB,OAAO;QACLI,SAAWlB,KAAKkB;QAChB,qBAAqBlB,KAAKY,cAAc;QACxC,sBAAsBZ,KAAK4B;;MAC5B,gBACa5B,KAAKS;MACnBH,OAAO;QACL,mCAAmC,GAAGR;;OAGxCe,EAAA;MAAUkB,OAAOvC;QACjBqB,EAAA;MACEG,MAAK;MAAQ,mBACG;MAAO,gBACThB,KAAKS;MACnBK,OAAO;QACL,iBAAiB;QACjB,CAAC,kBAAkBd,KAAKI,cAAc;QACtC,0BAA0BJ,KAAKsB;;OAGjCT,EAAA;MAAKC,OAAM;QACPd,KAAKgC,UACLnB,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEoB,IAAG;MACHnB,OAAO;QACL,0BAA0B;;MAE5BoB,MAAK;OAEJlC,KAAKmC,UAGPnC,KAAKW,iBAEN,MACJE,EAAA;MACEC,OAAO;QACL,mCAAmC;;MAErCoB,MAAK;OAELrB,EAAA;MAAMC,OAAM"}