@genexus/genexus-ide-ui 0.0.60 → 0.0.61

package/dist/components/index.d.ts

@@ -4,7 +4,9 @@ export { GxIdeContainer as GxIdeContainer } from '../types/components/container/
 export { GxIdeCreateKbFromServer as GxIdeCreateKbFromServer } from '../types/components/create-kb-from-server/create-kb-from-server';
 export { GxIdeDirectorySelector as GxIdeDirectorySelector } from '../types/components/directory-selector/directory-selector';
 export { GxIdeEntitySelector as GxIdeEntitySelector } from '../types/components/entity-selector/entity-selector';
+export { GxIdeFileSelector as GxIdeFileSelector } from '../types/components/file-selector/file-selector';
 export { GxIdeKbManagerExport as GxIdeKbManagerExport } from '../types/components/kb-manager-export/kb-manager-export';
+export { GxIdeKbManagerImport as GxIdeKbManagerImport } from '../types/components/kb-manager-import/kb-manager-import';
 export { GxIdeListSelector as GxIdeListSelector } from '../types/components/list-selector/list-selector';
 export { GxIdeListSelectorItem as GxIdeListSelectorItem } from '../types/components/list-selector/list-selector-item/list-selector-item';
 export { GxIdeNewEnvironment as GxIdeNewEnvironment } from '../types/components/new-environment/new-environment';
@@ -13,6 +15,7 @@ export { GxIdeNewObject as GxIdeNewObject } from '../types/components/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 { GxIdeStatusButtons as GxIdeStatusButtons } from '../types/components/status-buttons/gx-ide-status-buttons';
 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

@@ -67,7 +67,9 @@ export { GxIdeContainer, defineCustomElement as defineCustomElementGxIdeContaine
 export { GxIdeCreateKbFromServer, defineCustomElement as defineCustomElementGxIdeCreateKbFromServer } from './gx-ide-create-kb-from-server.js';
 export { GxIdeDirectorySelector, defineCustomElement as defineCustomElementGxIdeDirectorySelector } from './gx-ide-directory-selector.js';
 export { GxIdeEntitySelector, defineCustomElement as defineCustomElementGxIdeEntitySelector } from './gx-ide-entity-selector.js';
+export { GxIdeFileSelector, defineCustomElement as defineCustomElementGxIdeFileSelector } from './gx-ide-file-selector.js';
 export { GxIdeKbManagerExport, defineCustomElement as defineCustomElementGxIdeKbManagerExport } from './gx-ide-kb-manager-export.js';
+export { GxIdeKbManagerImport, defineCustomElement as defineCustomElementGxIdeKbManagerImport } from './gx-ide-kb-manager-import.js';
 export { GxIdeListSelector, defineCustomElement as defineCustomElementGxIdeListSelector } from './gx-ide-list-selector.js';
 export { GxIdeListSelectorItem, defineCustomElement as defineCustomElementGxIdeListSelectorItem } from './gx-ide-list-selector-item.js';
 export { GxIdeNewEnvironment, defineCustomElement as defineCustomElementGxIdeNewEnvironment } from './gx-ide-new-environment.js';
@@ -76,6 +78,7 @@ export { GxIdeNewObject, defineCustomElement as defineCustomElementGxIdeNewObjec
 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 { GxIdeStatusButtons, defineCustomElement as defineCustomElementGxIdeStatusButtons } from './gx-ide-status-buttons.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';

package/dist/components/list-selector-item.js

@@ -0,0 +1,158 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './icon2.js';
+
+const listSelectorItemCss = "*,::after,::before{box-sizing:border-box}gx-ide-list-selector-item{display:block;max-width:100%;display:flex;font-size:inherit}gx-ide-list-selector-item:hover .label{background-color:var(--gxg-background-color--hover);cursor:pointer}gx-ide-list-selector-item:hover input:checked+.label{background-color:var(--gxg-background-color--selected-hover)}gx-ide-list-selector-item:not(:first-child){border-block-start:1px solid var(--gx-ide-container-border-color)}gx-ide-list-selector-item:not(:first-child):has(input:checked){border-block-color:var(--gxg-border-color--selected)}gx-ide-list-selector-item[readonly]:not([readonly=false]) .label{pointer-events:none;background-color:transparent}gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description{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--selected)}.label{width:100%}.label__wrapper{display:flex;min-height:28px;align-items:center;gap:var(--spacing-comp-02);padding:var(--spacing-comp-01) var(--spacing-comp-02);width:100%}.label__wrapper__description{flex:1}gx-ide-list-selector-item[no-border]{border-block-start:none}.label__universal-slot{display:flex;align-items:center;justify-content:center}";
+
+const GxIdeListSelectorItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.itemSelectionChanged = createEvent(this, "itemSelectionChanged", 7);
+    this.hasUniversalSlot = false;
+    // 6.COMPONENT LIFECYCLE METHODS //
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * 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);
+    };
+    /**
+     * Determines the type of item, based on the parent list-selector 'type' property value
+     */
+    this.evaluateType = () => {
+      const parentList = this.el
+        .parentElement;
+      this.type = parentList.type === "single-selection" ? "radio" : "checkbox";
+    };
+    /**
+     * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item
+     */
+    this.evaluateSelectable = () => {
+      if (this.readonly === undefined && this.parentIsListSelector) {
+        this.readonly = this.parentList.readonly;
+      }
+    };
+    /**
+     * 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;
+      }
+    };
+    this.evaluateBorder = () => {
+      if (this.parentIsListSelector) {
+        this.noBorder = this.parentList.noItemsBorder;
+      }
+    };
+    this.evaluateUniversalSlot = () => {
+      this.hasUniversalSlot = !!this.el.querySelector("[slot=universal]");
+    };
+    /**
+     * 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.evaluateIconColor = () => {
+      this.parentIsListSelector &&
+        this.parentList.iconsColor &&
+        this.iconColor === undefined &&
+        (this.iconColor = this.parentList.iconsColor);
+    };
+    this.evaluateIconSize = () => {
+      this.parentIsListSelector &&
+        this.parentList.iconsSize &&
+        (this.iconSize = this.parentList.iconsSize);
+    };
+    this.onChangeHandler = (e) => {
+      this.itemChecked = e.target.checked;
+      this.itemSelectionChanged.emit({
+        itemId: this.itemId,
+        itemValue: this.itemValue
+      });
+    };
+    this.itemId = undefined;
+    this.itemValue = undefined;
+    this.itemChecked = false;
+    this.readonly = undefined;
+    this.ellipsis = undefined;
+    this.icon = undefined;
+    this.iconColor = undefined;
+    this.iconSize = undefined;
+    this.noBorder = false;
+  }
+  // 5.EVENTS (EMIT) //
+  componentWillLoad() {
+    this.evaluateParentIsListSelector();
+    this.evaluateType();
+    this.evaluateSelectable();
+    this.evaluateEllipsis();
+    this.evaluateChecked();
+    this.evaluateIconColor();
+    this.evaluateIconSize();
+    this.evaluateBorder();
+    this.evaluateUniversalSlot();
+    this.assignName();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue)))));
+  }
+  get el() { return this; }
+  static get style() { return listSelectorItemCss; }
+}, [4, "gx-ide-list-selector-item", {
+    "itemId": [513, "item-id"],
+    "itemValue": [1, "item-value"],
+    "itemChecked": [1028, "item-checked"],
+    "readonly": [1540],
+    "ellipsis": [1540],
+    "icon": [1],
+    "iconColor": [1025, "icon-color"],
+    "iconSize": [1025, "icon-size"],
+    "noBorder": [1540, "no-border"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-list-selector-item", "ch-icon", "gxg-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-list-selector-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeListSelectorItem);
+      }
+      break;
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "gxg-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxIdeListSelectorItem as G, defineCustomElement as d };

package/dist/components/list-selector.js

@@ -0,0 +1,146 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './title.js';
+
+const listSelectorCss = "*,::after,::before{box-sizing:border-box}:host{display:flex;flex-direction:column;max-height:100%;font-family:var(--font-family-primary)}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}:host([no-list-border]) .list{border:none}";
+
+const GxIdeListSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.selectionChanged = createEvent(this, "selectionChanged", 7);
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    /**
+     * It evaluates the checked items, and checks or unchecks if needed
+     */
+    this.evaluateChecked = () => {
+      const allListItems = Array.from(this.el.querySelectorAll("gx-ide-list-selector-item"));
+      const checkedItems = allListItems.filter(item => item.itemChecked);
+      /**
+       * INDEX
+       * 1.required and no one checked
+       * 2.single-selection, and more than one checked
+       */
+      /* 1.required and no one checked*/
+      if (this.required && checkedItems.length === 0) {
+        allListItems[0].itemChecked = true;
+      }
+      else if (this.type === "single-selection" && checkedItems.length > 1) {
+        /* 2.single-selection, and more than one checked*/
+        checkedItems.forEach((item, i) => {
+          if (i !== 0) {
+            item.itemChecked = false;
+          }
+        });
+      }
+    };
+    /**
+     * It evaluates the initial value/s
+     */
+    this.evaluateInitialValue = () => {
+      const checkedItems = this.getChecked();
+      if (this.type === "single-selection" && checkedItems.length > 0) {
+        this.value = checkedItems[0].itemValue;
+      }
+      else if (this.type === "multi-selection" && checkedItems.length > 0) {
+        const values = [];
+        checkedItems.forEach(checked => {
+          values.push(checked.itemValue);
+        });
+        this.value = values;
+      }
+    };
+    this.getChecked = () => {
+      const checkedItems = [];
+      const allItems = this.el.querySelectorAll("gx-ide-list-selector-item");
+      allItems.forEach(item => {
+        if (item.itemChecked) {
+          checkedItems.push(item);
+        }
+      });
+      return checkedItems;
+    };
+    this.listTitle = undefined;
+    this.ordered = false;
+    this.readonly = false;
+    this.type = "single-selection";
+    this.required = false;
+    this.ellipsis = false;
+    this.value = undefined;
+    this.iconsColor = "auto";
+    this.iconsSize = "regular";
+    this.listName = undefined;
+    this.noItemsBorder = false;
+    this.noListBorder = false;
+  }
+  // 6.COMPONENT LIFECYCLE METHODS //
+  componentWillLoad() {
+    this.evaluateChecked();
+    this.evaluateInitialValue();
+  }
+  // 7.LISTENERS //
+  itemSelectionChangedHandler(event) {
+    event.stopPropagation();
+    const checkedItemsInfo = [];
+    const checkedItems = this.getChecked();
+    const newValue = [];
+    checkedItems.forEach(item => {
+      const value = item.itemValue;
+      newValue.push(value);
+      checkedItemsInfo.push({
+        itemId: item.itemId,
+        itemValue: value
+      });
+    });
+    /* update this.value*/
+    if (this.type === "single-selection" && newValue.length > 0) {
+      this.value = newValue[0] || undefined;
+    }
+    else {
+      /* multi-selection*/
+      this.value = newValue;
+    }
+    /* emit selectionChanged*/
+    this.selectionChanged.emit(checkedItemsInfo);
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return (h(Host, { exportparts: "input:input" }, this.listTitle ? (h("gxg-title", { type: "title-04" }, this.listTitle)) : null, this.ordered ? (h("ol", { class: "list", part: "list" }, h("slot", null))) : (h("ul", { class: "list", part: "list" }, h("slot", null)))));
+  }
+  get el() { return this; }
+  static get style() { return listSelectorCss; }
+}, [1, "gx-ide-list-selector", {
+    "listTitle": [1, "list-title"],
+    "ordered": [4],
+    "readonly": [4],
+    "type": [1],
+    "required": [4],
+    "ellipsis": [4],
+    "value": [1025],
+    "iconsColor": [1, "icons-color"],
+    "iconsSize": [1, "icons-size"],
+    "listName": [1, "list-name"],
+    "noItemsBorder": [4, "no-items-border"],
+    "noListBorder": [516, "no-list-border"]
+  }, [[2, "itemSelectionChanged", "itemSelectionChangedHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["gx-ide-list-selector", "gxg-title"];
+  components.forEach(tagName => { switch (tagName) {
+    case "gx-ide-list-selector":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GxIdeListSelector);
+      }
+      break;
+    case "gxg-title":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GxIdeListSelector as G, defineCustomElement as d };

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

@@ -0,0 +1,89 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
+import { D as DISABLED_CLASS } from './reserverd-names-2a2d0fb3.js';
+
+const checkboxCss = "*,::before,::after{box-sizing:border-box}:host{display:flex;align-items:center;align-self:stretch;outline:unset;touch-action:manipulation;user-select:none}:host(.ch-checkbox--actionable) :is(.input,.label){cursor:pointer}.container{position:relative;width:min(1em, 20px);height:min(1em, 20px);border:1px solid var(--option-border-color, currentColor);border-radius:18.75%}.container--checked{background-color:var(--option-checked-color, #ffffff00)}.container:focus-within{box-shadow:0 0 1px 1px color-mix(in srgb, currentColor 25%, transparent)}.input{display:flex;width:100%;height:100%;opacity:0;margin:0;padding:0}.option{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:50%;height:50%;background-color:currentColor;opacity:0;pointer-events:none}.option--checked{opacity:1;-webkit-mask:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' %3E%3Cpath fill='currentColor' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z' /%3E%3C/svg%3E\")}.option--indeterminate{opacity:1}.label{margin-inline-start:min(0.35em, 7px)}";
+
+const CHECKBOX_ID = "checkbox";
+const PARTS = (checked, indeterminate) => `${checked ? " checked" : ""}${indeterminate ? " indeterminate" : ""}`;
+const CheckBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.click = createEvent(this, "click", 7);
+    this.input = createEvent(this, "input", 7);
+    /**
+     * This attribute lets you specify if the element is disabled.
+     * If disabled, it will not fire any user interaction related event
+     * (for example, click event).
+     */
+    this.disabled = false;
+    /**
+     * True to highlight control when an action is fired.
+     */
+    this.highlightable = false;
+    /**
+     * `true` if the control's value is indeterminate.
+     */
+    this.indeterminate = false;
+    /**
+     * This attribute indicates that the user cannot modify the value of the control.
+     * Same as [readonly](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly)
+     * attribute for `input` elements.
+     */
+    this.readonly = false;
+    this.getValue = (checked) => checked ? this.checkedValue : this.unCheckedValue;
+    /**
+     * Checks if it is necessary to prevent the click from bubbling
+     */
+    this.handleClick = (event) => {
+      if (this.readonly || this.disabled) {
+        return;
+      }
+      event.stopPropagation();
+    };
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      const inputRef = event.target;
+      const checked = inputRef.checked;
+      const value = this.getValue(checked);
+      this.checked = checked;
+      this.value = value;
+      inputRef.value = value; // Update input's value before emitting the event
+      this.input.emit(event);
+      if (this.highlightable) {
+        this.click.emit();
+      }
+    };
+  }
+  valueChanged() {
+    this.checked = this.value === this.checkedValue;
+  }
+  componentWillLoad() {
+    this.checked = this.value === this.checkedValue;
+  }
+  render() {
+    var _a;
+    const additionalParts = PARTS(this.checked, this.indeterminate);
+    return (h(Host, { class: {
+        [DISABLED_CLASS]: this.disabled,
+        "ch-checkbox--actionable": (!this.readonly && !this.disabled) ||
+          (this.readonly && this.highlightable)
+      } }, h("div", { class: {
+        container: true,
+        "container--checked": this.checked
+      }, part: `container${additionalParts}` }, h("input", { "aria-label": ((_a = this.accessibleName) === null || _a === void 0 ? void 0 : _a.trim()) !== "" &&
+        this.accessibleName !== this.caption
+        ? this.accessibleName
+        : null, id: this.caption ? CHECKBOX_ID : null, class: "input", part: "input", type: "checkbox", checked: this.checked, disabled: this.disabled || this.readonly, indeterminate: this.indeterminate, value: this.value, onClick: this.handleClick, onInput: this.handleChange }), h("div", { class: {
+        option: true,
+        "option--checked": this.checked && !this.indeterminate,
+        "option--indeterminate": this.indeterminate
+      }, part: `option${additionalParts}`, "aria-hidden": "true" })), this.caption && (h("label", { class: "label", part: "label", htmlFor: CHECKBOX_ID, onClick: this.handleClick }, this.caption))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+CheckBox.style = checkboxCss;
+
+export { CheckBox as ch_checkbox };