@genexus/genexus-ide-ui 0.0.60 → 0.0.61

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

@@ -1,16 +1,35 @@
+/* STENCIL IMPORTS */
 import { Host, h } from "@stencil/core";
+/* CUSTOM IMPORTS */
 export class GxIdeListSelectorItem {
   constructor() {
+    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.selectable === undefined && this.parentIsListSelector) {
-        this.selectable = this.parentList.selectable;
+      if (this.readonly === undefined && this.parentIsListSelector) {
+        this.readonly = this.parentList.readonly;
       }
     };
     /**
@@ -32,13 +51,13 @@ export class GxIdeListSelectorItem {
         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);
+    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
@@ -48,30 +67,50 @@ export class GxIdeListSelectorItem {
         this.parentList.listName &&
         (this.name = this.parentList.listName);
     };
-    this.onChangeHandler = () => {
-      if (this.selectable) {
-        this.itemSelected.emit({
-          itemId: this.itemId,
-          itemValue: this.itemValue
-        });
-      }
+    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.selectable = 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: "radio", id: this.itemId, name: this.name, value: this.itemValue, checked: this.checked, onChange: this.onChangeHandler, disabled: !this.selectable }), h("label", { htmlFor: this.itemId }, this.itemValue)));
+    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)))));
   }
   static get is() { return "gx-ide-list-selector-item"; }
   static get originalStyleUrls() {
@@ -101,7 +140,7 @@ export class GxIdeListSelectorItem {
           "text": "The item id"
         },
         "attribute": "item-id",
-        "reflect": false
+        "reflect": true
       },
       "itemValue": {
         "type": "string",
@@ -115,12 +154,30 @@ export class GxIdeListSelectorItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The item value, that act as a label as well"
+          "text": "The item value, that acts as a label as well"
         },
         "attribute": "item-value",
         "reflect": false
       },
-      "selectable": {
+      "itemChecked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "This will set the input as checked"
+        },
+        "attribute": "item-checked",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
         "type": "boolean",
         "mutable": true,
         "complexType": {
@@ -134,7 +191,7 @@ export class GxIdeListSelectorItem {
           "tags": [],
           "text": "It allows to select the item by clicking on it. It will emit the item-id"
         },
-        "attribute": "selectable",
+        "attribute": "readonly",
         "reflect": true
       },
       "ellipsis": {
@@ -153,13 +210,92 @@ export class GxIdeListSelectorItem {
         },
         "attribute": "ellipsis",
         "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The gemini icon name"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "iconColor": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"alwaysblack\" | \"auto\" | \"disabled\" | \"error\" | \"indeterminate\" | \"negative\" | \"onbackground\" | \"ondisabled\" | \"primary-active\" | \"primary-enabled\" | \"primary-hover\" | \"success\" | \"warning\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "@genexus/gemini/dist/types/components/icon/icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The gemini icon color. If no one provided, it will inherit the value from the list-selector"
+        },
+        "attribute": "icon-color",
+        "reflect": false
+      },
+      "iconSize": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Size",
+          "resolved": "\"regular\" | \"small\"",
+          "references": {
+            "Size": {
+              "location": "import",
+              "path": "@genexus/gemini/dist/types/components/icon/icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The gemini icon size. Inherited from the parent."
+        },
+        "attribute": "icon-size",
+        "reflect": false
+      },
+      "noBorder": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the item border"
+        },
+        "attribute": "no-border",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
   static get events() {
     return [{
-        "method": "itemSelected",
-        "name": "itemSelected",
+        "method": "itemSelectionChanged",
+        "name": "itemSelectionChanged",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/list-selector/list-selector.css

@@ -10,6 +10,7 @@
   display: flex;
   flex-direction: column;
   max-height: 100%;
+  font-family: var(--font-family-primary);
 }
 
 gxg-title {
@@ -62,4 +63,9 @@ gxg-title {
   display: block;
   overflow-y: auto;
   padding-inline-end: 2px;
+}
+
+/*no border*/
+:host([no-list-border]) .list {
+  border: none;
 }

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

@@ -4,35 +4,102 @@ export class GxIdeListSelector {
   constructor() {
     // 8.PUBLIC METHODS API //
     // 9.LOCAL METHODS //
-    this.getItemByValue = (newValue) => {
+    /**
+     * 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"));
-      return allListItems.find(item => {
-        return item.itemValue === newValue;
+      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.selectable = true;
-    this.ellipsis = true;
+    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;
   }
-  valueHandler(newValue) {
-    const foundItem = this.getItemByValue(newValue);
-    if (foundItem) {
-      const input = foundItem.querySelector("input");
-      input.checked = true;
-    }
-  }
-  // 5.EVENTS (EMIT) //
   // 6.COMPONENT LIFECYCLE METHODS //
+  componentWillLoad() {
+    this.evaluateChecked();
+    this.evaluateInitialValue();
+  }
   // 7.LISTENERS //
-  itemSelectedHandler(event) {
-    this.value = event.detail.itemValue;
+  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, null, this.listTitle ? (h("gxg-title", { type: "title-04" }, this.listTitle)) : null, this.ordered ? (h("ol", { class: "list" }, h("slot", null))) : (h("ul", { class: "list" }, h("slot", null)))));
+    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)))));
   }
   static get is() { return "gx-ide-list-selector"; }
   static get encapsulation() { return "shadow"; }
@@ -83,11 +150,11 @@ export class GxIdeListSelector {
         "reflect": false,
         "defaultValue": "false"
       },
-      "selectable": {
+      "readonly": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "true",
+          "original": "false",
           "resolved": "boolean",
           "references": {}
         },
@@ -95,17 +162,53 @@ export class GxIdeListSelector {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "It allows to select a single item, by clicking on it. It will emit the item-id of the clicked item"
+          "text": "Makes the list readonly"
         },
-        "attribute": "selectable",
+        "attribute": "readonly",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"single-selection\" | \"multi-selection\"",
+          "resolved": "\"multi-selection\" | \"single-selection\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It determines the type of list: single-selection or multi-selection"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"single-selection\""
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the list required"
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "ellipsis": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "true",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
@@ -117,25 +220,71 @@ export class GxIdeListSelector {
         },
         "attribute": "ellipsis",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
       },
       "value": {
         "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "string | string[]",
+          "resolved": "string | string[]",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The value of the initial or current checked list-item"
+          "text": "The value of the initial (or initials) checked list-item/s"
         },
         "attribute": "value",
         "reflect": false
       },
+      "iconsColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"alwaysblack\" | \"auto\" | \"disabled\" | \"error\" | \"indeterminate\" | \"negative\" | \"onbackground\" | \"ondisabled\" | \"primary-active\" | \"primary-enabled\" | \"primary-hover\" | \"success\" | \"warning\"",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "@genexus/gemini/dist/types/components/icon/icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icons color"
+        },
+        "attribute": "icons-color",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      },
+      "iconsSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Size",
+          "resolved": "\"regular\" | \"small\"",
+          "references": {
+            "Size": {
+              "location": "import",
+              "path": "@genexus/gemini/dist/types/components/icon/icon"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icons size"
+        },
+        "attribute": "icons-size",
+        "reflect": false,
+        "defaultValue": "\"regular\""
+      },
       "listName": {
         "type": "string",
         "mutable": false,
@@ -152,22 +301,74 @@ export class GxIdeListSelector {
         },
         "attribute": "list-name",
         "reflect": false
+      },
+      "noItemsBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the items border"
+        },
+        "attribute": "no-items-border",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noListBorder": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the list border"
+        },
+        "attribute": "no-list-border",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
-  static get elementRef() { return "el"; }
-  static get watchers() {
+  static get events() {
     return [{
-        "propName": "value",
-        "methodName": "valueHandler"
+        "method": "selectionChanged",
+        "name": "selectionChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the actual selection"
+        },
+        "complexType": {
+          "original": "CheckedItemsInfo",
+          "resolved": "ItemData[]",
+          "references": {
+            "CheckedItemsInfo": {
+              "location": "local"
+            }
+          }
+        }
       }];
   }
+  static get elementRef() { return "el"; }
   static get listeners() {
     return [{
-        "name": "itemSelected",
-        "method": "itemSelectedHandler",
+        "name": "itemSelectionChanged",
+        "method": "itemSelectionChangedHandler",
         "target": undefined,
-        "capture": false,
+        "capture": true,
         "passive": false
       }];
   }

package/dist/collection/components/new-kb/new-kb.css

@@ -185,6 +185,10 @@ gxg-tabs {
 
 /*Basic*/
 .basic-row-first {
+  display: grid;
+  gap: var(--gx-ide-grid-column-gap);
+  padding: var(--gxg-container--padding);
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
   grid-template-areas: "prototyping-target user-interface-language";
   grid-template-columns: repeat(2, 1fr);
 }
@@ -202,6 +206,7 @@ gxg-tabs {
 
 /*Advanced*/
 .knowledge-base-storage {
+  display: grid;
   grid-template-areas: "knowledge-base-storage__col-left knowledge-base-storage__col-right";
   grid-template-columns: repeat(2, 1fr);
   flex-grow: 1;
@@ -211,8 +216,12 @@ gxg-tabs {
   border-right: 1px solid var(--gx-ide-container-border-color);
 }
 .knowledge-base-storage__col-left {
+  display: grid;
+  gap: var(--gx-ide-grid-row-gap);
+  padding: var(--gxg-container--padding);
   grid-area: knowledge-base-storage__col-left;
   grid-template-columns: 1fr auto;
+  grid-template-rows: repeat(4, min-content);
   grid-template-areas: "server-name-combo-box server-name-button" "database-name ." "collation-combo-box collation-button" "create-data-in-kb .";
 }
 .knowledge-base-storage__col-left .server-name-combo-box {
@@ -236,8 +245,12 @@ gxg-tabs {
   grid-area: create-data-in-kb;
 }
 .knowledge-base-storage__col-right {
+  display: grid;
+  padding: var(--gxg-container--padding);
+  gap: var(--gx-ide-grid-row-gap);
   grid-area: knowledge-base-storage__col-right;
   grid-template-columns: 1fr;
+  grid-template-rows: repeat(4, min-content);
   grid-template-areas: "authentication-type" "user-name" "password" "save-password";
 }
 .knowledge-base-storage__col-right .authentication-type {