@genexus/genexus-ide-ui 1.0.17 → 1.0.19

package/dist/collection/components/navigation-report/navigation-report.css

@@ -0,0 +1,75 @@
+/*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
+:host {
+  display: grid;
+  block-size: 100%;
+  overflow: auto;
+  grid-template-areas: "aside main" "footer footer";
+  grid-template-rows: 1fr max-content;
+  grid-template-columns: 240px 1fr;
+}
+
+:host(.display-header-type) {
+  grid-template-areas: "header header" "aside main" "footer footer";
+  grid-template-rows: max-content 1fr max-content;
+  grid-template-columns: 240px 1fr;
+}
+
+.section {
+  display: contents;
+}
+
+.header {
+  grid-area: header;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+}
+.header__description {
+  display: grid;
+  gap: var(--mer-spacing--xs);
+}
+.header__description-p {
+  max-inline-size: 460px;
+}
+.header__actions {
+  flex-shrink: 0;
+}
+
+.aside {
+  grid-area: aside;
+  overflow: auto;
+  border-inline-end: var(--section-common-border);
+  display: grid;
+  grid-template-rows: max-content 1fr;
+}
+
+.main {
+  grid-area: main;
+  overflow: auto;
+}
+
+.footer {
+  grid-area: footer;
+  justify-content: flex-start;
+}
+
+.tree-view::part(item__action tree-view-item--success),
+.tree-view::part(item__action tree-view-item--warning),
+.tree-view::part(item__action tree-view-item--error) {
+  padding-inline-start: var(--mer-spacing--lg);
+}
+
+.tree-view::part(item__action tree-view-item--success) {
+  background: var(--icon__states_pill-filled_success--enabled) no-repeat;
+}
+
+.tree-view::part(item__action tree-view-item--warning) {
+  background: var(--icon__states_pill-filled_warning--enabled) no-repeat;
+}
+
+.tree-view::part(item__action tree-view-item--error) {
+  background: var(--icon__states_pill-filled_error--enabled) no-repeat;
+}

package/dist/collection/components/navigation-report/navigation-report.js

@@ -0,0 +1,407 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        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 _GxIdeNavigationReport_componentLocale, _GxIdeNavigationReport_items, _GxIdeNavigationReport_combinedRegExp, _GxIdeNavigationReport_itemsSelectionChangedHandler, _GxIdeNavigationReport_sortItemsCallback, _GxIdeNavigationReport_statusButtonsSelectionChangedHandler, _GxIdeNavigationReport_patternInputHandler, _GxIdeNavigationReport_handleChangedItems;
+// Stencil
+import { Host, h } from "@stencil/core";
+// Custom Imports
+import { Locale } from "../../common/locale";
+import { mapNavigationDataToTreeView, STATUS_REGEXP_KEY, CAPTION_REGEXP_KEY } from "./helpers";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/tab",
+    "components/tooltip",
+    "components/tree-view",
+    "utils/form--full",
+    "utils/layout",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar"
+];
+export class GxIdeNavigationReport {
+    constructor() {
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeNavigationReport_componentLocale.set(this, void 0);
+        _GxIdeNavigationReport_items.set(this, []);
+        _GxIdeNavigationReport_combinedRegExp.set(this, () => {
+            const statusPattern = this.navigationItemsStatusRegExpString || "";
+            const captionPattern = this.navigationItemsCaptionRegExpString || "";
+            // Create a RegExp that combines the values from the buttons statues and the filer value.
+            const combinedPattern = `${statusPattern && `(${statusPattern})`}${statusPattern && captionPattern ? ".*" : ""}${captionPattern && `(${captionPattern})`}`;
+            this.navigationItemsRegExp = new RegExp(combinedPattern, "i");
+        });
+        _GxIdeNavigationReport_itemsSelectionChangedHandler.set(this, (event) => {
+            var _a;
+            const selectedItemId = (_a = event.detail[0]) === null || _a === void 0 ? void 0 : _a.item.id;
+            if (selectedItemId) {
+                this.itemSelectedCallback(selectedItemId);
+            }
+        });
+        _GxIdeNavigationReport_sortItemsCallback.set(this, (subModel) => {
+            return subModel.sort((a, b) => a.caption.localeCompare(b.caption));
+        });
+        _GxIdeNavigationReport_statusButtonsSelectionChangedHandler.set(this, (event) => {
+            const activeStates = event.detail;
+            const statuses = [];
+            const errorIndex = activeStates.findIndex(state => state.itemId === "errors");
+            const warningIndex = activeStates.findIndex(state => state.itemId === "warnings");
+            const successIndex = activeStates.findIndex(state => state.itemId === "successes");
+            if (errorIndex !== -1) {
+                statuses.push("error");
+            }
+            if (warningIndex !== -1) {
+                statuses.push("warning");
+            }
+            if (successIndex !== -1) {
+                statuses.push("success");
+            }
+            if (statuses.length) {
+                const statusOptions = statuses.join("|");
+                this.navigationItemsStatusRegExpString = `"${STATUS_REGEXP_KEY}":"(${statusOptions})"`;
+            }
+            else {
+                this.navigationItemsStatusRegExpString = `"${STATUS_REGEXP_KEY}":""`;
+            }
+            // Update statusInfo for the status-buttons
+            this.statusInfo = {
+                error: {
+                    display: errorIndex !== -1,
+                    number: this.statusInfo.error.number
+                },
+                warning: {
+                    display: warningIndex !== -1,
+                    number: this.statusInfo.warning.number
+                },
+                success: {
+                    display: successIndex !== -1,
+                    number: this.statusInfo.success.number
+                }
+            };
+        });
+        _GxIdeNavigationReport_patternInputHandler.set(this, (event) => {
+            const patternFilterValue = event.detail;
+            this.navigationItemsCaptionRegExpString = `"${CAPTION_REGEXP_KEY}":".*${patternFilterValue}.*"`;
+        });
+        _GxIdeNavigationReport_handleChangedItems.set(this, (newItems) => {
+            __classPrivateFieldSet(this, _GxIdeNavigationReport_items, newItems, "f");
+            this.reportTreeItems = mapNavigationDataToTreeView(newItems);
+            let errorsCount = 0;
+            let warningsCount = 0;
+            let successCount = 0;
+            this.reportTreeItems.forEach(item => {
+                const metadataObject = JSON.parse(item.metadata);
+                let statusValue;
+                if (STATUS_REGEXP_KEY in metadataObject) {
+                    statusValue = metadataObject[STATUS_REGEXP_KEY];
+                }
+                if (statusValue && statusValue === "error") {
+                    errorsCount++;
+                }
+                else if (statusValue && statusValue === "warning") {
+                    warningsCount++;
+                }
+                else if (statusValue && statusValue === "success") {
+                    successCount++;
+                }
+            });
+            this.statusInfo["error"].number = errorsCount;
+            this.statusInfo["warning"].number = warningsCount;
+            this.statusInfo["success"].number = successCount;
+        });
+        this.reportTreeItems = [];
+        this.navigationItemsStatusRegExpString = "";
+        this.navigationItemsCaptionRegExpString = "";
+        this.navigationItemsRegExp = undefined;
+        this.confirmed = false;
+        this.headerState = "none";
+        this.statusInfo = {
+            error: {
+                display: true,
+                number: 0
+            },
+            warning: {
+                display: true,
+                number: 0
+            },
+            success: {
+                display: true,
+                number: 0
+            }
+        };
+        this.someStatusVisible = undefined;
+        this.headerData = undefined;
+        this.confirmCallback = undefined;
+        this.cancelCallback = undefined;
+        this.closeCallback = undefined;
+        this.itemSelectedCallback = undefined;
+    }
+    navigationItemsStatusRegExpStringChanged() {
+        __classPrivateFieldGet(this, _GxIdeNavigationReport_combinedRegExp, "f").call(this);
+    }
+    navigationItemsCaptionRegExpStringChanged() {
+        __classPrivateFieldGet(this, _GxIdeNavigationReport_combinedRegExp, "f").call(this);
+    }
+    /**
+     * Add a new item
+     */
+    async addItem(item) {
+        __classPrivateFieldGet(this, _GxIdeNavigationReport_handleChangedItems, "f").call(this, __classPrivateFieldGet(this, _GxIdeNavigationReport_items, "f").concat([item]));
+    }
+    /**
+     * Clear items
+     */
+    async clearItems() {
+        __classPrivateFieldGet(this, _GxIdeNavigationReport_handleChangedItems, "f").call(this, []);
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeNavigationReport_componentLocale, await Locale.getComponentStrings(this.el), "f");
+    }
+    render() {
+        var _a;
+        return (h(Host, { class: {
+                "widget": true,
+                "display-header-type": !!this.headerData
+            } }, h("ch-theme", { model: CSS_BUNDLES }), h("section", { class: "section" }, this.headerData && (h("header", { class: "header control-header-with-border spacing-body-inline spacing-body-block-start" }, h("div", { class: "header__description" }, h("h3", { class: "heading-3" }, this.headerData.title), h("p", { class: "text-body-regular-s header__description-p" }, this.headerData.description)), h("div", { class: "header__actions" }, h("div", { class: "buttons-spacer header__actions" }, (_a = this.headerData.buttons) === null || _a === void 0 ? void 0 : _a.map(button => {
+            var _a;
+            const buttonIcon = button.icon;
+            const buttonType = (_a = button.type) !== null && _a !== void 0 ? _a : "button-primary";
+            return (h("button", { class: {
+                    [buttonType]: true,
+                    "button-icon-and-text": !!buttonIcon
+                }, onClick: button.callback }, buttonIcon && (h("ch-image", { class: "icon-md", src: buttonIcon })), button.caption));
+        }))))), h("section", { class: "aside field-group" }, h("header", { class: "aside__header spacing-body-inline spacing-body-block-start" }, h("div", { class: "field field-block" }, h("label", { class: "label", htmlFor: "pattern" }, __classPrivateFieldGet(this, _GxIdeNavigationReport_componentLocale, "f").aside.filterLabel), h("ch-edit", { id: "pattern", class: "input", placeholder: __classPrivateFieldGet(this, _GxIdeNavigationReport_componentLocale, "f").aside.filterPlaceholder, onInput: __classPrivateFieldGet(this, _GxIdeNavigationReport_patternInputHandler, "f") }))), h("ch-tree-view-render", { class: "tree-view", "show-lines": "last", filter: this.navigationItemsRegExp, filterType: "metadata", model: this.reportTreeItems, onSelectedItemsChange: __classPrivateFieldGet(this, _GxIdeNavigationReport_itemsSelectionChangedHandler, "f"), sortItemsCallback: __classPrivateFieldGet(this, _GxIdeNavigationReport_sortItemsCallback, "f"), filterOptions: {
+                autoExpand: true,
+                hideMatchesAndShowNonMatches: false
+            } })), h("section", { class: "main spacing-body" }, h("slot", null)), h("footer", { class: "footer control-footer-with-border control-footer-start spacing-body-inline spacing-body-block-end" }, h("gx-ide-status-buttons", { errors: this.statusInfo.error.number, warnings: this.statusInfo.warning.number, successes: this.statusInfo.success.number, hideMessage: true, compact: true, onSelectionChanged: __classPrivateFieldGet(this, _GxIdeNavigationReport_statusButtonsSelectionChangedHandler, "f") })))));
+    }
+    static get is() { return "gx-ide-navigation-report"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["navigation-report.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["navigation-report.css"]
+        };
+    }
+    static get assetsDirs() { return ["gx-ide-assets/navigation-report"]; }
+    static get properties() {
+        return {
+            "headerData": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HeaderData",
+                    "resolved": "{ title: string; description: string; buttons: HeaderButtonData[]; }",
+                    "references": {
+                        "HeaderData": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/navigation-report/navigation-report.tsx",
+                            "id": "src/components/navigation-report/navigation-report.tsx::HeaderData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The header data to display on the header."
+                }
+            },
+            "confirmCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfirmCallback",
+                    "resolved": "() => Promise<void>",
+                    "references": {
+                        "ConfirmCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/navigation-report/navigation-report.tsx",
+                            "id": "src/components/navigation-report/navigation-report.tsx::ConfirmCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when user confirms data base reorganization"
+                }
+            },
+            "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/navigation-report/navigation-report.tsx",
+                            "id": "src/components/navigation-report/navigation-report.tsx::CancelCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when user cancels reorganization"
+                }
+            },
+            "closeCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CloseCallback",
+                    "resolved": "() => Promise<void>",
+                    "references": {
+                        "CloseCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/navigation-report/navigation-report.tsx",
+                            "id": "src/components/navigation-report/navigation-report.tsx::CloseCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback to be invoked when the user closes the dialog"
+                }
+            },
+            "itemSelectedCallback": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemSelectedCallback",
+                    "resolved": "(id: string) => Promise<void>",
+                    "references": {
+                        "ItemSelectedCallback": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/navigation-report/navigation-report.tsx",
+                            "id": "src/components/navigation-report/navigation-report.tsx::ItemSelectedCallback"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Callback invoked when a list item is selected"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "reportTreeItems": {},
+            "navigationItemsStatusRegExpString": {},
+            "navigationItemsCaptionRegExpString": {},
+            "navigationItemsRegExp": {},
+            "confirmed": {},
+            "headerState": {},
+            "statusInfo": {},
+            "someStatusVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "componentDidRenderEvent",
+                "name": "componentDidRenderEvent",
+                "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 methods() {
+        return {
+            "addItem": {
+                "complexType": {
+                    "signature": "(item: NavigationData) => Promise<void>",
+                    "parameters": [{
+                            "name": "item",
+                            "type": "{ id: string; result: Status; icon: string; name: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NavigationData": {
+                            "location": "local",
+                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/navigation-report/navigation-report.tsx",
+                            "id": "src/components/navigation-report/navigation-report.tsx::NavigationData"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Add a new item",
+                    "tags": []
+                }
+            },
+            "clearItems": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clear items",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "navigationItemsStatusRegExpString",
+                "methodName": "navigationItemsStatusRegExpStringChanged"
+            }, {
+                "propName": "navigationItemsCaptionRegExpString",
+                "methodName": "navigationItemsCaptionRegExpStringChanged"
+            }];
+    }
+}
+_GxIdeNavigationReport_componentLocale = new WeakMap(), _GxIdeNavigationReport_items = new WeakMap(), _GxIdeNavigationReport_combinedRegExp = new WeakMap(), _GxIdeNavigationReport_itemsSelectionChangedHandler = new WeakMap(), _GxIdeNavigationReport_sortItemsCallback = new WeakMap(), _GxIdeNavigationReport_statusButtonsSelectionChangedHandler = new WeakMap(), _GxIdeNavigationReport_patternInputHandler = new WeakMap(), _GxIdeNavigationReport_handleChangedItems = new WeakMap();
+//# sourceMappingURL=navigation-report.js.map

package/dist/collection/components/navigation-report/navigation-report.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-report.js","sourceRoot":"","sources":["../../../src/components/navigation-report/navigation-report.tsx"],"names":[],"mappings":"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","sourcesContent":["// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Method\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport {\n  mapNavigationDataToTreeView,\n  STATUS_REGEXP_KEY,\n  CAPTION_REGEXP_KEY\n} from \"./helpers\";\nimport {\n  ChEditCustomEvent,\n  TreeViewItemModelExtended,\n  TreeViewModel\n} from \"@genexus/chameleon-controls-library\";\nimport { CheckedItemsInfo } from \"../_helpers/list-selector/list-selector\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/tab\",\n  \"components/tooltip\",\n  \"components/tree-view\",\n  \"utils/form--full\",\n  \"utils/layout\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\"\n];\n\n@Component({\n  tag: \"gx-ide-navigation-report\",\n  styleUrl: \"navigation-report.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/navigation-report\"]\n})\nexport class GxIdeNavigationReport {\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  #items: NavigationData[] = [];\n\n  @Element() el: HTMLGxIdeNavigationReportElement;\n  @State() reportTreeItems: TreeViewModel = [];\n  @State() navigationItemsStatusRegExpString: string = \"\";\n  @Watch(\"navigationItemsStatusRegExpString\")\n  navigationItemsStatusRegExpStringChanged() {\n    this.#combinedRegExp();\n  }\n  @State() navigationItemsCaptionRegExpString: string = \"\";\n  @Watch(\"navigationItemsCaptionRegExpString\")\n  navigationItemsCaptionRegExpStringChanged() {\n    this.#combinedRegExp();\n  }\n  @State() navigationItemsRegExp: RegExp;\n  @State() confirmed = false;\n  @State() headerState: \"none\" | \"create\" | \"reorganize\" = \"none\";\n\n  @State() statusInfo: StatusInfo = {\n    error: {\n      display: true,\n      number: 0\n    },\n    warning: {\n      display: true,\n      number: 0\n    },\n    success: {\n      display: true,\n      number: 0\n    }\n  };\n  @State() someStatusVisible: boolean;\n\n  /**\n   * The header data to display on the header.\n   */\n  @Prop() readonly headerData: HeaderData;\n\n  /**\n   * Callback invoked when user confirms data base reorganization\n   */\n  @Prop() readonly confirmCallback: ConfirmCallback;\n\n  /**\n   * Callback invoked when user cancels reorganization\n   */\n  @Prop() readonly cancelCallback: CancelCallback;\n\n  /**\n   * Callback to be invoked when the user closes the dialog\n   */\n  @Prop() readonly closeCallback: CloseCallback;\n\n  /**\n   * Callback invoked when a list item is selected\n   */\n  @Prop() readonly itemSelectedCallback: ItemSelectedCallback;\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderEvent: EventEmitter<string>;\n\n  /**\n   * Add a new item\n   */\n  @Method()\n  async addItem(item: NavigationData) {\n    this.#handleChangedItems(this.#items.concat([item]));\n  }\n\n  /**\n   * Clear items\n   */\n  @Method()\n  async clearItems() {\n    this.#handleChangedItems([]);\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  #combinedRegExp = () => {\n    const statusPattern = this.navigationItemsStatusRegExpString || \"\";\n    const captionPattern = this.navigationItemsCaptionRegExpString || \"\";\n\n    // Create a RegExp that combines the values from the buttons statues and the filer value.\n    const combinedPattern = `${statusPattern && `(${statusPattern})`}${\n      statusPattern && captionPattern ? \".*\" : \"\"\n    }${captionPattern && `(${captionPattern})`}`;\n\n    this.navigationItemsRegExp = new RegExp(combinedPattern, \"i\");\n  };\n\n  #itemsSelectionChangedHandler = (\n    event: CustomEvent<TreeViewItemModelExtended[]>\n  ) => {\n    const selectedItemId = event.detail[0]?.item.id;\n    if (selectedItemId) {\n      this.itemSelectedCallback(selectedItemId);\n    }\n  };\n\n  #sortItemsCallback = (subModel: TreeViewModel) => {\n    return subModel.sort((a, b) => a.caption.localeCompare(b.caption));\n  };\n\n  #statusButtonsSelectionChangedHandler = (\n    event: CustomEvent<CheckedItemsInfo>\n  ) => {\n    const activeStates = event.detail;\n    const statuses: Status[] = [];\n\n    const errorIndex = activeStates.findIndex(\n      state => state.itemId === \"errors\"\n    );\n    const warningIndex = activeStates.findIndex(\n      state => state.itemId === \"warnings\"\n    );\n    const successIndex = activeStates.findIndex(\n      state => state.itemId === \"successes\"\n    );\n\n    if (errorIndex !== -1) {\n      statuses.push(\"error\");\n    }\n    if (warningIndex !== -1) {\n      statuses.push(\"warning\");\n    }\n    if (successIndex !== -1) {\n      statuses.push(\"success\");\n    }\n\n    if (statuses.length) {\n      const statusOptions = statuses.join(\"|\");\n      this.navigationItemsStatusRegExpString = `\"${STATUS_REGEXP_KEY}\":\"(${statusOptions})\"`;\n    } else {\n      this.navigationItemsStatusRegExpString = `\"${STATUS_REGEXP_KEY}\":\"\"`;\n    }\n\n    // Update statusInfo for the status-buttons\n    this.statusInfo = {\n      error: {\n        display: errorIndex !== -1,\n        number: this.statusInfo.error.number\n      },\n      warning: {\n        display: warningIndex !== -1,\n        number: this.statusInfo.warning.number\n      },\n      success: {\n        display: successIndex !== -1,\n        number: this.statusInfo.success.number\n      }\n    };\n  };\n\n  #patternInputHandler = (event: ChEditCustomEvent<string> | InputEvent) => {\n    const patternFilterValue = event.detail as string;\n    this.navigationItemsCaptionRegExpString = `\"${CAPTION_REGEXP_KEY}\":\".*${patternFilterValue}.*\"`;\n  };\n\n  #handleChangedItems = (newItems: NavigationData[]) => {\n    this.#items = newItems;\n    this.reportTreeItems = mapNavigationDataToTreeView(newItems);\n    let errorsCount: number = 0;\n    let warningsCount: number = 0;\n    let successCount: number = 0;\n    this.reportTreeItems.forEach(item => {\n      const metadataObject = JSON.parse(item.metadata);\n      let statusValue;\n      if (STATUS_REGEXP_KEY in metadataObject) {\n        statusValue = metadataObject[STATUS_REGEXP_KEY] as Status;\n      }\n\n      if (statusValue && statusValue === \"error\") {\n        errorsCount++;\n      } else if (statusValue && statusValue === \"warning\") {\n        warningsCount++;\n      } else if (statusValue && statusValue === \"success\") {\n        successCount++;\n      }\n    });\n\n    this.statusInfo[\"error\"].number = errorsCount;\n    this.statusInfo[\"warning\"].number = warningsCount;\n    this.statusInfo[\"success\"].number = successCount;\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          \"widget\": true,\n          \"display-header-type\": !!this.headerData\n        }}\n      >\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section class=\"section\">\n          {this.headerData && (\n            <header class=\"header control-header-with-border spacing-body-inline spacing-body-block-start\">\n              <div class=\"header__description\">\n                <h3 class=\"heading-3\">{this.headerData.title}</h3>\n                <p class=\"text-body-regular-s header__description-p\">\n                  {this.headerData.description}\n                </p>\n              </div>\n              <div class=\"header__actions\">\n                <div class=\"buttons-spacer header__actions\">\n                  {this.headerData.buttons?.map(button => {\n                    const buttonIcon = button.icon;\n                    const buttonType: headerButtonType =\n                      button.type ?? \"button-primary\";\n                    return (\n                      <button\n                        class={{\n                          [buttonType]: true,\n                          \"button-icon-and-text\": !!buttonIcon\n                        }}\n                        onClick={button.callback}\n                      >\n                        {buttonIcon && (\n                          <ch-image class=\"icon-md\" src={buttonIcon}></ch-image>\n                        )}\n                        {button.caption}\n                      </button>\n                    );\n                  })}\n                </div>\n              </div>\n            </header>\n          )}\n\n          <section class=\"aside field-group\">\n            <header class=\"aside__header spacing-body-inline spacing-body-block-start\">\n              <div class=\"field field-block\">\n                <label class=\"label\" htmlFor=\"pattern\">\n                  {this.#componentLocale.aside.filterLabel}\n                </label>\n                <ch-edit\n                  id=\"pattern\"\n                  class=\"input\"\n                  placeholder={this.#componentLocale.aside.filterPlaceholder}\n                  onInput={this.#patternInputHandler}\n                ></ch-edit>\n              </div>\n            </header>\n            <ch-tree-view-render\n              class=\"tree-view\"\n              show-lines=\"last\"\n              filter={this.navigationItemsRegExp}\n              filterType=\"metadata\"\n              model={this.reportTreeItems}\n              onSelectedItemsChange={this.#itemsSelectionChangedHandler}\n              sortItemsCallback={this.#sortItemsCallback}\n              filterOptions={{\n                autoExpand: true,\n                hideMatchesAndShowNonMatches: false\n              }}\n            ></ch-tree-view-render>\n          </section>\n          <section class=\"main spacing-body\">\n            <slot></slot>\n          </section>\n          <footer class=\"footer control-footer-with-border control-footer-start spacing-body-inline spacing-body-block-end\">\n            <gx-ide-status-buttons\n              errors={this.statusInfo.error.number}\n              warnings={this.statusInfo.warning.number}\n              successes={this.statusInfo.success.number}\n              hideMessage\n              compact\n              onSelectionChanged={this.#statusButtonsSelectionChangedHandler}\n            ></gx-ide-status-buttons>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n\nexport type NavigationData = {\n  id: string;\n  result: Status;\n  icon: string;\n  name: string;\n};\n\nexport type ConfirmCallback = () => Promise<void>;\nexport type CancelCallback = () => Promise<void>;\nexport type CloseCallback = () => Promise<void>;\nexport type ItemSelectedCallback = (id: string) => Promise<void>;\n\ntype StatusInfo = {\n  error: {\n    display: boolean;\n    number: number;\n  };\n  warning: {\n    display: boolean;\n    number: number;\n  };\n  success: {\n    display: boolean;\n    number: number;\n  };\n};\n\nexport type HeaderData = {\n  title: string;\n  description: string;\n  buttons: HeaderButtonData[];\n};\n\nexport type HeaderButtonData = {\n  caption: string;\n  icon?: string;\n  type?: headerButtonType;\n  callback: () => Promise<void>;\n};\n\nexport type headerButtonType = \"button-primary\" | \"button-secondary\";\n\nexport type Status = \"success\" | \"error\" | \"warning\";\n"]}

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

@@ -31,6 +31,7 @@ const CSS_BUNDLES = [
     "utils/form--full",
     "utils/layout",
     "utils/typography",
+    "utils/spacing",
     "chameleon/scrollbar"
 ];
 const MAIN_SECTION_CLASSES = "main";
@@ -299,7 +300,7 @@ export class GxIdeNewEnvironment {
             class: "field field-inline"
         }, h("label", { class: "label", htmlFor: "environment-name" }, __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").name), h("ch-edit", {
             // environment name
-            autoFocus: true, id: "environment-name", class: "form-input", part: "environment-name", value: this.environmentName, placeholder: __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").environmentNamePlaceholder,
+            autoFocus: true, id: "environment-name", class: "input", part: "environment-name", value: this.environmentName, placeholder: __classPrivateFieldGet(this, _GxIdeNewEnvironment_componentLocale, "f").environmentNamePlaceholder,
             // TODO: toolTip={config.tooltip}
             ref: (el) => (__classPrivateFieldSet(this, _GxIdeNewEnvironment_environmentNameEl, el, "f")), onInput: __classPrivateFieldGet(this, _GxIdeNewEnvironment_envNameInputHandler, "f")
         }))), this.isAdvanced ? (h("ch-tab-render", {