@genexus/genexus-ide-ui 0.0.98 → 0.0.100

package/dist/collection/components/_helpers/empty-state/gx-ide-empty-state.js

@@ -0,0 +1,180 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeEmptyState {
+    constructor() {
+        /*
+      INDEX:
+      1.OWN PROPERTIES
+      2.REFERENCE TO ELEMENTS
+      3.STATE() VARIABLES
+      4.PUBLIC PROPERTY API | WATCH'S
+      5.EVENTS (EMIT)
+      6.COMPONENT LIFECYCLE METHODS
+      7.LISTENERS
+      8.PUBLIC METHODS API
+      9.LOCAL METHODS
+      10.RENDER() FUNCTION
+      */
+        // 1.OWN PROPERTIES //
+        this.transitionSpeed = 200;
+        this.stateIcon = undefined;
+        this.stateTitle = undefined;
+        this.stateDescription = undefined;
+        this.primaryButtonLabel = undefined;
+        this.secondaryButtonLabel = undefined;
+        this.display = false;
+    }
+    watchDisplayHandler(display) {
+        if (display) {
+            this.primaryButtonEl.disabled = false;
+            this.secondaryButtonEl.disabled = false;
+        }
+        else {
+            setTimeout(() => {
+                this.primaryButtonEl.disabled = true;
+                this.secondaryButtonEl.disabled = true;
+            }, this.transitionSpeed);
+        }
+    }
+    // 5.EVENTS (EMIT) //
+    // 6.COMPONENT LIFECYCLE METHODS //
+    componentWillLoad() {
+        this.el.style.setProperty("--state-transition-speed", `${this.transitionSpeed}ms`);
+    }
+    componentDidLoad() {
+        this.display = true;
+    }
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    // 10.RENDER() FUNCTION //
+    render() {
+        return (h(Host, null, h("div", { class: { "container": true, "container--visible": this.display } }, this.stateIcon ? (h("span", { class: "icon-wrapper" }, h("gxg-icon", { class: "icon", type: this.stateIcon, color: "mercury-primary" }, this.stateTitle))) : null, h("main", { class: "container__main" }, this.stateTitle ? (h("gx-ide-title", { alignment: "center" }, this.stateTitle)) : null, this.stateDescription ? (h("gxg-text", { textAlign: "center" }, this.stateDescription)) : null), h("div", { class: "container__buttons" }, this.primaryButtonLabel ? (h("gxg-button", { type: "primary-text-only", ref: el => (this.primaryButtonEl = el) }, this.primaryButtonLabel)) : null, this.secondaryButtonLabel ? (h("gxg-button", { type: "secondary-text-only", ref: el => (this.secondaryButtonEl = el) }, this.secondaryButtonLabel)) : null))));
+    }
+    static get is() { return "gx-ide-empty-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gx-ide-empty-state.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gx-ide-empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "stateIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The state icon"
+                },
+                "attribute": "state-icon",
+                "reflect": false
+            },
+            "stateTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The state title"
+                },
+                "attribute": "state-title",
+                "reflect": false
+            },
+            "stateDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The state description"
+                },
+                "attribute": "state-description",
+                "reflect": false
+            },
+            "primaryButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button primary label"
+                },
+                "attribute": "primary-button-label",
+                "reflect": false
+            },
+            "secondaryButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button secondary label"
+                },
+                "attribute": "secondary-button-label",
+                "reflect": false
+            },
+            "display": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, it will display the content"
+                },
+                "attribute": "display",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "display",
+                "methodName": "watchDisplayHandler"
+            }];
+    }
+}
+//# sourceMappingURL=gx-ide-empty-state.js.map

package/dist/collection/components/_helpers/empty-state/gx-ide-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gx-ide-empty-state.js","sourceRoot":"","sources":["../../../../src/components/_helpers/empty-state/gx-ide-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOzE,MAAM,OAAO,eAAe;;QAC1B;;;;;;;;;;;;QAYA;QAEA,sBAAsB;QAEd,oBAAe,GAAW,GAAG,CAAC;;;;;;uBAwCM,KAAK;;IAEjD,mBAAmB,CAAC,OAAgB;QAClC,IAAI,OAAO,EAAE;YACX,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,KAAK,CAAC;SACzC;aAAM;YACL,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,GAAG,IAAI,CAAC;YACzC,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SAC1B;IACH,CAAC;IAED,qBAAqB;IAErB,mCAAmC;IAEnC,iBAAiB;QACf,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CACvB,0BAA0B,EAC1B,GAAG,IAAI,CAAC,eAAe,IAAI,CAC5B,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAED,iBAAiB;IAEjB,0BAA0B;IAE1B,qBAAqB;IAErB,0BAA0B;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,OAAO,EAAE;gBAClE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAChB,YAAM,KAAK,EAAC,cAAc;oBACxB,gBACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAC,iBAAiB,IAEtB,IAAI,CAAC,UAAU,CACP,CACN,CACR,CAAC,CAAC,CAAC,IAAI;gBACR,YAAM,KAAK,EAAC,iBAAiB;oBAC1B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CACjB,oBAAc,SAAS,EAAC,QAAQ,IAAE,IAAI,CAAC,UAAU,CAAgB,CAClE,CAAC,CAAC,CAAC,IAAI;oBACP,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CACvB,gBAAU,SAAS,EAAC,QAAQ,IAAE,IAAI,CAAC,gBAAgB,CAAY,CAChE,CAAC,CAAC,CAAC,IAAI,CACH;gBACP,WAAK,KAAK,EAAC,oBAAoB;oBAC5B,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACzB,kBACE,IAAI,EAAC,mBAAmB,EACxB,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe,GAAG,EAA0B,CAAC,IAE7D,IAAI,CAAC,kBAAkB,CACb,CACd,CAAC,CAAC,CAAC,IAAI;oBACP,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAC3B,kBACE,IAAI,EAAC,qBAAqB,EAC1B,GAAG,EAAE,EAAE,CAAC,EAAE,CACR,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAA0B,CAAC,IAGtD,IAAI,CAAC,oBAAoB,CACf,CACd,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\n@Component({\n  tag: \"gx-ide-empty-state\",\n  styleUrl: \"gx-ide-empty-state.scss\",\n  shadow: true\n})\nexport class GxIdeEmptyState {\n  /*\nINDEX:\n1.OWN PROPERTIES \n2.REFERENCE TO ELEMENTS\n3.STATE() VARIABLES\n4.PUBLIC PROPERTY API | WATCH'S\n5.EVENTS (EMIT)\n6.COMPONENT LIFECYCLE METHODS\n7.LISTENERS\n8.PUBLIC METHODS API\n9.LOCAL METHODS\n10.RENDER() FUNCTION\n*/\n\n  // 1.OWN PROPERTIES //\n\n  private transitionSpeed: number = 200;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeEmptyStateElement;\n  private primaryButtonEl!: HTMLGxgButtonElement;\n  private secondaryButtonEl!: HTMLGxgButtonElement;\n\n  // 3.STATE() VARIABLES //\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The state icon\n   */\n  @Prop() readonly stateIcon?: string;\n\n  /**\n   * The state title\n   */\n  @Prop() readonly stateTitle!: string;\n\n  /**\n   * The state description\n   */\n  @Prop() readonly stateDescription?: string;\n\n  /**\n   * The button primary label\n   */\n  @Prop() readonly primaryButtonLabel?: string;\n\n  /**\n   * The button secondary label\n   */\n  @Prop() readonly secondaryButtonLabel?: string;\n\n  /**\n   * If true, it will display the content\n   */\n  @Prop({ mutable: true }) display: boolean = false;\n  @Watch(\"display\")\n  watchDisplayHandler(display: boolean) {\n    if (display) {\n      this.primaryButtonEl.disabled = false;\n      this.secondaryButtonEl.disabled = false;\n    } else {\n      setTimeout(() => {\n        this.primaryButtonEl.disabled = true;\n        this.secondaryButtonEl.disabled = true;\n      }, this.transitionSpeed);\n    }\n  }\n\n  // 5.EVENTS (EMIT) //\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  componentWillLoad() {\n    this.el.style.setProperty(\n      \"--state-transition-speed\",\n      `${this.transitionSpeed}ms`\n    );\n  }\n\n  componentDidLoad() {\n    this.display = true;\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  // 10.RENDER() FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <div class={{ \"container\": true, \"container--visible\": this.display }}>\n          {this.stateIcon ? (\n            <span class=\"icon-wrapper\">\n              <gxg-icon\n                class=\"icon\"\n                type={this.stateIcon}\n                color=\"mercury-primary\"\n              >\n                {this.stateTitle}\n              </gxg-icon>\n            </span>\n          ) : null}\n          <main class=\"container__main\">\n            {this.stateTitle ? (\n              <gx-ide-title alignment=\"center\">{this.stateTitle}</gx-ide-title>\n            ) : null}\n            {this.stateDescription ? (\n              <gxg-text textAlign=\"center\">{this.stateDescription}</gxg-text>\n            ) : null}\n          </main>\n          <div class=\"container__buttons\">\n            {this.primaryButtonLabel ? (\n              <gxg-button\n                type=\"primary-text-only\"\n                ref={el => (this.primaryButtonEl = el as HTMLGxgButtonElement)}\n              >\n                {this.primaryButtonLabel}\n              </gxg-button>\n            ) : null}\n            {this.secondaryButtonLabel ? (\n              <gxg-button\n                type=\"secondary-text-only\"\n                ref={el =>\n                  (this.secondaryButtonEl = el as HTMLGxgButtonElement)\n                }\n              >\n                {this.secondaryButtonLabel}\n              </gxg-button>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/_helpers/list-selector/list-selector-item/list-selector-item.js

@@ -249,7 +249,7 @@ export class GxIdeListSelectorItem {
                 "mutable": true,
                 "complexType": {
                     "original": "Color",
-                    "resolved": "\"alwaysblack\" | \"auto\" | \"disabled\" | \"error\" | \"indeterminate\" | \"mercury\" | \"mercury-on-primary\" | \"mercury-primary\" | \"mercury-text-on-message\" | \"negative\" | \"onbackground\" | \"ondisabled\" | \"primary-active\" | \"primary-enabled\" | \"primary-hover\" | \"success\" | \"warning\"",
+                    "resolved": "\"alwaysblack\" | \"auto\" | \"disabled\" | \"error\" | \"indeterminate\" | \"mercury\" | \"mercury-neutral\" | \"mercury-on-primary\" | \"mercury-primary\" | \"mercury-text-on-message\" | \"negative\" | \"onbackground\" | \"ondisabled\" | \"primary-active\" | \"primary-enabled\" | \"primary-hover\" | \"success\" | \"warning\"",
                     "references": {
                         "Color": {
                             "location": "import",

package/dist/collection/components/_helpers/list-selector/list-selector.js

@@ -244,7 +244,7 @@ export class GxIdeListSelector {
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
-                    "resolved": "\"alwaysblack\" | \"auto\" | \"disabled\" | \"error\" | \"indeterminate\" | \"mercury\" | \"mercury-on-primary\" | \"mercury-primary\" | \"mercury-text-on-message\" | \"negative\" | \"onbackground\" | \"ondisabled\" | \"primary-active\" | \"primary-enabled\" | \"primary-hover\" | \"success\" | \"warning\"",
+                    "resolved": "\"alwaysblack\" | \"auto\" | \"disabled\" | \"error\" | \"indeterminate\" | \"mercury\" | \"mercury-neutral\" | \"mercury-on-primary\" | \"mercury-primary\" | \"mercury-text-on-message\" | \"negative\" | \"onbackground\" | \"ondisabled\" | \"primary-active\" | \"primary-enabled\" | \"primary-hover\" | \"success\" | \"warning\"",
                     "references": {
                         "Color": {
                             "location": "import",

package/dist/collection/components/dashboard-home/dashboard-home.css

@@ -230,6 +230,9 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   text-overflow: ellipsis;
 }
 .kb .kb-detail {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
   flex-wrap: wrap;
   margin-block-start: var(--mer-spacing--md);
   gap: var(--mer-spacing--md);
@@ -239,6 +242,8 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  font-style: italic;
+  opacity: 0.5;
 }
 
 .environment {

package/dist/collection/components/dashboard-home/dashboard-home.js

@@ -93,7 +93,7 @@ export class GxIdeDashboardHome {
     }
     // 11.RENDER() MAIN FUNCTION //
     render() {
-        return (h(Host, null, h("div", { class: "gx-ide-main-wrapper" }, h("div", { class: "grid grid--basic" }, h("div", { class: "kb gxi-overflow-auto" }, h("gxg-title-editable", { value: this.kb.name, "disable-edition": this.editingKbName, "click-to-edit": true, fluid: true, ref: el => (this.kbNameEl = el), onValueChanged: this.handleKbNameChange, focusType: "text", debounce: true }), h("div", { class: "align-center kb-detail" }, h("gxg-pill", { id: "pill", class: "version-pill", type: "static", icon: "objects/procedure" }, this._componentLocale.version, ": ", this.kb.currentVersion), h("gxg-text", { class: "display-inline", type: "text-regular", padding: "s", italic: true }, this._componentLocale.created, ":", " ", formatDate(this.kb.created, "date-time-short"), " -", " ", this._componentLocale.lastBuild, ":", " ", formatDate(this.kb.lastBuild, "date-time-short")))), h("div", { class: "environment" }, h("gxg-title-editable", { value: this.environment.name, "disable-edition": this.editingEnvName, "click-to-edit": true, "title-type": "h3", ref: el => (this.envNameEl = el), onValueChanged: this.handleEnvNameChange, focusType: "text", debounce: true }), h("div", { class: "grid grid--environments" }, h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this.renderFrontEndTitle() }, h("div", { class: "front-end" }, this.environment.frontEnd.map((obj) => (h("div", { class: "align-center" }, h("gxg-icon", { type: obj.icon, color: "onbackground", style: {
+        return (h(Host, null, h("div", { class: "gx-ide-main-wrapper" }, h("div", { class: "grid grid--basic" }, h("div", { class: "kb gxi-overflow-auto" }, h("gxg-title-editable", { value: this.kb.name, "disable-edition": this.editingKbName, "click-to-edit": true, fluid: true, ref: el => (this.kbNameEl = el), onValueChanged: this.handleKbNameChange, focusType: "text", debounce: true }), h("div", { class: "align-center kb-detail" }, h("gxg-pill", { id: "pill", type: "static", icon: "objects/procedure" }, this._componentLocale.version, ": ", this.kb.currentVersion), h("gxg-text", { class: "display-inline", type: "text-gray", padding: "s" }, this._componentLocale.created, ":", " ", formatDate(this.kb.created, "date-time-short"), " -", " ", this._componentLocale.lastBuild, ":", " ", formatDate(this.kb.lastBuild, "date-time-short")))), h("div", { class: "environment" }, h("gxg-title-editable", { value: this.environment.name, "disable-edition": this.editingEnvName, "click-to-edit": true, "title-type": "h3", ref: el => (this.envNameEl = el), onValueChanged: this.handleEnvNameChange, focusType: "text", debounce: true, disableEdition: true }), h("div", { class: "grid grid--environments" }, h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this.renderFrontEndTitle() }, h("div", { class: "front-end" }, this.environment.frontEnd.map((obj) => (h("div", { class: "align-center" }, h("gxg-icon", { type: obj.icon, color: "onbackground", style: {
                 "--mer-text__on-surface": "var(--gray-05);"
             } }), obj.name))))), h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this._componentLocale.environment.backEnd }, h("div", { class: "align-center" }, h("gxg-icon", { type: this.environment.backEnd.icon, color: "onbackground", style: {
                 "--mer-text__on-surface": "var(--gray-05);"

package/dist/collection/components/dashboard-home/dashboard-home.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-home.js","sourceRoot":"","sources":["../../../src/components/dashboard-home/dashboard-home.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\nconst mapStatusToIcons: {\n  [key in RecentObjectStatus]: StatusIcons;\n} = {\n  new: \"gx-server/new\",\n  modified: \"patterns-default-associated/modified\",\n  conflicted: \"patterns-default-associated/synchronized\",\n  unmodified: \"gx-server/delete\"\n};\n\n@Component({\n  tag: \"gx-ide-dashboard-home\",\n  styleUrl: \"dashboard-home.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/dashboard-home\"]\n})\nexport class GxIdeDashboardHome {\n  /*\n  INDEX:\n  1.OWN PROPERTIES \n  2.REFERENCE TO ELEMENTS\n  3.STATE() VARIABLES\n  4.PUBLIC PROPERTY API | WATCH'S\n  5.EVENTS (EMIT)\n  6.COMPONENT LIFECYCLE METHODS\n  7.LISTENERS\n  8.PUBLIC METHODS API\n  9.LOCAL METHODS\n  10.RENDER() FUNCTIONS\n  11.RENDER() MAIN FUNCTION\n  */\n\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeDashboardHomeElement;\n\n  private kbNameEl!: HTMLGxgTitleEditableElement;\n  private envNameEl!: HTMLGxgTitleEditableElement;\n  /* private projectDescriptionEl!: HTMLGxgFormTextareaElement;*/\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * The editing state for the title.\n   */\n  @State() editingKbName = false;\n\n  /**\n   * The editing state for the environment name.\n   */\n  @State() editingEnvName = false;\n\n  /**\n   * The editing state for the project details.\n   */\n  @State() editingProjectDescription = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The KB basic properties.\n   */\n  @Prop() readonly kb: KBData;\n\n  /**\n   * Information of the current environment.\n   */\n  @Prop() readonly environment: EnvironmentData;\n\n  /**\n   * Project Detail description.\n   */\n  @Prop() readonly projectDescription: string;\n\n  /**\n   * Recently edited objects.\n   */\n  @Prop() readonly recentObjects: recentObjectData[];\n\n  /**\n   * Callback invoked when user tries to rename the KB.\n   * Receives the new name as a parameter\n   * and returns a promise with the result of the operation.\n   */\n  @Prop() readonly renameKBCallback: (name: string) => Promise<EditResult>;\n\n  /**\n   * Callback invoked when user tries to rename the KB environment.\n   * Receives the new name as a parameter\n   * and returns a promise with the result of the operation.\n   */\n  @Prop() readonly renameEnvironmentCallback: (\n    name: string\n  ) => Promise<EditResult>;\n\n  /**\n   * Callback invoked when user tries to edit the Project Description.\n   * The edition is resolved by the host.\n   */\n  @Prop() readonly editDescriptionCallback: () => Promise<void>;\n\n  /**\n   * Callback invoked when user tries to open one of the listed Recent Objects\n   * Receives the internal ID of the object\n   */\n  @Prop() readonly openObjectCallback: (id: number) => Promise<void>;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  // Kb Name\n\n  private handleKbNameChange = async () => {\n    if (this.renameKBCallback) {\n      const response = this.renameKBCallback(this.kbNameEl.value);\n      response.then((result: EditResult) => {\n        if (result.success) {\n          this.kb.name = this.kbNameEl.value;\n        }\n        this.editValidation(result, this.kbNameEl);\n      });\n    }\n  };\n\n  // Environment Name\n\n  private handleEnvNameChange = async () => {\n    if (this.renameEnvironmentCallback) {\n      const response = this.renameEnvironmentCallback(this.envNameEl.value);\n      response.then((result: EditResult) => {\n        if (result.success) {\n          this.environment.name = this.envNameEl.value;\n        }\n        this.editValidation(result, this.envNameEl);\n      });\n    }\n  };\n\n  // Project Description\n  private toggleEditDescription = async () => {\n    this.editingProjectDescription = !this.editingProjectDescription;\n  };\n\n  private handleDescriptionChange = async () => {\n    if (this.editDescriptionCallback) {\n      await this.editDescriptionCallback();\n    }\n  };\n\n  // Recent Objects\n\n  private openObject = (id: number) => {\n    this.openObjectCallback(id);\n  };\n\n  // Validation\n\n  private editValidation = (result: EditResult, el: any) => {\n    if (!result.success) {\n      el.validationStatus = \"error\";\n      el.validationMessage = result.errorMessage;\n    }\n  };\n\n  // 10.RENDER() FUNCTIONS //\n\n  private renderProjectContent = (): Element => {\n    return this.editingProjectDescription ? (\n      <div>\n        <gxg-form-textarea\n          rows={12}\n          value={this.projectDescription}\n          /* ref={(el: HTMLGxgFormTextareaElement) =>\n            (this.projectDescriptionEl = el as HTMLGxgFormTextareaElement)\n          }*/\n        ></gxg-form-textarea>\n        <div class=\"project-buttons align-center\">\n          <gxg-text type=\"text-link\" onClick={this.handleDescriptionChange}>\n            {this._componentLocale.save}\n          </gxg-text>\n          <gxg-text type=\"text-link\" onClick={this.toggleEditDescription}>\n            {this._componentLocale.discard}\n          </gxg-text>\n        </div>\n      </div>\n    ) : (\n      <div>\n        <div innerHTML={this.projectDescription}></div>\n        <gxg-text\n          icon=\"gemini-tools/edit\"\n          type=\"text-link\"\n          onClick={this.toggleEditDescription}\n        >\n          {this._componentLocale.edit}\n        </gxg-text>\n      </div>\n    );\n  };\n\n  private renderFrontEndTitle() {\n    return this.environment.frontEnd.length <= 1\n      ? this._componentLocale.environment.frontEndLang\n      : this._componentLocale.environment.frontEndLangs;\n  }\n\n  // 11.RENDER() MAIN FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <div class=\"gx-ide-main-wrapper\">\n          <div class=\"grid grid--basic\">\n            <div class=\"kb gxi-overflow-auto\">\n              <gxg-title-editable\n                value={this.kb.name}\n                disable-edition={this.editingKbName}\n                click-to-edit={true}\n                fluid\n                ref={el => (this.kbNameEl = el as HTMLGxgTitleEditableElement)}\n                onValueChanged={this.handleKbNameChange}\n                focusType=\"text\"\n                debounce\n              ></gxg-title-editable>\n              <div class=\"align-center kb-detail\">\n                <gxg-pill\n                  id=\"pill\"\n                  class=\"version-pill\"\n                  type=\"static\"\n                  icon=\"objects/procedure\"\n                >\n                  {this._componentLocale.version}: {this.kb.currentVersion}\n                </gxg-pill>\n                <gxg-text\n                  class=\"display-inline\"\n                  type=\"text-regular\"\n                  padding=\"s\"\n                  italic\n                >\n                  {this._componentLocale.created}:{\" \"}\n                  {formatDate(this.kb.created, \"date-time-short\")} -{\" \"}\n                  {this._componentLocale.lastBuild}:{\" \"}\n                  {formatDate(this.kb.lastBuild, \"date-time-short\")}\n                </gxg-text>\n              </div>\n            </div>\n\n            <div class=\"environment\">\n              <gxg-title-editable\n                value={this.environment.name}\n                disable-edition={this.editingEnvName}\n                click-to-edit={true}\n                title-type=\"h3\"\n                ref={el => (this.envNameEl = el as HTMLGxgTitleEditableElement)}\n                onValueChanged={this.handleEnvNameChange}\n                focusType=\"text\"\n                debounce\n              ></gxg-title-editable>\n              <div class=\"grid grid--environments\">\n                <gxg-card\n                  background=\"gray-01\"\n                  cardType=\"mini\"\n                  padding=\"s\"\n                  cardTitle={this.renderFrontEndTitle()}\n                >\n                  <div class=\"front-end\">\n                    {this.environment.frontEnd.map(\n                      (obj: EnvironmentItemData) => (\n                        <div class=\"align-center\">\n                          <gxg-icon\n                            type={obj.icon}\n                            color=\"onbackground\"\n                            style={{\n                              \"--mer-text__on-surface\": \"var(--gray-05);\"\n                            }}\n                          ></gxg-icon>\n                          {obj.name}\n                        </div>\n                      )\n                    )}\n                  </div>\n                </gxg-card>\n\n                <gxg-card\n                  background=\"gray-01\"\n                  cardType=\"mini\"\n                  padding=\"s\"\n                  cardTitle={this._componentLocale.environment.backEnd}\n                >\n                  <div class=\"align-center\">\n                    <gxg-icon\n                      type={this.environment.backEnd.icon}\n                      color=\"onbackground\"\n                      style={{\n                        \"--mer-text__on-surface\": \"var(--gray-05);\"\n                      }}\n                    ></gxg-icon>\n                    {this.environment.backEnd.name}\n                  </div>\n                </gxg-card>\n\n                <gxg-card\n                  background=\"gray-01\"\n                  cardType=\"mini\"\n                  padding=\"s\"\n                  cardTitle={this._componentLocale.environment.dataStore}\n                >\n                  <div class=\"align-center\">\n                    <gxg-icon\n                      type={this.environment.dataStore.icon}\n                      color=\"onbackground\"\n                      style={{\n                        \"--mer-text__on-surface\": \"var(--gray-05);\"\n                      }}\n                    ></gxg-icon>\n                    {this.environment.dataStore.name}\n                  </div>\n                </gxg-card>\n              </div>\n            </div>\n\n            <gxg-card\n              editableTitle={false}\n              cardTitle={this._componentLocale.project.title}\n              class=\"project\"\n            >\n              {/* <gxg-tabs height=\"auto\" minWidth=\"100%\">\n                <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.description}\n                    tab=\"description\"\n                    is-selected\n                  ></gxg-tab-button>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.lookFeel}\n                    tab=\"lookFeel\"\n                  ></gxg-tab-button>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.architecture}\n                    tab=\"architecture\"\n                  ></gxg-tab-button>\n                </gxg-tab-bar>\n                <gxg-tab noPadding tab=\"description\" flexContainer>\n                  {this.renderProjectContent()}\n                </gxg-tab>\n                <gxg-tab noPadding tab=\"lookFeel\" flexContainer></gxg-tab>\n                <gxg-tab noPadding tab=\"architecture\" flexContainer></gxg-tab>\n              </gxg-tabs> */}\n              {this.renderProjectContent()}\n            </gxg-card>\n\n            <gxg-card\n              editableTitle={false}\n              cardTitle={this._componentLocale.recent.title}\n              class=\"recent-objects\"\n              cardType=\"section\"\n              no-padding-top\n            >\n              {this.recentObjects.map((obj: recentObjectData, index) => (\n                <gxg-card\n                  background=\"gray-01\"\n                  padding=\"m\"\n                  cardType=\"article\"\n                  class=\"recent-objects-card\"\n                  actionable\n                  onClick={() => this.openObject(index)}\n                >\n                  <div class=\"grid grid--recent-objects\">\n                    <gxg-icon type={obj.typeIcon} color=\"auto\"></gxg-icon>\n                    <gxg-text type=\"text-regular\" class=\"obj-name\">\n                      {obj.name}\n                    </gxg-text>\n                    <gxg-text italic class=\"justify-end\">\n                      {this._componentLocale.recent.modified}:{\" \"}\n                      {`${formatDate(obj.modificationDate, \"date\")}`}\n                    </gxg-text>\n                    <div class=\" justify-end\">\n                      <gxg-icon\n                        type={mapStatusToIcons[obj.status]}\n                        color=\"auto\"\n                      ></gxg-icon>\n                    </div>\n                  </div>\n                </gxg-card>\n              ))}\n            </gxg-card>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type KBData = {\n  name: string;\n  currentVersion: string;\n  created: Date;\n  lastBuild?: Date;\n};\n\nexport type EnvironmentData = {\n  name: string;\n  frontEnd: EnvironmentItemData[];\n  backEnd: EnvironmentItemData;\n  dataStore: EnvironmentItemData;\n};\n\nexport type EnvironmentItemData = {\n  icon: string;\n  name: string;\n};\n\nexport type recentObjectData = {\n  id: string;\n  typeIcon: string;\n  name: string;\n  modificationDate: Date;\n  status: RecentObjectStatus;\n};\n\nexport type RecentObjectStatus =\n  | \"new\"\n  | \"modified\"\n  | \"conflicted\"\n  | \"unmodified\";\n\nexport type StatusIcons =\n  // toDo: Add proper icons!!\n  | \"gx-server/new\"\n  | \"patterns-default-associated/modified\"\n  | \"patterns-default-associated/synchronized\"\n  | \"gx-server/delete\";\n\nexport type EditResult = {\n  success: boolean;\n  errorMessage: string;\n};\n"]}
+{"version":3,"file":"dashboard-home.js","sourceRoot":"","sources":["../../../src/components/dashboard-home/dashboard-home.tsx"],"names":[],"mappings":"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","sourcesContent":["/* STENCIL IMPORTS */\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n/* OTHER LIBRARIES IMPORTS */\n/* CUSTOM IMPORTS */\nimport { Locale } from \"../../common/locale\";\nimport { formatDate } from \"../../common/helpers\";\n\nconst mapStatusToIcons: {\n  [key in RecentObjectStatus]: StatusIcons;\n} = {\n  new: \"gx-server/new\",\n  modified: \"patterns-default-associated/modified\",\n  conflicted: \"patterns-default-associated/synchronized\",\n  unmodified: \"gx-server/delete\"\n};\n\n@Component({\n  tag: \"gx-ide-dashboard-home\",\n  styleUrl: \"dashboard-home.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/dashboard-home\"]\n})\nexport class GxIdeDashboardHome {\n  /*\n  INDEX:\n  1.OWN PROPERTIES \n  2.REFERENCE TO ELEMENTS\n  3.STATE() VARIABLES\n  4.PUBLIC PROPERTY API | WATCH'S\n  5.EVENTS (EMIT)\n  6.COMPONENT LIFECYCLE METHODS\n  7.LISTENERS\n  8.PUBLIC METHODS API\n  9.LOCAL METHODS\n  10.RENDER() FUNCTIONS\n  11.RENDER() MAIN FUNCTION\n  */\n\n  // 1.OWN PROPERTIES //\n\n  /**\n   * The component hard-coded strings translations.\n   */\n  private _componentLocale: any;\n  private renderedFirstTime = false;\n\n  // 2. REFERENCE TO ELEMENTS //\n\n  @Element() el: HTMLGxIdeDashboardHomeElement;\n\n  private kbNameEl!: HTMLGxgTitleEditableElement;\n  private envNameEl!: HTMLGxgTitleEditableElement;\n  /* private projectDescriptionEl!: HTMLGxgFormTextareaElement;*/\n\n  // 3.STATE() VARIABLES //\n\n  /**\n   * The editing state for the title.\n   */\n  @State() editingKbName = false;\n\n  /**\n   * The editing state for the environment name.\n   */\n  @State() editingEnvName = false;\n\n  /**\n   * The editing state for the project details.\n   */\n  @State() editingProjectDescription = false;\n\n  // 4.PUBLIC PROPERTY API | WATCH'S //\n\n  /**\n   * The KB basic properties.\n   */\n  @Prop() readonly kb: KBData;\n\n  /**\n   * Information of the current environment.\n   */\n  @Prop() readonly environment: EnvironmentData;\n\n  /**\n   * Project Detail description.\n   */\n  @Prop() readonly projectDescription: string;\n\n  /**\n   * Recently edited objects.\n   */\n  @Prop() readonly recentObjects: recentObjectData[];\n\n  /**\n   * Callback invoked when user tries to rename the KB.\n   * Receives the new name as a parameter\n   * and returns a promise with the result of the operation.\n   */\n  @Prop() readonly renameKBCallback: (name: string) => Promise<EditResult>;\n\n  /**\n   * Callback invoked when user tries to rename the KB environment.\n   * Receives the new name as a parameter\n   * and returns a promise with the result of the operation.\n   */\n  @Prop() readonly renameEnvironmentCallback: (\n    name: string\n  ) => Promise<EditResult>;\n\n  /**\n   * Callback invoked when user tries to edit the Project Description.\n   * The edition is resolved by the host.\n   */\n  @Prop() readonly editDescriptionCallback: () => Promise<void>;\n\n  /**\n   * Callback invoked when user tries to open one of the listed Recent Objects\n   * Receives the internal ID of the object\n   */\n  @Prop() readonly openObjectCallback: (id: number) => Promise<void>;\n\n  // 5.EVENTS (EMIT) //\n\n  /**\n   * @description Gets fired when the component has rendered for the first time.\n   */\n  @Event() componentDidRenderFirstTime: EventEmitter<string>;\n\n  // 6.COMPONENT LIFECYCLE METHODS //\n\n  async componentWillLoad() {\n    this._componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidRender() {\n    if (!this.renderedFirstTime) {\n      this.componentDidRenderFirstTime.emit(\n        this._componentLocale.componentName\n      );\n      this.renderedFirstTime = true;\n    }\n  }\n\n  // 7.LISTENERS //\n\n  // 8.PUBLIC METHODS API //\n\n  // 9.LOCAL METHODS //\n\n  // Kb Name\n\n  private handleKbNameChange = async () => {\n    if (this.renameKBCallback) {\n      const response = this.renameKBCallback(this.kbNameEl.value);\n      response.then((result: EditResult) => {\n        if (result.success) {\n          this.kb.name = this.kbNameEl.value;\n        }\n        this.editValidation(result, this.kbNameEl);\n      });\n    }\n  };\n\n  // Environment Name\n  private handleEnvNameChange = async () => {\n    if (this.renameEnvironmentCallback) {\n      const response = this.renameEnvironmentCallback(this.envNameEl.value);\n      response.then((result: EditResult) => {\n        if (result.success) {\n          this.environment.name = this.envNameEl.value;\n        }\n        this.editValidation(result, this.envNameEl);\n      });\n    }\n  };\n\n  // Project Description\n  private toggleEditDescription = async () => {\n    this.editingProjectDescription = !this.editingProjectDescription;\n  };\n\n  private handleDescriptionChange = async () => {\n    if (this.editDescriptionCallback) {\n      await this.editDescriptionCallback();\n    }\n  };\n\n  // Recent Objects\n\n  private openObject = (id: number) => {\n    this.openObjectCallback(id);\n  };\n\n  // Validation\n\n  private editValidation = (result: EditResult, el: any) => {\n    if (!result.success) {\n      el.validationStatus = \"error\";\n      el.validationMessage = result.errorMessage;\n    }\n  };\n\n  // 10.RENDER() FUNCTIONS //\n\n  private renderProjectContent = (): Element => {\n    return this.editingProjectDescription ? (\n      <div>\n        <gxg-form-textarea\n          rows={12}\n          value={this.projectDescription}\n          /* ref={(el: HTMLGxgFormTextareaElement) =>\n            (this.projectDescriptionEl = el as HTMLGxgFormTextareaElement)\n          }*/\n        ></gxg-form-textarea>\n        <div class=\"project-buttons align-center\">\n          <gxg-text type=\"text-link\" onClick={this.handleDescriptionChange}>\n            {this._componentLocale.save}\n          </gxg-text>\n          <gxg-text type=\"text-link\" onClick={this.toggleEditDescription}>\n            {this._componentLocale.discard}\n          </gxg-text>\n        </div>\n      </div>\n    ) : (\n      <div>\n        <div innerHTML={this.projectDescription}></div>\n        <gxg-text\n          icon=\"gemini-tools/edit\"\n          type=\"text-link\"\n          onClick={this.toggleEditDescription}\n        >\n          {this._componentLocale.edit}\n        </gxg-text>\n      </div>\n    );\n  };\n\n  private renderFrontEndTitle() {\n    return this.environment.frontEnd.length <= 1\n      ? this._componentLocale.environment.frontEndLang\n      : this._componentLocale.environment.frontEndLangs;\n  }\n\n  // 11.RENDER() MAIN FUNCTION //\n\n  render() {\n    return (\n      <Host>\n        <div class=\"gx-ide-main-wrapper\">\n          <div class=\"grid grid--basic\">\n            <div class=\"kb gxi-overflow-auto\">\n              <gxg-title-editable\n                value={this.kb.name}\n                disable-edition={this.editingKbName}\n                click-to-edit={true}\n                fluid\n                ref={el => (this.kbNameEl = el as HTMLGxgTitleEditableElement)}\n                onValueChanged={this.handleKbNameChange}\n                focusType=\"text\"\n                debounce\n              ></gxg-title-editable>\n              <div class=\"align-center kb-detail\">\n                <gxg-pill id=\"pill\" type=\"static\" icon=\"objects/procedure\">\n                  {this._componentLocale.version}: {this.kb.currentVersion}\n                </gxg-pill>\n                <gxg-text class=\"display-inline\" type=\"text-gray\" padding=\"s\">\n                  {this._componentLocale.created}:{\" \"}\n                  {formatDate(this.kb.created, \"date-time-short\")} -{\" \"}\n                  {this._componentLocale.lastBuild}:{\" \"}\n                  {formatDate(this.kb.lastBuild, \"date-time-short\")}\n                </gxg-text>\n              </div>\n            </div>\n\n            <div class=\"environment\">\n              <gxg-title-editable\n                value={this.environment.name}\n                disable-edition={this.editingEnvName}\n                click-to-edit={true}\n                title-type=\"h3\"\n                ref={el => (this.envNameEl = el as HTMLGxgTitleEditableElement)}\n                onValueChanged={this.handleEnvNameChange}\n                focusType=\"text\"\n                debounce\n                disableEdition\n              ></gxg-title-editable>\n              <div class=\"grid grid--environments\">\n                <gxg-card\n                  background=\"gray-01\"\n                  cardType=\"mini\"\n                  padding=\"s\"\n                  cardTitle={this.renderFrontEndTitle()}\n                >\n                  <div class=\"front-end\">\n                    {this.environment.frontEnd.map(\n                      (obj: EnvironmentItemData) => (\n                        <div class=\"align-center\">\n                          <gxg-icon\n                            type={obj.icon}\n                            color=\"onbackground\"\n                            style={{\n                              \"--mer-text__on-surface\": \"var(--gray-05);\"\n                            }}\n                          ></gxg-icon>\n                          {obj.name}\n                        </div>\n                      )\n                    )}\n                  </div>\n                </gxg-card>\n\n                <gxg-card\n                  background=\"gray-01\"\n                  cardType=\"mini\"\n                  padding=\"s\"\n                  cardTitle={this._componentLocale.environment.backEnd}\n                >\n                  <div class=\"align-center\">\n                    <gxg-icon\n                      type={this.environment.backEnd.icon}\n                      color=\"onbackground\"\n                      style={{\n                        \"--mer-text__on-surface\": \"var(--gray-05);\"\n                      }}\n                    ></gxg-icon>\n                    {this.environment.backEnd.name}\n                  </div>\n                </gxg-card>\n\n                <gxg-card\n                  background=\"gray-01\"\n                  cardType=\"mini\"\n                  padding=\"s\"\n                  cardTitle={this._componentLocale.environment.dataStore}\n                >\n                  <div class=\"align-center\">\n                    <gxg-icon\n                      type={this.environment.dataStore.icon}\n                      color=\"onbackground\"\n                      style={{\n                        \"--mer-text__on-surface\": \"var(--gray-05);\"\n                      }}\n                    ></gxg-icon>\n                    {this.environment.dataStore.name}\n                  </div>\n                </gxg-card>\n              </div>\n            </div>\n\n            <gxg-card\n              editableTitle={false}\n              cardTitle={this._componentLocale.project.title}\n              class=\"project\"\n            >\n              {/* <gxg-tabs height=\"auto\" minWidth=\"100%\">\n                <gxg-tab-bar slot=\"tab-bar-container\" displayBorder>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.description}\n                    tab=\"description\"\n                    is-selected\n                  ></gxg-tab-button>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.lookFeel}\n                    tab=\"lookFeel\"\n                  ></gxg-tab-button>\n                  <gxg-tab-button\n                    slot=\"tab-bar\"\n                    tab-label={this._componentLocale.project.tabs.architecture}\n                    tab=\"architecture\"\n                  ></gxg-tab-button>\n                </gxg-tab-bar>\n                <gxg-tab noPadding tab=\"description\" flexContainer>\n                  {this.renderProjectContent()}\n                </gxg-tab>\n                <gxg-tab noPadding tab=\"lookFeel\" flexContainer></gxg-tab>\n                <gxg-tab noPadding tab=\"architecture\" flexContainer></gxg-tab>\n              </gxg-tabs> */}\n              {this.renderProjectContent()}\n            </gxg-card>\n\n            <gxg-card\n              editableTitle={false}\n              cardTitle={this._componentLocale.recent.title}\n              class=\"recent-objects\"\n              cardType=\"section\"\n              no-padding-top\n            >\n              {this.recentObjects.map((obj: recentObjectData, index) => (\n                <gxg-card\n                  background=\"gray-01\"\n                  padding=\"m\"\n                  cardType=\"article\"\n                  class=\"recent-objects-card\"\n                  actionable\n                  onClick={() => this.openObject(index)}\n                >\n                  <div class=\"grid grid--recent-objects\">\n                    <gxg-icon type={obj.typeIcon} color=\"auto\"></gxg-icon>\n                    <gxg-text type=\"text-regular\" class=\"obj-name\">\n                      {obj.name}\n                    </gxg-text>\n                    <gxg-text italic class=\"justify-end\">\n                      {this._componentLocale.recent.modified}:{\" \"}\n                      {`${formatDate(obj.modificationDate, \"date\")}`}\n                    </gxg-text>\n                    <div class=\" justify-end\">\n                      <gxg-icon\n                        type={mapStatusToIcons[obj.status]}\n                        color=\"auto\"\n                      ></gxg-icon>\n                    </div>\n                  </div>\n                </gxg-card>\n              ))}\n            </gxg-card>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nexport type KBData = {\n  name: string;\n  currentVersion: string;\n  created: Date;\n  lastBuild?: Date;\n};\n\nexport type EnvironmentData = {\n  name: string;\n  frontEnd: EnvironmentItemData[];\n  backEnd: EnvironmentItemData;\n  dataStore: EnvironmentItemData;\n};\n\nexport type EnvironmentItemData = {\n  icon: string;\n  name: string;\n};\n\nexport type recentObjectData = {\n  id: string;\n  typeIcon: string;\n  name: string;\n  modificationDate: Date;\n  status: RecentObjectStatus;\n};\n\nexport type RecentObjectStatus =\n  | \"new\"\n  | \"modified\"\n  | \"conflicted\"\n  | \"unmodified\";\n\nexport type StatusIcons =\n  // toDo: Add proper icons!!\n  | \"gx-server/new\"\n  | \"patterns-default-associated/modified\"\n  | \"patterns-default-associated/synchronized\"\n  | \"gx-server/delete\";\n\nexport type EditResult = {\n  success: boolean;\n  errorMessage: string;\n};\n"]}

package/dist/collection/components/data-selector/data-selector.css

@@ -0,0 +1,261 @@
+/*Gemini*/
+/*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.
+*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.gxi-overflow-auto {
+  overflow: auto;
+}
+
+.gxi-display-flex {
+  display: flex;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.justify-start {
+  display: flex;
+  justify-content: start;
+}
+
+.justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.justify-end {
+  display: flex;
+  justify-content: end;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+ch-grid {
+  overflow: auto;
+  height: 100%;
+}
+
+ch-grid-column {
+  /*to be removed when this works inside a component with shadow: true*/
+  z-index: 99;
+  border-bottom: 1px solid var(--mer-color__neutral-gray--800);
+}
+
+ch-grid-column:first-child {
+  padding-inline-start: var(--gx-ide-container__padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gx-ide-container__padding) !important;
+}
+
+ch-grid-cell {
+  --mer-spacing--xs: var(--gx-ide-container__padding);
+}
+
+/*--- Layout ---*/
+.layout {
+  display: grid;
+  gap: var(--mer-spacing--lg);
+  box-sizing: border-box;
+}
+.layout--two-cols {
+  grid-template-columns: 1fr 1fr;
+}
+.layout--space-above {
+  padding-block-start: var(--mer-spacing--lg);
+}
+
+/*Gxg Tabs*/
+gxg-tabs {
+  box-shadow: none;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--mer-font__weight--regular);
+  font-size: var(--mer-font__size--xs);
+  font-family: var(--mer-font-family--primary);
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*gxg-tree-view*/
+.tree-container {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*Gemini*/
+/*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: block;
+  border: 1px solid var(--gxg-border-color--regular);
+  background-color: var(--color-background);
+}
+
+/* Filters */
+.filter-grid {
+  display: grid;
+  padding: var(--spacing-comp-03);
+  row-gap: var(--gx-ide-grid-row-gap);
+  column-gap: var(--gx-ide-grid-column-gap);
+  border-block-start: 1px solid var(--gx-ide-container-border-color);
+  border-block-end: 1px solid var(--gx-ide-container-border-color);
+  grid-template-areas: "pattern-label pattern-input pattern-input pattern-input" "object-label object-input object-input object-input";
+}
+.filter-grid .pattern-label {
+  grid-area: pattern-label;
+}
+.filter-grid .pattern-input {
+  grid-area: pattern-input;
+}
+.filter-grid .object-label {
+  grid-area: object-label;
+}
+.filter-grid .object-input {
+  grid-area: object-input;
+}
+.filter-grid--no-title {
+  border-top: 0;
+}
+
+/*gxg-grid*/
+.grid-container {
+  height: 100%;
+}
+
+ch-grid-cell {
+  --spacing-comp-02: var(--spacing-comp-03);
+}
+
+/* Objects Table */
+.objects-count {
+  display: flex;
+  justify-content: space-around;
+}
+.objects-count > * {
+  flex: 1;
+  padding: var(--spacing-comp-01);
+}
+.objects-count > :not(:last-child) {
+  border-inline-end: 1px solid var(--gx-ide-container-border-color);
+}