@genexus/genexus-ide-ui 1.0.0 → 1.0.2

package/dist/collection/components/kb-manager-import/kb-manager-import.css

@@ -7,6 +7,46 @@
   contain-intrinsic-size: auto var(--ch-tree-view-item__image-size);
 }
 
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
 .tree-view::part(item__action objects-workflow)::before {
   grid-area: start-img;
   background: no-repeat center/100% var(--icon__objects_workflow--enabled);
@@ -1487,6 +1527,115 @@ FORM ELEMENTS
 /* 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.
 */
+.tree-view::part(item__action objects-workflow)::before, .tree-view::part(item__action objects-workflow):hover::before, .tree-view::part(item__action objects-workflow):active::before, .tree-view::part(item__action objects-work-panel)::before, .tree-view::part(item__action objects-work-panel):hover::before, .tree-view::part(item__action objects-work-panel):active::before, .tree-view::part(item__action objects-web-panel)::before, .tree-view::part(item__action objects-web-panel):hover::before, .tree-view::part(item__action objects-web-panel):active::before, .tree-view::part(item__action objects-web-component)::before, .tree-view::part(item__action objects-web-component):hover::before, .tree-view::part(item__action objects-web-component):active::before, .tree-view::part(item__action objects-version)::before, .tree-view::part(item__action objects-version):hover::before, .tree-view::part(item__action objects-version):active::before, .tree-view::part(item__action objects-url-rewrite)::before, .tree-view::part(item__action objects-url-rewrite):hover::before, .tree-view::part(item__action objects-url-rewrite):active::before, .tree-view::part(item__action objects-transaction)::before, .tree-view::part(item__action objects-transaction):hover::before, .tree-view::part(item__action objects-transaction):active::before, .tree-view::part(item__action objects-to-be-defined)::before, .tree-view::part(item__action objects-to-be-defined):hover::before, .tree-view::part(item__action objects-to-be-defined):active::before, .tree-view::part(item__action objects-theme)::before, .tree-view::part(item__action objects-theme):hover::before, .tree-view::part(item__action objects-theme):active::before, .tree-view::part(item__action objects-theme-web)::before, .tree-view::part(item__action objects-theme-web):hover::before, .tree-view::part(item__action objects-theme-web):active::before, .tree-view::part(item__action objects-theme-for-sd)::before, .tree-view::part(item__action objects-theme-for-sd):hover::before, .tree-view::part(item__action objects-theme-for-sd):active::before, .tree-view::part(item__action objects-table)::before, .tree-view::part(item__action objects-table):hover::before, .tree-view::part(item__action objects-table):active::before, .tree-view::part(item__action objects-super-app)::before, .tree-view::part(item__action objects-super-app):hover::before, .tree-view::part(item__action objects-super-app):active::before, .tree-view::part(item__action objects-subtype-group)::before, .tree-view::part(item__action objects-subtype-group):hover::before, .tree-view::part(item__action objects-subtype-group):active::before, .tree-view::part(item__action objects-structured-data-type)::before, .tree-view::part(item__action objects-structured-data-type):hover::before, .tree-view::part(item__action objects-structured-data-type):active::before, .tree-view::part(item__action objects-stencil)::before, .tree-view::part(item__action objects-stencil):hover::before, .tree-view::part(item__action objects-stencil):active::before, .tree-view::part(item__action objects-roles)::before, .tree-view::part(item__action objects-roles):hover::before, .tree-view::part(item__action objects-roles):active::before, .tree-view::part(item__action objects-report)::before, .tree-view::part(item__action objects-report):hover::before, .tree-view::part(item__action objects-report):active::before, .tree-view::part(item__action objects-references)::before, .tree-view::part(item__action objects-references):hover::before, .tree-view::part(item__action objects-references):active::before, .tree-view::part(item__action objects-query)::before, .tree-view::part(item__action objects-query):hover::before, .tree-view::part(item__action objects-query):active::before, .tree-view::part(item__action objects-procedure)::before, .tree-view::part(item__action objects-procedure):hover::before, .tree-view::part(item__action objects-procedure):active::before, .tree-view::part(item__action objects-patterns)::before, .tree-view::part(item__action objects-patterns):hover::before, .tree-view::part(item__action objects-patterns):active::before, .tree-view::part(item__action objects-panel-for-sd)::before, .tree-view::part(item__action objects-panel-for-sd):hover::before, .tree-view::part(item__action objects-panel-for-sd):active::before, .tree-view::part(item__action objects-orphant-document)::before, .tree-view::part(item__action objects-orphant-document):hover::before, .tree-view::part(item__action objects-orphant-document):active::before, .tree-view::part(item__action objects-offline-database)::before, .tree-view::part(item__action objects-offline-database):hover::before, .tree-view::part(item__action objects-offline-database):active::before, .tree-view::part(item__action objects-object)::before, .tree-view::part(item__action objects-object):hover::before, .tree-view::part(item__action objects-object):active::before, .tree-view::part(item__action objects-notification-templates)::before, .tree-view::part(item__action objects-notification-templates):hover::before, .tree-view::part(item__action objects-notification-templates):active::before, .tree-view::part(item__action objects-module)::before, .tree-view::part(item__action objects-module):hover::before, .tree-view::part(item__action objects-module):active::before, .tree-view::part(item__action objects-module-open)::before, .tree-view::part(item__action objects-module-open):hover::before, .tree-view::part(item__action objects-module-open):active::before, .tree-view::part(item__action objects-mini-app)::before, .tree-view::part(item__action objects-mini-app):hover::before, .tree-view::part(item__action objects-mini-app):active::before, .tree-view::part(item__action objects-menubar)::before, .tree-view::part(item__action objects-menubar):hover::before, .tree-view::part(item__action objects-menubar):active::before, .tree-view::part(item__action objects-menu)::before, .tree-view::part(item__action objects-menu):hover::before, .tree-view::part(item__action objects-menu):active::before, .tree-view::part(item__action objects-masterpage)::before, .tree-view::part(item__action objects-masterpage):hover::before, .tree-view::part(item__action objects-masterpage):active::before, .tree-view::part(item__action objects-main-object)::before, .tree-view::part(item__action objects-main-object):hover::before, .tree-view::part(item__action objects-main-object):active::before, .tree-view::part(item__action objects-language)::before, .tree-view::part(item__action objects-language):hover::before, .tree-view::part(item__action objects-language):active::before, .tree-view::part(item__action objects-knowledge-base)::before, .tree-view::part(item__action objects-knowledge-base):hover::before, .tree-view::part(item__action objects-knowledge-base):active::before, .tree-view::part(item__action objects-image)::before, .tree-view::part(item__action objects-image):hover::before, .tree-view::part(item__action objects-image):active::before, .tree-view::part(item__action objects-generator)::before, .tree-view::part(item__action objects-generator):hover::before, .tree-view::part(item__action objects-generator):active::before, .tree-view::part(item__action objects-generator-category)::before, .tree-view::part(item__action objects-generator-category):hover::before, .tree-view::part(item__action objects-generator-category):active::before, .tree-view::part(item__action objects-folder)::before, .tree-view::part(item__action objects-folder):hover::before, .tree-view::part(item__action objects-folder):active::before, .tree-view::part(item__action objects-folder-open)::before, .tree-view::part(item__action objects-folder-open):hover::before, .tree-view::part(item__action objects-folder-open):active::before, .tree-view::part(item__action objects-file)::before, .tree-view::part(item__action objects-file):hover::before, .tree-view::part(item__action objects-file):active::before, .tree-view::part(item__action objects-external-object)::before, .tree-view::part(item__action objects-external-object):hover::before, .tree-view::part(item__action objects-external-object):active::before, .tree-view::part(item__action objects-environment-select)::before, .tree-view::part(item__action objects-environment-select):hover::before, .tree-view::part(item__action objects-environment-select):active::before, .tree-view::part(item__action objects-environment-no-select)::before, .tree-view::part(item__action objects-environment-no-select):hover::before, .tree-view::part(item__action objects-environment-no-select):active::before, .tree-view::part(item__action objects-dso)::before, .tree-view::part(item__action objects-dso):hover::before, .tree-view::part(item__action objects-dso):active::before, .tree-view::part(item__action objects-domain)::before, .tree-view::part(item__action objects-domain):hover::before, .tree-view::part(item__action objects-domain):active::before, .tree-view::part(item__action objects-document)::before, .tree-view::part(item__action objects-document):hover::before, .tree-view::part(item__action objects-document):active::before, .tree-view::part(item__action objects-document-workflow)::before, .tree-view::part(item__action objects-document-workflow):hover::before, .tree-view::part(item__action objects-document-workflow):active::before, .tree-view::part(item__action objects-diagram)::before, .tree-view::part(item__action objects-diagram):hover::before, .tree-view::part(item__action objects-diagram):active::before, .tree-view::part(item__action objects-design)::before, .tree-view::part(item__action objects-design):hover::before, .tree-view::part(item__action objects-design):active::before, .tree-view::part(item__action objects-deployment-unit)::before, .tree-view::part(item__action objects-deployment-unit):hover::before, .tree-view::part(item__action objects-deployment-unit):active::before, .tree-view::part(item__action objects-dataview-index)::before, .tree-view::part(item__action objects-dataview-index):hover::before, .tree-view::part(item__action objects-dataview-index):active::before, .tree-view::part(item__action objects-datastore)::before, .tree-view::part(item__action objects-datastore):hover::before, .tree-view::part(item__action objects-datastore):active::before, .tree-view::part(item__action objects-datastore-category)::before, .tree-view::part(item__action objects-datastore-category):hover::before, .tree-view::part(item__action objects-datastore-category):active::before, .tree-view::part(item__action objects-data-view)::before, .tree-view::part(item__action objects-data-view):hover::before, .tree-view::part(item__action objects-data-view):active::before, .tree-view::part(item__action objects-data-selector)::before, .tree-view::part(item__action objects-data-selector):hover::before, .tree-view::part(item__action objects-data-selector):active::before, .tree-view::part(item__action objects-data-provider)::before, .tree-view::part(item__action objects-data-provider):hover::before, .tree-view::part(item__action objects-data-provider):active::before, .tree-view::part(item__action objects-dashboard)::before, .tree-view::part(item__action objects-dashboard):hover::before, .tree-view::part(item__action objects-dashboard):active::before, .tree-view::part(item__action objects-customization)::before, .tree-view::part(item__action objects-customization):hover::before, .tree-view::part(item__action objects-customization):active::before, .tree-view::part(item__action objects-conversational-flows)::before, .tree-view::part(item__action objects-conversational-flows):hover::before, .tree-view::part(item__action objects-conversational-flows):active::before, .tree-view::part(item__action objects-category)::before, .tree-view::part(item__action objects-category):hover::before, .tree-view::part(item__action objects-category):active::before, .tree-view::part(item__action objects-calendars)::before, .tree-view::part(item__action objects-calendars):hover::before, .tree-view::part(item__action objects-calendars):active::before, .tree-view::part(item__action objects-business-process-diagram)::before, .tree-view::part(item__action objects-business-process-diagram):hover::before, .tree-view::part(item__action objects-business-process-diagram):active::before, .tree-view::part(item__action objects-bg-color)::before, .tree-view::part(item__action objects-bg-color):hover::before, .tree-view::part(item__action objects-bg-color):active::before, .tree-view::part(item__action objects-attribute)::before, .tree-view::part(item__action objects-attribute):hover::before, .tree-view::part(item__action objects-attribute):active::before, .tree-view::part(item__action objects-api)::before, .tree-view::part(item__action objects-api):hover::before, .tree-view::part(item__action objects-api):active::before, .tree-view::part(item__action editing-structures-user-index)::before, .tree-view::part(item__action editing-structures-user-index):hover::before, .tree-view::part(item__action editing-structures-user-index):active::before, .tree-view::part(item__action editing-structures-system-index)::before, .tree-view::part(item__action editing-structures-system-index):hover::before, .tree-view::part(item__action editing-structures-system-index):active::before, .tree-view::part(item__action editing-structures-redundant-attribute)::before, .tree-view::part(item__action editing-structures-redundant-attribute):hover::before, .tree-view::part(item__action editing-structures-redundant-attribute):active::before, .tree-view::part(item__action editing-structures-platforms)::before, .tree-view::part(item__action editing-structures-platforms):hover::before, .tree-view::part(item__action editing-structures-platforms):active::before, .tree-view::part(item__action editing-structures-logical-attributes)::before, .tree-view::part(item__action editing-structures-logical-attributes):hover::before, .tree-view::part(item__action editing-structures-logical-attributes):active::before, .tree-view::part(item__action editing-structures-formula-redundant)::before, .tree-view::part(item__action editing-structures-formula-redundant):hover::before, .tree-view::part(item__action editing-structures-formula-redundant):active::before, .tree-view::part(item__action editing-structures-default)::before, .tree-view::part(item__action editing-structures-default):hover::before, .tree-view::part(item__action editing-structures-default):active::before, .tree-view::part(item__action editing-structures-attribute-key)::before, .tree-view::part(item__action editing-structures-attribute-key):hover::before, .tree-view::part(item__action editing-structures-attribute-key):active::before, .tree-view::part(item__action editing-structures-attribute-formula)::before, .tree-view::part(item__action editing-structures-attribute-formula):hover::before, .tree-view::part(item__action editing-structures-attribute-formula):active::before, .tree-view::part(item__action editing-structures-attribute-description)::before, .tree-view::part(item__action editing-structures-attribute-description):hover::before, .tree-view::part(item__action editing-structures-attribute-description):active::before, .tree-view::part(item__action gemini-tools-list-view)::before {
+  content: "";
+  display: block;
+  inline-size: var(--ch-tree-view-item__image-size);
+  block-size: var(--ch-tree-view-item__image-size);
+  content-visibility: auto;
+  contain-intrinsic-size: auto var(--ch-tree-view-item__image-size);
+}
+
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -1678,6 +1827,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/modules/edit-module-server/edit-module-server.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* 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.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/modules/manage-module-references/manage-module-references.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* 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.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,6 +609,14 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles

package/dist/collection/components/modules/manage-module-references/manage-module-references.js

@@ -1,5 +1,14 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxManageModuleReferences_filterIcon, _GxManageModuleReferences_moduleIcon;
 /* STENCIL IMPORTS */
 import { Host, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
 import { renderModuleDataProperties } from "../../../common/common";
 import { Locale } from "../../../common/locale";
 const CSS_BUNDLES = [
@@ -15,6 +24,15 @@ const CSS_BUNDLES = [
 export class GxManageModuleReferences {
     constructor() {
         this.renderedFirstTime = false;
+        _GxManageModuleReferences_filterIcon.set(this, getIconPath({
+            category: "system",
+            name: "filters",
+            colorType: "on-elevation"
+        }));
+        _GxManageModuleReferences_moduleIcon.set(this, getIconPath({
+            category: "objects",
+            name: "module"
+        }));
         // 9.LOCAL METHODS //
         this.updateModulesSelectedVersion = (modulesAll) => {
             if (this.selectedServerId !== this.selectedServerIdOnModulesAllUpdate) {
@@ -154,7 +172,7 @@ export class GxManageModuleReferences {
                     this.getModuleData(module, "action") === "not-installable", fit: true, part: "module-action", onClick: this.moduleActionHandler(module) }, this.getActionFromCurrentModuleVersion()))) : null))))));
         };
         this.renderEmptyStateModules = () => {
-            return (h("gx-ide-empty-state", { stateIcon: "mercury/filters", stateTitle: this._componentLocale.modules.noModulesFilter }));
+            return (h("gx-ide-empty-state", { stateIconSrc: __classPrivateFieldGet(this, _GxManageModuleReferences_filterIcon, "f"), stateTitle: this._componentLocale.modules.noModulesFilter }));
         };
         this.moduleVersionIconColor = (module) => {
             const moduleAction = this.getModuleData(module, "action");
@@ -302,7 +320,7 @@ export class GxManageModuleReferences {
             } }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noAboveFooterPadding: true, noBorderAboveFooter: this.closeProgressBar, part: "servers", containerTitle: this.displayTitle ? this._componentLocale.componentName : null }, h("main", { class: "main" }, h("div", { class: "modules__container" }, h("header", { class: "modules__header" }, h("div", { class: "modules__combo-container" }, h("gxg-label", null, this._componentLocale.modules.selectServer), h("div", { class: "modules__combo" }, h("gxg-combo-box", { disableFilter: true, onValueChanged: this.serverValueChangedHandler }, this.servers.map(item => (h("gxg-combo-box-item", { value: item.id, onItemSelected: this.serverItemSelectedHandler }, item.name)))), this.showServerCommands ? (h("span", { class: "modules__server-commands" }, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", onClick: this.showModuleMenu }))) : null, h("gxg-button", { type: "secondary-icon-only", icon: "gemini-tools/reset", onClick: this.reloadServer })))), h("div", { class: "modules__main" }, h("div", { class: "modules__main-header" }, h("gxg-form-text", { label: this._componentLocale.modules.searchModules, labelPosition: "above", centerLabel: false, onValueChanged: this.handleFilterChangeHandler, disabled: this.loadingServer }), h("gxg-buttons-container", { reduced: true, fullWidth: true, class: "modules__browser", onSelectedButtonChanged: this.selectedButtonChangedHandler }, h("gxg-button", { id: "btn-browse", selected: true, disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer.browse), h("gxg-button", { id: "btn-installed", disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer
             .installed), h("gxg-button", { id: "btn-updates", disabled: this.loadingServer }, this._componentLocale.modules.buttonsContainer.updates))), h("div", { class: "grid-container", ref: el => (this.serversDetail = el) }, this.filteredModules.length > 0
             ? this.renderModulesGrid()
-            : this.renderEmptyStateModules()))), this.selectedModule ? (h("div", { class: "module-info" }, h("header", { class: "module-info__header" }, this.renderVersionName(), this.renderInstalledVersion(), this.renderModuleVersions(), this.renderVersionWarningMessage()), h("div", { class: "module-info__properties gxg-scrollbar" }, renderModuleDataProperties(this.getModuleData(this.selectedModule, "properties"))))) : (h("gx-ide-empty-state", { class: "recent-objects__empty-state", stateIcon: "objects/module", stateTitle: this._componentLocale.modulesInformation.emptyState.title, stateDescription: this._componentLocale.modulesInformation.emptyState
+            : this.renderEmptyStateModules()))), this.selectedModule ? (h("div", { class: "module-info" }, h("header", { class: "module-info__header" }, this.renderVersionName(), this.renderInstalledVersion(), this.renderModuleVersions(), this.renderVersionWarningMessage()), h("div", { class: "module-info__properties gxg-scrollbar" }, renderModuleDataProperties(this.getModuleData(this.selectedModule, "properties"))))) : (h("gx-ide-empty-state", { class: "recent-objects__empty-state", stateIconSrc: __classPrivateFieldGet(this, _GxManageModuleReferences_moduleIcon, "f"), stateTitle: this._componentLocale.modulesInformation.emptyState.title, stateDescription: this._componentLocale.modulesInformation.emptyState
                 .description }))), h("gxg-top-state-bar", { slot: "footer-above", part: "progress-bar", stateType: this.progressState, noBorder: true, caption: this.selectedModuleAction.message ||
                 this._componentLocale.progressBar.defaultCaption, progress: this.progressValue, active: !this.actionCompleted || !this.closeProgressBar, closeType: "not-progress", closedCallback: this.progressBarCloseHandler }))), h("gxg-ide-loader", { loaderTitle: this._componentLocale.servers.loading, ref: el => (this.loaderEl = el), container: this.serversDetail, borderRadius: "0 0 0 8px" })));
     }
@@ -534,4 +552,5 @@ export class GxManageModuleReferences {
             }];
     }
 }
+_GxManageModuleReferences_filterIcon = new WeakMap(), _GxManageModuleReferences_moduleIcon = new WeakMap();
 //# sourceMappingURL=manage-module-references.js.map