@genexus/genexus-ide-ui 1.0.20 → 1.0.21

package/dist/genexus-ide-ui/p-62f4ad99.entry.js

@@ -0,0 +1,612 @@
+import { r as e, c as t, h as i, H as a, g as r } from "./p-aaed592c.js";
+
+import { L as s } from "./p-74d59062.js";
+
+import { c as o } from "./p-78b90603.js";
+
+import { r as l } from "./p-3ef5a5a6.js";
+
+import { F as n } from "./p-13feb5cf.js";
+
+import { a as d, h as g, f as c } from "./p-c339f703.js";
+
+const h = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-01--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-01-font-weight);font-size:var(--ds-title-01-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-02{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-02--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-02-font-weight);font-size:var(--ds-title-02-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--color-on-primary)}.gxg-title-03{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-03--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-03-font-weight);font-size:var(--ds-title-03-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;text-transform:uppercase;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-04{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-04--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-04-font-weight);font-size:var(--ds-title-04-font-size);letter-spacing:var(--ds-base-font-letter-spacing--comfortable);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-title-05{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable)}.gxg-title-05--negative{font-family:var(--ds-base-font-family-primary);font-weight:var(--ds-title-05-font-weight);font-size:var(--ds-title-05-font-size);letter-spacing:var(--ds-base-font-letter-spacing--regular);color:var(--ds-base-font-color);text-align:start;line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable)}.gxg-text--negative{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--negative)}.gxg-text--gray{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--dimmed)}.gxg-quote{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);font-style:italic}.gxg-quote--negative{color:var(--ds-base-font-color--negative)}.gxg-link{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--ds-base-font-color--link-hover)}.gxg-link:active{color:var(--ds-base-font-color--link-active)}.gxg-link-gray{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed)}.gxg-link-gray:hover{line-height:unset;font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--link);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--ds-base-font-color--dimmed);filter:brightness(1.4)}.gxg-alert-error{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--error);display:inline-block}.gxg-alert-warning{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--warning);display:inline-block}.gxg-alert-success{font-family:var(--ds-base-font-family-primary);font-size:var(--ds-base-font-size);color:var(--ds-base-font-size-color);font-weight:var(--ds-base-font-size-weight);line-height:var(--ds-base-font-line-height--comfortable);color:var(--ds-base-font-color--success);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(--ds-base-font-family-primary);font-weight:var(--gxg-label-font-weight);font-size:var(--gxg-label-font-size);color:var(--gxg-label-color);text-align:center;line-height:1.455em;display:flex;align-items:center}.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-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gxg-scrollbar::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:grid;block-size:100%}.card-regular{background-color:var(--mer-surface__elevation--01);border:var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);border-radius:var(--mer-border__radius--md);padding:var(--mer-spacing--md) var(--mer-spacing--md);display:grid}.card-small{background-color:var(--mer-surface__elevation--02);border-radius:var(--mer-border__radius--sm);padding:var(--mer-spacing--sm) var(--mer-spacing--sm)}.card-small--actionable:hover{background-color:var(--mer-color__neutral-gray--600)}.card-small--actionable:active{background-color:var(--mer-color__neutral-gray--650)}.card-small:focus-visible{outline:var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);outline-offset:var(--focus__outline-offset)}.empty-state{block-size:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--mer-spacing--sm);text-align:center}.empty-state__title,.empty-state__button,.empty-state__link{max-inline-size:300px}.opacity-0{opacity:0}.opacity-1{opacity:1}.display-contents{display:contents}.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}.justify-start{display:flex;justify-content:start}.justify-center{display:flex;justify-content:center}.justify-end{display:flex;justify-content: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(--mer-color__neutral-gray--800)}ch-grid-column:first-child{padding-inline-start:var(--gx-ide-container__padding) !important}ch-grid-column:last-child{padding-inline-end:var(--gx-ide-container__padding) !important}ch-grid-cell{--mer-spacing--xs:var(--gx-ide-container__padding)}.layout{display:grid;gap:var(--mer-spacing--lg);box-sizing:border-box}.layout--two-cols{grid-template-columns:1fr 1fr}.layout--space-above{padding-block-start:var(--mer-spacing--lg)}gxg-tabs{box-shadow:none}:host(.gx-ide-component){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(--mer-font__weight--regular);font-size:var(--mer-font__size--xs);font-family:var(--mer-font-family--primary);height:100%;background-color:var(--gx-ide-component-background-color);display:flex;flex-direction:column;flex-grow:1;box-sizing:border-box}.gx-ide-main{flex-grow:1;overflow-y:auto;}.gx-ide-main::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-main::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-main::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-main::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-main::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.gx-ide-overflow{overflow-y:auto;}.gx-ide-overflow::-webkit-scrollbar{width:var(--gxg-scrollbar-width);height:var(--gxg-scrollbar-width)}.gx-ide-overflow::-webkit-scrollbar-track{background-color:var(--gxg-scrollbar-track-background);border-radius:var(--gxg-scrollbar-track-border-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb{background-color:var(--gxg-scrollbar-track-thumb-background);border-radius:var(--gxg-scrollbar-track-thumb-radius)}.gx-ide-overflow::-webkit-scrollbar-thumb:hover{background-color:var(--gxg-scrollbar-track-thumb-hover-background)}.gx-ide-overflow::-webkit-scrollbar-corner{background:rgba(0, 0, 0, 0)}.tree-view-primary{font-size:var(--mer-font__size--2xs)}p{margin:0;font-size:var(--mer-font__size--xxs)}.buttons-container{display:flex;gap:var(--mer-spacing--xs)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{display:block}.module-folder::part(wrapper){padding-block:1.5px;margin-block-start:var(--gxg-label-separation-vertical)}.filter--padding{padding:var(--gx-ide-container__padding)}.filter--gap{gap:var(--gx-ide-grid-row-gap)}.filter{display:flex;flex-direction:column}.filter__first-row{display:flex;gap:var(--gx-ide-grid-column-gap)}.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__first-row>*{flex:1}.filter .checkboxes-label-wrapper{display:flex;flex-direction:column;gap:0}.filter .checkboxes-wrapper{display:flex;gap:var(--gx-ide-grid-column-gap);border-radius:var(--border-radius-sm);height:var(--gxg-form-text-height);box-sizing:border-box;align-items:center;padding-inline-start:var(--mer-spacing--2xs)}.filter .user{max-width:100% !important}.filters-outer-wrapper{display:grid;grid-template-rows:1fr;transition:grid-template-rows 200ms}.filters-outer-wrapper--hidden{grid-template-rows:0fr}.filters-inner-wrapper{padding-top:var(--gx-ide-container__padding);display:grid;overflow:hidden;grid-template-columns:repeat(12, 1fr);grid-template-rows:repeat(3, 1fr)}.filters-inner-wrapper .search-contents{grid-area:1/1/2/5}.filters-inner-wrapper .category{grid-area:1/5/2/9}.filters-inner-wrapper .options{grid-area:1/9/2/13}.filters-inner-wrapper .date-time{grid-area:2/1/3/5}.filters-inner-wrapper .after-date-time{grid-area:2/5/3/9}.filters-inner-wrapper .user{grid-area:2/9/3/13}.filters-inner-wrapper .style{grid-area:3/1/4/4}.filters-inner-wrapper .language{grid-area:3/4/4/7}.filters-inner-wrapper .density{grid-area:3/7/4/10}.filters-inner-wrapper .layer{grid-area:3/10/4/13}gxg-date-picker{position:absolute;inline-size:calc(33% - 16px)}gxg-date-picker::part(input){block-size:26px}.master-wrapper{height:100%;position:relative;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(--gx-ide-container__padding)}.images-container .image-item__container img{width:100%;height:100%;object-fit:scale-down}.images-container .image-item__name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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(--mer-color__primary--200);filter:brightness(1.3)}.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(4)){padding-block:var(--grid-cell__padding-block);padding-inline:var(--grid-cell__padding-inline);align-items:start;justify-content:start;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}";
+
+const f = [ "resets/box-sizing", 
+// "utils/form",
+// "utils/layout",
+// "utils/typography",
+// "components/button",
+// "components/checkbox",
+// "components/edit",
+"components/tabular-grid" ];
+
+const b = class {
+  constructor(a) {
+    e(this, a);
+    this.componentDidLoadEvent = t(this, "componentDidLoadEvent", 7);
+    this.componentDidRenderFirstTime = t(this, "componentDidRenderFirstTime", 7);
+    this.renderedFirstTime = false;
+    // 9.LOCAL METHODS //
+        this.attachDetectClickOutsideFilter = () => {
+      document.addEventListener("click", this.detectClickOutsideFilter);
+    };
+    this.removeDetectClickOutsideFilter = () => {
+      document.removeEventListener("click", this.detectClickOutsideFilter);
+    };
+    this.detectClickOutsideFilter = e => {
+      const t = d(e, this.filterEl);
+      if (t) {
+        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 e, t, a, r, s;
+      return i("div", {
+        class: "filter filter--padding",
+        ref: e => this.filterEl = e
+      }, i("div", {
+        class: "filter__first-row"
+      }, i("gxg-form-text", {
+        "label-position": "above",
+        label: this._componentLocale.filter.name,
+        ref: e => this.filterNameEl = e,
+        part: "filter-name",
+        class: "name"
+      }), i("div", {
+        class: "second-column"
+      }, i("gx-ide-entity-selector", {
+        "label-position": "above",
+        value: this.defaultModule,
+        defaultValue: this.defaultModule,
+        selectEntityCallback: this.selectModuleCallback,
+        ref: e => this.filterModuleEl = e,
+        class: "module-folder",
+        part: "filter-module-folder"
+      }), i("gxg-button", {
+        onClick: this.resetFilterHandler,
+        part: "gxg-button-reset-filter",
+        type: "secondary-icon-only",
+        icon: "gemini-tools/reset",
+        class: "reset-filter-btn"
+      }), i("gxg-button", {
+        onClick: this.toggleFiltersHandler,
+        part: "gxg-button gxg-button--more-less",
+        type: "secondary-icon-only",
+        icon: "window-tools/filter-conditions",
+        class: "filter-btn"
+      }))), i("div", {
+        class: {
+          "filters-outer-wrapper": true,
+          "filters-outer-wrapper--hidden": this.filtersHidden
+        }
+      }, i("div", {
+        class: {
+          filter: true,
+          "filter--gap": true,
+          "filters-inner-wrapper": true
+        }
+      }, i("gxg-form-text", {
+        "label-position": "above",
+        label: this._componentLocale.filter.search,
+        ref: e => this.filterSearchContentsEl = e,
+        class: {
+          "search-contents": true
+        },
+        part: "filter-search"
+      }), i("gxg-combo-box", {
+        "disable-filter": true,
+        label: this._componentLocale.filter.category,
+        value: this.defaultCategory,
+        disabled: !this.categories,
+        ref: e => this.filterCategoryEl = e,
+        class: "category",
+        part: "filter-category"
+      }, l("gxg-combo-box-item", (e = this.categories) !== null && e !== void 0 ? e : [])), i("div", {
+        class: "options"
+      }, i("gxg-label", {
+        labelPosition: "above",
+        center: false
+      }, "Options:"), i("div", {
+        class: "checkboxes-wrapper"
+      }, i("gxg-form-checkbox", {
+        label: this._componentLocale.filter.allDescendants,
+        ref: e => this.filterAllDescendantsEl = e,
+        class: "all-descendants",
+        part: "filter-all-descendants"
+      }), i("gxg-form-checkbox", {
+        label: this._componentLocale.filter.modified,
+        ref: e => this.filterModifiedEl = e,
+        class: "modified",
+        part: "filter-modified"
+      }))), i("div", {
+        class: {
+          hide: !this.filterModified || this.filterAfterType !== n.DATE_TIME,
+          "date-time": true
+        },
+        part: "filter-datetime"
+      }, i("div", {
+        class: "date-time-wrapper"
+      }, i("gxg-label", {
+        "label-position": "above"
+      }, this._componentLocale.filter.dateTime), i("gxg-date-picker", {
+        class: "date-picker",
+        disabled: !this.filterModified,
+        ref: e => this.filterModifiedDateEl = e
+      }))), i("gxg-combo-box", {
+        class: "after-date-time",
+        disabled: !this.filterModified,
+        label: this._componentLocale.filter.afterLabel,
+        "disable-filter": true,
+        value: this.filterAfterType,
+        ref: e => this.filterAfterTypeEl = e,
+        part: "filter-after-type"
+      }, l("gxg-combo-box-item", [ {
+        id: n.NONE,
+        label: this._componentLocale.filter.afterNone,
+        value: n.NONE
+      }, {
+        id: n.DATE_TIME,
+        label: this._componentLocale.filter[n.DATE_TIME],
+        value: n.DATE_TIME
+      }, {
+        id: n.IMPORT,
+        label: this._componentLocale.filter[n.IMPORT],
+        value: n.IMPORT
+      }, {
+        id: n.LAST_BUILD,
+        label: this._componentLocale.filter[n.LAST_BUILD],
+        value: n.LAST_BUILD
+      } ])), i("gxg-form-text", {
+        disabled: !this.filterModified,
+        labelPosition: "above",
+        label: this._componentLocale.filter.user,
+        ref: e => this.filterUserEl = e,
+        value: "hey",
+        centerLabel: false,
+        class: "user",
+        part: "filter-user"
+      }), i("gxg-combo-box", {
+        "disable-filter": true,
+        label: this._componentLocale.filter.style,
+        disabled: !this.styles,
+        ref: e => this.filterStyleEl = e,
+        class: "style",
+        part: "filter-style"
+      }, l("gxg-combo-box-item", (t = this.styles) !== null && t !== void 0 ? t : [])), i("gxg-combo-box", {
+        "disable-filter": true,
+        label: this._componentLocale.filter.language,
+        disabled: !this.languages,
+        ref: e => this.filterLanguageEl = e,
+        class: "language",
+        part: "filter-language"
+      }, l("gxg-combo-box-item", (a = this.languages) !== null && a !== void 0 ? a : [])), i("gxg-combo-box", {
+        "disable-filter": true,
+        label: this._componentLocale.filter.density,
+        disabled: !this.densities,
+        ref: e => this.filterDensityEl = e,
+        class: "density",
+        part: "filter-density"
+      }, l("gxg-combo-box-item", (r = this.densities) !== null && r !== void 0 ? r : [])), i("gxg-combo-box", {
+        "disable-filter": true,
+        label: this._componentLocale.filter.layer,
+        disabled: !this.layers,
+        ref: e => this.filterLayerEl = e,
+        class: "layer",
+        part: "filter-layer"
+      }, l("gxg-combo-box-item", (s = this.layers) !== null && s !== void 0 ? s : [])))));
+    };
+    this.renderImagesData = () => 
+    /* images information*/ i("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 ? i("header", {
+      class: "images-information__header",
+      slot: "header"
+    }, i("gx-ide-title", {
+      type: "secondary",
+      class: "images-information__header-title"
+    }, this._componentLocale.imagesDataTitle), i("gxg-form-text", {
+      icon: "gemini-tools/search",
+      "icon-position": "start",
+      placeholder: "Search by any field",
+      onInput: this.filterInputHandler
+    })) : null, i("ch-tabular-grid", {
+      ref: e => this.chGridEl = e,
+      part: "ch-grid-images",
+      rowSelectionMode: "single",
+      class: "tabular-grid tabular-grid-ww-images"
+    }, i("ch-tabular-grid-columnset", {
+      class: "tabular-grid-column-set"
+    }, i("ch-tabular-grid-column", {
+      columnName: "",
+      columnNameHidden: false,
+      settingable: false,
+      size: o.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    }), i("ch-tabular-grid-column", {
+      columnName: this._componentLocale.tableHead.name,
+      columnNameHidden: false,
+      settingable: false,
+      class: "tabular-grid-column",
+      size: o.tabularGrid.colSize.common
+    }), i("ch-tabular-grid-column", {
+      columnName: this._componentLocale.tableHead.module,
+      columnNameHidden: false,
+      settingable: false,
+      size: o.tabularGrid.colSize.common,
+      class: "tabular-grid-column"
+    }), i("ch-tabular-grid-column", {
+      columnName: this._componentLocale.tableHead.description,
+      columnNameHidden: false,
+      settingable: false,
+      size: o.tabularGrid.colSize.commonDouble,
+      class: "tabular-grid-column"
+    }), i("ch-tabular-grid-column", {
+      columnName: this._componentLocale.tableHead.modifiedDate,
+      columnNameHidden: false,
+      settingable: false,
+      size: o.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    }), i("ch-tabular-grid-column", {
+      columnName: this._componentLocale.tableHead.lastUser,
+      columnNameHidden: false,
+      settingable: false,
+      size: o.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    }), i("ch-tabular-grid-column", {
+      columnName: this._componentLocale.tableHead.importDate,
+      columnNameHidden: false,
+      settingable: false,
+      size: o.tabularGrid.colSize.maxContent,
+      class: "tabular-grid-column"
+    })), this.filteredImages.map((e => i("ch-tabular-grid-row", {
+      rowid: e.id,
+      class: "tabular-grid-row"
+    }, i("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, i("ch-image", {
+      src: e.icon
+    })), i("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, g(e.name, this.filterImagesInputValue)), i("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, g(e.module, this.filterImagesInputValue)), i("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, g(e.description, this.filterImagesInputValue)), i("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, g(`${c(e.modifiedDate)}`, this.filterImagesInputValue)), i("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, g(e.lastUser, this.filterImagesInputValue)), i("ch-tabular-grid-cell", {
+      class: "tabular-grid-cell"
+    }, g(`${c(e.importDate)}`, this.filterImagesInputValue)))))));
+    this.renderImages = () => 
+    /* tiles */ i("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"
+    }, i("div", {
+      class: "images-container"
+    }, this.imagesSelectedItems.map((e => i("div", {
+      class: "image-item"
+    }, i("div", {
+      class: "image-item__container"
+    }, i("div", {
+      class: "img"
+    }, i("img", {
+      src: e.url,
+      alt: e.id
+    }))), i("span", {
+      class: "image-item__name"
+    }, e.name))))));
+    // 9.LOCAL METHODS -> Other //
+        this.getImages = () => {
+      let e = {
+        name: this.filterNameEl.value,
+        parent: this.filterModuleEl.value ? this.filterModuleEl.value.id : null
+      };
+      const t = this.filterModifiedEl.checked;
+      const i = this.filterAfterTypeEl.value;
+      e = Object.assign(Object.assign({}, e), {
+        searchContents: this.filterSearchContentsEl.value,
+        category: this.filterCategoryEl.value,
+        allDescendants: this.filterAllDescendantsEl.checked,
+        modifiedAfter: t ? i : null,
+        modifiedBy: t ? this.filterUserEl.value : null,
+        modifiedDate: t && i === n.DATE_TIME ? this.filterModifiedDateEl.value : null,
+        style: this.filterStyleEl.value,
+        language: this.filterLanguageEl.value,
+        density: this.filterDensityEl.value,
+        layer: this.filterLayerEl.value
+      });
+      this.loadCallback(e).then((e => {
+        this.images = e;
+        this.selectedObjectsIds = [];
+        this.deselectAll();
+        this.filterImagesInformationHandler();
+      }));
+    };
+    this.newObjectCallbackHandler = () => {
+      this.newObjectCallback();
+    };
+    this.openSelectionCallBackHandler = () => {
+      this.openSelectionCallback(this.selectedObjectsIds);
+    };
+    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;
+    };
+    this.selectAll = () => {
+      this.chGridEl.selectAllRows();
+    };
+    this.deselectAll = () => {
+      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();
+      }));
+      /* style */      this.filterStyleEl.addEventListener("valueChanged", (() => {
+        this.getImages();
+      }));
+      /* language */      this.filterLanguageEl.addEventListener("valueChanged", (() => {
+        this.getImages();
+      }));
+      /* density */      this.filterDensityEl.addEventListener("valueChanged", (() => {
+        this.getImages();
+      }));
+      /* layer */      this.filterLayerEl.addEventListener("valueChanged", (() => {
+        this.getImages();
+      }));
+      // for grid selection
+            this.chGridEl.addEventListener("selectionChanged", (e => {
+        this.loadImageItemsCallback(e.detail.rowsId[0]).then((e => {
+          this.imagesSelectedItems = e;
+        }));
+      }));
+      this.chGridEl.addEventListener("rowDoubleClicked", (() => {
+        this.openSelectionCallBackHandler();
+      }));
+      this.chGridEl.addEventListener("selectionChanged", (e => {
+        this.selectedObjectsIds = e.detail.rowsId;
+        this.selectionObjectChangedCallback(this.selectedObjectsIds);
+      }));
+      this.chGridEl.addEventListener("rowContextMenu", (e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.contextMenuCallback({
+          selection: e.detail.selectedRowsId,
+          clientX: e.detail.clientX,
+          clientY: e.detail.clientY
+        });
+      }));
+    };
+    this.filterInputHandler = e => {
+      this.filterImagesInputValue = e.detail;
+      this.filterImagesInformationHandler();
+    };
+    this.filterImagesInformationHandler = () => {
+      const e = this.filterImagesInputValue.toLocaleLowerCase();
+      this.filteredImages = this.images.filter((t => {
+        const i = t.name.toLocaleLowerCase().includes(e);
+        const a = t.module.toLocaleLowerCase().includes(e);
+        const r = t.description.toLocaleLowerCase().includes(e);
+        const s = t.modifiedDate.toString().includes(e);
+        const o = t.lastUser.toLocaleLowerCase().includes(e);
+        const l = t.importDate && t.importDate.toString().includes(e);
+        return i || a || r || s || o || l;
+      }));
+    };
+    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;
+    this.defaultModule = undefined;
+    this.defaultType = undefined;
+    this.filterModules = undefined;
+    this.languages = undefined;
+    this.layers = undefined;
+    this.contextMenuCallback = undefined;
+    this.deleteSelectionCallback = undefined;
+    this.loadCallback = undefined;
+    this.loadImageItemsCallback = undefined;
+    this.newObjectCallback = undefined;
+    this.openSelectionCallback = undefined;
+    this.selectModuleCallback = undefined;
+    this.selectionObjectChangedCallback = undefined;
+    this.shadow = false;
+    this.styles = undefined;
+    this.types = undefined;
+  }
+  filtersHiddenHandler(e) {
+    if (e) {
+      this.removeDetectClickOutsideFilter();
+    } else {
+      this.attachDetectClickOutsideFilter();
+    }
+  }
+  // 6.COMPONENT LIFECYCLE EVENTS //
+  async componentWillLoad() {
+    this._componentLocale = await s.getComponentStrings(this.el);
+    this.componentDidLoadEvent.emit(true);
+  }
+  componentDidLoad() {
+    this.listenChanges();
+    this.getImages();
+    this.saveInitialFilterData();
+    this.filterNameEl.focus();
+  }
+  componentDidRender() {
+    if (!this.renderedFirstTime) {
+      this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
+      this.renderedFirstTime = true;
+    }
+  }
+  // 7.LISTENERS //
+  keyDownHandler(e) {
+    if (document.activeElement === this.el) {
+      switch (e.key) {
+       case "Enter":
+        this.openSelectionCallBackHandler();
+        break;
+
+       case "Delete":
+        this.deleteSelectionCallbackHandler();
+        break;
+      }
+    }
+  }
+  // 8.PUBLIC METHODS API //
+  /**
+     * Validate necessary data input
+     */
+  async validate() {
+    const e = true;
+    return e;
+  }
+  /**
+     * This method reload the view, refreshing the filters and the table of images.
+     */  async reload() {
+    this.deleteSelectionCallbackHandler();
+    this.getImages();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    return i(a, {
+      class: "gx-ide-component"
+    }, i("ch-theme", {
+      model: f
+    }), i("div", {
+      class: "gx-ide-main-wrapper"
+    }, i("gx-ide-container", {
+      noContentPadding: true,
+      noContentGap: true,
+      containerTitle: this.displayTitle ? this._componentLocale.componentName : null,
+      slimmerFooter: o.gxIdeContainer.slimmerFooter
+    }, i("div", {
+      class: "master-wrapper"
+    }, this.renderFilter(), i("div", {
+      class: "grid-images-container"
+    }, this.renderImagesData(), this.renderImages())), i("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), i("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), i("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 r(this);
+  }
+  static get watchers() {
+    return {
+      filtersHidden: [ "filtersHiddenHandler" ]
+    };
+  }
+};
+
+b.style = h;
+
+export { b as gx_ide_ww_images };
+//# sourceMappingURL=p-62f4ad99.entry.js.map