@genexus/genexus-ide-ui 0.0.99 → 0.0.101

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

@@ -17,12 +17,13 @@ export class GxIdeDashboardHome {
         // 8.PUBLIC METHODS API //
         // 9.LOCAL METHODS //
         // Kb Name
-        this.handleKbNameChange = async () => {
+        this.handleKbNameChange = async (updatedTitle) => {
+            const updatedKbName = updatedTitle.detail;
             if (this.renameKBCallback) {
-                const response = this.renameKBCallback(this.kbNameEl.value);
+                const response = this.renameKBCallback(updatedKbName);
                 response.then((result) => {
                     if (result.success) {
-                        this.kb.name = this.kbNameEl.value;
+                        this.kb.name = updatedKbName;
                     }
                     this.editValidation(result, this.kbNameEl);
                 });
@@ -40,10 +41,6 @@ export class GxIdeDashboardHome {
                 });
             }
         };
-        // Project Description
-        this.toggleEditDescription = async () => {
-            this.editingProjectDescription = !this.editingProjectDescription;
-        };
         this.handleDescriptionChange = async () => {
             if (this.editDescriptionCallback) {
                 await this.editDescriptionCallback();
@@ -59,16 +56,21 @@ export class GxIdeDashboardHome {
                 el.validationStatus = "error";
                 el.validationMessage = result.errorMessage;
             }
+            else {
+                el.validationStatus = "indeterminate";
+                el.validationMessage = "";
+            }
         };
         // 10.RENDER() FUNCTIONS //
         this.renderProjectContent = () => {
-            return this.editingProjectDescription ? (h("div", null, h("gxg-form-textarea", { rows: 12, value: this.projectDescription }), h("div", { class: "project-buttons align-center" }, h("gxg-text", { type: "text-link", onClick: this.handleDescriptionChange }, this._componentLocale.save), h("gxg-text", { type: "text-link", onClick: this.toggleEditDescription }, this._componentLocale.discard)))) : (h("div", null, h("div", { innerHTML: this.projectDescription }), h("gxg-text", { icon: "gemini-tools/edit", type: "text-link", onClick: this.toggleEditDescription }, this._componentLocale.edit)));
+            return this.projectDescription ? (h("div", { class: "project-description", innerHTML: this.projectDescription }, h("gxg-button", { type: "secondary-text-icon", icon: "gemini-tools/edit", onClick: this.handleDescriptionChange }, this._componentLocale.edit))) : null;
         };
-        this.editingKbName = false;
         this.editingEnvName = false;
         this.editingProjectDescription = false;
         this.kb = undefined;
+        this.enableEditKBName = false;
         this.environment = undefined;
+        this.enableEditEnvironmentName = false;
         this.projectDescription = undefined;
         this.recentObjects = undefined;
         this.renameKBCallback = undefined;
@@ -93,13 +95,13 @@ 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.enableEditKBName, "click-to-edit": true, fluid: true, onValueChanged: this.handleKbNameChange, focusType: "text", debounce: true, ref: el => (this.kbNameEl = el) }), 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", { class: "environment-title", value: this.environment.name, "disable-edition": !this.enableEditEnvironmentName, "click-to-edit": true, "title-type": "h3", ref: el => (this.envNameEl = el), onValueChanged: this.handleEnvNameChange, focusType: "text", debounce: true }), h("div", { class: "environment__environments" }, h("gxg-card", { cardType: "mini", class: "environment-card", cardTitle: this.renderFrontEndTitle() }, h("div", { class: "environment-container" }, this.environment.frontEnd.map((obj) => (h("div", { class: "environment-item" }, 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: {
+            } }), obj.name))))), h("gxg-card", { cardType: "mini", class: "environment-card", cardTitle: this._componentLocale.environment.backEnd }, h("div", { class: "environment-container" }, h("div", { class: "environment-item" }, h("gxg-icon", { type: this.environment.backEnd.icon, color: "onbackground", style: {
                 "--mer-text__on-surface": "var(--gray-05);"
-            } }), this.environment.backEnd.name)), h("gxg-card", { background: "gray-01", cardType: "mini", padding: "s", cardTitle: this._componentLocale.environment.dataStore }, h("div", { class: "align-center" }, h("gxg-icon", { type: this.environment.dataStore.icon, color: "onbackground", style: {
+            } }), this.environment.backEnd.name))), h("gxg-card", { cardType: "mini", class: "environment-card", cardTitle: this._componentLocale.environment.dataStore }, h("div", { class: "environment-container" }, h("div", { class: "environment-item" }, h("gxg-icon", { type: this.environment.dataStore.icon, color: "onbackground", style: {
                 "--mer-text__on-surface": "var(--gray-05);"
-            } }), this.environment.dataStore.name)))), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.project.title, class: "project" }, this.renderProjectContent()), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.recent.title, class: "recent-objects", cardType: "section", "no-padding-top": true }, this.recentObjects.map((obj, index) => (h("gxg-card", { background: "gray-01", padding: "m", cardType: "article", class: "recent-objects-card", actionable: true, onClick: () => this.openObject(index) }, h("div", { class: "grid grid--recent-objects" }, h("gxg-icon", { type: obj.typeIcon, color: "auto" }), h("gxg-text", { type: "text-regular", class: "obj-name" }, obj.name), h("gxg-text", { italic: true, class: "justify-end" }, this._componentLocale.recent.modified, ":", " ", `${formatDate(obj.modificationDate, "date")}`), h("div", { class: " justify-end" }, h("gxg-icon", { type: mapStatusToIcons[obj.status], color: "auto" })))))))))));
+            } }), this.environment.dataStore.name))))), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.project.title, class: "project" }, this.renderProjectContent()), h("gxg-card", { editableTitle: false, cardTitle: this._componentLocale.recent.title, class: "recent-objects", cardType: "section", "no-padding-top": true }, this.recentObjects.map((obj, index) => (h("gxg-card", { background: "gray-01", padding: "m", cardType: "article", class: "recent-objects-card", actionable: true, onClick: () => this.openObject(index) }, h("div", { class: "grid grid--recent-objects" }, h("gxg-icon", { type: obj.typeIcon, color: "auto" }), h("gxg-text", { type: "text-regular", class: "obj-name" }, obj.name), h("gxg-text", { italic: true, class: "justify-end" }, this._componentLocale.recent.modified, ":", " ", `${formatDate(obj.modificationDate, "date")}`), h("div", { class: " justify-end" }, h("gxg-icon", { type: mapStatusToIcons[obj.status], color: "auto" })))))))))));
     }
     static get is() { return "gx-ide-dashboard-home"; }
     static get encapsulation() { return "shadow"; }
@@ -137,6 +139,24 @@ export class GxIdeDashboardHome {
                     "text": "The KB basic properties."
                 }
             },
+            "enableEditKBName": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This allows the kb to be editable by the user."
+                },
+                "attribute": "enable-edit-k-b-name",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "environment": {
                 "type": "unknown",
                 "mutable": false,
@@ -158,6 +178,24 @@ export class GxIdeDashboardHome {
                     "text": "Information of the current environment."
                 }
             },
+            "enableEditEnvironmentName": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "This allows the environment name to be editable by the user."
+                },
+                "attribute": "enable-edit-environment-name",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "projectDescription": {
                 "type": "string",
                 "mutable": false,
@@ -290,7 +328,6 @@ export class GxIdeDashboardHome {
     }
     static get states() {
         return {
-            "editingKbName": {},
             "editingEnvName": {},
             "editingProjectDescription": {}
         };

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 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   * This allows the kb to be editable by the user.\n   */\n  @Prop() readonly enableEditKBName: boolean = false;\n\n  /**\n   * Information of the current environment.\n   */\n  @Prop() readonly environment: EnvironmentData;\n\n  /**\n   * This allows the environment name to be editable by the user.\n   */\n  @Prop() readonly enableEditEnvironmentName: boolean = false;\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 (updatedTitle: CustomEvent<string>) => {\n    const updatedKbName = updatedTitle.detail;\n    if (this.renameKBCallback) {\n      const response = this.renameKBCallback(updatedKbName);\n      response.then((result: EditResult) => {\n        if (result.success) {\n          this.kb.name = updatedKbName;\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  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 = (\n    result: EditResult,\n    el: HTMLGxgTitleEditableElement\n  ) => {\n    if (!result.success) {\n      el.validationStatus = \"error\";\n      el.validationMessage = result.errorMessage;\n    } else {\n      el.validationStatus = \"indeterminate\";\n      el.validationMessage = \"\";\n    }\n  };\n\n  // 10.RENDER() FUNCTIONS //\n\n  private renderProjectContent = (): Element => {\n    return this.projectDescription ? (\n      <div class=\"project-description\" innerHTML={this.projectDescription}>\n        <gxg-button\n          type=\"secondary-text-icon\"\n          icon=\"gemini-tools/edit\"\n          onClick={this.handleDescriptionChange}\n        >\n          {this._componentLocale.edit}\n        </gxg-button>\n      </div>\n    ) : null;\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.enableEditKBName}\n                click-to-edit={true}\n                fluid\n                onValueChanged={this.handleKbNameChange}\n                focusType=\"text\"\n                debounce\n                ref={el => (this.kbNameEl = el as HTMLGxgTitleEditableElement)}\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                class=\"environment-title\"\n                value={this.environment.name}\n                disable-edition={!this.enableEditEnvironmentName}\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=\"environment__environments\">\n                <gxg-card\n                  cardType=\"mini\"\n                  class=\"environment-card\"\n                  cardTitle={this.renderFrontEndTitle()}\n                >\n                  <div class=\"environment-container\">\n                    {this.environment.frontEnd.map(\n                      (obj: EnvironmentItemData) => (\n                        <div class=\"environment-item\">\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                <gxg-card\n                  cardType=\"mini\"\n                  class=\"environment-card\"\n                  cardTitle={this._componentLocale.environment.backEnd}\n                >\n                  <div class=\"environment-container\">\n                    <div class=\"environment-item\">\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                  </div>\n                </gxg-card>\n\n                <gxg-card\n                  cardType=\"mini\"\n                  class=\"environment-card\"\n                  cardTitle={this._componentLocale.environment.dataStore}\n                >\n                  <div class=\"environment-container\">\n                    <div class=\"environment-item\">\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                  </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

@@ -1,4 +1,318 @@
-/*Gemini*/
+:root {
+  --ui-animaton-speed: 0.2s;
+}
+
+/*ALIGNMENT*/
+/*Ellipsis*/
+/*****************************************************
+TYPOGRAPHY
+*****************************************************/
+/*Title 01 (Positive)*/
+.gxg-title-01 {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-01-font-weight);
+  font-size: var(--ds-title-01-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  line-height: var(--ds-base-font-line-height--comfortable);
+}
+
+/*Title 01 (Negative)*/
+.gxg-title-01--negative {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-01-font-weight);
+  font-size: var(--ds-title-01-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--negative);
+}
+
+/*Title 02 (Positive)*/
+.gxg-title-02 {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-02-font-weight);
+  font-size: var(--ds-title-02-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--regular);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: var(--ds-base-font-line-height--comfortable);
+}
+
+.gxg-title-02--negative {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-02-font-weight);
+  font-size: var(--ds-title-02-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--regular);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--color-on-primary);
+}
+
+/*Title 03*/
+.gxg-title-03 {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-03-font-weight);
+  font-size: var(--ds-title-03-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--regular);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: var(--ds-base-font-line-height--comfortable);
+}
+
+.gxg-title-03--negative {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-03-font-weight);
+  font-size: var(--ds-title-03-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--regular);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--negative);
+}
+
+/*Title 04*/
+.gxg-title-04 {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-04-font-weight);
+  font-size: var(--ds-title-04-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  line-height: var(--ds-base-font-line-height--comfortable);
+}
+
+.gxg-title-04--negative {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-04-font-weight);
+  font-size: var(--ds-title-04-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--comfortable);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--negative);
+}
+
+/*Title 05*/
+.gxg-title-05 {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-05-font-weight);
+  font-size: var(--ds-title-05-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--regular);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  line-height: var(--ds-base-font-line-height--comfortable);
+}
+
+.gxg-title-05--negative {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--ds-title-05-font-weight);
+  font-size: var(--ds-title-05-font-size);
+  letter-spacing: var(--ds-base-font-letter-spacing--regular);
+  color: var(--ds-base-font-color);
+  text-align: start;
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--negative);
+}
+
+/*Text*/
+.gxg-text {
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+}
+
+.gxg-text--negative {
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--negative);
+}
+
+.gxg-text--gray {
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--dimmed);
+}
+
+/*Quote*/
+.gxg-quote {
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  font-style: italic;
+}
+
+.gxg-quote--negative {
+  color: var(--ds-base-font-color--negative);
+}
+
+/*Link*/
+.gxg-link {
+  line-height: unset;
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--link);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+}
+.gxg-link:hover {
+  color: var(--ds-base-font-color--link-hover);
+}
+.gxg-link:active {
+  color: var(--ds-base-font-color--link-active);
+}
+
+.gxg-link-gray {
+  line-height: unset;
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--link);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--ds-base-font-color--dimmed);
+}
+.gxg-link-gray:hover {
+  line-height: unset;
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--link);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--ds-base-font-color--dimmed);
+  filter: brightness(1.4);
+}
+
+/*Alerts*/
+.gxg-alert-error {
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--error);
+  display: inline-block;
+}
+
+.gxg-alert-warning {
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--warning);
+  display: inline-block;
+}
+
+.gxg-alert-success {
+  font-family: var(--ds-base-font-family-primary);
+  font-size: var(--ds-base-font-size);
+  color: var(--ds-base-font-size-color);
+  font-weight: var(--ds-base-font-size-weight);
+  line-height: var(--ds-base-font-line-height--comfortable);
+  color: var(--ds-base-font-color--success);
+  display: inline-block;
+}
+
+/*Tab*/
+.gxg-tab--disabled {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+.gxg-tab--disabled[disabled] {
+  color: var(--color-primary-disabled);
+  pointer-events: none;
+}
+
+/*Label*/
+.gxg-label {
+  font-family: var(--ds-base-font-family-primary);
+  font-weight: var(--gxg-label-font-weight);
+  font-size: var(--gxg-label-font-size);
+  color: var(--gxg-label-color);
+  text-align: center;
+  line-height: 1.455em;
+  display: flex;
+  align-items: center;
+}
+.gxg-label:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-label:focus {
+  color: var(--color-primary-active);
+}
+.gxg-label:active {
+  color: var(--color-primary-active);
+}
+.gxg-label[disabled] {
+  color: var(--color-primary-disabled);
+}
+
+.gxg-label--negative {
+  color: var(--color-on-primary);
+}
+.gxg-label--negative[disabled] {
+  color: var(--color-on-disabled);
+}
+
+/*****************************************************
+GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
+*****************************************************/
+/*****************************************************
+FORM ELEMENTS
+*****************************************************/
+.gxg-scrollbar {
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gxg-scrollbar::-webkit-scrollbar {
+  width: var(--gxg-scrollbar-width);
+  height: var(--gxg-scrollbar-width);
+}
+.gxg-scrollbar::-webkit-scrollbar-track {
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
+}
+.gxg-scrollbar::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles
@@ -143,25 +457,22 @@ gxg-tabs {
   /* Handle on hover */
 }
 .gx-ide-main::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width);
+  height: var(--gxg-scrollbar-width);
 }
 .gx-ide-main::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
 }
 .gx-ide-main::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
 }
 .gx-ide-main::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
 }
-.gx-ide-main .gxg-scroll {
-  display: block;
-  overflow-y: auto;
-  padding-inline-end: 2px;
+.gx-ide-main::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
 }
 
 .gx-ide-overflow {
@@ -171,25 +482,22 @@ gxg-tabs {
   /* Handle on hover */
 }
 .gx-ide-overflow::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: var(--gxg-scrollbar-width);
+  height: var(--gxg-scrollbar-width);
 }
 .gx-ide-overflow::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-background);
+  border-radius: var(--gxg-scrollbar-track-border-radius);
 }
 .gx-ide-overflow::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+  background-color: var(--gxg-scrollbar-track-thumb-background);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius);
 }
 .gx-ide-overflow::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+  background-color: var(--gxg-scrollbar-track-thumb-hover-background);
 }
-.gx-ide-overflow .gxg-scroll {
-  display: block;
-  overflow-y: auto;
-  padding-inline-end: 2px;
+.gx-ide-overflow::-webkit-scrollbar-corner {
+  background: rgba(0, 0, 0, 0);
 }
 
 /*gxg-tree-view*/
@@ -200,7 +508,6 @@ gxg-tabs {
   box-sizing: border-box;
 }
 
-/*Gemini*/
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles