@genexus/genexus-ide-ui 1.1.6 → 1.1.7

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

@@ -1,3 +1,10 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m")
         throw new TypeError("Private method is not writable");
@@ -7,16 +14,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f)
-        throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-        throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _GxIdeNewVersion_componentLocale, _GxIdeNewVersion_handleCheckBoxValueChange, _GxIdeNewVersion_handleNameValueChange, _GxIdeNewVersion_handleDescriptionValueChange, _GxIdeNewVersion_cancelClickHandler, _GxIdeNewVersion_createClickHandler;
-import { Host, h } from "@stencil/core";
+var _GxIdeNewVersion_componentLocale, _GxIdeNewVersion_versionNameEl, _GxIdeNewVersion_handleCheckBoxValueChange, _GxIdeNewVersion_handleNameValueChange, _GxIdeNewVersion_handleDescriptionValueChange, _GxIdeNewVersion_cancelClickHandler, _GxIdeNewVersion_createClickHandler, _GxIdeNewVersion_initializeValidatableControls, _GxIdeNewVersion_evaluateTooltipRender;
+import { h, Host } from "@stencil/core";
 import { Locale } from "../../common/locale";
+import { validateControls } from "../../common/form-validation";
+import { config } from "../../common/config";
 const CSS_BUNDLES = [
     "resets/box-sizing",
     "utils/form",
@@ -25,11 +27,14 @@ const CSS_BUNDLES = [
     "chameleon/scrollbar",
     "components/checkbox",
     "components/button",
-    "components/edit"
+    "components/edit",
+    "components/tooltip"
 ];
 // ch-checkbox
 const CHECKED_VALUE = "on";
 const SET_NEW_VERSION_AS_ACTIVE_ID = "set-new-version-as-active";
+const CREATE_LINKED_LOCAL_VERSION_ID = "create-linked-local-version";
+const CREATE_AS_PROTECTED_VERSION_ID = "create-as-protected-version";
 export class GxIdeNewVersion {
     constructor() {
         /**
@@ -37,11 +42,18 @@ export class GxIdeNewVersion {
          */
         // eslint-disable-next-line @stencil-community/own-props-must-be-private
         _GxIdeNewVersion_componentLocale.set(this, void 0);
+        _GxIdeNewVersion_versionNameEl.set(this, void 0);
         _GxIdeNewVersion_handleCheckBoxValueChange.set(this, (event) => {
             const target = event.target;
             if (target.id === SET_NEW_VERSION_AS_ACTIVE_ID) {
                 this.setNewVersionAsActive = event.detail === CHECKED_VALUE;
             }
+            else if (target.id === CREATE_LINKED_LOCAL_VERSION_ID) {
+                this.createLinkedLocalVersion = event.detail === CHECKED_VALUE;
+            }
+            else if (target.id === CREATE_AS_PROTECTED_VERSION_ID) {
+                this.createAsProtectedVersion = event.detail === CHECKED_VALUE;
+            }
         });
         _GxIdeNewVersion_handleNameValueChange.set(this, (event) => {
             this.versionName = event.detail;
@@ -56,13 +68,42 @@ export class GxIdeNewVersion {
             const newVersionData = {
                 versionName: this.versionName,
                 versionDescription: this.versionDescription,
-                setNewVersionAsActive: this.setNewVersionAsActive
+                setNewVersionAsActive: this.setNewVersionAsActive,
+                createLocalLinkedVersion: this.createLinkedLocalVersion,
+                createProtectedVersion: this.createAsProtectedVersion
             };
-            this.createCallback(newVersionData);
+            const formSubmitResult = await this.createCallback(newVersionData);
+            this.validatableControls = validateControls(formSubmitResult, this.validatableControls);
+        });
+        _GxIdeNewVersion_initializeValidatableControls.set(this, () => {
+            // populate validatableControls with the controls that could have errors.
+            const validatableControls = [__classPrivateFieldGet(this, _GxIdeNewVersion_versionNameEl, "f")];
+            validatableControls.forEach(validatableControl => {
+                if (validatableControl.id) {
+                    this.validatableControls.set(validatableControl.id, {
+                        reference: validatableControl,
+                        hasError: false,
+                        message: undefined
+                    });
+                }
+            });
+        });
+        // TODO: evaluate if this should be a global helper function.
+        // It is used on other dialogs as well.
+        _GxIdeNewVersion_evaluateTooltipRender.set(this, (controlReference) => {
+            var _a, _b, _c;
+            return ((_b = (_a = this.validatableControls) === null || _a === void 0 ? void 0 : _a.get(controlReference === null || controlReference === void 0 ? void 0 : controlReference.id)) === null || _b === void 0 ? void 0 : _b.hasError) &&
+                ((_c = this.validatableControls.get(controlReference.id)) === null || _c === void 0 ? void 0 : _c.message) && (h("ch-tooltip", { class: "tooltip", actionElement: controlReference, blockAlign: config.tooltipSettings.blockAlign, inlineAlign: config.tooltipSettings.inlineAlign, delay: config.tooltipSettings.delay }, this.validatableControls.get(controlReference.id).message));
         });
         this.versionName = undefined;
         this.versionDescription = undefined;
         this.setNewVersionAsActive = false;
+        this.createLinkedLocalVersion = false;
+        this.createAsProtectedVersion = false;
+        this.validatableControls = new Map();
+        this.isRemoteOperation = false;
+        this.isFreezeOperation = false;
+        this.showLinkedLocalVersionCheckbox = false;
         this.cancelCallback = undefined;
         this.createCallback = undefined;
         this.defaultInputValues = undefined;
@@ -75,9 +116,12 @@ export class GxIdeNewVersion {
         __classPrivateFieldSet(this, _GxIdeNewVersion_componentLocale, await Locale.getComponentStrings(this.el), "f");
         this.defaultInputValuesChanged(this.defaultInputValues);
     }
+    componentDidLoad() {
+        __classPrivateFieldGet(this, _GxIdeNewVersion_initializeValidatableControls, "f").call(this);
+    }
     render() {
         const createButtonDisabled = !this.versionName || this.versionName.length === 0;
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("div", { class: "main scrollable field-group spacing-body" }, h("div", { class: "field field-block" }, h("label", { class: "label", htmlFor: "version-name" }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.name), h("ch-edit", { type: "text", id: "version-name", class: "input", placeholder: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").placeHolders.name, value: this.versionName, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleNameValueChange, "f") })), h("div", { class: "field field-block" }, h("label", { class: "label", htmlFor: "version-description" }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.description), h("ch-edit", { type: "text", id: "version-description", class: "input", placeholder: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").placeHolders.description, value: this.versionDescription, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleDescriptionValueChange, "f") })), h("div", { class: "field field-inline" }, h("ch-checkbox", { class: "checkbox", id: "set-new-version-as-active", checkedValue: CHECKED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleCheckBoxValueChange, "f"), caption: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.setActive }))), h("footer", { class: "control-footer-with-border spacing-body" }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-secondary", onClick: __classPrivateFieldGet(this, _GxIdeNewVersion_cancelClickHandler, "f") }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").buttons.cancel), h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeNewVersion_createClickHandler, "f"), disabled: createButtonDisabled }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").buttons.create))))));
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, h("div", { class: "main scrollable field-group spacing-body" }, h("div", { class: "field field-block" }, h("label", { class: "label", htmlFor: "version-name" }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.name), h("ch-edit", { type: "text", id: "version-name", class: "input", placeholder: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").placeHolders.name, value: this.versionName, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleNameValueChange, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewVersion_versionNameEl, el, "f")) }), __classPrivateFieldGet(this, _GxIdeNewVersion_evaluateTooltipRender, "f").call(this, __classPrivateFieldGet(this, _GxIdeNewVersion_versionNameEl, "f"))), h("div", { class: "field field-block" }, h("label", { class: "label", htmlFor: "version-description" }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.description), h("ch-edit", { type: "text", id: "version-description", class: "input", placeholder: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").placeHolders.description, value: this.versionDescription, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleDescriptionValueChange, "f") })), !this.isRemoteOperation ? (h("div", { class: "field field-inline" }, h("ch-checkbox", { class: "checkbox", id: "set-new-version-as-active", checkedValue: CHECKED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleCheckBoxValueChange, "f"), caption: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.setActive }))) : (h("div", { class: "layout layout--cols-2" }, this.showLinkedLocalVersionCheckbox && (h("div", { class: "layout__panel" }, h("ch-checkbox", { class: "checkbox", id: "create-linked-local-version", checkedValue: CHECKED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleCheckBoxValueChange, "f"), caption: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.createLinkedLocalVersion }))), !this.isFreezeOperation && (h("div", { class: "layout__panel" }, h("ch-checkbox", { class: "checkbox", id: "create-as-protected-version", checkedValue: CHECKED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeNewVersion_handleCheckBoxValueChange, "f"), caption: __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").labels.createAsProtectedVersion })))))), h("footer", { class: "control-footer-with-border spacing-body" }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-secondary", onClick: __classPrivateFieldGet(this, _GxIdeNewVersion_cancelClickHandler, "f") }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").buttons.cancel), h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeNewVersion_createClickHandler, "f"), disabled: createButtonDisabled }, __classPrivateFieldGet(this, _GxIdeNewVersion_componentLocale, "f").buttons.create))))));
     }
     static get is() { return "gx-ide-new-version"; }
     static get encapsulation() { return "shadow"; }
@@ -94,6 +138,60 @@ export class GxIdeNewVersion {
     static get assetsDirs() { return ["gx-ide-assets/new-version"]; }
     static get properties() {
         return {
+            "isRemoteOperation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the component is going to be used to create a new remote version"
+                },
+                "attribute": "is-remote-operation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isFreezeOperation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the component is going to be used to create a new remote frozen version"
+                },
+                "attribute": "is-freeze-operation",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showLinkedLocalVersionCheckbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the component must show the checkbox to create a linked local version"
+                },
+                "attribute": "show-linked-local-version-checkbox",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "cancelCallback": {
                 "type": "unknown",
                 "mutable": false,
@@ -118,8 +216,8 @@ export class GxIdeNewVersion {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "(\n    newVersionData: NewVersionData\n  ) => Promise<void>",
-                    "resolved": "(newVersionData: NewVersionData) => Promise<void>",
+                    "original": "(\n    newVersionData: NewVersionData\n  ) => Promise<FormSubmitResult>",
+                    "resolved": "(newVersionData: NewVersionData) => Promise<FormSubmitResult>",
                     "references": {
                         "NewVersionData": {
                             "location": "local",
@@ -129,6 +227,11 @@ export class GxIdeNewVersion {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "FormSubmitResult": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::FormSubmitResult"
                         }
                     }
                 },
@@ -144,7 +247,7 @@ export class GxIdeNewVersion {
                 "mutable": false,
                 "complexType": {
                     "original": "NewVersionData",
-                    "resolved": "{ versionName: string; versionDescription: string; setNewVersionAsActive?: boolean; }",
+                    "resolved": "{ versionName: string; versionDescription: string; setNewVersionAsActive?: boolean; createLocalLinkedVersion?: boolean; createProtectedVersion?: boolean; }",
                     "references": {
                         "NewVersionData": {
                             "location": "local",
@@ -166,7 +269,10 @@ export class GxIdeNewVersion {
         return {
             "versionName": {},
             "versionDescription": {},
-            "setNewVersionAsActive": {}
+            "setNewVersionAsActive": {},
+            "createLinkedLocalVersion": {},
+            "createAsProtectedVersion": {},
+            "validatableControls": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -177,5 +283,5 @@ export class GxIdeNewVersion {
             }];
     }
 }
-_GxIdeNewVersion_componentLocale = new WeakMap(), _GxIdeNewVersion_handleCheckBoxValueChange = new WeakMap(), _GxIdeNewVersion_handleNameValueChange = new WeakMap(), _GxIdeNewVersion_handleDescriptionValueChange = new WeakMap(), _GxIdeNewVersion_cancelClickHandler = new WeakMap(), _GxIdeNewVersion_createClickHandler = new WeakMap();
+_GxIdeNewVersion_componentLocale = new WeakMap(), _GxIdeNewVersion_versionNameEl = new WeakMap(), _GxIdeNewVersion_handleCheckBoxValueChange = new WeakMap(), _GxIdeNewVersion_handleNameValueChange = new WeakMap(), _GxIdeNewVersion_handleDescriptionValueChange = new WeakMap(), _GxIdeNewVersion_cancelClickHandler = new WeakMap(), _GxIdeNewVersion_createClickHandler = new WeakMap(), _GxIdeNewVersion_initializeValidatableControls = new WeakMap(), _GxIdeNewVersion_evaluateTooltipRender = new WeakMap();
 //# sourceMappingURL=new-version.js.map

package/dist/collection/components/new-version/new-version.js.map

@@ -1 +1 @@
-{"version":3,"file":"new-version.js","sourceRoot":"","sources":["../../../src/components/new-version/new-version.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, Element, State, h, Watch } from \"@stencil/core\";\n\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ChCheckboxCustomEvent } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/form\",\n  \"utils/spacing\",\n  \"utils/layout\",\n  \"chameleon/scrollbar\",\n  \"components/checkbox\",\n  \"components/button\",\n  \"components/edit\"\n];\n\n// ch-checkbox\nconst CHECKED_VALUE = \"on\";\nconst SET_NEW_VERSION_AS_ACTIVE_ID = \"set-new-version-as-active\";\n\n@Component({\n  tag: \"gx-ide-new-version\",\n  styleUrl: \"new-version.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/new-version\"]\n})\nexport class GxIdeNewVersion {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  @Element() el: HTMLGxIdeNewVersionElement;\n\n  /**\n   * The version selected name\n   */\n  @State() versionName: string;\n\n  /**\n   * The version selected description\n   */\n  @State() versionDescription: string;\n\n  /**\n   * Checkbox value to set the new version as active\n   */\n  @State() setNewVersionAsActive: boolean = false;\n\n  /**\n   * Callback that must be invoked when the 'Cancel' button is pressed.\n   */\n  @Prop() readonly cancelCallback: () => Promise<void>;\n\n  /**\n   * Callback that must be invoked when the 'Create' button is pressed.\n   */\n  @Prop() readonly createCallback: (\n    newVersionData: NewVersionData\n  ) => Promise<void>;\n\n  /**\n   * This property is used to set the initial values of the input fields when the component is loaded.\n   */\n  @Prop() readonly defaultInputValues: NewVersionData;\n  @Watch(\"defaultInputValues\")\n  defaultInputValuesChanged(newDefaultInputValues: NewVersionData) {\n    this.versionName = newDefaultInputValues?.versionName;\n    this.versionDescription = newDefaultInputValues?.versionDescription;\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.defaultInputValuesChanged(this.defaultInputValues);\n  }\n\n  #handleCheckBoxValueChange = (\n    event: ChCheckboxCustomEvent<any> | InputEvent\n  ) => {\n    const target = event.target as HTMLInputElement;\n    if (target.id === SET_NEW_VERSION_AS_ACTIVE_ID) {\n      this.setNewVersionAsActive = event.detail === CHECKED_VALUE;\n    }\n  };\n\n  #handleNameValueChange = (event: CustomEvent<string> | InputEvent) => {\n    this.versionName = event.detail as string;\n  };\n\n  #handleDescriptionValueChange = (event: CustomEvent<string> | InputEvent) => {\n    this.versionDescription = event.detail as string;\n  };\n\n  #cancelClickHandler = async () => {\n    this.cancelCallback();\n  };\n\n  #createClickHandler = async () => {\n    const newVersionData: NewVersionData = {\n      versionName: this.versionName,\n      versionDescription: this.versionDescription,\n      setNewVersionAsActive: this.setNewVersionAsActive\n    };\n    this.createCallback(newVersionData);\n  };\n\n  render() {\n    const createButtonDisabled =\n      !this.versionName || this.versionName.length === 0;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <div class=\"main scrollable field-group spacing-body\">\n            <div class=\"field field-block\">\n              <label class=\"label\" htmlFor=\"version-name\">\n                {this.#componentLocale.labels.name}\n              </label>\n              <ch-edit\n                type=\"text\"\n                id=\"version-name\"\n                class=\"input\"\n                placeholder={this.#componentLocale.placeHolders.name}\n                value={this.versionName}\n                onInput={this.#handleNameValueChange}\n              ></ch-edit>\n            </div>\n            <div class=\"field field-block\">\n              <label class=\"label\" htmlFor=\"version-description\">\n                {this.#componentLocale.labels.description}\n              </label>\n              <ch-edit\n                type=\"text\"\n                id=\"version-description\"\n                class=\"input\"\n                placeholder={this.#componentLocale.placeHolders.description}\n                value={this.versionDescription}\n                onInput={this.#handleDescriptionValueChange}\n              ></ch-edit>\n            </div>\n            <div class=\"field field-inline\">\n              <ch-checkbox\n                class=\"checkbox\"\n                id=\"set-new-version-as-active\"\n                checkedValue={CHECKED_VALUE}\n                onInput={this.#handleCheckBoxValueChange}\n                caption={this.#componentLocale.labels.setActive}\n              ></ch-checkbox>\n            </div>\n          </div>\n\n          <footer class=\"control-footer-with-border spacing-body\">\n            <div class=\"buttons-spacer\">\n              <button\n                class=\"button-secondary\"\n                onClick={this.#cancelClickHandler}\n              >\n                {this.#componentLocale.buttons.cancel}\n              </button>\n\n              <button\n                class=\"button-primary\"\n                onClick={this.#createClickHandler}\n                disabled={createButtonDisabled}\n              >\n                {this.#componentLocale.buttons.create}\n              </button>\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type NewVersionData = {\n  versionName: string;\n  versionDescription: string;\n  setNewVersionAsActive?: boolean;\n};\n"]}
+{"version":3,"file":"new-version.js","sourceRoot":"","sources":["../../../src/components/new-version/new-version.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport { ChCheckboxCustomEvent } from \"@genexus/chameleon-controls-library\";\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { FormSubmitResult } from \"../../components\";\nimport {\n  ControlValidation,\n  validateControls\n} from \"../../common/form-validation\";\nimport { config } from \"../../common/config\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"utils/form\",\n  \"utils/spacing\",\n  \"utils/layout\",\n  \"chameleon/scrollbar\",\n  \"components/checkbox\",\n  \"components/button\",\n  \"components/edit\",\n  \"components/tooltip\"\n];\n\n// ch-checkbox\nconst CHECKED_VALUE = \"on\";\nconst SET_NEW_VERSION_AS_ACTIVE_ID = \"set-new-version-as-active\";\nconst CREATE_LINKED_LOCAL_VERSION_ID = \"create-linked-local-version\";\nconst CREATE_AS_PROTECTED_VERSION_ID = \"create-as-protected-version\";\n\n@Component({\n  tag: \"gx-ide-new-version\",\n  styleUrl: \"new-version.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/new-version\"]\n})\nexport class GxIdeNewVersion {\n  /**\n   * The component hard-coded strings translations.\n   */\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private\n  #componentLocale: any;\n\n  #versionNameEl!: HTMLChEditElement;\n\n  @Element() el: HTMLGxIdeNewVersionElement;\n\n  /**\n   * The version selected name\n   */\n  @State() versionName: string;\n\n  /**\n   * The version selected description\n   */\n  @State() versionDescription: string;\n\n  /**\n   * Checkbox value to set the new version as active\n   */\n  @State() setNewVersionAsActive: boolean = false;\n\n  /**\n   * Checkbox value to create new remote version linked to the local version\n   */\n  @State() createLinkedLocalVersion: boolean = false;\n\n  /**\n   * Checkbox value to create new remote version as protected version\n   */\n  @State() createAsProtectedVersion: boolean = false;\n\n  @State() validatableControls = new Map<string, ControlValidation>();\n\n  /**\n   * Indicates if the component is going to be used to create a new remote version\n   */\n  @Prop() readonly isRemoteOperation: boolean = false;\n\n  /**\n   * Indicates if the component is going to be used to create a new remote frozen version\n   */\n  @Prop() readonly isFreezeOperation: boolean = false;\n\n  /**\n   * Indicates if the component must show the checkbox to create a linked local version\n   */\n  @Prop() readonly showLinkedLocalVersionCheckbox: boolean = false;\n\n  /**\n   * Callback that must be invoked when the 'Cancel' button is pressed.\n   */\n  @Prop() readonly cancelCallback: () => Promise<void>;\n\n  /**\n   * Callback that must be invoked when the 'Create' button is pressed.\n   */\n  @Prop() readonly createCallback: (\n    newVersionData: NewVersionData\n  ) => Promise<FormSubmitResult>;\n\n  /**\n   * This property is used to set the initial values of the input fields when the component is loaded.\n   */\n  @Prop() readonly defaultInputValues: NewVersionData;\n  @Watch(\"defaultInputValues\")\n  defaultInputValuesChanged(newDefaultInputValues: NewVersionData) {\n    this.versionName = newDefaultInputValues?.versionName;\n    this.versionDescription = newDefaultInputValues?.versionDescription;\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n    this.defaultInputValuesChanged(this.defaultInputValues);\n  }\n\n  componentDidLoad() {\n    this.#initializeValidatableControls();\n  }\n\n  #handleCheckBoxValueChange = (\n    event: ChCheckboxCustomEvent<any> | InputEvent\n  ) => {\n    const target = event.target as HTMLInputElement;\n    if (target.id === SET_NEW_VERSION_AS_ACTIVE_ID) {\n      this.setNewVersionAsActive = event.detail === CHECKED_VALUE;\n    } else if (target.id === CREATE_LINKED_LOCAL_VERSION_ID) {\n      this.createLinkedLocalVersion = event.detail === CHECKED_VALUE;\n    } else if (target.id === CREATE_AS_PROTECTED_VERSION_ID) {\n      this.createAsProtectedVersion = event.detail === CHECKED_VALUE;\n    }\n  };\n\n  #handleNameValueChange = (event: CustomEvent<string> | InputEvent) => {\n    this.versionName = event.detail as string;\n  };\n\n  #handleDescriptionValueChange = (event: CustomEvent<string> | InputEvent) => {\n    this.versionDescription = event.detail as string;\n  };\n\n  #cancelClickHandler = async () => {\n    this.cancelCallback();\n  };\n\n  #createClickHandler = async () => {\n    const newVersionData: NewVersionData = {\n      versionName: this.versionName,\n      versionDescription: this.versionDescription,\n      setNewVersionAsActive: this.setNewVersionAsActive,\n      createLocalLinkedVersion: this.createLinkedLocalVersion,\n      createProtectedVersion: this.createAsProtectedVersion\n    };\n    const formSubmitResult = await this.createCallback(newVersionData);\n    this.validatableControls = validateControls(\n      formSubmitResult,\n      this.validatableControls\n    );\n  };\n\n  #initializeValidatableControls = () => {\n    // populate validatableControls with the controls that could have errors.\n    const validatableControls: HTMLElement[] = [this.#versionNameEl];\n    validatableControls.forEach(validatableControl => {\n      if (validatableControl.id) {\n        this.validatableControls.set(validatableControl.id, {\n          reference: validatableControl,\n          hasError: false,\n          message: undefined\n        });\n      }\n    });\n  };\n\n  // TODO: evaluate if this should be a global helper function.\n  // It is used on other dialogs as well.\n  #evaluateTooltipRender = (\n    controlReference: HTMLElement\n  ): HTMLChTooltipElement =>\n    this.validatableControls?.get(controlReference?.id)?.hasError &&\n    this.validatableControls.get(controlReference.id)?.message && (\n      <ch-tooltip\n        class=\"tooltip\"\n        actionElement={controlReference as unknown as HTMLButtonElement}\n        blockAlign={config.tooltipSettings.blockAlign}\n        inlineAlign={config.tooltipSettings.inlineAlign}\n        delay={config.tooltipSettings.delay}\n      >\n        {this.validatableControls.get(controlReference.id).message}\n      </ch-tooltip>\n    );\n\n  render() {\n    const createButtonDisabled =\n      !this.versionName || this.versionName.length === 0;\n\n    return (\n      <Host class=\"widget\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          <div class=\"main scrollable field-group spacing-body\">\n            <div class=\"field field-block\">\n              <label class=\"label\" htmlFor=\"version-name\">\n                {this.#componentLocale.labels.name}\n              </label>\n              <ch-edit\n                type=\"text\"\n                id=\"version-name\"\n                class=\"input\"\n                placeholder={this.#componentLocale.placeHolders.name}\n                value={this.versionName}\n                onInput={this.#handleNameValueChange}\n                ref={(el: HTMLChEditElement) =>\n                  (this.#versionNameEl = el as HTMLChEditElement)\n                }\n              ></ch-edit>\n              {this.#evaluateTooltipRender(this.#versionNameEl)}\n            </div>\n            <div class=\"field field-block\">\n              <label class=\"label\" htmlFor=\"version-description\">\n                {this.#componentLocale.labels.description}\n              </label>\n              <ch-edit\n                type=\"text\"\n                id=\"version-description\"\n                class=\"input\"\n                placeholder={this.#componentLocale.placeHolders.description}\n                value={this.versionDescription}\n                onInput={this.#handleDescriptionValueChange}\n              ></ch-edit>\n            </div>\n            {!this.isRemoteOperation ? (\n              <div class=\"field field-inline\">\n                <ch-checkbox\n                  class=\"checkbox\"\n                  id=\"set-new-version-as-active\"\n                  checkedValue={CHECKED_VALUE}\n                  onInput={this.#handleCheckBoxValueChange}\n                  caption={this.#componentLocale.labels.setActive}\n                ></ch-checkbox>\n              </div>\n            ) : (\n              <div class=\"layout layout--cols-2\">\n                {this.showLinkedLocalVersionCheckbox && (\n                  <div class=\"layout__panel\">\n                    <ch-checkbox\n                      class=\"checkbox\"\n                      id=\"create-linked-local-version\"\n                      checkedValue={CHECKED_VALUE}\n                      onInput={this.#handleCheckBoxValueChange}\n                      caption={\n                        this.#componentLocale.labels.createLinkedLocalVersion\n                      }\n                    ></ch-checkbox>\n                  </div>\n                )}\n                {!this.isFreezeOperation && (\n                  <div class=\"layout__panel\">\n                    <ch-checkbox\n                      class=\"checkbox\"\n                      id=\"create-as-protected-version\"\n                      checkedValue={CHECKED_VALUE}\n                      onInput={this.#handleCheckBoxValueChange}\n                      caption={\n                        this.#componentLocale.labels.createAsProtectedVersion\n                      }\n                    ></ch-checkbox>\n                  </div>\n                )}\n              </div>\n            )}\n          </div>\n\n          <footer class=\"control-footer-with-border spacing-body\">\n            <div class=\"buttons-spacer\">\n              <button\n                class=\"button-secondary\"\n                onClick={this.#cancelClickHandler}\n              >\n                {this.#componentLocale.buttons.cancel}\n              </button>\n\n              <button\n                class=\"button-primary\"\n                onClick={this.#createClickHandler}\n                disabled={createButtonDisabled}\n              >\n                {this.#componentLocale.buttons.create}\n              </button>\n            </div>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type NewVersionData = {\n  versionName: string;\n  versionDescription: string;\n  setNewVersionAsActive?: boolean;\n  createLocalLinkedVersion?: boolean;\n  createProtectedVersion?: boolean;\n};\n"]}

package/dist/collection/components/select-kb-items/gx-ide-assets/select-kb-items/langs/select-kb-items.lang.en.json

@@ -14,7 +14,8 @@
     "select": "Select"
   },
   "loader": {
-    "title": "Loading...",
+    "title": "Loading",
+    "description": "Please, hang on...",
     "cancelLabel": "Cancel"
   }
 }

package/dist/collection/components/select-kb-items/gx-ide-assets/select-kb-items/langs/select-kb-items.lang.ja.json

@@ -15,6 +15,7 @@
   },
   "loader": {
     "title": "",
+    "description": "",
     "cancelLabel": ""
   }
 }

package/dist/collection/components/select-kb-items/gx-ide-assets/select-kb-items/langs/select-kb-items.lang.zh.json

@@ -15,6 +15,7 @@
   },
   "loader": {
     "title": "",
+    "description": "",
     "cancelLabel": ""
   }
 }

package/dist/collection/components/select-kb-items/select-kb-items.css

@@ -1,6 +1,14 @@
 :host {
+  --search-input-max-inline-size: 400px;
   display: grid;
   block-size: 100%;
+}
+
+:host(:not(.has-footer)) {
+  grid-template-rows: max-content 1fr;
+}
+
+:host(.has-footer) {
   grid-template-rows: max-content 1fr max-content;
 }
 
@@ -12,25 +20,23 @@
   display: contents;
 }
 
-.header {
-  grid-template-areas: "view-mode view-mode" "pattern-filter active-item";
-  grid-template-columns: minmax(150px, 350px) max-content;
-  --field-group__column-gap: var(
-    --mer-spacing--md
-  );
+.header__first-row, .header__second-row {
+  display: grid;
+  grid-auto-flow: column;
 }
-
-.view-mode__toggle-checkboxes {
-  grid-area: view-mode;
+.header__first-row {
+  column-gap: var(--field-group__column-gap);
+  grid-auto-columns: max-content;
 }
-
-.pattern-filter {
-  grid-area: pattern-filter;
-  max-inline-size: 350px;
+.header__second-row {
+  column-gap: 12px;
+  grid-template-columns: minmax(150px, var(--search-input-max-inline-size)) max-content;
+}
+.header__second-row--one-row {
+  grid-template-columns: minmax(150px, var(--search-input-max-inline-size));
 }
 
 .active-item {
-  grid-area: active-item;
   background-color: var(--mer-surface__elevation--01);
   border-radius: var(--mer-border__radius--sm);
   padding: var(--mer-spacing--xs) var(--mer-spacing--sm);
@@ -57,19 +63,8 @@
   color: var(--mer-text__primary--active);
 }
 
-.view-mode__toggle-checkboxes {
-  grid-template-columns: max-content max-content;
-}
-
-.field__items-view-type {
-  align-items: center;
-}
-.field__items-view-type .label {
-  margin-block-start: 0 !important;
-}
-
-.field__toggle-checkboxes .label {
-  margin-block-start: 0 !important;
+.dummy-control-block-size {
+  block-size: 32px;
 }
 
 .trees {

package/dist/collection/components/select-kb-items/select-kb-items.js

@@ -161,6 +161,7 @@ export class GxIdeSelectKbItems {
             }
         });
         this.activeItemNode = undefined;
+        this.renderFooter = false;
         this.nodeListFlattenedTreeModel = [];
         this.loading = true;
         this.nodesVersionsViewType = "tree";
@@ -177,15 +178,16 @@ export class GxIdeSelectKbItems {
         this.itemContextMenuCallback = undefined;
         this.itemsList = [];
         this.multiSelection = false;
+        this.showActiveItemLink = false;
         this.selectionChanged = undefined;
     }
     watchNodeListHandler(newItemsList) {
-        if (newItemsList.length > 0) {
-            this.loading = false;
-        }
         __classPrivateFieldGet(this, _GxIdeSelectKbItems_updateViews, "f").call(this, newItemsList);
         // Check and update activeItem
         this.activeItemNode = findFirstActiveNode(newItemsList);
+        if (newItemsList.length > 0) {
+            this.loading = false;
+        }
     }
     async componentWillLoad() {
         __classPrivateFieldSet(this, _GxIdeSelectKbItems__componentLocale, await Locale.getComponentStrings(this.el), "f");
@@ -194,6 +196,10 @@ export class GxIdeSelectKbItems {
             { value: VIEW_AS_LIST_ID, caption: "List" }
         ], "f");
         this.watchNodeListHandler(this.itemsList);
+        this.renderFooter =
+            this.dialogActions.length > 0 ||
+                !!this.cancelCallback ||
+                !!this.confirmCallback;
     }
     /**
      * Suspends or reactivates the shortcuts
@@ -220,14 +226,15 @@ export class GxIdeSelectKbItems {
         });
     }
     render() {
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeSelectKbItems_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeSelectKbItems_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { class: "header control-header field-group spacing-body-block-start spacing-body-inline" }, h("div", { class: "field-group view-mode__toggle-checkboxes" }, h("div", { class: "field field-inline field__items-view-type" }, h("label", { class: "label", htmlFor: "view-mode" }, "Select view mode:"), h("ch-radio-group-render", { class: "radio-group", id: "view-mode", model: __classPrivateFieldGet(this, _GxIdeSelectKbItems_viewItemsAsModel, "f"), onChange: __classPrivateFieldGet(this, _GxIdeSelectKbItems_viewItemsAsChangedHandler, "f"), value: __classPrivateFieldGet(this, _GxIdeSelectKbItems_viewItemsAsModel, "f")[0].value })), this.checkboxType !== "none" && (h("div", { class: "field field-inline field__toggle-checkboxes" }, h("label", { class: "label", htmlFor: "toggle-checkboxes" }, "Toggle Checkboxes"), h("ch-checkbox", { class: "checkbox", id: "toggle-checkboxes", checkedValue: TOGGLE_CHECKBOXES_CHECKED_VALUE, value: TOGGLE_CHECKBOXES_CHECKED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeSelectKbItems_toggleCheckboxesChangedHandler, "f") })))), h("ch-edit", { class: "input pattern-filter", placeholder: __classPrivateFieldGet(this, _GxIdeSelectKbItems__componentLocale, "f").header.searchPatternPlaceholder, startImgSrc: SYSTEM_SEARCH_ICON, onInput: __classPrivateFieldGet(this, _GxIdeSelectKbItems_patternSearchValueChangedHandler, "f") }), this.activeItemNode && (h("div", { class: "active-item" }, h("span", { class: "active-item__icon-container" }, h("ch-image", { class: "icon-md active-item__icon", src: this.activeItemNode.iconStart || ACTIVE_ITEM_DEFAULT_ICON, containerRef: null })), __classPrivateFieldGet(this, _GxIdeSelectKbItems__componentLocale, "f").header.activeItem, h("button", { class: "active-item__link", onClick: __classPrivateFieldGet(this, _GxIdeSelectKbItems_scrollIntoActiveVersionNode, "f") }, this.activeItemNode.caption)))), h("div", { class: "spacing-body-inline-start trees" }, this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeSelectKbItems__componentLocale, "f").loader.title, show: true })) : (h("ch-tree-view-render", { class: "tree-view", model: this.nodesVersionsViewType === "tree"
+        return (h(Host, { class: { "widget": true, "has-footer": this.renderFooter } }, h("ch-theme", { model: CSS_BUNDLES }), h("ch-shortcuts", { src: __classPrivateFieldGet(this, _GxIdeSelectKbItems_shortcutsSrc, "f"), ref: (el) => (__classPrivateFieldSet(this, _GxIdeSelectKbItems_chShortcutsEl, el, "f")) }), h("section", { class: "section" }, h("header", { part: "header", class: "header control-header field-group spacing-body-block-start spacing-body-inline" }, h("div", { class: "header__first-row" }, h("div", { class: "field field-inline" }, h("label", { class: "label", htmlFor: "view-mode" }, "Select view mode:"), h("ch-radio-group-render", { class: "radio-group dummy-control-block-size", id: "view-mode", model: __classPrivateFieldGet(this, _GxIdeSelectKbItems_viewItemsAsModel, "f"), onChange: __classPrivateFieldGet(this, _GxIdeSelectKbItems_viewItemsAsChangedHandler, "f"), value: __classPrivateFieldGet(this, _GxIdeSelectKbItems_viewItemsAsModel, "f")[0].value })), this.checkboxType !== "none" && (h("div", { class: "field field-inline" }, h("label", { class: "label", htmlFor: "toggle-checkboxes" }, "Toggle Checkboxes"), h("ch-checkbox", { class: "checkbox dummy-control-block-size", id: "toggle-checkboxes", checkedValue: TOGGLE_CHECKBOXES_CHECKED_VALUE, value: TOGGLE_CHECKBOXES_CHECKED_VALUE, onInput: __classPrivateFieldGet(this, _GxIdeSelectKbItems_toggleCheckboxesChangedHandler, "f") })))), h("div", { class: {
+                "header__second-row": true,
+                "header__second-row--one-row": !this.showActiveItemLink
+            } }, h("ch-edit", { class: "input", placeholder: __classPrivateFieldGet(this, _GxIdeSelectKbItems__componentLocale, "f").header.searchPatternPlaceholder, startImgSrc: SYSTEM_SEARCH_ICON, onInput: __classPrivateFieldGet(this, _GxIdeSelectKbItems_patternSearchValueChangedHandler, "f"), accessibleName: "search pattern" }), this.activeItemNode && this.showActiveItemLink && (h("div", { class: "active-item" }, h("span", { class: "active-item__icon-container" }, h("ch-image", { class: "icon-md active-item__icon", src: this.activeItemNode.iconStart ||
+                ACTIVE_ITEM_DEFAULT_ICON, containerRef: null })), __classPrivateFieldGet(this, _GxIdeSelectKbItems__componentLocale, "f").header.activeItem, h("button", { class: "active-item__link", onClick: __classPrivateFieldGet(this, _GxIdeSelectKbItems_scrollIntoActiveVersionNode, "f") }, this.activeItemNode.caption))))), h("div", { class: "spacing-body-inline-start trees" }, this.loading ? (h("gx-ide-loader", { loaderTitle: __classPrivateFieldGet(this, _GxIdeSelectKbItems__componentLocale, "f").loader.title, description: __classPrivateFieldGet(this, _GxIdeSelectKbItems__componentLocale, "f").loader.description, show: true })) : (h("ch-tree-view-render", { class: "tree-view", model: this.nodesVersionsViewType === "tree"
                 ? this.nodeVersionsListTreeModel
                 : this.nodeListFlattenedTreeModel, "show-lines": this.nodesVersionsViewType === "tree" ? "all" : "none", expandableButton: this.nodesVersionsViewType === "tree" ? "decorative" : "no", onItemContextmenu: __classPrivateFieldGet(this, _GxIdeSelectKbItems_contextMenuHandler, "f"), onCheckedItemsChange: __classPrivateFieldGet(this, _GxIdeSelectKbItems_checkedItemsChangeHandler, "f"), onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeSelectKbItems_selectedItemsChangeHandler, "f"), expandOnClick: this.expandOnClick, multiSelection: this.multiSelection, filter: this.searchPatternValue, filterType: "caption", toggleCheckboxes: this.toggleCheckboxes, ref: (el) => {
                 __classPrivateFieldSet(this, _GxIdeSelectKbItems_treeViewRenderEl, el, "f");
-            } }))), (this.dialogActions.length > 0 ||
-            this.cancelCallback ||
-            this.confirmCallback) &&
-            __classPrivateFieldGet(this, _GxIdeSelectKbItems_renderFooter, "f").call(this))));
+            } }))), this.renderFooter && __classPrivateFieldGet(this, _GxIdeSelectKbItems_renderFooter, "f").call(this))));
     }
     static get is() { return "gx-ide-select-kb-items"; }
     static get encapsulation() { return "shadow"; }
@@ -452,6 +459,24 @@ export class GxIdeSelectKbItems {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "showActiveItemLink": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to define if the component must show the \"Active item\" link or not"
+                },
+                "attribute": "show-active-item-link",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "selectionChanged": {
                 "type": "unknown",
                 "mutable": false,
@@ -477,6 +502,7 @@ export class GxIdeSelectKbItems {
     static get states() {
         return {
             "activeItemNode": {},
+            "renderFooter": {},
             "nodeListFlattenedTreeModel": {},
             "loading": {},
             "nodesVersionsViewType": {},