@genexus/genexus-ide-ui 0.0.66 → 0.0.68

package/dist/collection/components/ww-images/gx-ide-assets/ww-images/langs/ww-images.lang.en.json

@@ -40,10 +40,10 @@
   },
   "footer": {
     "btnSelectAll": "Select All",
-    "btnNew": "New...",
+    "btnNew": "New Image",
     "btnOk": "OK",
     "btnCancel": "Cancel"
   },
   "imagesTitle": "Tiles",
-  "imagesDataTitle": "Tiles Information"
+  "imagesDataTitle": "Images Information"
 }

package/dist/collection/components/ww-images/ww-images.css

@@ -1,5 +1,9 @@
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -32,6 +36,10 @@
   align-items: end;
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 /* Grids */
 .grid {
   display: grid;
@@ -55,9 +63,12 @@ ch-grid-column {
   border-bottom: 1px solid var(--gray-01);
 }
 
-ch-grid-column {
-  padding-inline-start: --gxg-container--padding;
-  padding-inline-end: --gxg-container--padding;
+ch-grid-column:first-child {
+  padding-inline-start: var(--gxg-container--padding) !important;
+}
+
+ch-grid-column:last-child {
+  padding-inline-end: var(--gxg-container--padding) !important;
 }
 
 ch-grid-cell {
@@ -164,10 +175,15 @@ gxg-tabs {
 
 /*Gemini*/
 /*Gx Ide*/
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
   display: block;
 }
 
+/*--- Filter ---*/
 .filter--padding {
   padding: var(--gxg-container--padding);
 }
@@ -180,13 +196,10 @@ gxg-tabs {
   display: flex;
   flex-direction: column;
 }
-.filter > * {
+.filter__first-row {
   display: flex;
   gap: var(--gx-ide-grid-column-gap);
 }
-.filter > * > * {
-  flex: 1;
-}
 .filter__first-row .name,
 .filter__first-row .module-folder {
   flex: 1;
@@ -200,38 +213,75 @@ gxg-tabs {
   align-items: end;
   gap: var(--gx-ide-grid-column-gap);
 }
-.filter__second-row {
-  padding-top: var(--gx-ide-grid-row-gap);
+.filter__first-row > * {
+  flex: 1;
 }
-.filter__third-row {
+.filter .checkboxes-label-wrapper {
   display: flex;
-  align-items: end;
-  gap: var(--gx-ide-grid-column-gap);
+  flex-direction: column;
+  gap: 0;
 }
-.filter__third-row .checkboxes-wrapper {
+.filter .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 .all-descendants,
-.filter__third-row .modified {
-  padding-bottom: 3px;
-}
-.filter__third-row .user {
+.filter .user {
   max-width: 100% !important;
 }
-.filter__third-row > * {
-  flex: 1;
-}
-.filter .filters-outer-wrapper {
+
+/*Filter*/
+.filters-outer-wrapper {
   display: grid;
   grid-template-rows: 1fr;
   transition: grid-template-rows 200ms;
 }
-.filter .filters-outer-wrapper--hidden {
+.filters-outer-wrapper--hidden {
   grid-template-rows: 0fr;
 }
-.filter .filters-inner-wrapper {
+
+.filters-inner-wrapper {
+  padding-top: var(--gxg-container--padding);
   overflow: hidden;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-template-rows: repeat(4, min-content);
+  grid-template-areas: "search-contents search-contents category category options options" "date-time date-time after-date-time after-date-time user user" "style style style language language language" "density density density layer layer layer";
+}
+.filters-inner-wrapper .search-contents {
+  grid-area: search-contents;
+}
+.filters-inner-wrapper .category {
+  grid-area: category;
+}
+.filters-inner-wrapper .options {
+  grid-area: options;
+}
+.filters-inner-wrapper .date-time {
+  grid-area: date-time;
+}
+.filters-inner-wrapper .after-date-time {
+  grid-area: after-date-time;
+}
+.filters-inner-wrapper .user {
+  grid-area: user;
+}
+.filters-inner-wrapper .style {
+  grid-area: style;
+}
+.filters-inner-wrapper .language {
+  grid-area: language;
+}
+.filters-inner-wrapper .density {
+  grid-area: density;
+}
+.filters-inner-wrapper .layer {
+  grid-area: layer;
 }
 
 .master-wrapper {
@@ -247,7 +297,16 @@ gxg-tabs {
   grid-template-columns: 1fr 220px;
   grid-column-gap: 0;
   grid-row-gap: 0;
-  flex-grow: 1;
+  overflow: auto;
+}
+
+.images-information__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gx-ide-grid-column-gap);
+}
+.images-information__header-title {
+  flex: none;
 }
 
 /* Objects Table */
@@ -265,10 +324,13 @@ gxg-tabs {
   height: 110px;
   /*should be half the images container width (actually is 220px)*/
 }
+.images-container .image-item__container {
+  padding: var(--gxg-container--padding);
+}
 .images-container .image-item__container img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: scale-down;
 }
 .images-container .image-item__name {
   overflow: hidden;
@@ -292,4 +354,9 @@ gxg-tabs {
 .objects-count *:nth-child(2) {
   justify-content: flex-end;
   align-items: flex-start;
+}
+
+.hiChar {
+  color: var(--gx-ide-hi-char-color);
+  font-weight: 600;
 }

package/dist/collection/components/ww-images/ww-images.js

@@ -5,29 +5,63 @@ import { Locale } from "../../common/locale";
 import { config } from "../../common/config";
 import { renderFormItems } from "../../common/common";
 import { FILTER_AFTER } from "../../common/constants";
-import { formatDate } from "../../common/helpers";
+import { formatDate, hiChar, closeOnOutsideClickHandler } from "../../common/helpers";
 import { gridCommon } from "../../common/grid";
 export class GxIdeWWImages {
   constructor() {
     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 = closeOnOutsideClickHandler(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: true ? "window-tools/filter-conditions" : "window-tools/filter", 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: true ? "window-tools/filter-conditions" : "window-tools/filter", 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("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", part: "filter-category" }, renderFormItems("gxg-combo-box-item", (_a = this.categories) !== null && _a !== void 0 ? _a : [])), h("div", { class: "options" }, 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
-        }, part: "filter-datetime" }, h("div", { class: "date-time-wrapper" }, h("gxg-label", { "label-position": "above" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { disabled: !this.filterModified, ref: (el) => (this.filterModifiedDateEl =
-          el) })))), h("div", { class: "filter__fourth-row" }, h("gxg-combo-box", { class: { "after-date-time": true }, disabled: !this.filterModified, label: this._componentLocale.filter.afterLabel, "disable-filter": true, value: this.filterAfterType, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderFormItems("gxg-combo-box-item", [
+        }, part: "filter-datetime" }, h("div", { class: "date-time-wrapper" }, h("gxg-label", { "label-position": "above" }, this._componentLocale.filter.dateTime), h("gxg-date-picker", { disabled: !this.filterModified, ref: (el) => (this.filterModifiedDateEl = el) }))), h("gxg-combo-box", { class: "after-date-time", disabled: !this.filterModified, label: this._componentLocale.filter.afterLabel, "disable-filter": true, value: this.filterAfterType, ref: (el) => (this.filterAfterTypeEl = el), part: "filter-after-type" }, renderFormItems("gxg-combo-box-item", [
         {
           id: FILTER_AFTER.NONE,
           label: this._componentLocale.filter.afterNone,
@@ -48,14 +82,19 @@ export class GxIdeWWImages {
           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", { disabled: !this.filterModified, labelPosition: "above", label: this._componentLocale.filter.user, ref: (el) => (this.filterUserEl = el), value: "hey", centerLabel: false, class: "user", part: "filter-user" }), 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), class: "language", part: "filter-language" }, renderFormItems("gxg-combo-box-item", (_c = this.languages) !== null && _c !== void 0 ? _c : [])), h("gxg-combo-box", { "disable-filter": true, label: this._componentLocale.filter.density, disabled: !this.densities, ref: (el) => (this.filterDensityEl = el), class: "density", 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), class: "layer", 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", containerTitle: !this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, class: { "images-information": true, "overflow-auto": true }, part: "grid-container" }, this.secondaryFilter ? (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 }))) : null, 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: this.secondaryFilter ? this._componentLocale.imagesDataTitle : null, 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,
@@ -70,6 +109,7 @@ export class GxIdeWWImages {
         this.images = items;
         this.selectedObjectsIds = [];
         this.deselectAll();
+        this.filterImagesInformationHandler();
       });
     };
     this.newObjectCallbackHandler = () => {
@@ -81,6 +121,24 @@ export class GxIdeWWImages {
     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;
     };
@@ -91,30 +149,58 @@ export class GxIdeWWImages {
       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
@@ -141,12 +227,43 @@ export class GxIdeWWImages {
         });
       });
     };
+    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.secondaryFilter = false;
     this.categories = undefined;
     this.densities = undefined;
     this.defaultCategory = undefined;
@@ -167,6 +284,14 @@ export class GxIdeWWImages {
     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);
@@ -175,6 +300,7 @@ export class GxIdeWWImages {
   componentDidLoad() {
     this.listenChanges();
     this.getImages();
+    this.saveInitialFilterData();
   }
   componentDidRender() {
     if (!this.renderedFirstTime) {
@@ -207,11 +333,12 @@ export class GxIdeWWImages {
    * 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 is() { return "gx-ide-ww-images"; }
   static get encapsulation() { return "shadow"; }
@@ -228,6 +355,42 @@ export class GxIdeWWImages {
   static get assetsDirs() { return ["gx-ide-assets/ww-images"]; }
   static get properties() {
     return {
+      "displayTitle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If true it displays the component title on the header"
+        },
+        "attribute": "display-title",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "secondaryFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "false",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displays a secondary filter, used to filter over the filtered images"
+        },
+        "attribute": "secondary-filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "categories": {
         "type": "unknown",
         "mutable": false,
@@ -600,8 +763,10 @@ export class GxIdeWWImages {
       "filterAfterType": {},
       "filterModified": {},
       "images": {},
+      "filteredImages": {},
       "imagesSelectedItems": {},
-      "selectedObjectsIds": {}
+      "selectedObjectsIds": {},
+      "filterImagesInputValue": {}
     };
   }
   static get events() {
@@ -677,6 +842,12 @@ export class GxIdeWWImages {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "filtersHidden",
+        "methodName": "filtersHiddenHandler"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "keydown",

package/dist/components/button-group.js

@@ -3,7 +3,7 @@ import { s as state } from './store.js';
 import { d as defineCustomElement$2 } from './gxg-label2.js';
 import { d as defineCustomElement$1 } from './tooltip.js';
 
-const buttonGroupCss = "/*! 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(.button-group){display:inline-block;line-height:0;outline:none}:host(.button-group) .button-group-container{font-size:0;position:relative}:host(.button-group) ::slotted(button){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;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);transition:background var(--ui-animaton-speed) ease, color var(--ui-animaton-speed) ease, box-shadow var(--ui-animaton-speed) ease;color:var(--color-on-primary);background-color:var(--gray-00);color:var(--color-primary);border-inline-end:1px solid var(--gray-02);padding-left:var(--spacing-comp-03);padding-right:var(--spacing-comp-03);height:20px}:host(.button-group) ::slotted(button:first-child){border-top-left-radius:var(--border-radius-xs);border-bottom-left-radius:var(--border-radius-xs)}:host(.button-group) ::slotted(button:last-child){border-top-right-radius:var(--border-radius-xs);border-bottom-right-radius:var(--border-radius-xs)}:host(.button-group) ::slotted(button:focus){outline:none}:host(.button-group) ::slotted(button[data-active]){color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(.button-group) ::slotted(button:not([outlined]):hover){color:var(--color-on-primary);background-color:var(--color-primary-hover);cursor:pointer}:host([disable-active]) ::slotted(button[data-active]){pointer-events:none}:host(:not([outlined])) ::slotted(button[data-active]){--gxg-border-color--focused:var(--color-primary-active--inverted);color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(:not([outlined])) ::slotted(button[disabled]){background-color:var(--gxg-background-color--disabled);color:var(--gxg-color--disabled);border-inline-end-color:var(--gxg-border-color--disabled);pointer-events:none}:host([outlined]) ::slotted(button[disabled]),:host([outlined]) ::slotted(button[data-active][disabled]){background-color:var(--color-background);color:var(--gxg-color--disabled);border-color:var(--gxg-border-color--disabled);pointer-events:none;cursor:cell}:host(.button-group:not([disabled])) ::slotted(button:focus){outline:none;outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host(.rtl) ::slotted(button:last-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md);border-top-right-radius:0;border-bottom-right-radius:0}:host(.rtl) ::slotted(button:first-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md);border-top-left-radius:0;border-bottom-left-radius:0}:host(.rtl) ::slotted(button){border-left:1px solid var(--gray-02);border-right:0}:host(.rtl) ::slotted(button:last-child){border-left:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([outlined]) ::slotted(button){background:var(--color-background);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-color:var(--color-primary-enabled)}:host([outlined]) ::slotted(button[data-active]){color:var(--color-primary-hover);background-color:var(--color-primary-hover-opacity-01)}:host([outlined]) ::slotted(button:hover){color:var(--color-primary-hover) !important;background-color:var(--color-primary-hover-opacity-01) !important}:host([outlined]) ::slotted(button:not(:last-child)){border-right:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([title-alignment=center]){}:host([title-alignment=center]) .button-group-header-title{justify-content:center}:host([title-alignment=right]){}:host([title-alignment=right]) .button-group-header-title{justify-content:flex-end}:host([full-width]){display:block;width:100%}:host([full-width]) .button-group-container{display:flex}:host([full-width]) .button-group-container ::slotted(*){flex:1 1 auto !important}:host(.button-group.large) .button-group-header-title{font-size:var(--font-size-lg)}:host(.button-group.large) ::slotted(button){height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}";
+const buttonGroupCss = "/*! 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);height: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(.button-group){display:inline-block;line-height:0;outline:none}:host(.button-group) .button-group-container{font-size:0;position:relative}:host(.button-group) ::slotted(button){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;background:var(--color-primary-enabled);border:0;box-shadow:inset 0px 0px 0px 1px transparent;border-radius:var(--border-radius-xs);display:inline-flex;align-items:center;justify-content:center;padding-top:2.5px;padding-right:var(--spacing-comp-03);padding-bottom:2.5px;padding-left:var(--spacing-comp-03);line-height:var(--line-height-regular);color:var(--color-on-primary);background-color:var(--gray-00);color:var(--color-primary);border-inline-end:1px solid var(--gray-02);padding-left:var(--spacing-comp-03);padding-right:var(--spacing-comp-03);height:20px}:host(.button-group) ::slotted(button:first-child){border-top-left-radius:var(--border-radius-xs);border-bottom-left-radius:var(--border-radius-xs)}:host(.button-group) ::slotted(button:last-child){border-top-right-radius:var(--border-radius-xs);border-bottom-right-radius:var(--border-radius-xs)}:host(.button-group) ::slotted(button:focus){outline:none}:host(.button-group) ::slotted(button[data-active]){color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(.button-group) ::slotted(button:not([outlined]):hover){color:var(--color-on-primary);background-color:var(--color-primary-hover);cursor:pointer}:host([disable-active]) ::slotted(button[data-active]){pointer-events:none}:host(:not([outlined])) ::slotted(button[data-active]){--gxg-border-color--focused:var(--color-primary-active--inverted);color:var(--color-on-primary);background-color:var(--color-primary-enabled);border-right-color:var(--color-primary-enabled)}:host(:not([outlined])) ::slotted(button[disabled]){background-color:var(--gxg-background-color--disabled);color:var(--gxg-color--disabled);border-inline-end-color:var(--gxg-border-color--disabled);pointer-events:none}:host([outlined]) ::slotted(button[disabled]),:host([outlined]) ::slotted(button[data-active][disabled]){background-color:var(--color-background);color:var(--gxg-color--disabled);border-color:var(--gxg-border-color--disabled);pointer-events:none;cursor:cell}:host(.button-group:not([disabled])) ::slotted(button:focus){outline:none;outline:var(--border-width-md) solid var(--gxg-border-color--focused);outline-offset:-2px}:host(.rtl) ::slotted(button:last-child){border-top-left-radius:var(--border-radius-md);border-bottom-left-radius:var(--border-radius-md);border-top-right-radius:0;border-bottom-right-radius:0}:host(.rtl) ::slotted(button:first-child){border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:var(--border-radius-md);border-top-left-radius:0;border-bottom-left-radius:0}:host(.rtl) ::slotted(button){border-left:1px solid var(--gray-02);border-right:0}:host(.rtl) ::slotted(button:last-child){border-left:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([outlined]) ::slotted(button){background:var(--color-background);border-width:var(--border-width-sm);border-style:var(--border-style-regular);border-color:var(--color-primary-enabled)}:host([outlined]) ::slotted(button[data-active]){color:var(--color-primary-hover);background-color:var(--color-primary-hover-opacity-01)}:host([outlined]) ::slotted(button:hover){color:var(--color-primary-hover) !important;background-color:var(--color-primary-hover-opacity-01) !important}:host([outlined]) ::slotted(button:not(:last-child)){border-right:0}:host(.button-group:not([outlined])) ::slotted(button:last-child){border-right:none}:host([title-alignment=center]){}:host([title-alignment=center]) .button-group-header-title{justify-content:center}:host([title-alignment=right]){}:host([title-alignment=right]) .button-group-header-title{justify-content:flex-end}:host([full-width]){display:block;width:100%}:host([full-width]) .button-group-container{display:flex}:host([full-width]) .button-group-container ::slotted(*){flex:1 1 auto !important}:host(.button-group.large) .button-group-header-title{font-size:var(--font-size-lg)}:host(.button-group.large) ::slotted(button){height:var(--spacing-comp-05);font-size:var(--font-size-lg) !important}";
 
 const GxgButtonGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {