@genexus/genexus-ide-ui 0.0.60 → 0.0.62

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

@@ -0,0 +1,375 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+export class GxIdeListSelector {
+  constructor() {
+    // 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)))));
+  }
+  static get is() { return "gx-ide-list-selector"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["list-selector.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["list-selector.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "listTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The list title (optional)"
+        },
+        "attribute": "list-title",
+        "reflect": false
+      },
+      "ordered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "It determines if the list is ordered, or unordered"
+        },
+        "attribute": "ordered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the list readonly"
+        },
+        "attribute": "readonly",
+        "reflect": false,
+        "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": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The presence of this property will force all the items to not-wrap, and have ellipsis"
+        },
+        "attribute": "ellipsis",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "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,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of this list. This is a required attribute for the list to work."
+        },
+        "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 events() {
+    return [{
+        "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": "itemSelectionChanged",
+        "method": "itemSelectionChangedHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/_helpers/status-buttons/gx-ide-status-buttons.css

@@ -0,0 +1,93 @@
+:host {
+  display: block;
+  border: 1px solid var(--gx-ide-container-border-color);
+  --status-buttons-label-color: var(--gray-06);
+}
+
+/*list-selector*/
+gx-ide-list-selector::part(list) {
+  display: flex;
+  flex-direction: row;
+}
+
+/*list-selector-items*/
+gx-ide-list-selector-item {
+  border-block-start: none !important;
+  flex: 1;
+  text-align: center;
+  /*active indicator*/
+  /*hover*/
+}
+gx-ide-list-selector-item.not-zero {
+  font-weight: var(--font-weight-semibold);
+}
+gx-ide-list-selector-item:not(:last-child) {
+  border-inline-end: 1px solid var(--gx-ide-container-border-color);
+}
+gx-ide-list-selector-item .label__wrapper {
+  display: inline-flex;
+  width: auto;
+  min-height: 0;
+}
+gx-ide-list-selector-item .label__description {
+  color: var(--status-buttons-label-color);
+}
+gx-ide-list-selector-item .active-indicator {
+  display: inline-block;
+  width: var(--spacing-comp-02);
+  height: var(--spacing-comp-02);
+  border: 1px solid var(--gray-07);
+  border-radius: calc(var(--spacing-comp-02) / 2);
+}
+gx-ide-list-selector-item input:checked + .label {
+  --status-buttons-label-color: var(--color-on-background);
+  background-color: inherit;
+}
+gx-ide-list-selector-item input:checked + .label .active-indicator {
+  background-color: var(--color-primary-enabled);
+  border-color: var(--color-primary-active);
+}
+gx-ide-list-selector-item:hover input:checked + .label {
+  background-color: var(--gxg-background-color--hover) !important;
+}
+
+/*--------------------
+Compact size
+--------------------*/
+:host([compact]) gx-ide-list-selector-item {
+  font-size: var(--font-size-md);
+}
+:host([compact]) .label__wrapper {
+  gap: var(--spacing-comp-01);
+  padding: var(--spacing-comp-00) var(--spacing-comp-02) var(--spacing-comp-00) var(--spacing-comp-01);
+}
+:host([compact]) .label__universal-slot {
+  margin-inline-end: var(--spacing-comp-00);
+}
+
+/*--------------------
+All about borders
+--------------------*/
+:host([no-border]) {
+  border: none;
+}
+
+:host([no-border-top]) {
+  border-top: none;
+}
+
+:host([no-border-end]) {
+  border-inline-end: none;
+}
+
+:host([no-border-bottom]) {
+  border-bottom: none;
+}
+
+:host([no-border-start]) {
+  border-inline-start: none;
+}
+
+:host([no-inner-borders]) gx-ide-list-selector-item {
+  border-inline-end: none;
+}