@genexus/genexus-ide-ui 1.1.4 → 1.1.5

package/dist/genexus-ide-ui/{p-9a609b51.js → p-48f5911b.js}

@@ -2,12 +2,12 @@ import { h as e } from "./p-25a9f1d7.js";
 
 /* STENCIL IMPORTS */ const renderFormItems = (r = "gxg-combo-box-item", a, t = "undefined-group", i) => {
   if (a.length) {
-    const o = [];
+    const n = [];
     a.forEach((a => {
-      let c;
+      let l;
       switch (r) {
        case "gxg-form-checkbox":
-        c = e("gxg-form-checkbox", {
+        l = e("gxg-form-checkbox", {
           checkboxId: a.id,
           checked: a.checked,
           disabled: a.disabled,
@@ -17,20 +17,20 @@ import { h as e } from "./p-25a9f1d7.js";
           iconName: a.iconName,
           part: `${t}-${a.id}`
         });
-        o.push(c);
+        n.push(l);
         break;
 
        case "gxg-combo-box-item":
-        c = e("gxg-combo-box-item", {
+        l = e("gxg-combo-box-item", {
           value: a.id,
           icon: a.iconName,
           part: `${t}-${a.id}`
         }, a.label);
-        o.push(c);
+        n.push(l);
         break;
 
        case "gxg-form-radio":
-        c = e("gxg-form-radio", {
+        l = e("gxg-form-radio", {
           radioId: a.id,
           checked: a.checked,
           disabled: a.disabled,
@@ -39,11 +39,11 @@ import { h as e } from "./p-25a9f1d7.js";
           name: t,
           part: `${t}-${a.id}`
         });
-        o.push(c);
+        n.push(l);
         break;
       }
     }));
-    return o;
+    return n;
   }
   return null;
 };
@@ -94,50 +94,67 @@ const renderModuleDataProperties = r => {
 };
 
 // Dots animation used in ch-chat code-render (or other components)
-const ANIMATION_DOTS = (r = "regular", a = "primary") => {
-  const t = r === "regular" ? 1 : 4;
-  const i = a === "primary" ? "var(--mer-color__primary--200)" : "var(--mer-text__on-surface)";
+const ANIMATION_DOTS = (r = "regular", a = "primary", t = "dynamic", i = "1s") => {
+  const n = r === "regular" ? 1.5 : 4;
+  let l, c, o;
+  if (a === "nexa") {
+    l = "#5ba7ff";
+    c = "#00CCFF";
+    o = "#CF7AFF";
+  } else if (a === "on-surface") {
+    l = c = o = "var(--mer-text__on-surface)";
+  } else {
+    // primary
+    l = c = o = "var(--mer-color__primary--200)";
+  }
+  const animateRadiusSize = (r = "0") => e("animate", {
+    attributeName: "r",
+    values: `${2 / n};${4 / n};${2 / n}`,
+    dur: i,
+    begin: r,
+    repeatCount: "indefinite"
+  });
   return e("svg", {
-    width: 36 / t,
-    height: 8 / t,
+    width: 36 / n,
+    height: 8 / n,
     fill: "transparent"
   }, e("circle", {
-    cx: 4 / t,
-    cy: 4 / t,
-    r: 4 / t,
+    cx: 4 / n,
+    cy: 4 / n,
+    r: 4 / n,
     opacity: "0",
-    fill: i
+    fill: l
   }, e("animate", {
     attributeName: "opacity",
     values: "0;1;0",
-    dur: "1s",
+    dur: i,
     repeatCount: "indefinite"
-  })), e("circle", {
-    cx: 18 / t,
-    cy: 4 / t,
-    r: 4 / t,
+  }), t === "dynamic" ? animateRadiusSize("0") : null), e("circle", {
+    cx: 18 / n,
+    cy: 4 / n,
+    r: 4 / n,
     opacity: "0",
-    fill: i
+    fill: c
   }, e("animate", {
     attributeName: "opacity",
     values: "0;1;0",
-    dur: "1s",
+    dur: i,
     begin: "0.15s",
     repeatCount: "indefinite"
-  })), e("circle", {
-    cx: 32 / t,
-    cy: 4 / t,
-    r: 4 / t,
+  }), t === "dynamic" ? animateRadiusSize("0.33s") : null), e("circle", {
+    cx: 32 / n,
+    cy: 4 / n,
+    r: 4 / n,
     opacity: "0",
-    fill: i
+    fill: o
   }, e("animate", {
     attributeName: "opacity",
     values: "0;1;0",
-    dur: "1s",
+    dur: i,
     begin: "0.30s",
     repeatCount: "indefinite"
-  })));
+  }), t === "dynamic" ? animateRadiusSize("0.66s") : null));
 };
 
 export { ANIMATION_DOTS as A, renderFormItems as a, getSelectedItem as g, renderModuleDataProperties as r };
-//# sourceMappingURL=p-9a609b51.js.map
+//# sourceMappingURL=p-48f5911b.js.map

package/dist/genexus-ide-ui/p-48f5911b.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["renderFormItems","componentType","options","group","callback","length","items","forEach","option","item","h","checkboxId","id","checked","disabled","label","value","onChange","iconName","part","push","icon","radioId","name","renderModuleDataProperties","Array","isArray","class","map","subItem","inline","getSelectedItem","gxOptions","found","undefined","i","selected","ANIMATION_DOTS","size","color","sizeType","duration","n","colorDot1","colorDot2","colorDot3","animateRadiusSize","begin","attributeName","values","dur","repeatCount","width","height","fill","cx","cy","r","opacity"],"sources":["src/common/common.tsx"],"sourcesContent":["/* STENCIL IMPORTS */\nimport { h } from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { GxgFormItemsArray, GxOption } from \"./types\";\nimport { ModulePropertyData } from \"../components/modules/types\";\nexport const renderFormItems = (\n  componentType:\n    | \"gxg-combo-box-item\"\n    | \"gxg-form-checkbox\"\n    | \"gxg-form-radio\" = \"gxg-combo-box-item\",\n  options: Array<GxOption>,\n  group = \"undefined-group\",\n  callback?: any\n): GxgFormItemsArray => {\n  if (options.length) {\n    const items: GxgFormItemsArray = [];\n    options.forEach(option => {\n      let item;\n      switch (componentType) {\n        case \"gxg-form-checkbox\":\n          item = (\n            <gxg-form-checkbox\n              checkboxId={option.id}\n              checked={option.checked}\n              disabled={option.disabled}\n              label={option.label}\n              value={option.value}\n              onChange={callback ? callback : null}\n              iconName={option.iconName}\n              part={`${group}-${option.id}`}\n            ></gxg-form-checkbox>\n          );\n          items.push(item);\n          break;\n        case \"gxg-combo-box-item\":\n          item = (\n            <gxg-combo-box-item\n              value={option.id}\n              icon={option.iconName}\n              part={`${group}-${option.id}`}\n            >\n              {option.label}\n            </gxg-combo-box-item>\n          );\n          items.push(item);\n          break;\n        case \"gxg-form-radio\":\n          item = (\n            <gxg-form-radio\n              radioId={option.id}\n              checked={option.checked}\n              disabled={option.disabled}\n              label={option.label}\n              value={option.value}\n              name={group}\n              part={`${group}-${option.id}`}\n            ></gxg-form-radio>\n          );\n          items.push(item);\n          break;\n        default:\n          break;\n      }\n    });\n    return items;\n  }\n  return null;\n};\n\nexport const renderModuleDataProperties = (\n  options: Array<ModulePropertyData>\n): ModulePropertyData[] => {\n  if (options.length) {\n    const items: ModulePropertyData[] = [];\n\n    options.forEach(option => {\n      if (Array.isArray(option.value)) {\n        const item = (\n          <div class=\"md-property__list\">\n            <p class=\"md-property__key\">{option.name} :</p>\n            <ul>\n              {option.value.map(subItem => {\n                return <li>{subItem}</li>;\n              })}\n            </ul>\n          </div>\n        );\n        items.push(item);\n      } else {\n        const item = (\n          <div\n            class={\n              option.inline\n                ? \"md-property md-property--inline\"\n                : \"md-property--block\"\n            }\n          >\n            <p class=\"md-property__key\">{option.name} :</p>\n            <p class=\"md-property__value\">{option.value}</p>\n          </div>\n        );\n        items.push(item);\n      }\n    });\n\n    return items;\n  }\n  return null;\n};\n\n/**\n * @param gxOptions An array of GxOptions's\n * @returns The first option in the array that is 'selected'. If no one found it returns null.\n */\nexport const getSelectedGxOption = (\n  gxOptions: GxOption[],\n  onlyId = true\n): GxOption | string | void => {\n  if (gxOptions?.length > 0) {\n    let found = null;\n    for (let i = 0; i < gxOptions.length; i++) {\n      if (gxOptions[i].selected) {\n        found = gxOptions[i];\n        break;\n      }\n    }\n    if (found && onlyId) {\n      return found.id;\n    } else if (!found && onlyId) {\n      return gxOptions[0].id;\n    }\n    return found;\n  }\n};\n\n/**\n * @param gxOptions An array of GxOptions's\n * @returns The value of the selected item, or the first item, if no one is selected.\n */\nexport const getSelectedItem = (gxOptions: GxOption[]): string => {\n  let found = undefined;\n  for (let i = 0; i < gxOptions.length; i++) {\n    if (gxOptions[i].selected) {\n      found = gxOptions[i];\n      break;\n    }\n  }\n  if (found) {\n    return found.id;\n  } else {\n    return gxOptions[0].id;\n  }\n};\n\nexport const getSelectedItem2 = (\n  gxOptions: GxOption[] | undefined\n): string | undefined =>\n  gxOptions\n    ? (gxOptions.find(item => item.selected) ?? gxOptions[0]).id\n    : undefined;\n\n// Dots animation used in ch-chat code-render (or other components)\nexport const ANIMATION_DOTS = (\n  size: \"regular\" | \"tiny\" = \"regular\",\n  color: \"primary\" | \"on-surface\" | \"nexa\" = \"primary\",\n  sizeType: \"static\" | \"dynamic\" = \"dynamic\",\n  duration: string = \"1s\"\n): SVGElement => {\n  const n = size === \"regular\" ? 1.5 : 4;\n  let colorDot1, colorDot2, colorDot3;\n  if (color === \"nexa\") {\n    colorDot1 = \"#5ba7ff\";\n    colorDot2 = \"#00CCFF\";\n    colorDot3 = \"#CF7AFF\";\n  } else if (color === \"on-surface\") {\n    colorDot1 = colorDot2 = colorDot3 = \"var(--mer-text__on-surface)\";\n  } else {\n    // primary\n    colorDot1 = colorDot2 = colorDot3 = \"var(--mer-color__primary--200)\";\n  }\n\n  const animateRadiusSize = (begin: string = \"0\") => {\n    return (\n      <animate\n        attributeName=\"r\"\n        values={`${2 / n};${4 / n};${2 / n}`}\n        dur={duration}\n        begin={begin}\n        repeatCount=\"indefinite\"\n      />\n    );\n  };\n\n  return (\n    <svg width={36 / n} height={8 / n} fill=\"transparent\">\n      <circle cx={4 / n} cy={4 / n} r={4 / n} opacity=\"0\" fill={colorDot1}>\n        <animate\n          attributeName=\"opacity\"\n          values=\"0;1;0\"\n          dur={duration}\n          repeatCount=\"indefinite\"\n        />\n        {sizeType === \"dynamic\" ? animateRadiusSize(\"0\") : null}\n      </circle>\n      <circle cx={18 / n} cy={4 / n} r={4 / n} opacity=\"0\" fill={colorDot2}>\n        <animate\n          attributeName=\"opacity\"\n          values=\"0;1;0\"\n          dur={duration}\n          begin=\"0.15s\"\n          repeatCount=\"indefinite\"\n        />\n        {sizeType === \"dynamic\" ? animateRadiusSize(\"0.33s\") : null}\n      </circle>\n      <circle cx={32 / n} cy={4 / n} r={4 / n} opacity=\"0\" fill={colorDot3}>\n        <animate\n          attributeName=\"opacity\"\n          values=\"0;1;0\"\n          dur={duration}\n          begin=\"0.30s\"\n          repeatCount=\"indefinite\"\n        />\n        {sizeType === \"dynamic\" ? animateRadiusSize(\"0.66s\") : null}\n      </circle>\n    </svg>\n  );\n};\n"],"mappings":"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"}

package/dist/genexus-ide-ui/{p-4b38fffc.entry.js → p-4d929210.entry.js}

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as r, H as o, a } from "./p-25a9f1d7.js";
 
-import { L as i } from "./p-311eedf3.js";
+import { L as i } from "./p-857866f8.js";
 
 import { c as s } from "./p-13738332.js";
 
@@ -229,4 +229,4 @@ const n = class {
 n.style = l;
 
 export { n as gx_ide_bpm_assign_roles };
-//# sourceMappingURL=p-4b38fffc.entry.js.map
+//# sourceMappingURL=p-4d929210.entry.js.map

package/dist/genexus-ide-ui/{p-de7f0c1f.entry.js → p-501c7b1f.entry.js}

@@ -1,6 +1,6 @@
 import { r as e, c as t, h as i, H as s, a } from "./p-25a9f1d7.js";
 
-import { L as r } from "./p-311eedf3.js";
+import { L as r } from "./p-857866f8.js";
 
 const n = "status";
 
@@ -34,7 +34,7 @@ var l = undefined && undefined.__classPrivateFieldGet || function(e, t, i, s) {
   return i === "m" ? s : i === "a" ? s.call(e) : s ? s.value : t.get(e);
 };
 
-var h, p, f, m, u, g, w, v;
+var h, p, f, m, g, u, w, v;
 
 const b = [ "resets/box-sizing", "components/tab", "components/tooltip", "components/tree-view", "utils/form--full", "utils/layout", "utils/typography", "utils/spacing", "chameleon/scrollbar" ];
 
@@ -56,14 +56,13 @@ const _ = class {
       this.navigationItemsRegExp = new RegExp(i, "i");
     }));
     m.set(this, (e => {
-      var t;
-      const i = (t = e.detail[0]) === null || t === void 0 ? void 0 : t.item.id;
-      if (i) {
-        this.itemSelectedCallback(i);
+      const t = e.detail[0]?.item.id;
+      if (t) {
+        this.itemSelectedCallback(t);
       }
     }));
-    u.set(this, (e => e.sort(((e, t) => e.caption.localeCompare(t.caption)))));
-    g.set(this, (e => {
+    g.set(this, (e => e.sort(((e, t) => e.caption.localeCompare(t.caption)))));
+    u.set(this, (e => {
       const t = e.detail;
       const i = [];
       const s = t.findIndex((e => e.itemId === "errors"));
@@ -175,7 +174,6 @@ const _ = class {
     d(this, h, await r.getComponentStrings(this.el), "f");
   }
   render() {
-    var e;
     return i(s, {
       class: {
         widget: true,
@@ -197,19 +195,18 @@ const _ = class {
       class: "header__actions"
     }, i("div", {
       class: "buttons-spacer header__actions"
-    }, (e = this.headerData.buttons) === null || e === void 0 ? void 0 : e.map((e => {
-      var t;
-      const s = e.icon;
-      const a = (t = e.type) !== null && t !== void 0 ? t : "button-primary";
+    }, this.headerData.buttons?.map((e => {
+      const t = e.icon;
+      const s = e.type ?? "button-primary";
       return i("button", {
         class: {
-          [a]: true,
-          "button-icon-and-text": !!s
+          [s]: true,
+          "button-icon-and-text": !!t
         },
         onClick: e.callback
-      }, s && i("ch-image", {
+      }, t && i("ch-image", {
         class: "icon-md",
-        src: s
+        src: t
       }), e.caption);
     }))))), i("section", {
       class: "aside field-group"
@@ -232,7 +229,7 @@ const _ = class {
       filterType: "metadata",
       model: this.reportTreeItems,
       onSelectedItemsChange: l(this, m, "f"),
-      sortItemsCallback: l(this, u, "f"),
+      sortItemsCallback: l(this, g, "f"),
       filterOptions: {
         autoExpand: true,
         hideMatchesAndShowNonMatches: false
@@ -247,7 +244,7 @@ const _ = class {
       successes: this.statusInfo.success.number,
       hideMessage: true,
       compact: true,
-      onSelectionChanged: l(this, g, "f")
+      onSelectionChanged: l(this, u, "f")
     }))));
   }
   static get assetsDirs() {
@@ -264,10 +261,10 @@ const _ = class {
   }
 };
 
-h = new WeakMap, p = new WeakMap, f = new WeakMap, m = new WeakMap, u = new WeakMap, 
-g = new WeakMap, w = new WeakMap, v = new WeakMap;
+h = new WeakMap, p = new WeakMap, f = new WeakMap, m = new WeakMap, g = new WeakMap, 
+u = new WeakMap, w = new WeakMap, v = new WeakMap;
 
 _.style = c;
 
 export { _ as gx_ide_navigation_report };
-//# sourceMappingURL=p-de7f0c1f.entry.js.map
+//# sourceMappingURL=p-501c7b1f.entry.js.map

package/dist/genexus-ide-ui/p-501c7b1f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["STATUS_REGEXP_KEY","CAPTION_REGEXP_KEY","mapNavigationDataToTreeView","navigationData","map","dataItem","i","id","selected","caption","name","startImgSrc","icon","parts","result","leaf","metadata","JSON","stringify","toString","navigationReportCss","CSS_BUNDLES","GxIdeNavigationReport","_GxIdeNavigationReport_componentLocale","set","this","_GxIdeNavigationReport_items","_GxIdeNavigationReport_combinedRegExp","statusPattern","navigationItemsStatusRegExpString","captionPattern","navigationItemsCaptionRegExpString","combinedPattern","navigationItemsRegExp","RegExp","_GxIdeNavigationReport_itemsSelectionChangedHandler","event","selectedItemId","detail","item","itemSelectedCallback","_GxIdeNavigationReport_sortItemsCallback","subModel","sort","a","b","localeCompare","_GxIdeNavigationReport_statusButtonsSelectionChangedHandler","activeStates","statuses","errorIndex","findIndex","state","itemId","warningIndex","successIndex","push","length","statusOptions","join","statusInfo","error","display","number","warning","success","_GxIdeNavigationReport_patternInputHandler","patternFilterValue","_GxIdeNavigationReport_handleChangedItems","newItems","__classPrivateFieldSet","reportTreeItems","errorsCount","warningsCount","successCount","forEach","metadataObject","parse","statusValue","navigationItemsStatusRegExpStringChanged","__classPrivateFieldGet","call","navigationItemsCaptionRegExpStringChanged","addItem","concat","clearItems","componentWillLoad","Locale","getComponentStrings","el","render","h","Host","class","widget","headerData","model","title","description","buttons","button","buttonIcon","buttonType","type","onClick","callback","src","htmlFor","aside","filterLabel","placeholder","filterPlaceholder","onInput","filter","filterType","onSelectedItemsChange","sortItemsCallback","filterOptions","autoExpand","hideMatchesAndShowNonMatches","errors","warnings","successes","hideMessage","compact","onSelectionChanged"],"sources":["src/components/navigation-report/helpers.ts","src/components/navigation-report/navigation-report.scss?tag=gx-ide-navigation-report&encapsulation=shadow","src/components/navigation-report/navigation-report.tsx"],"sourcesContent":["import { TreeViewModel } from \"@genexus/chameleon-controls-library\";\nimport { NavigationData, Status } from \"./navigation-report\";\n\nexport const STATUS_REGEXP_KEY = \"status\";\nexport const CAPTION_REGEXP_KEY = \"caption\";\n\nexport const mapNavigationDataToTreeView = (\n  navigationData: NavigationData[]\n): TreeViewModel =>\n  navigationData.map((dataItem, i) => {\n    return {\n      id: dataItem.id,\n      selected: i === 0,\n      caption: dataItem.name,\n      startImgSrc: dataItem.icon,\n      parts: `tree-view-item tree-view-item--status tree-view-item--${dataItem.result}`,\n      leaf: true,\n      metadata: JSON.stringify({\n        [STATUS_REGEXP_KEY]: dataItem.result.toString() as Status,\n        [CAPTION_REGEXP_KEY]: dataItem.name\n      })\n    };\n  });\n","@import \"../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: grid;\n  block-size: 100%;\n  overflow: auto;\n  grid-template-areas:\n    \"aside main\"\n    \"footer footer\";\n  grid-template-rows: 1fr max-content;\n  grid-template-columns: 240px 1fr;\n}\n\n:host(.display-header-type) {\n  grid-template-areas:\n    \"header header\"\n    \"aside main\"\n    \"footer footer\";\n\n  grid-template-rows: max-content 1fr max-content;\n  grid-template-columns: 240px 1fr;\n}\n\n.section {\n  display: contents;\n}\n\n// - - - - - - - - - - - - -\n// Header\n// - - - - - - - - - - - - -\n\n.header {\n  grid-area: header;\n  display: grid;\n  grid-template-columns: 1fr max-content;\n\n  &__description {\n    display: grid;\n    gap: var(--mer-spacing--xs);\n\n    &-p {\n      max-inline-size: 460px;\n    }\n  }\n  &__actions {\n    flex-shrink: 0;\n  }\n}\n\n// - - - - - - - - - - - - -\n// Aside & Main\n// - - - - - - - - - - - - -\n\n.aside {\n  grid-area: aside;\n  overflow: auto;\n  border-inline-end: var(--section-common-border);\n  display: grid;\n  grid-template-rows: max-content 1fr;\n}\n\n.main {\n  grid-area: main;\n  overflow: auto;\n}\n\n// - - - - - - - - - - - - -\n// Footer\n// - - - - - - - - - - - - -\n\n.footer {\n  grid-area: footer;\n  justify-content: flex-start;\n}\n\n// - - - - - - - - - - - - - - - - - - -\n// Tree view status custom status \"icon\"\n// - - - - - - - - - - - - - - - - - - -\n.tree-view::part(item__action tree-view-item--success),\n.tree-view::part(item__action tree-view-item--warning),\n.tree-view::part(item__action tree-view-item--error) {\n  // WA custom solution for two icons\n  // Because this is a one level tree, there is no risk of\n  // breaking the layout with a custom padding.\n  padding-inline-start: var(--mer-spacing--lg);\n}\n\n.tree-view::part(item__action tree-view-item--success) {\n  background: var(--icon__states_pill-filled_success--enabled) no-repeat;\n}\n.tree-view::part(item__action tree-view-item--warning) {\n  background: var(--icon__states_pill-filled_warning--enabled) no-repeat;\n}\n.tree-view::part(item__action tree-view-item--error) {\n  background: var(--icon__states_pill-filled_error--enabled) no-repeat;\n}\n","// 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=\"subtitle-regular-s\">{this.headerData.title}</h3>\n                <p class=\"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"],"mappings":"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"}