@genexus/genexus-ide-ui 0.0.59 → 0.0.61

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genexus/genexus-ide-ui",
   "license": "Apache-2.0",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "description": "GeneXus IDE UI components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -36,10 +36,10 @@
     "@types/react": "^18.2.8"
   },
   "peerDependencies": {
-    "@genexus/gemini": "*0.1.504"
+    "@genexus/gemini": "*0.1.527"
   },
   "devDependencies": {
-    "@genexus/gemini": "*0.1.504",
+    "@genexus/gemini": "*0.1.527",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil/core": "^2.17.0",
     "@stencil/sass": "^2.0.1",

package/dist/cjs/gx-ide-list-selector-item.cjs.entry.js

@@ -1,89 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5a32426a.js');
-
-const listSelectorItemCss = "*,::after,::before{box-sizing:border-box}gx-ide-list-selector-item{display:block;max-width:100%;display:flex}gx-ide-list-selector-item:not(:last-child){border-block-end:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item[selectable]:not([selectable=false]):hover label{cursor:pointer;background-color:var(--gxg-background-color-item-hover)}gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}input{width:0;height:0;opacity:0;margin:0}input:focus+label{outline:var(--border-width-md) solid var(--color-primary-active);outline-offset:-2px}input:checked+label{background-color:var(--gxg-background-color-item-selected)}label{flex-shrink:0;display:block;padding:var(--spacing-comp-01);width:100%}";
-
-const GxIdeListSelectorItem = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.itemSelected = index.createEvent(this, "itemSelected", 7);
-    // 6.COMPONENT LIFECYCLE METHODS //
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    /**
-     * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item
-     */
-    this.evaluateSelectable = () => {
-      if (this.selectable === undefined && this.parentIsListSelector) {
-        this.selectable = this.parentList.selectable;
-      }
-    };
-    /**
-     * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item
-     */
-    this.evaluateEllipsis = () => {
-      if (this.ellipsis === undefined && this.parentIsListSelector) {
-        this.ellipsis = this.parentList.ellipsis;
-      }
-    };
-    /**
-     * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.
-     */
-    this.evaluateChecked = () => {
-      if (this.checked === undefined &&
-        this.parentIsListSelector &&
-        this.parentList.value !== undefined &&
-        this.parentList.value === this.itemValue) {
-        this.checked = true;
-      }
-    };
-    /**
-     * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference
-     */
-    this.evaluateParentIsListSelector = () => {
-      const parentList = this.el.parentElement;
-      this.parentIsListSelector = (parentList === null || parentList === void 0 ? void 0 : parentList.nodeName) === "GX-IDE-LIST-SELECTOR";
-      this.parentIsListSelector && (this.parentList = parentList);
-    };
-    /**
-     * Gets the listName required value, that is needed for the list selection to properly work
-     */
-    this.assignName = () => {
-      this.parentIsListSelector &&
-        this.parentList.listName &&
-        (this.name = this.parentList.listName);
-    };
-    this.onChangeHandler = () => {
-      if (this.selectable) {
-        this.itemSelected.emit({
-          itemId: this.itemId,
-          itemValue: this.itemValue
-        });
-      }
-    };
-    this.itemId = undefined;
-    this.itemValue = undefined;
-    this.selectable = undefined;
-    this.ellipsis = undefined;
-  }
-  // 5.EVENTS (EMIT) //
-  componentWillLoad() {
-    this.evaluateParentIsListSelector();
-    this.evaluateSelectable();
-    this.evaluateEllipsis();
-    this.evaluateChecked();
-    this.assignName();
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return (index.h(index.Host, { role: "listitem" }, index.h("input", { type: "radio", id: this.itemId, name: this.name, value: this.itemValue, checked: this.checked, onChange: this.onChangeHandler, disabled: !this.selectable }), index.h("label", { htmlFor: this.itemId }, this.itemValue)));
-  }
-  get el() { return index.getElement(this); }
-};
-GxIdeListSelectorItem.style = listSelectorItemCss;
-
-exports.gx_ide_list_selector_item = GxIdeListSelectorItem;

package/dist/cjs/gx-ide-list-selector.cjs.entry.js

@@ -1,51 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5a32426a.js');
-
-const listSelectorCss = "*,::after,::before{box-sizing:border-box}:host{display:flex;flex-direction:column;max-height:100%}gxg-title{display:block;margin-block-end:var(--gxg-label-margin-vertical)}.list{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0;list-style-type:none;margin:0;padding:0;color:var(--gx-ide-component-text-color);background-color:var(--gx-ide-component-background-color);font-size:var(--gx-ide-component-text-size);font-weight:var(--font-weight-regular);display:block;background-color:var(--color-background);max-height:100%;overflow-y:auto;border:1px solid var(--gx-ide-container-border-color)}.list::-webkit-scrollbar{width:6px;height:6px}.list::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.list::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.list::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.list .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}";
-
-const GxIdeListSelector = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.getItemByValue = (newValue) => {
-      const allListItems = Array.from(this.el.querySelectorAll("gx-ide-list-selector-item"));
-      return allListItems.find(item => {
-        return item.itemValue === newValue;
-      });
-    };
-    this.listTitle = undefined;
-    this.ordered = false;
-    this.selectable = true;
-    this.ellipsis = true;
-    this.value = undefined;
-    this.listName = undefined;
-  }
-  valueHandler(newValue) {
-    const foundItem = this.getItemByValue(newValue);
-    if (foundItem) {
-      const input = foundItem.querySelector("input");
-      input.checked = true;
-    }
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE METHODS //
-  // 7.LISTENERS //
-  itemSelectedHandler(event) {
-    this.value = event.detail.itemValue;
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return (index.h(index.Host, null, this.listTitle ? (index.h("gxg-title", { type: "title-04" }, this.listTitle)) : null, this.ordered ? (index.h("ol", { class: "list" }, index.h("slot", null))) : (index.h("ul", { class: "list" }, index.h("slot", null)))));
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "value": ["valueHandler"]
-  }; }
-};
-GxIdeListSelector.style = listSelectorCss;
-
-exports.gx_ide_list_selector = GxIdeListSelector;

package/dist/cjs/gxg-ide-loader.cjs.entry.js

@@ -1,79 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-5a32426a.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 = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /*
-  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 (index.h(index.Host, null, index.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` } }, index.h("div", { class: {
-        "loader-wrapper": true,
-        "loader-wrapper--visible": this.showWrapper,
-      } }, index.h("div", { class: "loader-spinner" }), this.description ? (index.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"]
-  }; }
-};
-IdeLoader.style = ideLoaderCss;
-
-exports.gxg_ide_loader = IdeLoader;