@genexus/genexus-ide-ui 0.0.59 → 0.0.61

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

@@ -10,20 +10,33 @@ 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(:last-child) {
-  border-block-end: 1px solid var(--gx-ide-container-border-color);
+gx-ide-list-selector-item:not(:first-child) {
+  border-block-start: 1px solid var(--gx-ide-container-border-color);
 }
 
-/*selectable*/
-gx-ide-list-selector-item[selectable]:not([selectable=false]):hover label {
-  cursor: pointer;
-  background-color: var(--gxg-background-color-item-hover);
+/*change border color if checked*/
+gx-ide-list-selector-item:not(:first-child):has(input:checked) {
+  border-block-color: var(--gxg-border-color--selected);
+}
+
+/*readonly*/
+gx-ide-list-selector-item[readonly]:not([readonly=false]) .label {
+  pointer-events: none;
+  background-color: transparent;
 }
 
 /*ellipsis*/
-gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) label {
+gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -35,17 +48,41 @@ input {
   opacity: 0;
   margin: 0;
 }
-input:focus + label {
+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);
+input:checked + .label {
+  background-color: var(--gxg-background-color--selected);
 }
 
-label {
-  flex-shrink: 0;
-  display: block;
-  padding: var(--spacing-comp-01);
+/*label-wrapper*/
+.label {
   width: 100%;
+}
+
+/*label*/
+.label__wrapper {
+  display: flex;
+  min-height: 28px;
+  /*this prevents height difference between items that have icons and items that do not*/
+  align-items: center;
+  gap: var(--spacing-comp-02);
+  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+  width: 100%;
+}
+.label__wrapper__description {
+  flex: 1;
+}
+
+/*no border*/
+gx-ide-list-selector-item[no-border] {
+  border-block-start: none;
+}
+
+/*universal slot*/
+.label__universal-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

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;
 }