@genexus/genexus-ide-ui 0.0.61 → 0.0.62

package/dist/collection/components/{container → _helpers/container}/container.js

@@ -5,9 +5,11 @@ export class GxIdeContainer {
       return {
         "heading": true,
         "heading--inactive": this.inactiveTitle,
+        "heading--slimmer": this.titleType === "secondary",
         "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
         [`heading--justify-${this.headingJustify}`]: true,
-        ["heading--no-padding"]: this.noHeadingPadding
+        "heading--no-padding": this.noHeadingPadding && !this.headingPaddingTop,
+        "heading--padding-top": this.headingPaddingTop
       };
     };
     this.contentClasses = () => {
@@ -17,10 +19,19 @@ export class GxIdeContainer {
         "content--no-padding": this.noContentPadding,
         "content--no-gap": this.noContentGap,
         "content--no-border-top": this.noContentBorderTop,
+        "content--border-end": this.contentBorderEnd,
         [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
         [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
       };
     };
+    this.aboveFooter = () => {
+      return this.hasAboveFooterSlot ? (h("footer", { class: {
+          "footer-above": true,
+          "footer-above--no-border-top": this.noBorderAboveFooter,
+          "footer-above--no-padding": this.noAboveFooterPadding,
+          "footer-above--slimmer": this.slimmerFooter
+        } }, h("slot", { name: "footer-above" }))) : null;
+    };
     this.footer = () => {
       return this.hasFooterSlot ? (h("footer", { class: {
           "footer": true,
@@ -29,13 +40,14 @@ export class GxIdeContainer {
             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.titleType = "primary";
     this.displayBorder = false;
     this.displayBorderTop = false;
     this.displayBorderEnd = false;
@@ -45,6 +57,7 @@ export class GxIdeContainer {
     this.titleAlignment = "center";
     this.noHeadingBorder = false;
     this.noHeadingPadding = false;
+    this.headingPaddingTop = false;
     this.headingJustify = "center";
     this.flexContent = false;
     this.noContentBorderTop = false;
@@ -52,6 +65,10 @@ export class GxIdeContainer {
     this.noContentGap = false;
     this.alignItems = undefined;
     this.justifyContent = undefined;
+    this.contentBorderEnd = false;
+    this.slimmerAboveFooter = false;
+    this.noAboveFooterPadding = false;
+    this.noBorderAboveFooter = false;
     this.slimmerFooter = false;
     this.noFooterPadding = false;
     this.footerJustify = "end";
@@ -60,7 +77,9 @@ export class GxIdeContainer {
     this.hasHeaderSlot = false;
     this.hasSlottedContent = false;
     this.hasFooterSlot = false;
+    this.hasAboveFooterSlot = false;
     this.hasOnlyHeading = false;
+    this.hasOnlyContent = false;
     this.hasOnlyFooter = false;
   }
   // 4.PUBLIC PROPERTY API /
@@ -84,17 +103,34 @@ export class GxIdeContainer {
       this.hasSlottedContent = true;
     }
     // footer
+    const footerAboveSlot = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
     const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
     const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
     if (footerStartSlot.length || footerEndSlot.length) {
       this.hasFooterSlot = true;
     }
+    if (footerAboveSlot.length) {
+      this.hasAboveFooterSlot = true;
+    }
   }
   evaluateSections() {
-    if (!this.hasSlottedContent && !this.hasFooterSlot) {
+    // has only heading
+    if (!this.hasSlottedContent &&
+      !this.hasFooterSlot &&
+      !this.hasAboveFooterSlot) {
       this.hasOnlyHeading = true;
     }
-    if (!this.hasSlottedContent && !this.containerTitle) {
+    // has only content
+    if (this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasAboveFooterSlot &&
+      !this.hasFooterSlot) {
+      this.hasOnlyContent = true;
+    }
+    // has only footer
+    if (!this.hasSlottedContent &&
+      !this.containerTitle &&
+      !this.hasAboveFooterSlot) {
       this.hasOnlyFooter = true;
     }
   }
@@ -102,8 +138,9 @@ export class GxIdeContainer {
   render() {
     this.evaluateSections();
     const result = [
-      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gxg-title", { type: "title-04", alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
+      this.containerTitle || this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, this.containerTitle ? (h("gx-ide-title", { type: this.titleType, alignment: this.titleAlignment }, this.containerTitle)) : null, this.hasHeaderSlot ? (h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" }))) : null)) : null,
       this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
+      this.aboveFooter(),
       this.footer()
     ];
     return (h(Host, null, h("div", { class: {
@@ -114,7 +151,8 @@ export class GxIdeContainer {
         "container--display-border-end": this.displayBorderEnd,
         "container--display-border-bottom": this.displayBorderBottom,
         "container--display-border-start": this.displayBorderStart,
-        "container--overflow-hidden-y": this.footerSubtleShadow
+        "container--overflow-hidden-y": this.footerSubtleShadow,
+        "container--only-content": this.hasOnlyContent
       } }, result)));
   }
   static get is() { return "gx-ide-container"; }
@@ -166,6 +204,29 @@ export class GxIdeContainer {
         "attribute": "container-title",
         "reflect": false
       },
+      "titleType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TitleType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "TitleType": {
+              "location": "import",
+              "path": "../title/title"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The title of the container"
+        },
+        "attribute": "title-type",
+        "reflect": false,
+        "defaultValue": "\"primary\""
+      },
       "displayBorder": {
         "type": "boolean",
         "mutable": false,
@@ -337,6 +398,24 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "false"
       },
+      "headingPaddingTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Adds padding to the top of the heading"
+        },
+        "attribute": "heading-padding-top",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "headingJustify": {
         "type": "string",
         "mutable": false,
@@ -475,6 +554,78 @@ export class GxIdeContainer {
         "reflect": false,
         "defaultValue": "undefined"
       },
+      "contentBorderEnd": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display border end on the content"
+        },
+        "attribute": "content-border-end",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "slimmerAboveFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the above footer vertical padding slimmer"
+        },
+        "attribute": "slimmer-above-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noAboveFooterPadding": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the above padding from the footer"
+        },
+        "attribute": "no-above-footer-padding",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "noBorderAboveFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Removes the above border top"
+        },
+        "attribute": "no-border-above-footer",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "slimmerFooter": {
         "type": "boolean",
         "mutable": false,
@@ -576,7 +727,9 @@ export class GxIdeContainer {
       "hasHeaderSlot": {},
       "hasSlottedContent": {},
       "hasFooterSlot": {},
+      "hasAboveFooterSlot": {},
       "hasOnlyHeading": {},
+      "hasOnlyContent": {},
       "hasOnlyFooter": {}
     };
   }

package/dist/collection/components/{entity-selector → _helpers/entity-selector}/entity-selector.js

@@ -113,7 +113,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -168,7 +168,7 @@ export class GxIdeEntitySelector {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "false",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
@@ -211,7 +211,7 @@ export class GxIdeEntitySelector {
             },
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -231,7 +231,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         },
@@ -269,7 +269,7 @@ export class GxIdeEntitySelector {
           "references": {
             "EntityData": {
               "location": "import",
-              "path": "../../common/types"
+              "path": "../../../common/types"
             }
           }
         }

package/dist/collection/components/{list-selector → _helpers/list-selector}/list-selector-item/list-selector-item.css

@@ -21,7 +21,7 @@ gx-ide-list-selector-item:hover input:checked + .label {
 }
 
 gx-ide-list-selector-item:not(:first-child) {
-  border-block-start: 1px solid var(--gx-ide-container-border-color);
+  border-block-start: var(--gx-ide-list-items-border);
 }
 
 /*change border color if checked*/
@@ -62,6 +62,9 @@ input:checked + .label {
 }
 
 /*label*/
+.label__index {
+  align-self: baseline;
+}
 .label__wrapper {
   display: flex;
   min-height: 28px;
@@ -71,8 +74,11 @@ input:checked + .label {
   padding: var(--spacing-comp-01) var(--spacing-comp-02);
   width: 100%;
 }
-.label__wrapper__description {
+.label__description {
   flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-comp-02);
 }
 
 /*no border*/
@@ -85,4 +91,6 @@ gx-ide-list-selector-item[no-border] {
   display: flex;
   align-items: center;
   justify-content: center;
-}
+}
+
+/*universal slot end*/

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

@@ -4,6 +4,7 @@ import { Host, h } from "@stencil/core";
 export class GxIdeListSelectorItem {
   constructor() {
     this.hasUniversalSlot = false;
+    this.index = undefined;
     // 6.COMPONENT LIFECYCLE METHODS //
     // 7.LISTENERS //
     // 8.PUBLIC METHODS API //
@@ -67,6 +68,19 @@ export class GxIdeListSelectorItem {
         this.parentList.listName &&
         (this.name = this.parentList.listName);
     };
+    this.evaluateOrderedList = () => {
+      if (this.parentIsListSelector && this.parentList.ordered) {
+        let index = Array.from(this.parentList.children).indexOf(this.el) + 1;
+        if (index < 10) {
+          // This will make descriptions to be nicely aligned, between one digit, and two digit indexes items.
+          index = `0${index}`;
+        }
+        else {
+          index = `${index}`;
+        }
+        this.index = index;
+      }
+    };
     this.evaluateIconColor = () => {
       this.parentIsListSelector &&
         this.parentList.iconsColor &&
@@ -94,6 +108,7 @@ export class GxIdeListSelectorItem {
     this.iconColor = undefined;
     this.iconSize = undefined;
     this.noBorder = false;
+    this.universalSlotEnd = false;
   }
   // 5.EVENTS (EMIT) //
   componentWillLoad() {
@@ -107,10 +122,11 @@ export class GxIdeListSelectorItem {
     this.evaluateBorder();
     this.evaluateUniversalSlot();
     this.assignName();
+    this.evaluateOrderedList();
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue)))));
+    return (h(Host, { role: "listitem" }, h("input", { type: this.type, id: this.itemId, name: this.name, value: this.itemValue, checked: this.itemChecked, onChange: this.onChangeHandler, disabled: this.readonly, part: "input" }), h("label", { class: "label", htmlFor: this.itemId, part: "label" }, h("div", { class: "label__wrapper" }, this.index ? (h("span", { class: "label__index" }, this.index, ". ")) : null, this.icon ? (h("gxg-icon", { class: "label__icon", type: this.icon, size: this.iconSize, color: this.iconColor, part: "icon" })) : null, this.hasUniversalSlot ? (h("span", { class: "label__universal-slot", part: "universal-slot" }, h("slot", { name: "universal" }))) : null, h("span", { class: "label__description", part: "description" }, this.itemValue ? this.itemValue : h("slot", null))))));
   }
   static get is() { return "gx-ide-list-selector-item"; }
   static get originalStyleUrls() {
@@ -289,6 +305,24 @@ export class GxIdeListSelectorItem {
         "attribute": "no-border",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "universalSlotEnd": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays the universal slot at the end, instead of at the benign"
+        },
+        "attribute": "universal-slot-end",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
@@ -305,7 +339,7 @@ export class GxIdeListSelectorItem {
         },
         "complexType": {
           "original": "ItemData",
-          "resolved": "{ itemId: string; itemValue: string; }",
+          "resolved": "{ itemId: string; itemValue: string; itemIcon?: string; }",
           "references": {
             "ItemData": {
               "location": "local"

package/dist/collection/components/{list-selector → _helpers/list-selector}/list-selector.js

@@ -136,7 +136,7 @@ export class GxIdeListSelector {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "false",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },
@@ -154,7 +154,7 @@ export class GxIdeListSelector {
         "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "false",
+          "original": "boolean",
           "resolved": "boolean",
           "references": {}
         },

package/dist/collection/components/_helpers/switcher/switch-panel/switch-panel.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/_helpers/switcher/switch-panel/switch-panel.js

@@ -0,0 +1,18 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeSwitchPanel {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "gx-ide-switch-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["switch-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["switch-panel.css"]
+    };
+  }
+}

package/dist/collection/components/_helpers/switcher/switcher.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/_helpers/switcher/switcher.js

@@ -0,0 +1,18 @@
+import { Host, h } from "@stencil/core";
+export class GxIdeSwitcher {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "gx-ide-switcher"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["switcher.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["switcher.css"]
+    };
+  }
+}

package/dist/collection/components/_helpers/title/title.css

@@ -0,0 +1,42 @@
+:host {
+  --gx-ide-title-padding: var(--gx-ide-container--padding, --spacing-comp-03);
+  display: flex;
+  flex-direction: column;
+  color: var(--gx-ide-component-text-color);
+  font-family: var(--font-family-primary);
+  line-height: 1.6em;
+  background-color: transparent;
+  padding: 0;
+}
+
+/*alignment*/
+:host(.alignment--start) {
+  align-items: start;
+}
+
+:host(.alignment--center) {
+  align-items: center;
+}
+
+/*padding*/
+:host(.alignment--start) {
+  text-align: start;
+}
+
+:host([padding]) {
+  padding: var(--gx-ide-title-padding);
+}
+
+:host([no-padding-bottom]) {
+  padding-bottom: 0;
+}
+
+/*border*/
+:host([border]) {
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
+}
+
+/*type*/
+:host(.title-type--secondary) {
+  color: var(--gray-06);
+}