@genexus/genexus-ide-ui 0.0.65 → 0.0.67

package/dist/components/gx-ide-test.js

@@ -1,11 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$6 } from './checkbox.js';
-import { d as defineCustomElement$5 } from './tree-view.js';
-import { d as defineCustomElement$4 } from './tree-view-item.js';
-import { d as defineCustomElement$3 } from './tree-view-render.js';
-import { d as defineCustomElement$2 } from './tree-view2.js';
+import { d as defineCustomElement$9 } from './icon.js';
+import { d as defineCustomElement$8 } from './button.js';
+import { d as defineCustomElement$7 } from './combo-box.js';
+import { d as defineCustomElement$6 } from './combo-box-item.js';
+import { d as defineCustomElement$5 } from './form-text.js';
+import { d as defineCustomElement$4 } from './icon2.js';
+import { d as defineCustomElement$3 } from './gxg-label2.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 
-const testCss = ":host{display:block}.tree-container{display:flex;height:200px}";
+const testCss = ":host {\n  display: block;\n}\n\nsection {\n  border-top: 1px solid #ccc;\n  margin-top: 300px;\n  container-name: section;\n  container-type: inline-size;\n}\n\ngxg-combo-box {\n  opacity: 1;\n}\n\n@container section (width < 400px) {\n  gxg-combo-box {\n    opacity: 0.5;\n  }\n}";
 
 const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -29,12 +32,6 @@ const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   */
     // 1.OWN PROPERTIES //
     this.renderedFirstTime = false;
-    // 7.LISTENERS //
-    // 8.PUBLIC METHODS API //
-    // 9.LOCAL METHODS //
-    this.checkAllHandler = () => {
-      this.treeViewEl.updateAllItemsProperties({ checked: true });
-    };
   }
   // 6.COMPONENT LIFECYCLE METHODS //
   componentDidRender() {
@@ -43,97 +40,12 @@ const GxIdeTest$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.renderedFirstTime = true;
     }
   }
-  componentDidLoad() {
-    this.treeViewEl.treeModel = [
-      {
-        id: "number-1",
-        caption: "number-1 label (always editable)",
-        class: "tree-view-item tree-view-item--success",
-        leaf: false,
-        leftImgSrc: "./objects/datastore",
-        editable: true,
-        checkbox: true,
-        items: [
-          {
-            id: "number-1-1",
-            caption: "number-1-1 (always editable)",
-            leaf: false,
-            leftImgSrc: "/build/ch-icon-assets/patterns",
-            editable: true,
-            checkbox: true,
-            items: [
-              {
-                id: "number-1-1-1",
-                caption: "number-1-1-1",
-                leaf: true,
-                checkbox: true,
-                leftImgSrc: "./objects/knowledge-base"
-              },
-              {
-                id: "number-1-1-2",
-                caption: "number-1-1-2",
-                leaf: false,
-                checkbox: true,
-                leftImgSrc: "./objects/knowledge-base",
-                items: [
-                  {
-                    id: "number-1-1-2-1",
-                    caption: "number-1-1-2-1 (lazy, drag disabled)",
-                    leaf: false,
-                    leftImgSrc: "./objects/knowledge-base",
-                    lazy: true,
-                    checkbox: true,
-                    dragDisabled: true,
-                    toggleCheckboxes: true
-                  },
-                  {
-                    id: "number-1-1-2-2",
-                    caption: "number-1-1-2-2",
-                    leaf: true,
-                    checkbox: true,
-                    leftImgSrc: "/build/ch-icon-assets/java"
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            id: "number-1-2",
-            caption: "number-1-2",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "./objects/knowledge-base"
-          }
-        ]
-      },
-      {
-        id: "number-2",
-        caption: "number-2",
-        class: "tree-view-item tree-view-item--custom-image",
-        checkbox: true,
-        leaf: false,
-        items: [
-          {
-            id: "number-2-1",
-            caption: "number-2-1",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "/build/ch-icon-assets/java"
-          },
-          {
-            id: "number-2-2",
-            caption: "number-2-2",
-            leaf: true,
-            checkbox: true,
-            leftImgSrc: "./objects/knowledge-base"
-          }
-        ]
-      }
-    ];
-  }
+  // 7.LISTENERS //
+  // 8.PUBLIC METHODS API //
+  // 9.LOCAL METHODS //
   // 10.RENDER() FUNCTION //
   render() {
-    return (h("div", null, h("div", { class: "tree-container" }, h("gxg-tree-view", { ref: el => (this.treeViewEl = el) })), h("label", null, "Check item", h("input", { type: "checkbox", name: "", id: "check-all", onInput: this.checkAllHandler }))));
+    return (h("div", { class: "container" }, h("h2", null, "combo-box"), h("p", null, "AAA Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor est culpa laborum illo, tenetur, quaerat quae eum rem magni voluptatem quasi eos repellendus nostrum commodi. Quasi aperiam eveniet dicta id."), h("section", null, h("gxg-combo-box", null, h("gxg-combo-box-item", { value: "manzana" }, "Manzana"), h("gxg-combo-box-item", { value: "banana" }, "Banana"), h("gxg-combo-box-item", { value: "mandarina" }, "Mandarina"), h("gxg-combo-box-item", { value: "uva" }, "Uvas")))));
   }
   static get style() { return testCss; }
 }, [1, "gx-ide-test"]);
@@ -141,34 +53,49 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["gx-ide-test", "ch-checkbox", "ch-tree-view", "ch-tree-view-item", "ch-tree-view-render", "gxg-tree-view"];
+  const components = ["gx-ide-test", "ch-icon", "gxg-button", "gxg-combo-box", "gxg-combo-box-item", "gxg-form-text", "gxg-icon", "gxg-label", "gxg-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "gx-ide-test":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, GxIdeTest$1);
       }
       break;
-    case "ch-checkbox":
+    case "ch-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "gxg-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "gxg-combo-box":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "gxg-combo-box-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }
       break;
-    case "ch-tree-view":
+    case "gxg-form-text":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }
       break;
-    case "ch-tree-view-item":
+    case "gxg-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }
       break;
-    case "ch-tree-view-render":
+    case "gxg-label":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
       break;
-    case "gxg-tree-view":
+    case "gxg-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/gx-ide-ww-images.js

@@ -3,7 +3,7 @@ import { L as Locale } from './locale.js';
 import { c as config } from './config.js';
 import { r as renderFormItems } from './common.js';
 import { F as FILTER_AFTER } from './constants.js';
-import { f as formatDate } from './helpers2.js';
+import { d as detectClickOutside, h as hiChar, f as formatDate } from './helpers2.js';
 import { g as gridCommon } from './grid.js';
 import { d as defineCustomElement$r } from './ch-grid2.js';
 import { d as defineCustomElement$q } from './ch-grid-column2.js';
@@ -32,7 +32,7 @@ import { d as defineCustomElement$4 } from './text.js';
 import { d as defineCustomElement$3 } from './title2.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const wwImagesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block}.filter--padding{padding:var(--gxg-container--padding)}.filter--gap{gap:var(--gx-ide-grid-row-gap)}.filter{display:flex;flex-direction:column}.filter>*{display:flex;gap:var(--gx-ide-grid-column-gap)}.filter>*>*{flex:1}.filter__first-row .name,.filter__first-row .module-folder{flex:1}.filter__first-row .filter-btn{flex:none}.filter__first-row .second-column{display:flex;flex-direction:row;align-items:end;gap:var(--gx-ide-grid-column-gap)}.filter__second-row{padding-top:var(--gx-ide-grid-row-gap)}.filter__third-row{display:flex;align-items:end;gap:var(--gx-ide-grid-column-gap)}.filter__third-row .checkboxes-wrapper{display:flex;gap:var(--gx-ide-grid-column-gap)}.filter__third-row .all-descendants,.filter__third-row .modified{padding-bottom:3px}.filter__third-row .user{max-width:100% !important}.filter__third-row>*{flex:1}.filter .filters-outer-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows 200ms}.filter .filters-outer-wrapper--hidden{grid-template-rows:0fr}.filter .filters-inner-wrapper{overflow:hidden}.master-wrapper{height:100%;display:grid;grid-template-rows:auto 1fr}.grid-images-container{border-top:1px solid var(--gx-ide-container-border-color);display:grid;grid-template-columns:1fr 220px;grid-column-gap:0;grid-row-gap:0;flex-grow:1}.images-grid{grid-template-columns:repeat(2, 1fr);grid-column-gap:0}.images-grid>:nth-child(1){grid-area:1/1/1/3}.images-container .image-item{display:inline-block;width:50%;height:110px;}.images-container .image-item__container img{width:100%;height:100%;object-fit:cover}.images-container .image-item__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;width:100%;display:block;font-size:10px;padding:4px 8px;box-sizing:border-box;background-color:var(--gray-00)}.images-container .image-item:nth-child(odd) .image-item__name{border-inline-end:1px solid var(--gray-02)}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}";
+const wwImagesCss = ".gxi-hidden{display:none !important}.gxi-full-height{height:100%}.gxi-overflow-auto{overflow:auto}.gxi-display-flex{display:flex}.align-start{display:flex;align-items:start}.align-center{display:flex;align-items:center}.align-end{display:flex;align-items:end}.overflow-auto{overflow:auto}.grid{display:grid;grid-row-gap:var(--gx-ide-grid-row-gap);grid-column-gap:var(--gx-ide-grid-column-gap);grid-template-rows:auto}ch-grid-cell{display:flex}ch-grid{overflow:auto;height:100%}ch-grid-column{z-index:99;border-bottom:1px solid var(--gray-01)}ch-grid-column{padding-inline-start:--gxg-container--padding;padding-inline-end:--gxg-container--padding}ch-grid-cell{--spacing-comp-02:var(--gxg-container--padding)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){box-shadow:var(--box-shadow-01) !important;height:100% !important;display:flex !important;flex-direction:column !important}:host(:focus-within) gx-ide-top-bar::part(wrapper){background-color:var(--color-secondary-enabled)}.gx-ide-main-wrapper{color:var(--gx-ide-component-text-color);font-weight:var(--font-weight-regular);font-size:var(--font-size-lg);font-family:var(--font-family-primary);line-height:1.6em;height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:6px;height:6px}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-main::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-main .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:6px;height:6px}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.gx-ide-overflow .gxg-scroll{display:block;overflow-y:auto;padding-inline-end:2px}.tree-container{display:flex;height:100%;width:100%;box-sizing:border-box}:host{display:block}.filter--padding{padding:var(--gxg-container--padding)}.filter--gap{gap:var(--gx-ide-grid-row-gap)}.filter{display:flex;flex-direction:column}.filter>*{display:flex;gap:var(--gx-ide-grid-column-gap)}.filter>*>*{flex:1}.filter__first-row .name,.filter__first-row .module-folder{flex:1}.filter__first-row .filter-btn{flex:none}.filter__first-row .second-column{display:flex;flex-direction:row;align-items:end;gap:var(--gx-ide-grid-column-gap)}.filter__second-row{padding-top:var(--gx-ide-grid-row-gap)}.filter__third-row{display:flex;align-items:end;gap:var(--gx-ide-grid-column-gap)}.filter__third-row .checkboxes-wrapper{display:flex;gap:var(--gx-ide-grid-column-gap);border:1px solid var(--gray-02);border-radius:var(--border-radius-sm);height:var(--gxg-form-text-height);box-sizing:border-box;align-items:center;padding-inline-start:var(--spacing-comp-01)}.filter__third-row .user{max-width:100% !important}.filter__third-row>*{flex:1}.filter .filters-outer-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows 200ms}.filter .filters-outer-wrapper--hidden{grid-template-rows:0fr}.filter .filters-inner-wrapper{overflow:hidden}.master-wrapper{height:100%;display:grid;grid-template-rows:auto 1fr}.grid-images-container{border-top:1px solid var(--gx-ide-container-border-color);display:grid;grid-template-columns:1fr 220px;grid-column-gap:0;grid-row-gap:0;overflow:auto}.images-information__header{display:flex;align-items:center;gap:var(--gx-ide-grid-column-gap)}.images-information__header-title{flex:none}.images-grid{grid-template-columns:repeat(2, 1fr);grid-column-gap:0}.images-grid>:nth-child(1){grid-area:1/1/1/3}.images-container .image-item{display:inline-block;width:50%;height:110px;}.images-container .image-item__container{padding:var(--gxg-container--padding)}.images-container .image-item__container img{width:100%;height:100%;object-fit:scale-down}.images-container .image-item__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;width:100%;display:block;font-size:10px;padding:4px 8px;box-sizing:border-box;background-color:var(--gray-00)}.images-container .image-item:nth-child(odd) .image-item__name{border-inline-end:1px solid var(--gray-02)}.objects-count{grid-template-columns:repeat(2, 1fr)}.objects-count *:nth-child(2){justify-content:flex-end;align-items:flex-start}.hiChar{color:var(--gx-ide-hi-char-color);font-weight:600}";
 
 const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -43,18 +43,53 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.componentDidRenderFirstTime = createEvent(this, "componentDidRenderFirstTime", 7);
     this.renderedFirstTime = false;
     // 9.LOCAL METHODS //
-    // Renders
+    this.attachDetectClickOutsideFilter = () => {
+      document.addEventListener("click", this.detectClickOutsideFilter);
+    };
+    this.removeDetectClickOutsideFilter = () => {
+      document.removeEventListener("click", this.detectClickOutsideFilter);
+    };
+    this.detectClickOutsideFilter = (e) => {
+      const clickedOutside = detectClickOutside(e, this.filterEl);
+      if (clickedOutside) {
+        this.filtersHidden = true;
+      }
+      else {
+        this.filtersHidden = false;
+      }
+    };
+    /**
+     * @description This is needed for resetting the filter. When the user resets the filter, all the filter controls values have to be restored to the value they had on componentDidLoad.
+     */
+    this.saveInitialFilterData = () => {
+      this.filterInitialData = {
+        name: this.filterNameEl.value,
+        module: this.filterModuleEl.value,
+        searchContents: this.filterSearchContentsEl.value,
+        category: this.filterCategoryEl.value,
+        allDescendants: this.filterAllDescendantsEl.checked,
+        modified: this.filterModifiedEl.checked,
+        dateTime: this.filterModifiedDateEl.value,
+        after: this.filterAfterTypeEl.value,
+        user: this.filterUserEl.value,
+        style: this.filterStyleEl.value,
+        language: this.filterLanguageEl.value,
+        density: this.filterDensityEl.value,
+        layer: this.filterLayerEl.value
+      };
+    };
+    // 9.LOCAL METHODS -> Renders //
     this.renderFilter = () => {
       var _a, _b, _c, _d, _e;
-      return (h("div", { class: "filter filter--padding" }, h("div", { class: "filter__first-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name", class: "name" }), h("div", { class: "second-column" }, h("gx-ide-entity-selector", { label: this._componentLocale.filter.moduleFolder, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder", part: "filter-module-folder" }), h("gxg-button", { onClick: this.toggleFiltersHandler, part: "gxg-button gxg-button--more-less", type: "secondary-icon-only", icon: "window-tools/filter-conditions" , class: "filter-btn" }))), h("div", { class: {
+      return (h("div", { class: "filter filter--padding", ref: (el) => (this.filterEl = el) }, h("div", { class: "filter__first-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.name, ref: (el) => (this.filterNameEl = el), part: "filter-name", class: "name" }), h("div", { class: "second-column" }, h("gx-ide-entity-selector", { label: this._componentLocale.filter.moduleFolder, "label-position": "above", value: this.defaultModule, defaultValue: this.defaultModule, selectEntityCallback: this.selectModuleCallback, ref: (el) => (this.filterModuleEl = el), class: "module-folder", part: "filter-module-folder" }), h("gxg-button", { onClick: this.resetFilterHandler, part: "gxg-button-reset-filter", type: "secondary-icon-only", icon: "gemini-tools/reset", class: "reset-filter-btn" }), h("gxg-button", { onClick: this.toggleFiltersHandler, part: "gxg-button gxg-button--more-less", type: "secondary-icon-only", icon: "window-tools/filter-conditions" , class: "filter-btn" }))), h("div", { class: {
           "filters-outer-wrapper": true,
           "filters-outer-wrapper--hidden": this.filtersHidden
         } }, h("div", { class: {
           "filter": true,
           "filter--gap": true,
           "filters-inner-wrapper": true
-        } }, h("div", { class: "filter__second-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.search, ref: (el) => (this.filterSearchContentsEl = el), class: { "search-contents": true }, part: "filter-search" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, ref: (el) => (this.filterCategoryEl = el), class: { category: true }, part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : []))), h("div", { class: "filter__third-row" }, h("div", { class: "checkboxes-wrapper" }, h("gxg-form-checkbox", { label: this._componentLocale.filter.allDescendants, ref: (el) => (this.filterAllDescendantsEl =
-          el), class: "all-descendants", part: "filter-all-descendants" }), h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, ref: (el) => (this.filterModifiedEl = el), class: "modified", part: "filter-modified" })), h("div", { class: {
+        } }, h("div", { class: "filter__second-row" }, h("gxg-form-text", { "label-position": "above", label: this._componentLocale.filter.search, ref: (el) => (this.filterSearchContentsEl = el), class: { "search-contents": true }, part: "filter-search" }), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.category, value: this.defaultCategory, disabled: !this.categories, ref: (el) => (this.filterCategoryEl = el), class: { category: true }, part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : []))), h("div", { class: "filter__third-row" }, h("div", { class: "checkboxes-label-wrapper" }, h("gxg-label", { labelPosition: "above", center: false }, "Options:"), h("div", { class: "checkboxes-wrapper" }, h("gxg-form-checkbox", { label: this._componentLocale.filter.allDescendants, ref: (el) => (this.filterAllDescendantsEl =
+          el), class: "all-descendants", part: "filter-all-descendants" }), h("gxg-form-checkbox", { label: this._componentLocale.filter.modified, ref: (el) => (this.filterModifiedEl = el), class: "modified", part: "filter-modified" }))), h("div", { class: {
           "hide": !this.filterModified ||
             this.filterAfterType !== FILTER_AFTER.DATE_TIME,
           "date-time": true
@@ -80,14 +115,19 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
           label: this._componentLocale.filter[FILTER_AFTER.LAST_BUILD],
           value: FILTER_AFTER.LAST_BUILD
         }
-      ])), h("gxg-form-text", { class: { user: true }, disabled: !this.filterModified, labelPosition: "above", label: this._componentLocale.filter.user, ref: (el) => (this.filterUserEl = el), centerLabel: false, part: "filter-user" })), h("div", { class: "filter__fifth-row" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), class: "style", part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : []))), h("div", { class: "filter__sixth-row" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : [])))))));
+      ])), h("gxg-form-text", { class: { user: true }, disabled: !this.filterModified, labelPosition: "above", label: this._componentLocale.filter.user, ref: (el) => (this.filterUserEl = el), value: "hey", centerLabel: false, part: "filter-user" })), h("div", { class: "filter__fifth-row" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.style, disabled: !this.styles, ref: (el) => (this.filterStyleEl = el), class: "style", part: "filter-style" }, renderFormItems("gxg-combo-box-item", (_b = this.styles) !== null && _b !== void 0 ? _b : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.language, disabled: !this.languages, ref: (el) => (this.filterLanguageEl = el), part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : []))), h("div", { class: "filter__sixth-row" }, h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), part: "filter-density" }, renderFormItems("gxg-combo-box-item", (_d = this.densities) !== null && _d !== void 0 ? _d : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.layer, disabled: !this.layers, ref: (el) => (this.filterLayerEl = el), part: "filter-layer" }, renderFormItems("gxg-combo-box-item", (_e = this.layers) !== null && _e !== void 0 ? _e : [])))))));
     };
     this.renderImagesData = () => {
-      return (h("gx-ide-container", { containerTitle: this._componentLocale.imagesDataTitle, contentBorderEnd: true, noContentPadding: true, titleType: "secondary", part: "grid-container" }, h("gxg-grid", { part: "images-table", "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastBuildDate, columnNamePosition: "text", settingable: false, size: gridCommon.colSize.auto })), this.images.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }), h("gxg-icon", { type: obj.icon, color: "auto" })), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.name)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.module)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.description), " "), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.modifiedDate)}`)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, obj.lastUser), " "), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.importDate)}`)), h("ch-grid-cell", null, " ", h("span", { class: "cell-wrapper" }, `${formatDate(obj.lastBuildDate)}`)))))))));
+      return (
+      /* images information*/
+      h("gx-ide-container", { contentBorderEnd: true, noContentPadding: true, titleType: "secondary", class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, h("header", { class: "images-information__header", slot: "header" }, h("gx-ide-title", { type: "secondary", class: "images-information__header-title" }, this._componentLocale.imagesDataTitle), h("gxg-form-text", { icon: "gemini-tools/search", "icon-position": "start", placeholder: "Search by any field", onInput: this.filterInputHandler })), h("gxg-grid", { part: "images-table", "ellipsis-cell-wrapper": true, noBorder: true }, h("ch-grid", { "row-selection-mode": "multiple", ref: (el) => (this.chGridEl = el), part: "ch-grid-images" }, h("ch-grid-columnset", null, h("ch-grid-column", { columnName: "", columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.name, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.module, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.description, columnNameHidden: false, settingable: false, size: gridCommon.colSize.common }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.modifiedDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.lastUser, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto }), h("ch-grid-column", { columnName: this._componentLocale.tableHead.importDate, columnNameHidden: false, settingable: false, size: gridCommon.colSize.auto })), this.filteredImages.map((obj) => (h("ch-grid-row", { rowid: obj.id }, h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }), h("gxg-icon", { type: obj.icon, color: "auto" })), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.name, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.module, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.description, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(`${formatDate(obj.modifiedDate)}`, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(obj.lastUser, this.filterImagesInputValue))), h("ch-grid-cell", null, h("span", { class: "cell-wrapper" }, hiChar(`${formatDate(obj.importDate)}`, this.filterImagesInputValue))))))))));
     };
     this.renderImages = () => {
-      return (h("gx-ide-container", { containerTitle: this._componentLocale.imagesTitle, noContentPadding: true, titleType: "secondary", part: "image-data-container" }, h("div", { class: "images-container" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "image-item__container" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id }))), h("span", { class: "image-item__name" }, item.name)))))));
+      return (
+      /* tiles */
+      h("gx-ide-container", { containerTitle: this._componentLocale.imagesTitle, noContentPadding: true, titleType: "secondary", class: "overflow-auto", titleHeightAsInput: true, part: "image-data-container" }, h("div", { class: "images-container" }, this.imagesSelectedItems.map(item => (h("div", { class: "image-item" }, h("div", { class: "image-item__container" }, h("div", { class: "img" }, h("img", { src: item.url, alt: item.id }))), h("span", { class: "image-item__name" }, item.name)))))));
     };
+    // 9.LOCAL METHODS -> Other //
     this.getImages = () => {
       let filters = {
         name: this.filterNameEl.value,
@@ -102,6 +142,7 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.images = items;
         this.selectedObjectsIds = [];
         this.deselectAll();
+        this.filterImagesInformationHandler();
       });
     };
     this.newObjectCallbackHandler = () => {
@@ -113,6 +154,25 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.deleteSelectionCallbackHandler = () => {
       this.deleteSelectionCallback(this.selectedObjectsIds);
     };
+    this.resetFilterHandler = () => {
+      if (this.filterInitialData) {
+        (this.filterNameEl.value = this.filterInitialData.name),
+          (this.filterModuleEl.value = this.filterInitialData.module),
+          (this.filterSearchContentsEl.value =
+            this.filterInitialData.searchContents),
+          (this.filterCategoryEl.value = this.filterInitialData.category),
+          (this.filterAllDescendantsEl.checked =
+            this.filterInitialData.allDescendants),
+          (this.filterModifiedEl.checked = this.filterInitialData.modified),
+          (this.filterModifiedDateEl.value = this.filterInitialData.dateTime),
+          (this.filterAfterTypeEl.value = this.filterInitialData.after),
+          (this.filterUserEl.value = this.filterInitialData.user),
+          (this.filterStyleEl.value = this.filterInitialData.style),
+          (this.filterLanguageEl.value = this.filterInitialData.language),
+          (this.filterDensityEl.value = this.filterInitialData.density),
+          (this.filterLayerEl.value = this.filterInitialData.layer);
+      }
+    };
     this.toggleFiltersHandler = () => {
       this.filtersHidden = !this.filtersHidden;
     };
@@ -123,30 +183,58 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.chGridEl.selectAllRows(false);
     };
     this.listenChanges = () => {
+      /* name */
       this.filterNameEl.addEventListener("change", () => {
         this.getImages();
       });
+      /* module/folder */
+      this.filterModuleEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      /* search contents*/
       this.filterSearchContentsEl.addEventListener("change", () => {
         this.getImages();
       });
+      /* category */
+      this.filterCategoryEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      /* (options) -> all descendants */
       this.filterAllDescendantsEl.addEventListener("change", () => {
         this.getImages();
       });
+      /* (options) -> modified */
       this.filterModifiedEl.addEventListener("change", (e) => {
         this.filterModified = e.detail.value;
         this.getImages();
       });
+      /* date/time */
+      this.filterModifiedDateEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      /* after */
+      this.filterAfterTypeEl.addEventListener("valueChanged", () => {
+        this.filterAfterType = this.filterAfterTypeEl.value;
+        this.getImages();
+      });
+      /* user */
       this.filterUserEl.addEventListener("change", () => {
         this.getImages();
       });
-      this.filterCategoryEl.addEventListener("valueChanged", () => {
+      /* style */
+      this.filterStyleEl.addEventListener("valueChanged", () => {
         this.getImages();
       });
-      this.filterModuleEl.addEventListener("valueChanged", () => {
+      /* language */
+      this.filterLanguageEl.addEventListener("valueChanged", () => {
         this.getImages();
       });
-      this.filterAfterTypeEl.addEventListener("valueChanged", () => {
-        this.filterAfterType = this.filterAfterTypeEl.value;
+      /* density */
+      this.filterDensityEl.addEventListener("valueChanged", () => {
+        this.getImages();
+      });
+      /* layer */
+      this.filterLayerEl.addEventListener("valueChanged", () => {
         this.getImages();
       });
       // for grid selection
@@ -172,12 +260,42 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         });
       });
     };
+    this.filterInputHandler = (e) => {
+      this.filterImagesInputValue = e.detail;
+      this.filterImagesInformationHandler();
+    };
+    this.filterImagesInformationHandler = () => {
+      const filterValue = this.filterImagesInputValue.toLocaleLowerCase();
+      this.filteredImages = this.images.filter(image => {
+        const nameMatch = image.name.toLocaleLowerCase().includes(filterValue);
+        const moduleMatch = image.module
+          .toLocaleLowerCase()
+          .includes(filterValue);
+        const descriptionMatch = image.description
+          .toLocaleLowerCase()
+          .includes(filterValue);
+        const modifiedDateMatch = image.modifiedDate
+          .toString()
+          .includes(filterValue);
+        const lastUser = image.lastUser.toLocaleLowerCase().includes(filterValue);
+        const importDateMatch = image.importDate && image.importDate.toString().includes(filterValue);
+        return (nameMatch ||
+          moduleMatch ||
+          descriptionMatch ||
+          modifiedDateMatch ||
+          lastUser ||
+          importDateMatch);
+      });
+    };
     this.filtersHidden = true;
     this.filterAfterType = "";
     this.filterModified = false;
     this.images = [];
+    this.filteredImages = [];
     this.imagesSelectedItems = [];
     this.selectedObjectsIds = [];
+    this.filterImagesInputValue = "";
+    this.displayTitle = false;
     this.categories = undefined;
     this.densities = undefined;
     this.defaultCategory = undefined;
@@ -198,6 +316,14 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.styles = undefined;
     this.types = undefined;
   }
+  filtersHiddenHandler(hidden) {
+    if (hidden) {
+      this.removeDetectClickOutsideFilter();
+    }
+    else {
+      this.attachDetectClickOutsideFilter();
+    }
+  }
   // 6.COMPONENT LIFECYCLE EVENTS //
   async componentWillLoad() {
     this._componentLocale = await Locale.getComponentStrings(this.el);
@@ -206,6 +332,7 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   componentDidLoad() {
     this.listenChanges();
     this.getImages();
+    this.saveInitialFilterData();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -238,16 +365,21 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * This method reload the view, refreshing the filters and the table of images.
    */
   async reload() {
+    this.deleteSelectionCallbackHandler();
     this.getImages();
   }
   // 10.RENDER() FUNCTION //
   render() {
-    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this._componentLocale.componentName, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "master-wrapper" }, this.renderFilter(), h("div", { class: "grid-images-container" }, this.renderImagesData(), this.renderImages())), h("gxg-button", { id: "button-select-all", type: "primary-text-only", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-end" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-only", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new-file", slot: "footer-end" }, this._componentLocale.footer.btnNew), h("gxg-text", { class: "align-end", part: "objects-matching", slot: "footer-start" }, `${this.images.length} ${this._componentLocale.objCount.matching}`)))));
+    return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noContentPadding: true, noContentGap: true, containerTitle: this.displayTitle ? this._componentLocale.componentName : null, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "master-wrapper" }, this.renderFilter(), h("div", { class: "grid-images-container" }, this.renderImagesData(), this.renderImages())), h("gxg-button", { id: "button-select-all", type: "outlined", onClick: this.selectAll, part: "gxg-button gxg-button--select-all", slot: "footer-end" }, this._componentLocale.footer.btnSelectAll), h("gxg-button", { id: "button-new-file", type: "primary-text-icon", icon: "objects/image", onClick: this.newObjectCallbackHandler, part: "gxg-button gxg-button--new-file", slot: "footer-end" }, this._componentLocale.footer.btnNew), h("gxg-text", { class: "align-end", part: "objects-matching", slot: "footer-start" }, `${this.filteredImages.length} ${this._componentLocale.objCount.matching}`)))));
   }
   static get assetsDirs() { return ["gx-ide-assets/ww-images"]; }
   get el() { return this; }
+  static get watchers() { return {
+    "filtersHidden": ["filtersHiddenHandler"]
+  }; }
   static get style() { return wwImagesCss; }
 }, [1, "gx-ide-ww-images", {
+    "displayTitle": [4, "display-title"],
     "categories": [16],
     "densities": [16],
     "defaultCategory": [1, "default-category"],
@@ -271,8 +403,10 @@ const GxIdeWWImages = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "filterAfterType": [32],
     "filterModified": [32],
     "images": [32],
+    "filteredImages": [32],
     "imagesSelectedItems": [32],
     "selectedObjectsIds": [32],
+    "filterImagesInputValue": [32],
     "validate": [64],
     "reload": [64]
   }, [[1, "keydown", "keyDownHandler"]]]);

package/dist/components/gxg-card.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$4 } from './button.js';
 import { d as defineCustomElement$3 } from './icon2.js';
 import { d as defineCustomElement$2 } from './title-editable.js';
 
-const cardCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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{display:block;background:var(--color-on-primary);box-shadow:var(--box-shadow-01);border-radius:var(--border-radius-md);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}:host([elevation=xs]){box-shadow:var(--box-shadow-01)}:host([elevation=m]){box-shadow:var(--box-shadow-03)}:host([padding=\"0\"]){padding:0}:host([padding=xs]){padding:var(--spacing-comp-01)}:host([padding=s]){padding:var(--spacing-comp-02)}:host([padding=m]){padding:var(--spacing-comp-03)}:host([padding=l]){padding:var(--spacing-comp-04)}:host([padding=xl]){padding:var(--spacing-comp-05)}:host([padding=xxl]){padding:var(--spacing-comp-06)}:host([padding=xxxl]){padding:var(--spacing-comp-07)}:host([background=white]){background:var(--color-background)}:host([background=gray-01]){background:var(--gray-01)}:host(.mercury){font-family:var(--font-family-primary);font-size:var(--mc-font-size-xs);color:var(--gray-03);line-height:var(--line-height-default);font-weight:var(--font-weight-regular);box-sizing:border-box;padding:0;border-radius:0;background-color:var(--gray-10);box-shadow:none;color:var(--gray-04)}:host(.mercury) .content{overflow:auto}:host(.mercury) .content::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}:host(.mercury) .content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host(.mercury) .content::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host(.mercury) .content::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host(.mercury.card--section) .content{padding:var(--mc-card-section-padding--v) var(--mc-card-section-padding--h)}:host(.mercury.card--section) .card__header{text-transform:capitalize;display:flex;gap:var(--spacing-comp-03);margin:var(--mc-card-section-padding--v) var(--mc-card-section-padding--h) 0 var(--mc-card-section-padding--h);padding-bottom:var(--mc-card-section-padding--v);border-bottom:var(--border-width-sm) solid var(--gray-13)}:host(.mercury.card--article){color:var(--gray-06);font-size:var(--mc-font-size-xs)}:host(.mercury.card--article) .content{padding:var(--mc-card-article-padding--v) var(--mc-card-article-padding--h)}:host(.mercury.card--mini){color:var(--gray-05);font-size:var(--mc-font-size-xxs)}:host(.mercury.card--mini) .card__header{text-transform:capitalize;margin:var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h) 0 var(--mc-card-mini-padding--h)}:host(.mercury.card--mini) .content{padding:var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h)}:host(.mercury.card--article),:host(.mercury.card--mini){border-radius:var(--border-radius-sm);border:var(--border-width-sm) solid var(--gray-00)}:host(.mercury.card--title) .wrapper{display:grid;height:100%;grid-template-rows:auto 1fr}:host(.mercury.card--actionable:hover){cursor:pointer;background-color:var(--gray-11);border-color:var(--gray-01)}";
+const cardCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}: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{display:block;background:var(--color-on-primary);box-shadow:var(--box-shadow-01);border-radius:var(--border-radius-md);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}:host([elevation=xs]){box-shadow:var(--box-shadow-01)}:host([elevation=m]){box-shadow:var(--box-shadow-03)}:host([padding=\"0\"]){padding:0}:host([padding=xs]){padding:var(--spacing-comp-01)}:host([padding=s]){padding:var(--spacing-comp-02)}:host([padding=m]){padding:var(--spacing-comp-03)}:host([padding=l]){padding:var(--spacing-comp-04)}:host([padding=xl]){padding:var(--spacing-comp-05)}:host([padding=xxl]){padding:var(--spacing-comp-06)}:host([padding=xxxl]){padding:var(--spacing-comp-07)}:host([background=white]){background:var(--color-background)}:host([background=gray-01]){background:var(--gray-01)}:host(.mercury){font-family:var(--font-family-primary);font-size:var(--mc-font-size-xs);color:var(--gray-03);line-height:var(--line-height-default);font-weight:var(--font-weight-regular);box-sizing:border-box;padding:0;border-radius:0;background-color:var(--gray-10);box-shadow:none;color:var(--gray-04)}:host(.mercury) .content{overflow:auto}:host(.mercury) .content::-webkit-scrollbar{width:var(--gxg-scrollbar-width, 6px)}:host(.mercury) .content::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background, --gray-02);border-radius:var(--gxg-scrollbar-track-border-radius, 10px)}:host(.mercury) .content::-webkit-scrollbar-thumb{background:var(--gxg-scrollbar-track-thumb-background, --gray-05);border-radius:var(--gxg-scrollbar-track-thumb-radius, 10px)}:host(.mercury) .content::-webkit-scrollbar-thumb:hover{background:var(--gxg-scrollbar-track-thumb-hover-background, --gray-04);cursor:pointer}:host(.mercury.card--section) .content{padding:var(--mc-card-section-padding--v) var(--mc-card-section-padding--h)}:host(.mercury.card--section) .card__header{text-transform:capitalize;display:flex;gap:var(--spacing-comp-03);margin:var(--mc-card-section-padding--v) var(--mc-card-section-padding--h) 0 var(--mc-card-section-padding--h);padding-bottom:var(--mc-card-section-padding--v);border-bottom:var(--border-width-sm) solid var(--gray-13)}:host(.mercury.card--section[no-padding-top]) .content{padding-top:0}:host(.mercury.card--article){color:var(--gray-06);font-size:var(--mc-font-size-xs)}:host(.mercury.card--article) .content{padding:var(--mc-card-article-padding--v) var(--mc-card-article-padding--h)}:host(.mercury.card--mini){color:var(--gray-05);font-size:var(--mc-font-size-xxs)}:host(.mercury.card--mini) .card__header{text-transform:capitalize;margin:var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h) 0 var(--mc-card-mini-padding--h)}:host(.mercury.card--mini) .content{padding:var(--mc-card-mini-padding--v) var(--mc-card-mini-padding--h)}:host(.mercury.card--article),:host(.mercury.card--mini){border-radius:var(--border-radius-sm);border:var(--border-width-sm) solid var(--gray-00)}:host(.mercury.card--title) .wrapper{display:grid;height:100%;grid-template-rows:auto 1fr}:host(.mercury.card--actionable:hover){cursor:pointer;background-color:var(--gray-11);border-color:var(--gray-01)}";
 
 const GxgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -36,8 +36,12 @@ const GxgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * The component max. width
      */
     this.maxWidth = "100%";
-    /*Mercury only properties*/
+    /*---  Mercury Only Tokens ---*/
     this.titleType = "h2";
+    /**
+     * Remove padding from the top (applies only for the "section" card type)
+     */
+    this.noPaddingTop = false;
     /**
      * The card type (only for mercury)
      */
@@ -56,7 +60,7 @@ const GxgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.titleType = "h2";
     }
     else if (this.cardType === "mini") {
-      this.titleType = "h3";
+      this.titleType = "h4";
     }
   }
   render() {
@@ -86,6 +90,7 @@ const GxgCard$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "minHeight": [1, "min-height"],
     "height": [1],
     "maxWidth": [1, "max-width"],
+    "noPaddingTop": [516, "no-padding-top"],
     "cardTitle": [1, "card-title"],
     "cardType": [1, "card-type"],
     "icon": [1],