@genexus/genexus-ide-ui 0.0.59 → 0.0.61

package/dist/collection/components/container/container.css

@@ -321,18 +321,19 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: var(--gxg-scrollbar-width);
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gxg-scrollbar-track-background);
-  border-radius: var(--gxg-scrollbar-track-border-radius);
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gxg-scrollbar-track-thumb-background);
-  border-radius: var(--gxg-scrollbar-track-thumb-radius);
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gxg-scrollbar-track-thumb-hover-background);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+  cursor: pointer;
 }
 
 /*******************************
@@ -341,24 +342,15 @@ HOST / GENERAL
 :host {
   --gxg-container-elements-spacing: var(--spacing-comp-03);
   display: block;
-}
-:host .content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gx-ide-form-items-gap);
-}
-
-/*full-height*/
-:host([full-height]) {
   height: 100%;
+  box-sizing: border-box;
 }
-:host([full-height]) .container {
+
+.container {
+  display: grid;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-:host([full-height]) .content {
-  flex-grow: 1;
+  grid-template-rows: auto 1fr auto;
+  box-sizing: border-box;
 }
 
 .heading,
@@ -401,6 +393,10 @@ HOST / GENERAL
   border-inline-start: 1px solid var(--gx-ide-container-border-color);
 }
 
+.container--overflow-hidden-y {
+  overflow-y: hidden;
+}
+
 /*******************************
 HEADING
 ********************************/
@@ -418,30 +414,37 @@ HEADING
 .heading--no-padding {
   padding: 0;
 }
+.heading--inactive {
+  color: var(--gxg-color--disabled);
+}
 
 /*******************************
 CONTENT
 ********************************/
 .content {
-  display: block;
   overflow-x: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gx-ide-form-items-gap);
+  box-sizing: border-box;
   /* Track */
   /* Handle */
   /* Handle on hover */
 }
 .content::-webkit-scrollbar {
-  width: var(--gxg-scrollbar-width);
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .content::-webkit-scrollbar-track {
-  background-color: var(--gxg-scrollbar-track-background);
-  border-radius: var(--gxg-scrollbar-track-border-radius);
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .content::-webkit-scrollbar-thumb {
-  background: var(--gxg-scrollbar-track-thumb-background);
-  border-radius: var(--gxg-scrollbar-track-thumb-radius);
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .content::-webkit-scrollbar-thumb:hover {
-  background: var(--gxg-scrollbar-track-thumb-hover-background);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+  cursor: pointer;
 }
 .content--no-padding {
   padding: 0;
@@ -494,4 +497,11 @@ FOOTER
 }
 .footer--no-padding {
   padding: 0;
+}
+.footer--slimmer {
+  padding-top: var(--spacing-comp-02);
+  padding-bottom: var(--spacing-comp-02);
+}
+.footer--subtle-shadow {
+  box-shadow: rgba(var(--color-shadow--rgb), 0.1) 0px 4px 16px, rgba(var(--color-shadow--rgb), 0.05) 0px 8px 32px;
 }

package/dist/collection/components/container/container.js

@@ -4,6 +4,7 @@ export class GxIdeContainer {
     this.headingClasses = () => {
       return {
         "heading": true,
+        "heading--inactive": this.inactiveTitle,
         "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
         [`heading--justify-${this.headingJustify}`]: true,
         ["heading--no-padding"]: this.noHeadingPadding
@@ -23,12 +24,17 @@ export class GxIdeContainer {
     this.footer = () => {
       return this.hasFooterSlot ? (h("footer", { class: {
           "footer": true,
-          "footer--no-border": this.hasOnlyFooter || !this.hasSlottedContent,
+          "footer--no-border": this.hasOnlyFooter ||
+            !this.hasSlottedContent ||
+            this.noBorderFooter,
           [`footer--justify-${this.footerJustify}`]: true,
           [`footer--justify-${this.footerJustify}`]: true,
-          ["footer--no-padding"]: this.noFooterPadding
+          ["footer--no-padding"]: this.noFooterPadding,
+          "footer--slimmer": this.slimmerFooter,
+          "footer--subtle-shadow": this.footerSubtleShadow
         } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
     };
+    this.inactiveTitle = false;
     this.containerTitle = undefined;
     this.displayBorder = false;
     this.displayBorderTop = false;
@@ -36,7 +42,6 @@ export class GxIdeContainer {
     this.displayBorderBottom = false;
     this.displayBorderStart = false;
     this.sectionsPadding = "m";
-    this.fullHeight = false;
     this.titleAlignment = "center";
     this.noHeadingBorder = false;
     this.noHeadingPadding = false;
@@ -47,9 +52,11 @@ export class GxIdeContainer {
     this.noContentGap = false;
     this.alignItems = undefined;
     this.justifyContent = undefined;
+    this.slimmerFooter = false;
     this.noFooterPadding = false;
     this.footerJustify = "end";
     this.noBorderFooter = false;
+    this.footerSubtleShadow = false;
     this.hasHeaderSlot = false;
     this.hasSlottedContent = false;
     this.hasFooterSlot = false;
@@ -106,7 +113,8 @@ export class GxIdeContainer {
         "container--display-border-top": this.displayBorderTop,
         "container--display-border-end": this.displayBorderEnd,
         "container--display-border-bottom": this.displayBorderBottom,
-        "container--display-border-start": this.displayBorderStart
+        "container--display-border-start": this.displayBorderStart,
+        "container--overflow-hidden-y": this.footerSubtleShadow
       } }, result)));
   }
   static get is() { return "gx-ide-container"; }
@@ -123,6 +131,24 @@ export class GxIdeContainer {
   }
   static get properties() {
     return {
+      "inactiveTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "By setting the title to inactive, the color will be gray instead of black."
+        },
+        "attribute": "inactive-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "containerTitle": {
         "type": "string",
         "mutable": false,
@@ -252,24 +278,6 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "\"m\""
       },
-      "fullHeight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the container full height (content will grow only)"
-        },
-        "attribute": "full-height",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "titleAlignment": {
         "type": "string",
         "mutable": false,
@@ -467,6 +475,24 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "undefined"
       },
+      "slimmerFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the footer vertical padding slimmer"
+        },
+        "attribute": "slimmer-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "noFooterPadding": {
         "type": "boolean",
         "mutable": false,
@@ -524,6 +550,24 @@ export class GxIdeContainer {
         "attribute": "no-border-footer",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "footerSubtleShadow": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds a subtle shadow to the footer"
+        },
+        "attribute": "footer-subtle-shadow",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -321,18 +321,19 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: var(--gxg-scrollbar-width);
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gxg-scrollbar-track-background);
-  border-radius: var(--gxg-scrollbar-track-border-radius);
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gxg-scrollbar-track-thumb-background);
-  border-radius: var(--gxg-scrollbar-track-thumb-radius);
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gxg-scrollbar-track-thumb-hover-background);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+  cursor: pointer;
 }
 
 :host {

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

@@ -321,18 +321,19 @@ FORM ELEMENTS
   /* Handle on hover */
 }
 .gxg-scrollbar::-webkit-scrollbar {
-  width: var(--gxg-scrollbar-width);
+  width: var(--gxg-scrollbar-width, 6px);
 }
 .gxg-scrollbar::-webkit-scrollbar-track {
-  background-color: var(--gxg-scrollbar-track-background);
-  border-radius: var(--gxg-scrollbar-track-border-radius);
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--gxg-scrollbar-track-thumb-background);
-  border-radius: var(--gxg-scrollbar-track-thumb-radius);
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
 }
 .gxg-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--gxg-scrollbar-track-thumb-hover-background);
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+  cursor: pointer;
 }
 
 :host {
@@ -380,9 +381,7 @@ FORM ELEMENTS
 }
 
 :host(:focus-within) .wrapper {
-  outline-style: solid;
-  outline-color: var(--gxg-border-color--focused);
-  outline-width: var(--border-width-md);
+  outline: var(--border-width-md) solid var(--gxg-border-color--focused);
   outline-offset: -2px;
 }
 

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

@@ -0,0 +1,366 @@
+:root {
+  --ui-animaton-speed: 0.2s;
+}
+
+/*ALIGNMENT*/
+/*Ellipsis*/
+/*****************************************************
+TYPOGRAPHY
+*****************************************************/
+/*Title 01 (Positive)*/
+.gxg-title-01 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+/*Title 01 (Negative)*/
+.gxg-title-01--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 02 (Positive)*/
+.gxg-title-02 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-02--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 03*/
+.gxg-title-03 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+}
+
+.gxg-title-03--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-xs);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  text-transform: uppercase;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Title 04*/
+.gxg-title-04 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-title-04--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-md);
+  letter-spacing: var(--letter-spacing-md);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+/*Title 05*/
+.gxg-title-05 {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+}
+
+.gxg-title-05--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-sm);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.556em;
+  color: var(--color-on-primary);
+}
+
+/*Text*/
+.gxg-text {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+}
+
+.gxg-text--negative {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-on-primary);
+}
+
+.gxg-text--gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--gray-05);
+}
+
+/*Quote*/
+.gxg-quote {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  font-style: italic;
+}
+
+.gxg-quote--negative {
+  color: var(--color-on-primary);
+}
+
+/*Link*/
+.gxg-link {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+}
+.gxg-link:hover {
+  color: var(--color-primary-hover);
+}
+.gxg-link:active {
+  color: var(--color-primary-active);
+}
+
+.gxg-link-gray {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+}
+.gxg-link-gray:hover {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  display: inline-block;
+  color: var(--gray-04);
+  color: var(--gray-06);
+}
+
+/*Alerts*/
+.gxg-alert-error {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-error-dark);
+  display: inline-block;
+}
+
+.gxg-alert-warning {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-warning-dark);
+  display: inline-block;
+}
+
+.gxg-alert-success {
+  font-family: var(--font-family-primary);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-sm);
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-on-background);
+  text-align: start;
+  line-height: 1.455em;
+  color: var(--color-success-dark);
+  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(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+.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
+*****************************************************/
+.gxg-button-styles {
+  font-family: var(--font-family-primary) !important;
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-sm) !important;
+  letter-spacing: var(--letter-spacing-xs);
+  color: var(--color-primary-enabled);
+  text-align: center;
+  line-height: 1.455em;
+}
+
+/*****************************************************
+FORM ELEMENTS
+*****************************************************/
+.gxg-scrollbar {
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gxg-scrollbar::-webkit-scrollbar {
+  width: var(--gxg-scrollbar-width, 6px);
+}
+.gxg-scrollbar::-webkit-scrollbar-track {
+  background-color: var(--gxg-scrollbar-track-background, --gray-02);
+  border-radius: var(--gxg-scrollbar-track-border-radius, 10px);
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--gxg-scrollbar-track-thumb-background, --gray-05);
+  border-radius: var(--gxg-scrollbar-track-thumb-radius, 10px);
+}
+.gxg-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);
+  cursor: pointer;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  color: var(--color-primary-enabled);
+  /*label*/
+  /*wrapper*/
+}
+:host .container {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+:host label {
+  font-size: 14px;
+}
+:host .wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gx-ide-grid-column-gap);
+}
+
+/*label position*/
+:host([label-position=start]) {
+  flex-direction: row;
+}
+:host([label-position=start]) .wrapper {
+  flex: 1;
+}