@genexus/genexus-ide-ui 0.0.9

package/dist/esm/gx-grid-chameleon.entry.js

@@ -0,0 +1,374 @@
+import { r as registerInstance, h, H as Host } from './index-4f0a5746.js';
+
+function paginationGoToFirstPage(grid) {
+  if (grid.OnPaginationFirst) {
+    grid.OnPaginationFirst();
+  }
+  else if (grid.usePaging) {
+    grid.changeGridPage("FIRST");
+  }
+}
+function paginationGoToPreviousPage(grid) {
+  if (grid.OnPaginationPrevious) {
+    grid.OnPaginationPrevious();
+  }
+  else if (grid.usePaging) {
+    grid.changeGridPage("PREV");
+  }
+}
+function paginationGoToNextPage(grid) {
+  if (grid.OnPaginationNext) {
+    grid.OnPaginationNext();
+  }
+  else if (grid.usePaging) {
+    grid.changeGridPage("NEXT");
+  }
+}
+function paginationGoToLastPage(grid) {
+  if (grid.OnPaginationLast) {
+    grid.OnPaginationLast();
+  }
+  else if (grid.usePaging) {
+    grid.changeGridPage("LAST");
+  }
+}
+
+function gridRefresh(grid) {
+  grid.ParentObject.refreshGrid(grid.ControlName);
+}
+function gridSort(grid, columnId, sortDirection) {
+  const column = grid.getColumnByHtmlName(columnId);
+  grid.setSort(column.index, sortDirection !== "desc");
+}
+
+class GridChameleonManagerState {
+  static load(grid, state) {
+    var _a;
+    this.grid = grid;
+    this.state = state !== null && state !== void 0 ? state : {};
+    this.state.Columns = (_a = this.state.Columns) !== null && _a !== void 0 ? _a : [];
+    this.loadLocal();
+    this.apply();
+  }
+  static setColumnSort(columnId, sortDirection) {
+    this.state.SortColumnName = columnId;
+    this.state.SortDirection = sortDirection;
+  }
+  static setColumnHidden(columnId, hidden) {
+    this.getColumn(columnId).Hidden = hidden;
+    this.saveLocal();
+  }
+  static setColumnSize(columnId, size) {
+    this.getColumn(columnId).Size = size;
+    this.saveLocal();
+  }
+  static setColumnFreeze(columnId, freeze) {
+    this.getColumn(columnId).Freeze = freeze;
+    this.saveLocal();
+  }
+  static setColumnOrder(columnId, order) {
+    this.getColumn(columnId).Order = order;
+    this.saveLocal();
+  }
+  static setColumnFilterEqual(columnId, value) {
+    this.getColumnFilter(columnId).Equal = value;
+    this.updateIsFiltering(columnId);
+  }
+  static setColumnFilterLess(columnId, value) {
+    this.getColumnFilter(columnId).Less = value;
+    this.updateIsFiltering(columnId);
+  }
+  static setColumnFilterGreater(columnId, value) {
+    this.getColumnFilter(columnId).Greater = value;
+    this.updateIsFiltering(columnId);
+  }
+  static apply() {
+    var _a, _b;
+    const sortColumn = this.grid.getColumnByHtmlName(((_a = this.state.SortColumnName) !== null && _a !== void 0 ? _a : "").toUpperCase());
+    if (sortColumn) {
+      sortColumn.SortDirection = this.state.SortDirection;
+    }
+    (_b = this.state.Columns) === null || _b === void 0 ? void 0 : _b.forEach(stateColumn => {
+      var _a, _b, _c, _d, _e, _f;
+      const column = this.grid.getColumnByHtmlName(stateColumn.Name.toUpperCase());
+      if (column) {
+        column.Hidden = stateColumn.Hidden ? -1 : 0;
+        if (stateColumn.Size) {
+          column.Size = "length";
+          column.SizeLength = stateColumn.Size;
+        }
+        if (stateColumn.Order) {
+          column.order = stateColumn.Order;
+        }
+        column.filterEqual =
+          (_b = ((_a = stateColumn.Filter) !== null && _a !== void 0 ? _a : {}).Equal) !== null && _b !== void 0 ? _b : column.filterEqual;
+        column.filterLess =
+          (_d = ((_c = stateColumn.Filter) !== null && _c !== void 0 ? _c : {}).Less) !== null && _d !== void 0 ? _d : column.filterLess;
+        column.filterGreater =
+          (_f = ((_e = stateColumn.Filter) !== null && _e !== void 0 ? _e : {}).Greater) !== null && _f !== void 0 ? _f : column.filterGreater;
+        this.updateIsFiltering(column.htmlName);
+      }
+    });
+  }
+  static loadLocal() {
+    this.grid.columns.forEach(column => {
+      var _a;
+      const columnSettings = (_a = localStorage
+        .getItem(`${this.grid.ControlName}-${column.htmlName}`)) === null || _a === void 0 ? void 0 : _a.split("|");
+      if (columnSettings) {
+        if (columnSettings[0] !== "") {
+          this.getColumn(column.htmlName).Hidden = columnSettings[0] === "true";
+        }
+        if (columnSettings[1] !== "") {
+          this.getColumn(column.htmlName).Size = columnSettings[1];
+        }
+        if (columnSettings[2] !== "") {
+          this.getColumn(column.htmlName).Order = parseInt(columnSettings[2]);
+        }
+        if (columnSettings[3] !== "") {
+          this.getColumn(column.htmlName).Freeze = columnSettings[3];
+        }
+      }
+    });
+  }
+  static saveLocal() {
+    this.state.Columns.forEach(column => {
+      localStorage.setItem(`${this.grid.ControlName}-${column.Name}`, [column.Hidden, column.Size, column.Order, column.Freeze].join("|"));
+    });
+  }
+  static getColumn(name) {
+    let column = this.state.Columns.find(column => column.Name.localeCompare(name) === 0);
+    if (!column) {
+      column = {
+        Name: name
+      };
+      this.state.Columns.push(column);
+    }
+    return column;
+  }
+  static getColumnFilter(name) {
+    const column = this.getColumn(name);
+    if (!column.Filter) {
+      column.Filter = {};
+    }
+    return column.Filter;
+  }
+  static updateIsFiltering(columnId) {
+    const column = this.grid.getColumnByHtmlName(columnId);
+    column.isFiltering = !!(column.filterEqual ||
+      column.filterGreater ||
+      column.filterGreater);
+  }
+}
+
+const gxGridChameleonCss = "gx-grid-chameleon{display:contents}";
+
+const GridChameleon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  controlStateHandler() {
+    this.loadState();
+  }
+  componentWillLoad() {
+    this.loadState();
+  }
+  componentWillRender() {
+    this.defineColumnRender();
+  }
+  componentDidLoad() {
+    this.setCurrentRow();
+    this.notifyResizePopup();
+  }
+  selectionChangedHandler(eventInfo) {
+    const rowIndex = this.getRowIndexByGxId(eventInfo.detail.rowsId[0]);
+    if (rowIndex >= 0) {
+      this.grid.execC2VFunctions();
+      this.grid.selectRow(rowIndex);
+    }
+  }
+  cellClickedHandler(eventInfo) {
+    const rowIndex = this.getRowIndexByGxId(eventInfo.detail.rowId);
+    const cellIndex = parseInt(eventInfo.detail.cellId);
+    if (rowIndex >= 0) {
+      this.grid.executeEvent(cellIndex, rowIndex);
+    }
+  }
+  navigateClickedHandler(eventInfo) {
+    switch (eventInfo.detail.type) {
+      case "first":
+        paginationGoToFirstPage(this.grid);
+        break;
+      case "previous":
+        paginationGoToPreviousPage(this.grid);
+        break;
+      case "next":
+        paginationGoToNextPage(this.grid);
+        break;
+      case "last":
+        paginationGoToLastPage(this.grid);
+        break;
+    }
+  }
+  refreshClickedHandler() {
+    gridRefresh(this.grid);
+  }
+  columnHiddenChangedHandler(eventInfo) {
+    GridChameleonManagerState.setColumnHidden(eventInfo.detail.columnId, eventInfo.detail.hidden);
+  }
+  columnSizeChangedHandler(eventInfo) {
+    GridChameleonManagerState.setColumnSize(eventInfo.detail.columnId, eventInfo.detail.size);
+  }
+  columnFreezeChangedHandler(eventInfo) {
+    GridChameleonManagerState.setColumnFreeze(eventInfo.detail.columnId, eventInfo.detail.freeze);
+  }
+  columnSortChangedHandler(eventInfo) {
+    GridChameleonManagerState.setColumnSort(eventInfo.detail.columnId, eventInfo.detail.sortDirection);
+    switch (this.grid.SortMode) {
+      case "client":
+        gridSort(this.grid, eventInfo.detail.columnId, eventInfo.detail.sortDirection);
+        this.gridTimestamp = Date.now();
+        break;
+      case "server":
+        gridRefresh(this.grid);
+        break;
+    }
+  }
+  columnOrderChangedHandler(eventInfo) {
+    GridChameleonManagerState.setColumnOrder(eventInfo.detail.columnId, eventInfo.detail.order);
+  }
+  columnFilterChangedHandler(eventInfo) {
+    var _a, _b, _c;
+    const column = eventInfo.detail.column;
+    column.filterEqual = (_a = eventInfo.detail.equal) !== null && _a !== void 0 ? _a : "";
+    column.filterLess = (_b = eventInfo.detail.less) !== null && _b !== void 0 ? _b : "";
+    column.filterGreater = (_c = eventInfo.detail.greater) !== null && _c !== void 0 ? _c : "";
+    GridChameleonManagerState.setColumnFilterEqual(column.htmlName, column.filterEqual);
+    GridChameleonManagerState.setColumnFilterLess(column.htmlName, column.filterLess);
+    GridChameleonManagerState.setColumnFilterGreater(column.htmlName, column.filterGreater);
+    gridRefresh(this.grid);
+  }
+  getColumnSize(column) {
+    let size;
+    switch (column.Size) {
+      case "auto":
+        size = "auto";
+        break;
+      case "css":
+        size = `var(--${column.SizeVariableName}, min-content)`;
+        break;
+      case "length":
+        size = column.SizeLength;
+        break;
+      case "max":
+        size = "max-content";
+        break;
+      case "min":
+        size = "min-content";
+        break;
+      case "minmax":
+        size = `minmax(${column.SizeMinLength || "min-content"}, ${column.SizeMaxLength || "auto"})`;
+        break;
+      default:
+        size = "min-content";
+        break;
+    }
+    return size || "min-content";
+  }
+  defineColumnRender() {
+    const properties = this.grid.properties;
+    this.grid.columns.forEach((column, i) => {
+      column.render =
+        (properties.length === 0 && column.visible) ||
+          properties.some(row => row[i].visible);
+    });
+  }
+  getRowIndexByGxId(rowId) {
+    return this.grid.rows.findIndex(row => row.gxId === rowId);
+  }
+  notifyResizePopup() {
+    if (gx.popup.ispopup()) {
+      gx.fx.obs.notify("gx.onafterevent");
+    }
+  }
+  setCurrentRow() {
+    const firstRow = this.grid.rows[0];
+    if (firstRow && !gx.fn.currentGridRowImpl(this.grid.gxId)) {
+      gx.fn.setCurrentGridRow(this.grid.gxId, firstRow.gxId);
+    }
+  }
+  loadState() {
+    GridChameleonManagerState.load(this.grid, this.state);
+  }
+  renderTitle() {
+    return h("h1", { slot: "header" }, this.grid.header);
+  }
+  renderActionbar(position, className) {
+    const refresh = this.grid.ActionRefreshPosition === position, settings = this.grid.ActionSettingsPosition === position;
+    if (refresh || settings) {
+      return (h("ch-grid-actionbar", { slot: position, class: className }, refresh && this.renderActionRefresh(), settings && this.renderActionSettings()));
+    }
+  }
+  renderActionRefresh() {
+    return (h("ch-grid-action-refresh", { class: this.grid.ActionRefreshClass, title: this.grid.ActionRefreshTextPosition === "title"
+        ? gx.getMessage("GX_BtnRefresh")
+        : "" }, this.grid.ActionRefreshTextPosition === "text"
+      ? gx.getMessage("GX_BtnRefresh")
+      : ""));
+  }
+  renderActionSettings() {
+    return (h("ch-grid-action-settings", { class: this.grid.ActionSettingsClass, title: this.grid.ActionSettingsTextPosition === "title"
+        ? gx.getMessage("GXM_Settings")
+        : "" }, this.grid.ActionSettingsTextPosition === "text"
+      ? gx.getMessage("GXM_Settings")
+      : ""));
+  }
+  renderColumns() {
+    return (h("ch-grid-columnset", { class: this.grid.ColumnsetClass }, this.grid.columns.map(column => {
+      if (gx.lang.gxBoolean(column.render)) {
+        return (h("ch-grid-column", { key: column.htmlName, columnId: column.htmlName, columnIconUrl: column.Icon, columnName: column.title, columnNamePosition: column.NamePosition, size: this.getColumnSize(column), order: column.order ? column.order : null, displayObserverClass: column.gxColumnClass, class: `${this.grid.ColumnClass} ${column.HeaderClass} ${column.isFiltering ? "grid-column-filtering" : ""}`, hidden: column.Hidden === -1, hideable: column.Hideable === -1, resizable: column.Resizeable === -1, sortable: column.Sortable === -1, settingable: column.Filterable === -1, sortDirection: column.SortDirection }, column.Filterable === -1 && this.renderColumnFilter(column)));
+      }
+    })));
+  }
+  renderColumnFilter(column) {
+    return (h("gx-grid-chameleon-column-filter", { key: column.htmlName, class: this.grid.ColumnFilterClass, column: column, equal: column.filterEqual, less: column.filterLess, greater: column.filterGreater, buttonResetText: this.grid.FilterButtonResetText, buttonApplyText: this.grid.FilterButtonApplyText, slot: "settings" }));
+  }
+  renderRows() {
+    return this.grid.rows.map((row, i) => {
+      const rowEvenClasses = `${this.grid.RowClass} ${this.grid.RowEvenClass}`;
+      const rowOddClasses = `${this.grid.RowClass} ${this.grid.RowOddClass}`;
+      return (h("ch-grid-row", { key: row.gxId, rowid: row.gxId, class: i % 2 === 0 ? rowEvenClasses : rowOddClasses }, this.renderCells(row)));
+    });
+  }
+  renderCells(row) {
+    return row.gxProps.map((cellControlProperties, i) => {
+      const column = this.grid.columns[i];
+      if (gx.lang.gxBoolean(column.render)) {
+        return (h("ch-grid-cell", { key: cellControlProperties[0], class: this.grid.CellClass, cellid: i, innerHTML: this.renderControl(column.gxControl, cellControlProperties) }));
+      }
+    });
+  }
+  renderControl(control, props) {
+    // eslint-disable-next-line prefer-spread
+    control.setProperties.apply(control, props);
+    return control.getHtml();
+  }
+  renderPaginator() {
+    return (h("ch-paginator", { class: this.grid.pagingBarClass, slot: "footer" }, this.renderPaginatorNavigate("first", this.grid.isFirstPage(), this.grid.pagingButtonFirstClass, gx.getMessage("GXM_first")), this.renderPaginatorNavigate("previous", this.grid.isFirstPage(), this.grid.pagingButtonPreviousClass, gx.getMessage("GXM_previous")), this.renderPaginatorNavigate("next", this.grid.isLastPage(), this.grid.pagingButtonNextClass, gx.getMessage("GXM_next")), this.renderPaginatorNavigate("last", this.grid.isLastPage(), this.grid.pagingButtonLastClass, gx.getMessage("GXM_last"))));
+  }
+  renderPaginatorNavigate(type, disabled, className, text) {
+    const textPosition = this.grid.PaginatorNavigationButtonTextPosition;
+    return (h("ch-paginator-navigate", { type: type, disabled: disabled, class: className, title: textPosition === "title" ? text : "" }, textPosition === "text" ? text : ""));
+  }
+  render() {
+    return (h(Host, null, h("ch-grid", { class: this.grid.Class, rowSelectionMode: this.grid.gxAllowSelection ? "single" : "none", rowSelectedClass: this.grid.RowSelectedClass.trim(), rowHighlightedClass: this.grid.RowHighlightedClass.trim() }, this.grid.header && this.renderTitle(), this.renderActionbar("header", this.grid.ActionbarHeaderClass), this.renderActionbar("footer", this.grid.ActionbarFooterClass), this.renderColumns(), this.renderRows(), this.grid.PaginatorShow &&
+      this.grid.pageSize > 0 &&
+      this.renderPaginator())));
+  }
+  static get watchers() { return {
+    "state": ["controlStateHandler"]
+  }; }
+};
+GridChameleon.style = gxGridChameleonCss;
+
+export { GridChameleon as gx_grid_chameleon };

package/dist/esm/gx-ide-directory-selector.entry.js

@@ -0,0 +1,51 @@
+import { r as registerInstance, h, H as Host } from './index-4f0a5746.js';
+
+const directorySelectorCss = ":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}:host{display:flex;flex-direction:column;color:var(--color-primary-enabled);}:host .container{display:flex;flex-direction:column;gap:30px}:host label{font-size:14px}:host .wrapper{display:inline-flex;align-items:center;gap:var(--gx-ide-grid-column-gap)}:host([label-position=start]){flex-direction:row}:host([label-position=start]) .wrapper{flex:1}";
+
+const GxIdeDirectorySelector = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.evaluateLabelPosition = () => {
+      if (this.label && this.labelPosition === "above") {
+        this.centerLabel = false;
+      }
+    };
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.btnSelectClickHandler = () => {
+      this.selectDirectoryCallback &&
+        this.selectDirectoryCallback().then(result => {
+          if (result) {
+            this.value = result;
+          }
+        });
+    };
+    this.accessibilityLabels = {
+      buttonSelectLabel: "displays the directory selector"
+    };
+    this.label = undefined;
+    this.labelPosition = "start";
+    this.centerLabel = true;
+    this.labelWidth = undefined;
+    this.selectDirectoryCallback = undefined;
+    this.value = undefined;
+  }
+  // 2. REFERENCE TO ELEMENTS //
+  // 3.STATE() VARIABLES //
+  // 4.PUBLIC PROPERTY API | WATCH'S //
+  // 5.EVENTS (EMIT) //
+  // 6.METHODS //
+  componentWillLoad() {
+    this.evaluateLabelPosition();
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    var _a;
+    console.log("centerLabel", this.centerLabel);
+    return (h(Host, null, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel }, this.label)) : null, h("div", { class: "wrapper" }, h("gxg-form-text", { part: "input", value: this.value }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_a = this.accessibilityLabels) === null || _a === void 0 ? void 0 : _a.buttonSelectLabel, type: "secondary-icon-only", icon: "gemini-tools/folder", disabled: !this.selectDirectoryCallback }))));
+  }
+};
+GxIdeDirectorySelector.style = directorySelectorCss;
+
+export { GxIdeDirectorySelector as gx_ide_directory_selector };

package/dist/esm/gx-ide-entity-selector.entry.js

@@ -0,0 +1,73 @@
+import { r as registerInstance, h, H as Host } from './index-4f0a5746.js';
+
+const entitySelectorCss = ":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}:host{display:flex;flex-direction:column;color:var(--color-primary-enabled);}:host .container{display:flex;flex-direction:column;gap:30px}:host label{font-size:14px}:host .wrapper{display:inline-flex;align-items:center;gap:var(--spacing-comp-01);border:var(--gxg-border-common-styles);border-radius:var(--border-radius-sm);padding:var(--spacing-comp-01);height:var(--gxg-form-text-height);box-sizing:border-box;background-color:var(--color-background)}:host input{flex:1;border:0;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-size:var(--font-size-lg)}:host input:focus-visible{outline:none}:host(:focus-within) .wrapper{outline-style:solid;outline-color:var(--color-primary-enabled);outline-width:var(--border-width-md);outline-offset:-2px}:host(.gxg-entity-selector--button-has-focus) .wrapper{outline:none}:host([label-position=start]){flex-direction:row}:host([label-position=start]) .wrapper{flex:1}";
+
+const GxIdeEntitySelector = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // PUBLIC PROPERTY API | WATCH'S //
+    // 5.EVENTS (EMIT) //
+    // 6.METHODS //
+    // 7.LISTENERS //
+    // 8.PUBLIC METHODS API //
+    // 9.LOCAL METHODS //
+    this.btnClearClickHandler = () => {
+      this.value = null;
+    };
+    this.btnSelectClickHandler = () => {
+      this.selectEntityCallback &&
+        this.selectEntityCallback().then(result => {
+          this.value = result;
+        });
+    };
+    this.iconColor = () => {
+      let value;
+      if (this.value) {
+        value = this.value;
+      }
+      else if (this.defaultValue) {
+        value = this.defaultValue;
+      }
+      return (value === null || value === void 0 ? void 0 : value.iconColor) || "auto";
+    };
+    this.iconSrc = () => {
+      if (this.value) {
+        return this.value.iconSrc;
+      }
+      else if (this.defaultValue) {
+        return this.defaultValue.iconSrc;
+      }
+      return undefined;
+    };
+    this.buttonFocusHandler = (e) => {
+      if (e.type === "focus") {
+        this.buttonHasFocus = true;
+      }
+      else if (e.type === "blur") {
+        this.buttonHasFocus = false;
+      }
+    };
+    this.accessibilityLabels = {
+      buttonClearLabel: "clears the actual value",
+      buttonSelectLabel: "displays the entity selector"
+    };
+    this.defaultValue = undefined;
+    this.label = undefined;
+    this.labelPosition = "above";
+    this.centerLabel = false;
+    this.labelWidth = undefined;
+    this.selectEntityCallback = undefined;
+    this.value = undefined;
+    this.buttonHasFocus = false;
+  }
+  // 10.RENDER() FUNCTION //
+  render() {
+    var _a, _b, _c, _d;
+    return (h(Host, { class: {
+        "gxg-entity-selector--button-has-focus": this.buttonHasFocus
+      } }, this.label && (h("gxg-label", { part: "label", labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)), h("div", { part: "wrapper", class: "wrapper" }, this.iconSrc() && (h("gxg-icon", { color: this.iconColor(), type: this.iconSrc(), part: "icon", "aria-hidden": "true" })), h("input", { type: "text", readonly: true, part: "input input-entity", value: ((_a = this.value) === null || _a === void 0 ? void 0 : _a.name) || ((_b = this.defaultValue) === null || _b === void 0 ? void 0 : _b.name) }), h("gxg-button", { part: "button-clear", onClick: this.btnClearClickHandler, "aria-label": (_c = this.accessibilityLabels) === null || _c === void 0 ? void 0 : _c.buttonClearLabel, onFocus: this.buttonFocusHandler, onBlur: this.buttonFocusHandler, type: "secondary-icon-only", icon: "gemini-tools/reset" }), h("gxg-button", { part: "button-select", onClick: this.btnSelectClickHandler, "aria-label": (_d = this.accessibilityLabels) === null || _d === void 0 ? void 0 : _d.buttonSelectLabel, onFocus: this.buttonFocusHandler, onBlur: this.buttonFocusHandler, type: "secondary-icon-only", icon: "gemini-tools/show-more-horizontal", disabled: !this.selectEntityCallback }))));
+  }
+};
+GxIdeEntitySelector.style = entitySelectorCss;
+
+export { GxIdeEntitySelector as gx_ide_entity_selector };