@genexus/genexus-ide-ui 0.0.60 → 0.0.62

package/dist/collection/components/list-selector/list-selector-item/list-selector-item.css

@@ -1,51 +0,0 @@
-/*Gemini*/
-/*Gx Ide*/
-*,
-::after,
-::before {
-  box-sizing: border-box;
-}
-
-gx-ide-list-selector-item {
-  display: block;
-  max-width: 100%;
-  display: flex;
-}
-
-gx-ide-list-selector-item:not(:last-child) {
-  border-block-end: 1px solid var(--gx-ide-container-border-color);
-}
-
-/*selectable*/
-gx-ide-list-selector-item[selectable]:not([selectable=false]):hover label {
-  cursor: pointer;
-  background-color: var(--gxg-background-color-item-hover);
-}
-
-/*ellipsis*/
-gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) label {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-input {
-  width: 0;
-  height: 0;
-  opacity: 0;
-  margin: 0;
-}
-input:focus + label {
-  outline: var(--border-width-md) solid var(--color-primary-active);
-  outline-offset: -2px;
-}
-input:checked + label {
-  background-color: var(--gxg-background-color-item-selected);
-}
-
-label {
-  flex-shrink: 0;
-  display: block;
-  padding: var(--spacing-comp-01);
-  width: 100%;
-}

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

@@ -1,182 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class GxIdeListSelectorItem {
-  constructor() {
-    // 6.COMPONENT LIFECYCLE METHODS //
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    /**
-     * Evaluates if is selectable, considering the parent list-selector 'selectable' property value, only if it is undefined on this item
-     */
-    this.evaluateSelectable = () => {
-      if (this.selectable === undefined && this.parentIsListSelector) {
-        this.selectable = this.parentList.selectable;
-      }
-    };
-    /**
-     * Evaluates if text should truncate with ellipsis, considering the parent list-selector 'ellipsis' property value, only if it is undefined on this item
-     */
-    this.evaluateEllipsis = () => {
-      if (this.ellipsis === undefined && this.parentIsListSelector) {
-        this.ellipsis = this.parentList.ellipsis;
-      }
-    };
-    /**
-     * Evaluates if this item should be initially checked, only if the parent list-selector listValue equals this item value.
-     */
-    this.evaluateChecked = () => {
-      if (this.checked === undefined &&
-        this.parentIsListSelector &&
-        this.parentList.value !== undefined &&
-        this.parentList.value === this.itemValue) {
-        this.checked = true;
-      }
-    };
-    /**
-     * Checks if this item parentElement is a gx-ide-list-selector, and assigns a reference
-     */
-    this.evaluateParentIsListSelector = () => {
-      const parentList = this.el.parentElement;
-      this.parentIsListSelector = (parentList === null || parentList === void 0 ? void 0 : parentList.nodeName) === "GX-IDE-LIST-SELECTOR";
-      this.parentIsListSelector && (this.parentList = parentList);
-    };
-    /**
-     * Gets the listName required value, that is needed for the list selection to properly work
-     */
-    this.assignName = () => {
-      this.parentIsListSelector &&
-        this.parentList.listName &&
-        (this.name = this.parentList.listName);
-    };
-    this.onChangeHandler = () => {
-      if (this.selectable) {
-        this.itemSelected.emit({
-          itemId: this.itemId,
-          itemValue: this.itemValue
-        });
-      }
-    };
-    this.itemId = undefined;
-    this.itemValue = undefined;
-    this.selectable = undefined;
-    this.ellipsis = undefined;
-  }
-  // 5.EVENTS (EMIT) //
-  componentWillLoad() {
-    this.evaluateParentIsListSelector();
-    this.evaluateSelectable();
-    this.evaluateEllipsis();
-    this.evaluateChecked();
-    this.assignName();
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return (h(Host, { role: "listitem" }, h("input", { type: "radio", id: this.itemId, name: this.name, value: this.itemValue, checked: this.checked, onChange: this.onChangeHandler, disabled: !this.selectable }), h("label", { htmlFor: this.itemId }, this.itemValue)));
-  }
-  static get is() { return "gx-ide-list-selector-item"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["list-selector-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["list-selector-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "itemId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The item id"
-        },
-        "attribute": "item-id",
-        "reflect": false
-      },
-      "itemValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The item value, that act as a label as well"
-        },
-        "attribute": "item-value",
-        "reflect": false
-      },
-      "selectable": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "It allows to select the item by clicking on it. It will emit the item-id"
-        },
-        "attribute": "selectable",
-        "reflect": true
-      },
-      "ellipsis": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The presence of this property will force the item text to not-wrap, and have ellipsis"
-        },
-        "attribute": "ellipsis",
-        "reflect": true
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "itemSelected",
-        "name": "itemSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emits the item data"
-        },
-        "complexType": {
-          "original": "ItemData",
-          "resolved": "{ itemId: string; itemValue: string; }",
-          "references": {
-            "ItemData": {
-              "location": "local"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}

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

@@ -1,174 +0,0 @@
-/* STENCIL IMPORTS */
-import { Host, h } from "@stencil/core";
-export class GxIdeListSelector {
-  constructor() {
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.getItemByValue = (newValue) => {
-      const allListItems = Array.from(this.el.querySelectorAll("gx-ide-list-selector-item"));
-      return allListItems.find(item => {
-        return item.itemValue === newValue;
-      });
-    };
-    this.listTitle = undefined;
-    this.ordered = false;
-    this.selectable = true;
-    this.ellipsis = true;
-    this.value = undefined;
-    this.listName = undefined;
-  }
-  valueHandler(newValue) {
-    const foundItem = this.getItemByValue(newValue);
-    if (foundItem) {
-      const input = foundItem.querySelector("input");
-      input.checked = true;
-    }
-  }
-  // 5.EVENTS (EMIT) //
-  // 6.COMPONENT LIFECYCLE METHODS //
-  // 7.LISTENERS //
-  itemSelectedHandler(event) {
-    this.value = event.detail.itemValue;
-  }
-  // 10.RENDER() FUNCTION //
-  render() {
-    return (h(Host, null, this.listTitle ? (h("gxg-title", { type: "title-04" }, this.listTitle)) : null, this.ordered ? (h("ol", { class: "list" }, h("slot", null))) : (h("ul", { class: "list" }, h("slot", null)))));
-  }
-  static get is() { return "gx-ide-list-selector"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["list-selector.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["list-selector.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "listTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The list title (optional)"
-        },
-        "attribute": "list-title",
-        "reflect": false
-      },
-      "ordered": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "false",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "It determines if the list is ordered, or unordered"
-        },
-        "attribute": "ordered",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "selectable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "true",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "It allows to select a single item, by clicking on it. It will emit the item-id of the clicked item"
-        },
-        "attribute": "selectable",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "ellipsis": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "true",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The presence of this property will force all the items to not-wrap, and have ellipsis"
-        },
-        "attribute": "ellipsis",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the initial or current checked list-item"
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "listName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of this list. This is a required attribute for the list to work."
-        },
-        "attribute": "list-name",
-        "reflect": false
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "valueHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "itemSelected",
-        "method": "itemSelectedHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}

package/dist/components/container2.js

@@ -1,253 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$1 } from './title.js';
-
-const containerCss = ":root{--ui-animaton-speed:0.2s}.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}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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)}.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}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.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-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}.gxg-scrollbar{}.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{--gxg-container-elements-spacing:var(--spacing-comp-03);display:block}fieldset{padding:0;margin-inline-start:0;margin-inline-end:0;border:none}.heading,.content,.footer{padding:var(--gxg-container--padding)}:host(.gxg-container--padding-s){--gxg-container--padding:var(--spacing-comp-02)}:host(.gxg-container--padding-m){--gxg-container--padding:var(--spacing-comp-03)}:host(.gxg-container--padding-l){--gxg-container--padding:var(--spacing-comp-04)}:host(.gxg-container--display-border){border:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-top){border-top:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-end){border-inline-end:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-bottom){border-bottom:1px solid var(--gxg-border-color--regular)}:host(.gxg-container--display-border-start){border-inline-start:1px solid var(--gxg-border-color--regular)}.heading{display:flex;width:100%;box-sizing:border-box;border-bottom:1px solid var(--gxg-border-color--regular)}.heading--justify-start{justify-content:start}.heading--justify-center{justify-content:center}.heading--justify-end{justify-content:end}.heading--no-border{border-bottom:0}.heading--no-padding{padding:0}.content{display:flex;flex-direction:column;gap:var(--gxg-container-elements-spacing)}.content--no-padding{padding:0}.content--no-gap{gap:0}.footer{display:flex;border-top:1px solid var(--gxg-border-color--regular);gap:var(--gxg-container-elements-spacing)}.footer--justify-start{justify-content:start}.footer--justify-center{justify-content:center}.footer--justify-end{justify-content:end}.footer--no-border{border-top:0}.footer--no-padding{padding:0}";
-
-const GxgContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /*
-  INDEX:
-  1.OWN PROPERTIES
-  2.REFERENCE TO ELEMENTS
-  3.STATE() VARIABLES
-  4.PUBLIC PROPERTY API
-  5.EVENTS (EMMIT)
-  6.COMPONENT LIFECYCLE EVENTS
-  7.LISTENERS
-  8.PUBLIC METHODS API
-  9.LOCAL METHODS
-  10.RENDER() FUNCTION
-  
-  Code organization suggested by StencilJs:
-  https://stenciljs.com/docs/style-guide#code-organization
-  */
-    /** ******************************
-     *  1.OWN PROPERTIES
-     ********************************/
-    /*GENERAL*/
-    /**
-     * Makes this component content act as a fieldset
-     */
-    this.fieldset = false;
-    /**
-     * Dsiplays a border all around the container
-     */
-    this.displayBorder = false;
-    /**
-     * Removes the component border on the top
-     */
-    this.displayBorderTop = false;
-    /**
-     * Removes the component border on the end
-     */
-    this.displayBorderEnd = false;
-    /**
-     * Removes the component border on the bottom
-     */
-    this.displayBorderBottom = false;
-    /**
-     * Removes the component border on the start
-     */
-    this.displayBorderStart = false;
-    /**
-     * The container general padding (applies to .heading, .content, and .footer)
-     */
-    this.sectionsPadding = "m";
-    /*HEADING*/
-    /**
-     * Removes the border bottom from the heading
-     */
-    this.noHeadingBorder = false;
-    /**
-     * Removes the padding from the heading
-     */
-    this.noHeadingPadding = false;
-    /**
-     * The heading justification
-     */
-    this.headingJustify = "center";
-    /*CONTENT*/
-    /**
-     * Removes the padding from the content
-     */
-    this.noContentPadding = false;
-    /**
-     * Removes the gap from the content
-     */
-    this.noContentGap = false;
-    /*FOOTER*/
-    /**
-     * Removes the padding from the footer
-     */
-    this.noFooterPadding = false;
-    /**
-     * The footer justification
-     */
-    this.footerJustify = "end";
-    /**
-     * Removes the border top from the footer
-     */
-    this.noBorderFooter = false;
-    /** *****************************
-     *  3.STATE() VARIABLES
-     ********************************/
-    /**
-     * A boolean variable indicating if the component has or not any content slotted content (regular slotted content, without 'slot' attribute)
-     */
-    this.hasSlottedContent = false;
-    /**
-     * A boolean variable indicating if the component has or not any content for the 'footer' slot
-     */
-    this.hasFooterSlot = false;
-    /**
-     * A boolean variable indicating that the container only has the heading section
-     */
-    this.hasOnlyHeading = false;
-    /**
-     * A boolean variable indicating that the container only has the footer section
-     */
-    this.hasOnlyFooter = false;
-    this.headingClasses = () => {
-      return {
-        heading: true,
-        "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
-        [`heading--justify-${this.headingJustify}`]: true,
-        ["heading--no-padding"]: this.noHeadingPadding,
-      };
-    };
-    this.contentClasses = () => {
-      return {
-        content: true,
-        "content--no-padding": this.noContentPadding,
-        "content--no-gap": this.noContentGap,
-      };
-    };
-    this.footer = () => {
-      return this.hasFooterSlot ? (h("footer", { class: {
-          footer: true,
-          "footer--no-border": this.noHeadingBorder ||
-            this.hasOnlyFooter ||
-            !this.hasSlottedContent,
-          [`footer--justify-${this.footerJustify}`]: true,
-          [`footer--justify-${this.footerJustify}`]: true,
-          ["footer--no-padding"]: this.noFooterPadding,
-        } }, h("slot", { name: "footer" }))) : null;
-    };
-  }
-  /** *****************************
-   4.PUBLIC PROPERTY API
-   ********************************/
-  /** *****************************
-   *  5.EVENTS (EMMIT)
-   ********************************/
-  /** *****************************
-   *  6.COMPONENT LIFECYCLE EVENTS
-   ********************************/
-  componentWillLoad() {
-    this.evaluateSlots();
-  }
-  /** *****************************
-   *  7.LISTENERS
-   ********************************/
-  /** *****************************
-   *  8.PUBLIC METHODS API
-   ********************************/
-  /** *****************************
-   *  9.LOCAL METHODS
-   ********************************/
-  evaluateSlots() {
-    //content
-    const slottedContent = this.el.querySelectorAll(":not([slot])");
-    if (slottedContent.length) {
-      this.hasSlottedContent = true;
-    }
-    //footer
-    const footerSlot = this.el.querySelectorAll('[slot="footer"]');
-    if (footerSlot.length) {
-      this.hasFooterSlot = true;
-    }
-  }
-  evaluateSections() {
-    if (!this.hasSlottedContent && !this.hasFooterSlot) {
-      this.hasOnlyHeading = true;
-    }
-    if (!this.hasSlottedContent && !this.containerTitle) {
-      this.hasOnlyFooter = true;
-    }
-  }
-  /** *****************************
-   *  10.RENDER() FUNCTION
-   ********************************/
-  render() {
-    this.evaluateSections();
-    let result;
-    if (this.fieldset) {
-      result = [
-        h("fieldset", null, this.containerTitle ? (h("legend", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null, this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null),
-        this.footer(),
-      ];
-    }
-    else {
-      result = [
-        this.containerTitle ? (h("header", { class: this.headingClasses() }, h("gxg-title", { type: "title-04" }, this.containerTitle))) : null,
-        this.hasSlottedContent ? (h("div", { class: this.contentClasses() }, h("slot", null))) : null,
-        this.footer(),
-      ];
-    }
-    return (h(Host, { class: {
-        "gxg-container": true,
-        [`gxg-container--padding-${this.sectionsPadding}`]: true,
-        "gxg-container--display-border": this.displayBorder,
-        "gxg-container--display-border-top": this.displayBorderTop,
-        "gxg-container--display-border-end": this.displayBorderEnd,
-        "gxg-container--display-border-bottom": this.displayBorderBottom,
-        "gxg-container--display-border-start": this.displayBorderStart,
-      } }, result));
-  }
-  get el() { return this; }
-  static get style() { return containerCss; }
-}, [1, "gxg-container", {
-    "fieldset": [4],
-    "containerTitle": [1, "container-title"],
-    "displayBorder": [4, "display-border"],
-    "displayBorderTop": [4, "display-border-top"],
-    "displayBorderEnd": [4, "display-border-end"],
-    "displayBorderBottom": [4, "display-border-bottom"],
-    "displayBorderStart": [4, "display-border-start"],
-    "sectionsPadding": [1, "sections-padding"],
-    "noHeadingBorder": [4, "no-heading-border"],
-    "noHeadingPadding": [4, "no-heading-padding"],
-    "headingJustify": [1, "heading-justify"],
-    "noContentPadding": [4, "no-content-padding"],
-    "noContentGap": [4, "no-content-gap"],
-    "noFooterPadding": [4, "no-footer-padding"],
-    "footerJustify": [1, "footer-justify"],
-    "noBorderFooter": [4, "no-border-footer"],
-    "hasSlottedContent": [32],
-    "hasFooterSlot": [32],
-    "hasOnlyHeading": [32],
-    "hasOnlyFooter": [32]
-  }]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["gxg-container", "gxg-title"];
-  components.forEach(tagName => { switch (tagName) {
-    case "gxg-container":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, GxgContainer);
-      }
-      break;
-    case "gxg-title":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
-
-export { GxgContainer as G, defineCustomElement as d };