@genexus/genexus-ide-ui 0.0.59 → 0.0.61

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 {

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

@@ -162,13 +162,13 @@ export class GxIdeNewKb {
     };
     // 10.RENDER() FUNCTION //
     this.renderTabBasic = () => {
-      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true }, h("div", { class: "grid basic-row-first" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
+      return (h("gxg-tab", { tab: "basic", "no-padding": true, flexContainer: true }, h("div", { class: "basic-row-first" }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.prototypingTarget.label, value: getSelectedGxOption(this.prototypingTargets), ref: (el) => (this.prototypingTargetEl = el), disabled: this.prototypingTargets.length === 0, placeholder: this.prototypingTargets.length === 0
           ? this._componentLocale.tabBasic.prototypingTarget
             .disabledPlaceholder
           : "", onValueChanged: this.prototypingTargetValueChangedHandler, class: "prototyping-target", part: "prototyping-target" }, renderFormItems("gxg-combo-box-item", this.prototypingTargets, "prototyping-target")), h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.userInterfaceLanguage.label, value: getSelectedGxOption(this.userInterfaceLanguages), placeholder: this.userInterfaceLanguages.length === 0
           ? this._componentLocale.tabBasic.userInterfaceLanguage
             .disabledPlaceholder
-          : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language")))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
+          : "", disabled: this.userInterfaceLanguages.length === 0, ref: (el) => (this.userInterfaceLanguageEl = el), class: "user-interface-language", part: "user-interface-language" }, renderFormItems("gxg-combo-box-item", this.userInterfaceLanguages, "user-interface-language"))), h("div", { class: "grid basic-row-second" }, h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.backEnd.backEndLabel }, h("gxg-combo-box", { disableFilter: true, toolTip: config.tooltip, label: this._componentLocale.tabBasic.backEnd.prototypingEnvironment
           .label, value: getSelectedGxOption(this.prototypingEnvironments), placeholder: this.prototypingEnvironments.length === 0
           ? this._componentLocale.tabBasic.backEnd
             .prototypingEnvironment.disabledPlaceholder
@@ -178,15 +178,14 @@ export class GxIdeNewKb {
           : "", disabled: this.defaultDataSources.length === 0, ref: (el) => (this.dataSourceEl = el), class: "data-source", part: "data-source" }, renderFormItems("gxg-combo-box-item", this.defaultDataSources, "data-source"))), h("gx-ide-container", { noHeadingBorder: true, containerTitle: this._componentLocale.tabBasic.frontEnd.frontEndLabel }, h("gxg-form-checkbox-group", { ref: el => (this.frontEndsEl = el) }, renderFormItems("gxg-form-checkbox", this.frontEnds, "front-end"))))));
     };
     this.renderTabAdvanced = () => {
-      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { displayBorderBottom: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }), h("div", { class: "grid knowledge-base-storage" }, h("gx-ide-container", null, h("div", { class: "grid knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.serverNames), placeholder: this.serverNames.length === 0
+      return (h("gxg-tab", { tab: "advanced", "no-padding": true, flexContainer: true }, h("gx-ide-container", { noContentPadding: true, containerTitle: this._componentLocale.tabAdvanced.tabTitle }, h("div", { class: "knowledge-base-storage" }, h("div", { class: "knowledge-base-storage__col-left" }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.serverName.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.serverNames), placeholder: this.serverNames.length === 0
           ? this._componentLocale.tabAdvanced.serverName
             .disabledPlaceholder
           : "", disabled: this.serverNames.length === 0, ref: (el) => (this.serverNameEl = el), class: "server-name-combo-box", part: "server-name", onValueChanged: this.evaluateCreateDataInKbDisabled }, renderFormItems("gxg-combo-box-item", this.serverNames, "server-name")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/search", class: "server-name-button", part: "search-server-name" }), h("gxg-form-text", { labelPosition: "above", label: this._componentLocale.tabAdvanced.databaseName.label, placeholder: "MyDatabase", ref: (el) => (this.databaseNameEl = el), value: this.databaseName, class: "database-name", part: "database-name" }), h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.collation.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.collations), ref: (el) => (this.collationEl = el), placeholder: this.collations.length === 0
           ? this._componentLocale.tabAdvanced.collation
             .disabledPlaceholder
           : "", disabled: this.serverNames.length === 0, class: "collation-combo-box", part: "collation" }, renderFormItems("gxg-combo-box-item", this.collations, "collation")), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", class: "collation-button", part: "reset-collation" }), h("gxg-form-checkbox", { label: this._componentLocale.tabAdvanced.createDataFilesInKbFolder, ref: (el) => (this.createDataFilesInKBFolderEl =
-          el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" }))), h("gx-ide-container", { noHeadingBorder: true }, h("div", { class: {
-          "grid": true,
+          el), alignTop: true, checked: this.createDataFilesInKBFolder, disabled: this.createDataInKbDisabled, class: "create-data-in-kb", part: "create-data-in-kb" })), h("div", { class: {
           "knowledge-base-storage__col-right": true,
           "knowledge-base-storage__col-right--windows-authentication": !this.userNameVisible
         } }, h("gxg-combo-box", { label: this._componentLocale.tabAdvanced.authenticationType.label, disableFilter: true, toolTip: config.tooltip, value: getSelectedGxOption(this.authenticationTypes), ref: (el) => (this.authenticationTypeEl = el), placeholder: this.authenticationTypes.length === 0
@@ -235,17 +234,17 @@ export class GxIdeNewKb {
    *  11.RENDER() FUNCTION
    ********************************/
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", null, h("header", { class: {
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true }, h("header", { class: {
         "header": true,
         "grid": true,
         "header--is-advanced": this.isAdvanced
-      } }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, toolTip: config.tooltip, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), this.isAdvanced
+      }, slot: "header" }, h("gxg-label", { labelPosition: "start", class: "kb-label", noMargin: true }, this._componentLocale.header.kbName), h("gxg-form-text", { labelPosition: "start", placeholder: "SalesInventory", "max-width": "100%", value: this.kbName, toolTip: config.tooltip, ref: (el) => (this.kbNameEl = el), part: "kb-name", class: "kb-input" }), this.isAdvanced
       ? [
         h("gxg-label", { labelPosition: "start", class: "location-label" }, this._componentLocale.header.kbLocation),
         h("gxg-form-text", { labelPosition: "start", placeholder: "C:\\Models", maxWidth: "100%", value: this.kbLocation, ref: (el) => (this.locationEl = el), disabled: !this.isAdvanced, part: "kb-location", class: "location-input" }),
         h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/folder", onClick: this.selectLocationHandler, part: "button-select-location", class: "location-icon" })
       ]
-      : null)), h("main", { class: "gxi-full-height gxi-overflow-auto" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), h("gx-ide-container", { displayBorderTop: true }, h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
+      : null), h("main", { class: "gxi-full-height gxi-overflow-auto" }, h("gxg-tabs", { class: "gxg-tabs" }, h("gxg-tab-bar", { slot: "tab-bar-container", part: "tab-bar", displayBorder: true }, h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabBasic.tabLabel, tab: "basic", "is-selected": true, hidden: !this.isAdvanced, part: "tab-button-basic" }), h("gxg-tab-button", { slot: "tab-bar", tabLabel: this._componentLocale.tabAdvanced.tabLabel, tab: "advanced", hidden: !this.isAdvanced, part: "tab-button-advanced" })), this.renderTabBasic(), this.renderTabAdvanced())), h("gxg-button", { id: "button-create", type: "primary-text-only", onClick: this.createKbHandler, part: "button-create", slot: "footer-end" }, this._componentLocale.footer.btnCreate), h("gxg-button", { id: "button-cancel", type: "outlined", onClick: this.cancelKbHandler, part: "button-cancel", slot: "footer-end" }, this._componentLocale.footer.btnCancel)))));
   }
   static get is() { return "gx-ide-new-kb"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/references/helpers.js

@@ -28,7 +28,7 @@ export const convertObjectDataToSuggestData = (selectorCategoriesData) => {
 const convertToTreeItem = (item) => {
   var _a;
   return ({
-    caption: item.description,
+    caption: item.name,
     id: item.id,
     items: ((_a = item.items) !== null && _a !== void 0 ? _a : []).map(convertToTreeItem),
     lazy: item.hasChildren && (item.items == null || item.items.length === 0),

package/dist/collection/components/references/references.js

@@ -160,12 +160,12 @@ export class GxIdeReferences {
     return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { displayBorderBottom: true }, h("header", { class: "header" }, h("div", { class: "header__top grid" }, h("gxg-button", { icon: "navigation/arrow-down", type: "secondary-icon-only", class: "hide-bar-button", onClick: this.hideBarButtonClickedHandler, part: "toggle-bar-button" }), h("gxg-label", { labelPosition: "start", class: "suggest-label", part: "select-object-label" }, this._componentLocale.header.selectObject), h("gxg-suggest", null, h("ch-suggest", { value: this.selectedObject.name, onValueChanged: this.selectObjectValueChangedHandler, onSelectionChanged: this.selectObjectSelectionChanged, part: "object-selector-suggest", exportparts: "dropdown:select-object-dropdown" }, renderSuggestLists(this.objectsSuggestions))), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.openSelectorDialogCallbackHandler, class: "selector-dialog-button", part: "open-selector-dialog-button" })), h("div", { class: {
         "header__bottom": true,
         "header__bottom--hidden": this.barHidden
-      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, fullHeight: true, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("div", { class: {
+      } }, h("div", { class: "outer-wrapper" }, h("div", { class: "inner-wrapper" }, h("div", { class: "inner-wrapper__left" }, h("gxg-icon", { type: this.selectedObject.icon, color: "auto" }), h("gxg-text", { padding: "s", type: "text-link", part: "open-object-text-link", onClick: this.openObjectCallbackHandler }, `${this.selectedObject.name} : ${this.selectedObject.description}`)), h("div", { class: "inner-wrapper__right gxi-hidden" }, h("gxg-form-checkbox", { id: "references-by-type", label: "Group references by type", required: true, "display-validation-styles": true, part: "references-type-checkbox" }))))))), h("main", { class: "main grid gxi-full-height gxi-overflow-auto" }, h("gx-ide-container", { containerTitle: this._componentLocale.main.isReferencedBy, class: "gxi-overflow-auto", part: "referenced-by-container" }, h("div", { class: {
         "reference-container": true,
         "reference-container--no-references": !((_a = this.referencedByTreeData) === null || _a === void 0 ? void 0 : _a.length)
       } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_b = this.referencedByTreeData) === null || _b === void 0 ? void 0 : _b.length) }, part: "referenced-by-tree", treeModel: this.referencedByTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("referenced-by"), onSelectedItemsChange: this.referenceSelectedHandler, dragDisabled: true, dropDisabled: true }), !((_c = this.referencedByTreeData) === null || _c === void 0 ? void 0 : _c.length) && (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "referenced-by-text" }, ((_d = this.referencedByTreeData) === null || _d === void 0 ? void 0 : _d.length) === 0
       ? this._componentLocale.main.isReferencedByEmpty
-      : this._componentLocale.main.isReferencedByError)))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, fullHeight: true, class: "gxi-overflow-auto", part: "references-to-container" }, h("div", { class: {
+      : this._componentLocale.main.isReferencedByError)))), h("gx-ide-container", { containerTitle: this._componentLocale.main.hasReferencesTo, class: "gxi-overflow-auto", part: "references-to-container" }, h("div", { class: {
         "reference-container": true,
         "reference-container--no-references": !((_e = this.referencesToTreeData) === null || _e === void 0 ? void 0 : _e.length)
       } }, h("gxg-tree-view", { class: { "gxi-hidden": !((_f = this.referencesToTreeData) === null || _f === void 0 ? void 0 : _f.length) }, part: "referenced-to-tree", treeModel: this.referencesToTreeData, lazyLoadTreeItemsCallback: this.referencesLazyLoadCallbackHandler("references-to"), onSelectedItemsChange: this.referenceSelectedHandler }), !((_g = this.referencesToTreeData) === null || _g === void 0 ? void 0 : _g.length) && (h("gxg-text", { textAlign: config.gxgMessage.common.textAlign, padding: config.gxgMessage.common.textAlign, type: config.gxgMessage.common.type, maxWidth: config.gxgMessage.common.maxWidth, part: "references-to-text" }, ((_h = this.referencesToTreeData) === null || _h === void 0 ? void 0 : _h.length) === 0

package/dist/collection/components/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;
+}