@genexus/genexus-ide-ui 0.0.47 → 0.0.48

package/dist/components/gx-ide-share-kb.js

@@ -0,0 +1,152 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { L as Locale } from './locale.js';
+import { f as formSubmitValidation } from './form-validation.js';
+import { r as renderFormItems } from './common.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './button.js';
+import { d as defineCustomElement$b } from './combo-box.js';
+import { d as defineCustomElement$a } from './combo-box-item.js';
+import { d as defineCustomElement$9 } from './container2.js';
+import { d as defineCustomElement$8 } from './form-checkbox.js';
+import { d as defineCustomElement$7 } from './form-radio.js';
+import { d as defineCustomElement$6 } from './form-text.js';
+import { d as defineCustomElement$5 } from './icon2.js';
+import { d as defineCustomElement$4 } from './gxg-label2.js';
+import { d as defineCustomElement$3 } from './title.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const shareKbCss = ".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}.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:999;border-bottom:1px solid var(--gray-01)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;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(--font-weight-regular);font-size:var(--font-size-lg);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}:host{display:block}.main{grid-template-columns:auto 1fr;grid-template-areas:\"kb-label kb-input \" \"server-label server-input\" \"auth-type-input auth-type-input\" \"user-name-label user-name-input\" \"password-label password-input\"}.main .kb-input{grid-area:kb-input}.main .kb-name-label{grid-area:kb-label}.main .server-url-input{grid-area:server-input}.main .server-url-label{grid-area:server-label}.main .auth-type-input{grid-area:auth-type-input}.main .user-name-input{grid-area:user-name-input}.main .user-name-label{grid-area:user-name-label}.main .password-input{grid-area:password-input}.main .password-label{grid-area:password-label}";
+
+// Define your constants
+const AUTHENTICATION_TYPE = ["GeneXus Account", "Local"];
+const GxIdeShareKb$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.componentDidRenderEvent = createEvent(this, "componentDidRenderEvent", 7);
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    this.createKBCallbackHandler = async () => {
+      const kbData = {
+        name: this.kbNameEl.value,
+        serverUrl: this.serverUrlEl.value,
+        authenticationType: this.authTypeEl.value,
+        user: this.userNameEl.value,
+        password: this.passwordEl.value
+      };
+      const createCallbackPromise = this.createKBCallback(kbData);
+      createCallbackPromise.then(formSubmitResult => {
+        formSubmitValidation(formSubmitResult, this);
+      });
+    };
+    this.kbName = undefined;
+    this.serverUrls = undefined;
+    this.enableCustomServer = undefined;
+    this.createKBCallback = undefined;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  async componentWillLoad() {
+    this._componentLocale = await Locale.getComponentStrings(this.el);
+  }
+  componentDidRender() {
+    this.componentDidRenderEvent.emit(this._componentLocale.componentName);
+  }
+  // 9.LOCAL METHODS //
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper gx-ide-overflow" }, h("gxg-container", { footerJustify: "end" }, h("main", { class: "main grid" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.main.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), h("gxg-label", { labelPosition: "start", class: "server-url-label", noMargin: true }, this._componentLocale.main.serverUrl), h("gxg-combo-box", { disableFilter: !this.enableCustomServer, labelPosition: "start", placeholder: "https://myexampleserver.com", strict: true, "max-width": "100%", value: this.serverUrls[0], ref: (el) => (this.serverUrlEl = el), part: "server-url", class: "server-url-input" }, renderFormItems("gxg-combo-box-item", this.serverUrls.map((item) => ({
+      id: item,
+      label: item
+    })), "server-url")), h("gxg-combo-box", { labelPosition: "start", placeholder: "https://myexampleserver.com", "max-width": "100%", value: AUTHENTICATION_TYPE[0], ref: (el) => (this.authTypeEl = el), part: "auth-type", class: "auth-type-input" }, renderFormItems("gxg-combo-box-item", AUTHENTICATION_TYPE.map((item) => ({
+      id: item,
+      label: item
+    })), "auth-type")), h("gxg-label", { labelPosition: "start", class: "user-name-label", noMargin: true }, this._componentLocale.main.userName), h("gxg-form-text", { labelPosition: "start", placeholder: "My User", "max-width": "100%", ref: (el) => (this.userNameEl = el), part: "user-name", class: "user-name-input" }), h("gxg-label", { labelPosition: "start", class: "password-label", noMargin: true }, this._componentLocale.main.password), h("gxg-form-text", { labelPosition: "start", password: true, "max-width": "100%", ref: (el) => (this.passwordEl = el), part: "password", class: "password-input" })), h("gxg-button", { slot: "footer", type: "primary-text-only", onClick: this.createKBCallbackHandler }, this._componentLocale.footer.shareBtn)))));
+  }
+  static get assetsDirs() { return ["gx-ide-assets/share-kb"]; }
+  get el() { return this; }
+  static get style() { return shareKbCss; }
+}, [1, "gx-ide-share-kb", {
+    "kbName": [1, "kb-name"],
+    "serverUrls": [16],
+    "enableCustomServer": [4, "enable-custom-server"],
+    "createKBCallback": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-share-kb", "ch-icon", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-container", "gxg-form-checkbox", "gxg-form-radio", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-title", "gxg-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-share-kb":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeShareKb$1);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "gxg-combo-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "gxg-combo-box-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "gxg-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-form-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-form-radio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-form-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "gxg-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxIdeShareKb = GxIdeShareKb$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxIdeShareKb, defineCustomElement };

package/dist/components/gxg-ide-loader.js

@@ -0,0 +1,117 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './ch-window2.js';
+import { d as defineCustomElement$3 } from './ch-window-close2.js';
+import { d as defineCustomElement$2 } from './title.js';
+
+const ideLoaderCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--gxg-background-color--disabled) !important;color:var(--gxg-color--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block}ch-window::part(mask){overflow:hidden}ch-window::part(main){height:100%}ch-window::part(window){width:100%;height:100%}.loader-wrapper{opacity:0;transition:var(--show-transition) opacity;width:100%;height:100%;display:flex;background-color:rgba(var(--color-background--rgb), 0.45);backdrop-filter:blur(15px);padding:var(--spacing-comp-05);flex-direction:column;gap:var(--spacing-comp-04);align-items:center;justify-content:center;box-sizing:border-box;-webkit-animation:wrapper 0.6s infinite alternate;animation:wrapper 0.6s infinite alternate;color:var(--color-on-secondary)}.loader-wrapper--visible{opacity:1}.loader-spinner{border:2px var(--gray-01) solid;border-top:2px var(--color-primary-enabled) solid;border-radius:50%;-webkit-animation:spinner 0.6s infinite linear;animation:spinner 0.6s infinite linear;width:30px;height:30px}.loader-description{max-width:400px;text-align:center}@keyframes wrapper{from{background-color:rgba(var(--color-background--rgb), 0.45)}to{background-color:rgba(var(--gray-02--rgb), 0.25)}}@-webkit-keyframes spinner{from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}";
+
+const IdeLoader = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /*
+  INDEX:
+  1.OWN PROPERTIES
+  2.REFERENCE TO ELEMENTS
+  3.STATE() VARIABLES
+  4.PUBLIC PROPERTY API | WATCH'S
+  5.EVENTS (EMIT)
+  6.COMPONENT LIFECYCLE EVENTS
+  7.LISTENERS
+  8.PUBLIC METHODS API
+  9.LOCAL METHODS
+  10.RENDER() FUNCTION
+  */
+    // 1.OWN PROPERTIES //
+    /**
+     * The transition speed for displaying/hiding the ch-window
+     */
+    this.showTransition = 200;
+    // 3.STATE() VARIABLES //
+    /**
+     * shows the ch-window
+     */
+    this.showWindow = false;
+    /**
+     * shows the '.loader-wrapper'
+     */
+    this.showWrapper = false;
+    /**
+     * It shows the loader
+     */
+    this.show = false;
+  }
+  showHandler(show) {
+    const timeout = 50;
+    if (show) {
+      this.showWindow = true;
+      setTimeout(() => {
+        this.showWrapper = true;
+      }, timeout);
+    }
+    else {
+      this.showWrapper = false;
+      setTimeout(() => {
+        this.showWindow = false;
+      }, this.showTransition);
+    }
+  }
+  // 5.EVENTS (EMIT) //
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
+  //  10.RENDER() FUNCTION //
+  render() {
+    console.log(this.showTransition);
+    return (h(Host, null, h("ch-window", { closeOnEscape: false, closeOnOutsideClick: false, container: this.container, hidden: !this.showWindow, modal: false, showFooter: false, showHeader: false, style: { "--show-transition": `${this.showTransition}ms` } }, h("div", { class: {
+        "loader-wrapper": true,
+        "loader-wrapper--visible": this.showWrapper,
+      } }, h("div", { class: "loader-spinner" }), this.description ? (h("gxg-title", { class: "loader-description", type: "title-04", alignment: "center" }, this.description)) : // <gxg-title>{this.description}</gxg-title>
+      null))));
+  }
+  static get watchers() { return {
+    "show": ["showHandler"]
+  }; }
+  static get style() { return ideLoaderCss; }
+}, [1, "gxg-ide-loader", {
+    "description": [1],
+    "show": [4],
+    "container": [16],
+    "showWindow": [32],
+    "showWrapper": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gxg-ide-loader", "ch-window", "ch-window-close", "gxg-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gxg-ide-loader":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IdeLoader);
+      }
+      break;
+    case "ch-window":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "ch-window-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const GxgIdeLoader = IdeLoader;
+const defineCustomElement = defineCustomElement$1;
+
+export { GxgIdeLoader, defineCustomElement };

package/dist/components/index.d.ts

@@ -10,6 +10,7 @@ export { GxIdeNewKb as GxIdeNewKb } from '../types/components/new-kb/new-kb';
 export { GxIdeNewObject as GxIdeNewObject } from '../types/components/new-object/new-object';
 export { GxIdeObjectSelector as GxIdeObjectSelector } from '../types/components/object-selector/object-selector';
 export { GxIdeReferences as GxIdeReferences } from '../types/components/references/references';
+export { GxIdeShareKb as GxIdeShareKb } from '../types/components/share-kb/share-kb';
 export { GxIdeTeamDevCommit as GxIdeTeamDevCommit } from '../types/components/team-dev-commit/team-dev-commit';
 export { GxIdeTeamDevSelectRecentComment as GxIdeTeamDevSelectRecentComment } from '../types/components/team-dev-select-recent-comment/team-dev-select-recent-comment';
 export { GxIdeTeamDevUpdate as GxIdeTeamDevUpdate } from '../types/components/team-dev-update/team-dev-update';

package/dist/components/index.js

@@ -72,6 +72,7 @@ export { GxIdeNewKb, defineCustomElement as defineCustomElementGxIdeNewKb } from
 export { GxIdeNewObject, defineCustomElement as defineCustomElementGxIdeNewObject } from './gx-ide-new-object.js';
 export { GxIdeObjectSelector, defineCustomElement as defineCustomElementGxIdeObjectSelector } from './gx-ide-object-selector.js';
 export { GxIdeReferences, defineCustomElement as defineCustomElementGxIdeReferences } from './gx-ide-references.js';
+export { GxIdeShareKb, defineCustomElement as defineCustomElementGxIdeShareKb } from './gx-ide-share-kb.js';
 export { GxIdeTeamDevCommit, defineCustomElement as defineCustomElementGxIdeTeamDevCommit } from './gx-ide-team-dev-commit.js';
 export { GxIdeTeamDevSelectRecentComment, defineCustomElement as defineCustomElementGxIdeTeamDevSelectRecentComment } from './gx-ide-team-dev-select-recent-comment.js';
 export { GxIdeTeamDevUpdate, defineCustomElement as defineCustomElementGxIdeTeamDevUpdate } from './gx-ide-team-dev-update.js';
@@ -115,6 +116,7 @@ export { GxgFormText, defineCustomElement as defineCustomElementGxgFormText } fr
 export { GxgFormTextarea, defineCustomElement as defineCustomElementGxgFormTextarea } from './gxg-form-textarea.js';
 export { GxgGrid, defineCustomElement as defineCustomElementGxgGrid } from './gxg-grid.js';
 export { GxgIcon, defineCustomElement as defineCustomElementGxgIcon } from './gxg-icon.js';
+export { GxgIdeLoader, defineCustomElement as defineCustomElementGxgIdeLoader } from './gxg-ide-loader.js';
 export { GxgLabel, defineCustomElement as defineCustomElementGxgLabel } from './gxg-label.js';
 export { GxgListBox, defineCustomElement as defineCustomElementGxgListBox } from './gxg-list-box.js';
 export { GxgListBoxItem, defineCustomElement as defineCustomElementGxgListBoxItem } from './gxg-list-box-item.js';

package/dist/esm/ch-icon.entry.js

@@ -0,0 +1,112 @@
+import { r as registerInstance, h, g as getElement } from './index-0da01575.js';
+
+const iconContent = new Map();
+const requests = new Map();
+function getSvgContent(url) {
+  // see if we already have a request for this url
+  let request = requests.get(url);
+  if (!request) {
+    // we don't already have a request
+    request = fetch(url).then(response => {
+      if (response.ok) {
+        return response.text().then(svgContent => {
+          iconContent.set(url, svgContent);
+          return svgContent;
+        });
+      }
+      iconContent.set(url, "");
+    });
+    // cache for the same requests
+    requests.set(url, request);
+  }
+  return request;
+}
+
+const iconCss = ":host(:not([auto-color])){}:host(:not([auto-color])) svg *{fill:var(--icon-color) !important}:host(:not([auto-color])) path.icons01{fill:var(--icons01-enabled)}:host(:not([auto-color])) path.icons02{fill:var(--icons02-enabled)}:host(:not([auto-color])) path.icons03{fill:var(--icons03-enabled)}:host(:not([auto-color])) path.icons04{fill:var(--icons04-enabled)}:host(:not([auto-color])) path.icons05{fill:var(--icons05-enabled)}:host(:not([auto-color])) path.icons06{fill:var(--icons06-enabled)}:host(:not([auto-color])) path.icons07{fill:var(--icons07-enabled)}:host(:not([auto-color])) path.icons08{fill:var(--icons08-enabled)}:host(:not([auto-color])) path.icons09{fill:var(--icons09-enabled)}:host{display:inline-flex;line-height:0}:host svg{width:var(--icon-size);height:var(--icon-size)}";
+
+const ChIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If enabled, the icon will be loaded lazily when it's visible in the viewport.
+     */
+    this.lazy = false;
+    /**
+     * If enabled, the icon will display its inherent/natural color
+     */
+    this.autoColor = false;
+    /**
+     * The URL of the icon.
+     */
+    this.src = "";
+    /**
+     * The size of the icon. Possible values: regular, small.
+     */
+    this.size = "regular";
+    this.isVisible = false;
+  }
+  /** *******************************
+  METHODS
+  *********************************/
+  connectedCallback() {
+    // purposely do not return the promise here because loading
+    // the svg file should not hold up loading the app
+    // only load the svg if it's visible
+    this.waitUntilVisible(this.element, "50px", () => {
+      this.isVisible = true;
+      this.getIcon();
+    });
+  }
+  disconnectedCallback() {
+    if (this.io !== undefined) {
+      this.io.disconnect();
+      this.io = undefined;
+    }
+  }
+  waitUntilVisible(el, rootMargin, callback) {
+    if (this.lazy &&
+      typeof window !== "undefined" &&
+      window.IntersectionObserver) {
+      const io = (this.io = new window.IntersectionObserver((data) => {
+        if (data[0].isIntersecting) {
+          io.disconnect();
+          this.io = undefined;
+          callback();
+        }
+      }, { rootMargin }));
+      io.observe(el);
+    }
+    else {
+      // browser doesn't support IntersectionObserver
+      // so just fallback to always show it
+      callback();
+    }
+  }
+  async getIcon() {
+    if (this.isVisible) {
+      if (this.src) {
+        if (iconContent.has(this.src)) {
+          this.svgContent = iconContent.get(this.src);
+        }
+        else {
+          this.svgContent = await getSvgContent(this.src);
+        }
+      }
+      else {
+        this.svgContent = "";
+        return;
+      }
+    }
+  }
+  render() {
+    return h("div", { innerHTML: this.svgContent });
+  }
+  static get assetsDirs() { return ["ch-icon-assets"]; }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "src": ["getIcon"]
+  }; }
+};
+ChIcon.style = iconCss;
+
+export { ChIcon as ch_icon };