@genexus/genexus-ide-ui 0.0.60 → 0.0.62

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

@@ -0,0 +1,96 @@
+/*Gemini*/
+/*Gx Ide*/
+*,
+::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: var(--gx-ide-list-items-border);
+}
+
+/*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__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-wrapper*/
+.label {
+  width: 100%;
+}
+
+/*label*/
+.label__index {
+  align-self: baseline;
+}
+.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__description {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-comp-02);
+}
+
+/*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;
+}
+
+/*universal slot end*/

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

@@ -0,0 +1,352 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* CUSTOM IMPORTS */
+export class GxIdeListSelectorItem {
+  constructor() {
+    this.hasUniversalSlot = false;
+    this.index = undefined;
+    // 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.evaluateOrderedList = () => {
+      if (this.parentIsListSelector && this.parentList.ordered) {
+        let index = Array.from(this.parentList.children).indexOf(this.el) + 1;
+        if (index < 10) {
+          // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.
+          index = `0${index}`;
+        }
+        else {
+          index = `${index}`;
+        }
+        this.index = index;
+      }
+    };
+    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;
+    this.universalSlotEnd = 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();
+    this.evaluateOrderedList();
+  }
+  // 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.index ? (h("span", { class: "label__index" }, this.index, ". ")) : null, 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 ? this.itemValue : h("slot", null))))));
+  }
+  static get is() { return "gx-ide-list-selector-item"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["list-selector-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["list-selector-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "itemId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The item id"
+        },
+        "attribute": "item-id",
+        "reflect": true
+      },
+      "itemValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The item value, that acts as a label as well"
+        },
+        "attribute": "item-value",
+        "reflect": false
+      },
+      "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": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It allows to select the item by clicking on it. It will emit the item-id"
+        },
+        "attribute": "readonly",
+        "reflect": true
+      },
+      "ellipsis": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The presence of this property will force the item text to not-wrap, and have ellipsis"
+        },
+        "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"
+      },
+      "universalSlotEnd": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays the universal slot at the end, instead of at the benign"
+        },
+        "attribute": "universal-slot-end",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "itemSelectionChanged",
+        "name": "itemSelectionChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the item data"
+        },
+        "complexType": {
+          "original": "ItemData",
+          "resolved": "{ itemId: string; itemValue: string; itemIcon?: string; }",
+          "references": {
+            "ItemData": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/{list-selector → _helpers/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;
 }