@genexus/genexus-ide-ui 0.0.115 → 0.0.117

package/dist/collection/components/bpm/assign-roles/assign-roles.js

@@ -0,0 +1,265 @@
+/* STENCIL IMPORTS */
+import { Host, h } from "@stencil/core";
+/* OTHER LIBRARIES IMPORTS */
+/* CUSTOM IMPORTS */
+import { Locale } from "../../../common/locale";
+import { config } from "../../../common/config";
+export class GxIdeBpmAssignRoles {
+    constructor() {
+        this.renderedFirstTime = false;
+        // 7.LISTENERS //
+        // 8.PUBLIC METHODS API //
+        // 9.LOCAL METHODS //
+        this.confirmCallbackHandler = () => {
+            this.confirmCallback(this.assignedRolesState);
+        };
+        this.cancelCallbackHandler = () => {
+            this.cancelCallback();
+        };
+        this.handleAssignedCheckedChange = (e) => {
+            this.assignedSelected = e.detail[0] && e.detail[0].checked === true;
+        };
+        this.handleUnassignedCheckedChange = (e) => {
+            this.unassignedSelected = e.detail[0] && e.detail[0].checked === true;
+        };
+        this.handleUnassignedInput = (e) => {
+            this.filterUnassignedInput = e.detail;
+        };
+        this.handleAssignedInput = (e) => {
+            this.filterAssignedInput = e.detail;
+        };
+        this.getCheckedItems = (listBox) => {
+            const checkedItems = [];
+            const listBoxItems = listBox.querySelectorAll("gxg-list-box-item");
+            listBoxItems.forEach((item) => {
+                if (item.checked) {
+                    checkedItems.push(item.value);
+                }
+            });
+            return checkedItems;
+        };
+        this.addAll = () => {
+            this.assignedRolesState = [
+                ...this.assignedRolesState,
+                ...this.unassignedRolesState
+            ];
+            this.unassignedRolesState = [];
+        };
+        this.addSelectedRoles = () => {
+            const checkedItems = this.getCheckedItems(this.unassignedRolesEL);
+            if (checkedItems.length) {
+                this.unassignedRolesState = this.unassignedRolesState.filter(role => !checkedItems.includes(role));
+                this.assignedRolesState = [...this.assignedRolesState, ...checkedItems];
+                this.unassignedSelected = false;
+            }
+        };
+        this.removeAll = () => {
+            this.unassignedRolesState = [
+                ...this.unassignedRolesState,
+                ...this.assignedRolesState
+            ];
+            this.assignedRolesState = [];
+        };
+        this.removeSelectedRoles = () => {
+            const checkedItems = this.getCheckedItems(this.assignedRolesEl);
+            if (checkedItems.length) {
+                this.assignedRolesState = this.assignedRolesState.filter(role => {
+                    return !checkedItems.includes(role);
+                });
+                this.unassignedRolesState = [
+                    ...this.unassignedRolesState,
+                    ...checkedItems
+                ];
+                this.assignedSelected = false;
+            }
+        };
+        this.renderRolesToAdd = () => {
+            return (h("div", { class: "roles__list" }, h("gxg-list-box", { checkboxes: true, disabled: false, part: "add-roles-selection", onCheckedChanged: this.handleUnassignedCheckedChange, ref: (el) => (this.unassignedRolesEL = el), noBorder: true, borderBottom: true, borderStart: true, borderEnd: true }, this.unassignedRolesState
+                .filter(role => this.filterUnassignedInput.toLowerCase() === "" ||
+                role
+                    .toLowerCase()
+                    .includes(this.filterUnassignedInput.toLowerCase()))
+                .map(role => (h("gxg-list-box-item", { value: role, checkbox: true, key: `${role}-${this.assignedRolesState.includes(role)
+                    ? "assigned"
+                    : "unassigned"}` }, role))))));
+        };
+        this.renderRolesToRemove = () => {
+            return (h("div", { class: "roles__list" }, h("gxg-list-box", { checkboxes: true, disabled: false, part: "remove-roles-selection", onCheckedChanged: this.handleAssignedCheckedChange, ref: (el) => (this.assignedRolesEl = el), noBorder: true, borderBottom: true, borderStart: true, borderEnd: true }, this.assignedRolesState
+                .filter(role => this.filterAssignedInput.toLowerCase() === "" ||
+                role
+                    .toLowerCase()
+                    .includes(this.filterAssignedInput.toLowerCase()))
+                .map(role => (h("gxg-list-box-item", { value: role, checkbox: true, key: `${role}-${this.assignedRolesState.includes(role)
+                    ? "assigned"
+                    : "unassigned"}` }, role))))));
+        };
+        this.unassignedRolesState = [];
+        this.assignedRolesState = [];
+        this.filterUnassignedInput = "";
+        this.filterAssignedInput = "";
+        this.unassignedSelected = false;
+        this.assignedSelected = false;
+        this.displayTitle = false;
+        this.roles = undefined;
+        this.assignedRoles = undefined;
+        this.confirmCallback = undefined;
+        this.cancelCallback = undefined;
+    }
+    // 6.COMPONENT LIFECYCLE METHODS //
+    async componentWillLoad() {
+        this._componentLocale = await Locale.getComponentStrings(this.el);
+        this.unassignedRolesState = this.roles.filter(role => !this.assignedRoles.includes(role));
+        this.assignedRolesState = this.assignedRoles;
+    }
+    componentDidRender() {
+        if (!this.renderedFirstTime) {
+            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+            this.renderedFirstTime = true;
+        }
+    }
+    // 10.RENDER() FUNCTION //
+    render() {
+        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noAboveFooterPadding: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "roles__container" }, h("section", { class: "roles__role" }, h("header", { class: "roles__list-header" }, h("gxg-form-text", { label: this._componentLocale.main.assignRoles.searchRoles, placeholder: this._componentLocale.main.assignRoles.placeholder, labelPosition: "above", clearButton: true, part: "add-roles-filter", class: { "add-roles-filter": true }, onInput: this.handleUnassignedInput }), h("div", { class: "roles__list-title" }, h("gxg-title", { type: "title-04" }, this._componentLocale.main.assignRoles.title), h("gxg-icon", { type: "navigation/chevron-right", color: "mercury-neutral" }))), this.renderRolesToAdd()), h("section", { class: "roles__role" }, h("header", { class: "roles__list-header" }, h("gxg-form-text", { label: this._componentLocale.main.removeRoles.searchRoles, placeholder: this._componentLocale.main.removeRoles.placeholder, labelPosition: "above", clearButton: true, part: "remove-roles-filter", class: { "remove-roles-filter": true }, onInput: this.handleAssignedInput }), h("div", { class: "roles__list-title" }, h("gxg-icon", { type: "navigation/chevron-left", color: "mercury-neutral" }), h("gxg-title", { type: "title-04" }, this._componentLocale.main.removeRoles.title))), this.renderRolesToRemove())), h("footer", { class: "add-remove-buttons", slot: "footer-above" }, h("footer", { class: "add-remove-buttons__add" }, h("gxg-button", { id: "add-all", part: "add-all-roles-btn", onClick: this.addAll, disabled: this.unassignedRolesState.length === 0, type: "secondary-text-only" }, this._componentLocale.main.assignRoles.addAllButton), h("gxg-button", { id: "add-selected", part: "add-selected-roles-btn", onClick: this.addSelectedRoles, disabled: !this.unassignedSelected ||
+                !this.unassignedRolesState.length, type: "secondary-text-only" }, this._componentLocale.main.assignRoles.addSelectedButton)), h("footer", { class: "add-remove-buttons__remove" }, h("gxg-button", { id: "add-all", part: "remove-all-roles-btn", onClick: this.removeAll, disabled: this.assignedRolesState.length === 0, type: "secondary-text-only" }, this._componentLocale.main.removeRoles.removeAllButton), h("gxg-button", { id: "add-selected", part: "remove-selected-roles-btn", onClick: this.removeSelectedRoles, disabled: !this.assignedSelected || !this.assignedRolesState.length, type: "secondary-text-only" }, this._componentLocale.main.removeRoles.removeSelectedButton))), h("gxg-button", { type: "outlined", slot: "footer-end", onClick: this.cancelCallbackHandler }, this._componentLocale.footer.cancelButton), h("gxg-button", { slot: "footer-end", onClick: this.confirmCallbackHandler }, this._componentLocale.footer.confirmButton)))));
+    }
+    static get is() { return "gx-ide-bpm-assign-roles"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["assign-roles.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["assign-roles.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/bpm-assign-roles"]; }
+    static get properties() {
+        return {
+            "displayTitle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "false",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true it displays the component title on the header"
+                },
+                "attribute": "display-title",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "roles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array with all available roles"
+                }
+            },
+            "assignedRoles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array with currently assigned roles"
+                }
+            },
+            "confirmCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfirmCallback",
+                    "resolved": "(assignedRoles: string[]) => Promise<void>",
+                    "references": {
+                        "ConfirmCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/assign-roles/assign-roles.tsx",
+                            "id": "src/components/bpm/assign-roles/assign-roles.tsx::ConfirmCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when user confirms assignation"
+                }
+            },
+            "cancelCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CancelCallback",
+                    "resolved": "() => Promise<void>",
+                    "references": {
+                        "CancelCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/assign-roles/assign-roles.tsx",
+                            "id": "src/components/bpm/assign-roles/assign-roles.tsx::CancelCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when user cancels assignation"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "unassignedRolesState": {},
+            "assignedRolesState": {},
+            "filterUnassignedInput": {},
+            "filterAssignedInput": {},
+            "unassignedSelected": {},
+            "assignedSelected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "componentDidRenderFirstTime",
+                "name": "componentDidRenderFirstTime",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Gets fired when the component has rendered for the first time."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=assign-roles.js.map

package/dist/collection/components/bpm/assign-roles/assign-roles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assign-roles.js","sourceRoot":"","sources":["../../../../src/components/bpm/assign-roles/assign-roles.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../../common/locale\";\nimport { config } from \"../../../common/config\";\n\n@Component({\n  tag: \"gx-ide-bpm-assign-roles\",\n  styleUrl: \"assign-roles.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/bpm-assign-roles\"]\n})\nexport class GxIdeBpmAssignRoles {\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeBpmAssignRolesElement;\n  private unassignedRolesEL: HTMLGxgListBoxElement;\n  private assignedRolesEl: HTMLGxgListBoxElement;\n\n  // 3.STATE() VARIABLES //\n\n  @State() unassignedRolesState: string[] = [];\n  @State() assignedRolesState: string[] = [];\n  @State() filterUnassignedInput = \"\";\n  @State() filterAssignedInput = \"\";\n  @State() unassignedSelected = false;\n  @State() assignedSelected = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * If true it displays the component title on the header\n   */\n  @Prop() readonly displayTitle = false;\n\n  /**\n   * Array with all available roles\n   */\n  @Prop() readonly roles: string[];\n\n  /**\n   * Array with currently assigned roles\n   */\n  @Prop() readonly assignedRoles: string[];\n\n  /**\n   * Callback invoked when user confirms assignation\n   */\n  @Prop() readonly confirmCallback: ConfirmCallback;\n\n  /**\n   * Callback invoked when user cancels assignation\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n    this.unassignedRolesState = this.roles.filter(\n      role => !this.assignedRoles.includes(role)\n    );\n    this.assignedRolesState = this.assignedRoles;\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  private confirmCallbackHandler = () => {\n    this.confirmCallback(this.assignedRolesState);\n  };\n\n  private cancelCallbackHandler = () => {\n    this.cancelCallback();\n  };\n\n  private handleAssignedCheckedChange = (e: any) => {\n    this.assignedSelected = e.detail[0] && e.detail[0].checked === true;\n  };\n\n  private handleUnassignedCheckedChange = (e: any) => {\n    this.unassignedSelected = e.detail[0] && e.detail[0].checked === true;\n  };\n\n  private handleUnassignedInput = (e: any) => {\n    this.filterUnassignedInput = e.detail;\n  };\n\n  private handleAssignedInput = (e: any) => {\n    this.filterAssignedInput = e.detail;\n  };\n  private getCheckedItems = (listBox: any) => {\n    const checkedItems: string[] = [];\n    const listBoxItems = listBox.querySelectorAll(\"gxg-list-box-item\");\n\n    listBoxItems.forEach((item: any) => {\n      if (item.checked) {\n        checkedItems.push(item.value);\n      }\n    });\n\n    return checkedItems;\n  };\n\n  private addAll = () => {\n    this.assignedRolesState = [\n      ...this.assignedRolesState,\n      ...this.unassignedRolesState\n    ];\n    this.unassignedRolesState = [];\n  };\n\n  private addSelectedRoles = () => {\n    const checkedItems = this.getCheckedItems(this.unassignedRolesEL);\n    if (checkedItems.length) {\n      this.unassignedRolesState = this.unassignedRolesState.filter(\n        role => !checkedItems.includes(role)\n      );\n      this.assignedRolesState = [...this.assignedRolesState, ...checkedItems];\n      this.unassignedSelected = false;\n    }\n  };\n\n  private removeAll = () => {\n    this.unassignedRolesState = [\n      ...this.unassignedRolesState,\n      ...this.assignedRolesState\n    ];\n    this.assignedRolesState = [];\n  };\n\n  private removeSelectedRoles = () => {\n    const checkedItems = this.getCheckedItems(this.assignedRolesEl);\n\n    if (checkedItems.length) {\n      this.assignedRolesState = this.assignedRolesState.filter(role => {\n        return !checkedItems.includes(role);\n      });\n      this.unassignedRolesState = [\n        ...this.unassignedRolesState,\n        ...checkedItems\n      ];\n      this.assignedSelected = false;\n    }\n  };\n\n  private renderRolesToAdd = () => {\n    return (\n      <div class=\"roles__list\">\n        <gxg-list-box\n          checkboxes\n          disabled={false}\n          part=\"add-roles-selection\"\n          onCheckedChanged={this.handleUnassignedCheckedChange}\n          ref={(el: HTMLGxgListBoxElement) =>\n            (this.unassignedRolesEL = el as HTMLGxgListBoxElement)\n          }\n          noBorder\n          borderBottom\n          borderStart\n          borderEnd\n        >\n          {this.unassignedRolesState\n            .filter(\n              role =>\n                this.filterUnassignedInput.toLowerCase() === \"\" ||\n                role\n                  .toLowerCase()\n                  .includes(this.filterUnassignedInput.toLowerCase())\n            )\n            .map(role => (\n              <gxg-list-box-item\n                value={role}\n                checkbox\n                key={`${role}-${\n                  this.assignedRolesState.includes(role)\n                    ? \"assigned\"\n                    : \"unassigned\"\n                }`}\n              >\n                {role}\n              </gxg-list-box-item>\n            ))}\n        </gxg-list-box>\n      </div>\n    );\n  };\n  private renderRolesToRemove = () => {\n    return (\n      <div class=\"roles__list\">\n        <gxg-list-box\n          checkboxes\n          disabled={false}\n          part=\"remove-roles-selection\"\n          onCheckedChanged={this.handleAssignedCheckedChange}\n          ref={(el: HTMLGxgListBoxElement) =>\n            (this.assignedRolesEl = el as HTMLGxgListBoxElement)\n          }\n          noBorder\n          borderBottom\n          borderStart\n          borderEnd\n        >\n          {this.assignedRolesState\n            .filter(\n              role =>\n                this.filterAssignedInput.toLowerCase() === \"\" ||\n                role\n                  .toLowerCase()\n                  .includes(this.filterAssignedInput.toLowerCase())\n            )\n            .map(role => (\n              <gxg-list-box-item\n                value={role}\n                checkbox\n                key={`${role}-${\n                  this.assignedRolesState.includes(role)\n                    ? \"assigned\"\n                    : \"unassigned\"\n                }`}\n              >\n                {role}\n              </gxg-list-box-item>\n            ))}\n        </gxg-list-box>\n      </div>\n    );\n  };\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host class=\"gx-ide-component\">\n        <div class=\"gx-ide-main-wrapper\">\n          <gx-ide-container\n            noAboveFooterPadding\n            containerTitle={\n              this.displayTitle ? this._componentLocale.componentName : null\n            }\n            slimmerFooter={config.gxIdeContainer.slimmerFooter}\n          >\n            <div class=\"roles__container\">\n              {/* add roles section */}\n              <section class=\"roles__role\">\n                {/* roles to add listbox*/}\n                <header class=\"roles__list-header\">\n                  {/* roles to add filter*/}\n                  <gxg-form-text\n                    label={this._componentLocale.main.assignRoles.searchRoles}\n                    placeholder={\n                      this._componentLocale.main.assignRoles.placeholder\n                    }\n                    labelPosition=\"above\"\n                    clearButton\n                    part=\"add-roles-filter\"\n                    class={{ \"add-roles-filter\": true }}\n                    onInput={this.handleUnassignedInput}\n                  ></gxg-form-text>\n                  <div class=\"roles__list-title\">\n                    <gxg-title type=\"title-04\">\n                      {this._componentLocale.main.assignRoles.title}\n                    </gxg-title>\n                    <gxg-icon\n                      type=\"navigation/chevron-right\"\n                      color=\"mercury-neutral\"\n                    ></gxg-icon>\n                  </div>\n                </header>\n                {this.renderRolesToAdd()}\n              </section>\n\n              {/* remove roles section */}\n              <section class=\"roles__role\">\n                <header class=\"roles__list-header\">\n                  {/* roles to remove filter*/}\n                  <gxg-form-text\n                    label={this._componentLocale.main.removeRoles.searchRoles}\n                    placeholder={\n                      this._componentLocale.main.removeRoles.placeholder\n                    }\n                    labelPosition=\"above\"\n                    clearButton\n                    part=\"remove-roles-filter\"\n                    class={{ \"remove-roles-filter\": true }}\n                    onInput={this.handleAssignedInput}\n                  ></gxg-form-text>\n                  <div class=\"roles__list-title\">\n                    <gxg-icon\n                      type=\"navigation/chevron-left\"\n                      color=\"mercury-neutral\"\n                    ></gxg-icon>\n                    <gxg-title type=\"title-04\">\n                      {this._componentLocale.main.removeRoles.title}\n                    </gxg-title>\n                  </div>\n                </header>\n                {/* roles to remove listbox*/}\n                {this.renderRolesToRemove()}\n              </section>\n            </div>\n\n            <footer class=\"add-remove-buttons\" slot=\"footer-above\">\n              <footer class=\"add-remove-buttons__add\">\n                <gxg-button\n                  id=\"add-all\"\n                  part=\"add-all-roles-btn\"\n                  onClick={this.addAll}\n                  disabled={this.unassignedRolesState.length === 0}\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.assignRoles.addAllButton}\n                </gxg-button>\n                <gxg-button\n                  id=\"add-selected\"\n                  part=\"add-selected-roles-btn\"\n                  onClick={this.addSelectedRoles}\n                  disabled={\n                    !this.unassignedSelected ||\n                    !this.unassignedRolesState.length\n                  }\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.assignRoles.addSelectedButton}\n                </gxg-button>\n              </footer>\n              <footer class=\"add-remove-buttons__remove\">\n                <gxg-button\n                  id=\"add-all\"\n                  part=\"remove-all-roles-btn\"\n                  onClick={this.removeAll}\n                  disabled={this.assignedRolesState.length === 0}\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.removeRoles.removeAllButton}\n                </gxg-button>\n                <gxg-button\n                  id=\"add-selected\"\n                  part=\"remove-selected-roles-btn\"\n                  onClick={this.removeSelectedRoles}\n                  disabled={\n                    !this.assignedSelected || !this.assignedRolesState.length\n                  }\n                  type=\"secondary-text-only\"\n                >\n                  {this._componentLocale.main.removeRoles.removeSelectedButton}\n                </gxg-button>\n              </footer>\n            </footer>\n\n            {/* cancel button*/}\n            <gxg-button\n              type=\"outlined\"\n              slot=\"footer-end\"\n              onClick={this.cancelCallbackHandler}\n            >\n              {this._componentLocale.footer.cancelButton}\n            </gxg-button>\n            {/* apply button*/}\n            <gxg-button slot=\"footer-end\" onClick={this.confirmCallbackHandler}>\n              {this._componentLocale.footer.confirmButton}\n            </gxg-button>\n          </gx-ide-container>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type ConfirmCallback = (assignedRoles: string[]) => Promise<void>;\n\nexport type CancelCallback = () => Promise<void>;\n"]}

package/dist/collection/components/bpm/assign-roles/gx-ide-assets/bpm-assign-roles/langs/bpm-assign-roles.lang.en.json

@@ -0,0 +1,24 @@
+{
+  "componentName": "Assign Roles",
+  "header": {},
+  "main": {
+    "assignRoles": {
+      "title": "Assign Roles",
+      "searchRoles": "Search Roles to Add:",
+      "placeholder": "Type to filter by role",
+      "addAllButton": "Add All",
+      "addSelectedButton": "Add Selected"
+    },
+    "removeRoles": {
+      "title": "Remove Roles",
+      "searchRoles": "Search Roles to Remove:",
+      "placeholder": "Type to filter by role",
+      "removeAllButton": "Remove All",
+      "removeSelectedButton": "Remove Selected"
+    }
+  },
+  "footer": {
+    "confirmButton": "Apply",
+    "cancelButton": "Cancel"
+  }
+}

package/dist/collection/components/bpm/assign-roles/gx-ide-assets/bpm-assign-roles/langs/bpm-assign-roles.lang.ja.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "「こんにちは、私の名前は {0} です。オレゴンに住んでいます。」"
+}

package/dist/collection/components/bpm/assign-roles/gx-ide-assets/bpm-assign-roles/langs/bpm-assign-roles.lang.zh.json

@@ -0,0 +1,3 @@
+{
+  "presentation": "你好，我的名字是 {0}，我住在俄勒冈州。"
+}

package/dist/collection/components/modules/manage-module-references/manage-module-references.css

@@ -599,6 +599,10 @@ ch-grid-row[selected] gxg-icon[data-action=mercury-primary-disabled] {
   flex-direction: column;
   gap: var(--mer-spacing--xs);
 }
+.modules__server-commands {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
 .modules__combo {
   display: flex;
   flex-direction: row;

package/dist/collection/components/modules/manage-module-references/manage-module-references.js

@@ -52,10 +52,10 @@ export class GxManageModuleReferences {
         /**
          * Change the server selected value in response to callbackServerSelected callback
          */
-        this.serverSelectedCallbackHandler = async (id) => {
+        this.serverSelectedCallbackHandler = async (id, reload) => {
             if (this.serverSelectedCallback) {
                 this.loadingServer = true;
-                const resolvedObjects = await this.serverSelectedCallback(id);
+                const resolvedObjects = await this.serverSelectedCallback(id, reload);
                 this.selectedServerId = id;
                 this.modulesAll = [...resolvedObjects];
                 this.filterModulesByType("browse");
@@ -76,6 +76,9 @@ export class GxManageModuleReferences {
                 this.filteredModules = this.modulesAll;
             }
         };
+        this.handleFilterChangeHandler = (e) => {
+            return this.handleFilterChange(e);
+        };
         /**
          * Perform an action relative to a module using callbackExecuteAction callback and receive the state of that action with onProgress callback
          */
@@ -84,7 +87,7 @@ export class GxManageModuleReferences {
                 const moduleSelectedVersionId = this.modulesSelectedVersion.get(module.id);
                 const actionCompleted = await this.executeActionCallback(this.selectedServerId, module.id, moduleSelectedVersionId, this.getActionFromCurrentModuleVersion(), this.onProgress);
                 if (actionCompleted) {
-                    this.serverSelectedCallbackHandler(this.selectedServerId);
+                    this.serverSelectedCallbackHandler(this.selectedServerId, true);
                 }
                 this.actionCompleted = actionCompleted;
             }
@@ -129,14 +132,15 @@ export class GxManageModuleReferences {
             }
             return selectedVersionData;
         };
+        this.moduleActionHandler = () => {
+            this.actionCompleted = false;
+            this.closeProgressBar = false;
+            this.executeActionCallbackHandler(module);
+        };
         this.renderModulesGrid = () => {
             return (h("gxg-grid", { noBorder: true, fullHeight: true }, h("ch-grid", { rowSelectionMode: "single", part: "ch-grid-pending-commits", class: "servers-detail no-border", onSelectionChanged: this.handleModuleChange }, h("ch-grid-columnset", null, h("ch-grid-column", { settingable: false, size: "min-content" }), h("ch-grid-column", { settingable: false }), h("ch-grid-column", { settingable: false, size: "min-content" })), this.filteredModules.map((module) => (h("ch-grid-row", { rowid: module.id, key: module.id, selected: this.selectedModule && this.selectedModule.id === module.id }, h("ch-grid-cell", null, h("gxg-icon", { type: "objects/module", "data-action": this.moduleVersionIconColor(module), color: this.moduleVersionIconColor(module), size: "small" })), h("ch-grid-cell", { class: "grid-cell-module__info" }, h("span", { class: "grid-cell-module__name" }, this.getModuleData(module, "name")), h("span", { class: "grid-cell-module__description" }, this.getModuleData(module, "description"))), h("ch-grid-cell", null, this.selectedModule && this.selectedModule.id === module.id ? (h("gxg-button", { disabled: !this.actionCompleted ||
                     this.getModuleData(module, "action") === "incompatible" ||
-                    this.getModuleData(module, "action") === "not-installable", fit: true, part: "module-action", onClick: () => {
-                    this.actionCompleted = false;
-                    this.closeProgressBar = false;
-                    this.executeActionCallbackHandler(module);
-                } }, this.getActionFromCurrentModuleVersion())) : null)))))));
+                    this.getModuleData(module, "action") === "not-installable", fit: true, part: "module-action", onClick: this.moduleActionHandler }, this.getActionFromCurrentModuleVersion())) : null)))))));
         };
         this.renderEmptyStateModules = () => {
             return (h("gx-ide-empty-state", { stateIcon: "mercury/filters", stateTitle: this._componentLocale.modules.noModulesFilter }));
@@ -167,16 +171,12 @@ export class GxManageModuleReferences {
             const action = this.getActionFromCurrentModuleVersion();
             let actionDescription;
             let cssClass = "module-info__action-container";
-            if (action === "restore" || action === "update") {
-                actionDescription = `${this._componentLocale.modulesInformation.moduleProperties.installed}: ${this.selectedModule.currentVersion}`;
-                cssClass += ` module-info__action-container--installed`;
-            }
-            else if (action === "incompatible" || action === "not-installable") {
+            if (action === "incompatible" || action === "not-installable") {
                 actionDescription = "Can not be installed";
             }
             else {
-                actionDescription =
-                    this._componentLocale.modulesInformation.moduleProperties.notInstalled;
+                cssClass += ` module-info__action-container--installed`;
+                actionDescription = `${this._componentLocale.modulesInformation.moduleProperties.installed}: ${this.selectedModule.currentVersion}`;
             }
             return (h("div", { class: cssClass }, h("gxg-text", { part: "module-info__action" }, actionDescription)));
         };
@@ -190,8 +190,8 @@ export class GxManageModuleReferences {
         };
         this.updateSelectedModuleVersion = (versionId) => {
             if (versionId) {
-                this.selectedModule = Object.assign(Object.assign({}, this.selectedModule), { currentVersion: versionId });
                 this.modulesSelectedVersion.set(this.selectedModule.id, versionId);
+                this.reRenderCounter++;
             }
         };
         this.renderModuleVersions = () => {
@@ -204,11 +204,11 @@ export class GxManageModuleReferences {
         };
         this.serverItemSelectedHandler = (e) => {
             const serverId = e.detail.value;
-            this.serverSelectedCallbackHandler(serverId);
+            this.serverSelectedCallbackHandler(serverId, false);
         };
         this.serverValueChangedHandler = (e) => {
             const serverId = e.detail;
-            this.serverSelectedCallbackHandler(serverId);
+            this.serverSelectedCallbackHandler(serverId, false);
         };
         this.progressBarCloseHandler = () => {
             setTimeout(() => {
@@ -220,6 +220,9 @@ export class GxManageModuleReferences {
             }, 400);
             // delay to force the footer line disappear after the top-state-bar has been closed.
         };
+        this.reloadServer = () => {
+            this.serverSelectedCallbackHandler(this.selectedServerId, true);
+        };
         this.modulesAll = [];
         this.filteredModules = [];
         this.selectedModule = undefined;
@@ -235,13 +238,14 @@ export class GxManageModuleReferences {
         this.progressValue = 0;
         this.progressState = "in-progress";
         this.loadingServer = false;
+        this.reRenderCounter = 0;
         this.displayTitle = false;
         this.servers = [];
         this.serverSelectedCallback = undefined;
         this.executeActionCallback = undefined;
         this.addServerCallback = undefined;
         this.serverContextMenuCallback = undefined;
-        this.showServerCommands = true;
+        this.showServerCommands = false;
     }
     modulesAllWatcher(modulesAll) {
         this.updateModulesSelectedVersion(modulesAll);
@@ -265,7 +269,7 @@ export class GxManageModuleReferences {
         this._componentLocale = await Locale.getComponentStrings(this.el);
     }
     async componentDidLoad() {
-        await this.serverSelectedCallbackHandler(this.servers[0].id);
+        await this.serverSelectedCallbackHandler(this.servers[0].id, false);
     }
     // 7.LISTENERS //
     onPropValueChange(newModulesData) {
@@ -282,9 +286,7 @@ export class GxManageModuleReferences {
     render() {
         return (h(Host, { class: {
                 "gx-ide-component": true
-            } }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noAboveFooterPadding: true, noBorderAboveFooter: this.closeProgressBar, part: "servers", containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("main", { class: "main" }, h("div", { class: "modules__container" }, h("header", { class: "modules__header" }, h("div", { class: "modules__combo-container" }, h("gxg-label", null, this._componentLocale.modules.selectServer), h("div", { class: "modules__combo" }, h("gxg-combo-box", { disableFilter: true, onValueChanged: this.serverValueChangedHandler }, this.servers.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: this.serverItemSelectedHandler }, item.name)))), this.showServerCommands ? (h("span", { class: "modules__menu-container" }, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.showModuleMenu }))) : null))), h("div", { class: "modules__main" }, h("div", { class: "modules__main-header" }, h("gxg-form-text", { label: this._componentLocale.modules.searchModules, labelPosition: "above", centerLabel: false, onValueChanged: (event) => {
-                this.handleFilterChange(event.detail);
-            }, disabled: this.loadingServer }), h("gxg-buttons-container", { reduced: true, fullWidth: true, class: "modules__browser", onSelectedButtonChanged: this.selectedButtonChangedHandler }, h("gxg-button", { id: "btn-browse", selected: true, disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer.browse), h("gxg-button", { id: "btn-installed", disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer
+            } }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noAboveFooterPadding: true, noBorderAboveFooter: this.closeProgressBar, part: "servers", containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("main", { class: "main" }, h("div", { class: "modules__container" }, h("header", { class: "modules__header" }, h("div", { class: "modules__combo-container" }, h("gxg-label", null, this._componentLocale.modules.selectServer), h("div", { class: "modules__combo" }, h("gxg-combo-box", { disableFilter: true, onValueChanged: this.serverValueChangedHandler }, this.servers.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: this.serverItemSelectedHandler }, item.name)))), this.showServerCommands ? (h("span", { class: "modules__server-commands" }, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.showModuleMenu }), h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", onClick: this.reloadServer }))) : null))), h("div", { class: "modules__main" }, h("div", { class: "modules__main-header" }, h("gxg-form-text", { label: this._componentLocale.modules.searchModules, labelPosition: "above", centerLabel: false, onValueChanged: this.handleFilterChangeHandler, disabled: this.loadingServer }), h("gxg-buttons-container", { reduced: true, fullWidth: true, class: "modules__browser", onSelectedButtonChanged: this.selectedButtonChangedHandler }, h("gxg-button", { id: "btn-browse", selected: true, disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer.browse), h("gxg-button", { id: "btn-installed", disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer
             .installed), h("gxg-button", { id: "btn-updates", disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer.updates))), h("div", { class: "grid-container", ref: el => (this.serversDetail = el) }, this.filteredModules.length > 0
             ? this.renderModulesGrid()
             : this.renderEmptyStateModules()))), this.selectedModule ? (h("div", { class: "module-info" }, h("header", { class: "module-info__header" }, this.renderModuleName(), this.renderModuleAlertMessage(), this.renderModuleAction(), this.renderModuleVersions()), h("div", { class: "module-info__properties gxg-scrollbar" }, renderModuleDataProperties(this.getModuleData(this.selectedModule, "properties"))))) : (h("gx-ide-empty-state", { class: "recent-objects__empty-state", stateIcon: "objects/module", stateTitle: this._componentLocale.modulesInformation.emptyState.title, stateDescription: this._componentLocale.modulesInformation.emptyState
@@ -351,7 +353,7 @@ export class GxManageModuleReferences {
                 "mutable": false,
                 "complexType": {
                     "original": "ServerSelectedCallback",
-                    "resolved": "(id: string) => Promise<ModuleData[]>",
+                    "resolved": "(id: string, reload: boolean) => Promise<ModuleData[]>",
                     "references": {
                         "ServerSelectedCallback": {
                             "location": "local",
@@ -446,7 +448,7 @@ export class GxManageModuleReferences {
                 },
                 "attribute": "show-server-commands",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             }
         };
     }
@@ -462,7 +464,8 @@ export class GxManageModuleReferences {
             "closeProgressBar": {},
             "progressValue": {},
             "progressState": {},
-            "loadingServer": {}
+            "loadingServer": {},
+            "reRenderCounter": {}
         };
     }
     static get events() {