@sankhyalabs/sankhyablocks 2.4.5-SKA-60656.1 → 2.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/cjs/snk-configurator_3.cjs.entry.js +10 -12
  2. package/dist/cjs/snk-crud.cjs.entry.js +6 -6
  3. package/dist/cjs/snk-filter-bar_7.cjs.entry.js +14 -19
  4. package/dist/cjs/snk-form-config.cjs.entry.js +4 -4
  5. package/dist/cjs/snk-form.cjs.entry.js +2 -6
  6. package/dist/cjs/snk-pesquisa.cjs.entry.js +1 -1
  7. package/dist/cjs/snk-tab-config.cjs.entry.js +7 -0
  8. package/dist/collection/components/snk-configurator/snk-configurator.js +1 -1
  9. package/dist/collection/components/snk-crud/snk-crud.js +6 -6
  10. package/dist/collection/components/snk-filter-bar/filter-item/snk-filter-item.js +2 -4
  11. package/dist/collection/components/snk-filter-bar/filter-list/snk-filter-list.js +7 -5
  12. package/dist/collection/components/snk-filter-bar/snk-filter-bar.js +1 -4
  13. package/dist/collection/components/snk-form/snk-form.js +2 -6
  14. package/dist/collection/components/snk-form/subcomponents/snk-field-config/snk-field-config.js +1 -1
  15. package/dist/collection/components/snk-form/subcomponents/snk-form-config/snk-form-config.js +4 -4
  16. package/dist/collection/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.js +8 -1
  17. package/dist/collection/components/snk-grid/snk-grid.js +8 -10
  18. package/dist/collection/components/snk-grid/subcomponents/snk-grid-config/snk-grid-config.js +2 -2
  19. package/dist/collection/components/snk-pesquisa/snk-pesquisa.js +1 -1
  20. package/dist/collection/components/snk-taskbar/snk-taskbar.js +2 -4
  21. package/dist/components/snk-configurator2.js +1 -1
  22. package/dist/components/snk-crud.js +7 -7
  23. package/dist/components/snk-field-config2.js +1 -1
  24. package/dist/components/snk-filter-bar2.js +1 -4
  25. package/dist/components/snk-filter-item2.js +2 -4
  26. package/dist/components/snk-filter-list2.js +7 -5
  27. package/dist/components/snk-form-config2.js +4 -4
  28. package/dist/components/snk-form2.js +2 -6
  29. package/dist/components/snk-grid-config2.js +2 -2
  30. package/dist/components/snk-grid2.js +8 -10
  31. package/dist/components/snk-pesquisa2.js +1 -1
  32. package/dist/components/snk-tab-config2.js +8 -1
  33. package/dist/components/snk-taskbar2.js +3 -5
  34. package/dist/esm/snk-configurator_3.entry.js +10 -12
  35. package/dist/esm/snk-crud.entry.js +7 -7
  36. package/dist/esm/snk-filter-bar_7.entry.js +14 -19
  37. package/dist/esm/snk-form-config.entry.js +4 -4
  38. package/dist/esm/snk-form.entry.js +2 -6
  39. package/dist/esm/snk-pesquisa.entry.js +1 -1
  40. package/dist/esm/snk-tab-config.entry.js +8 -1
  41. package/dist/sankhyablocks/p-1bc8f32f.entry.js +1 -0
  42. package/dist/sankhyablocks/{p-60e7e86d.entry.js → p-60038252.entry.js} +1 -1
  43. package/dist/sankhyablocks/p-71997e4c.entry.js +1 -0
  44. package/dist/sankhyablocks/p-9010ac54.entry.js +1 -0
  45. package/dist/sankhyablocks/p-b05638d2.entry.js +1 -0
  46. package/dist/sankhyablocks/p-c30d0966.entry.js +1 -0
  47. package/dist/sankhyablocks/p-e6e0efe7.entry.js +1 -0
  48. package/dist/sankhyablocks/sankhyablocks.esm.js +1 -1
  49. package/dist/types/components/snk-crud/snk-crud.d.ts +1 -2
  50. package/dist/types/components/snk-filter-bar/filter-item/snk-filter-item.d.ts +0 -1
  51. package/dist/types/components/snk-filter-bar/filter-list/snk-filter-list.d.ts +0 -1
  52. package/dist/types/components/snk-filter-bar/snk-filter-bar.d.ts +0 -2
  53. package/dist/types/components/snk-form/snk-form.d.ts +0 -1
  54. package/dist/types/components/snk-form/subcomponents/snk-tab-config/snk-tab-config.d.ts +1 -0
  55. package/dist/types/components/snk-grid/snk-grid.d.ts +1 -2
  56. package/package.json +1 -1
  57. package/dist/sankhyablocks/p-2e0747f9.entry.js +0 -1
  58. package/dist/sankhyablocks/p-67c1700b.entry.js +0 -1
  59. package/dist/sankhyablocks/p-825c8975.entry.js +0 -1
  60. package/dist/sankhyablocks/p-cd03ea9e.entry.js +0 -1
  61. package/dist/sankhyablocks/p-d2b0f1fc.entry.js +0 -1
  62. package/dist/sankhyablocks/p-d61f2170.entry.js +0 -1
package/dist/collection/components/snk-grid/snk-grid.js CHANGED
@@ -62,14 +62,12 @@ export class SnkGrid {
62
62
  });
63
63
  }
64
64
  saveConfig(config) {
65
- this._snkGridConfig.saveConfig(config)
66
- .then(() => {
67
- this.closeGridConfig();
68
- });
65
+ this._snkGridConfig.saveConfig(config);
69
66
  }
70
67
  changeConfig(config) {
71
68
  this._grid.setColumnsState(config.columns)
72
69
  .then(() => {
70
+ this.setGridConfig(config);
73
71
  this.closeGridConfig();
74
72
  });
75
73
  }
@@ -82,8 +80,12 @@ export class SnkGrid {
82
80
  if (!this._dataUnit) {
83
81
  this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
84
82
  this._dataUnit = evt.detail;
83
+ this.addElementID();
85
84
  });
86
85
  }
86
+ else {
87
+ this.addElementID();
88
+ }
87
89
  this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
88
90
  this._dataState = evt.detail;
89
91
  });
@@ -98,19 +100,15 @@ export class SnkGrid {
98
100
  this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
99
101
  this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
100
102
  }
101
- componentDidLoad() {
103
+ addElementID() {
102
104
  const dataInfo = { dataUnit: this._dataUnit };
103
105
  ElementIDUtils.addIDInfo(this._element, null, dataInfo);
104
106
  }
105
- getDataElementId(suffix) {
106
- const elemIdSnkGrid = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
107
- return `${elemIdSnkGrid}_${suffix}`;
108
- }
109
107
  render() {
110
108
  if (!this._dataUnit) {
111
109
  return undefined;
112
110
  }
113
- return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("internal_filter"), class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": this.getDataElementId("grid_top_taskbar"), key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": this.getDataElementId("internal_grid"), dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("grid_left_taskBar"), buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
111
+ return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
114
112
  }
115
113
  static get is() { return "snk-grid"; }
116
114
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/snk-grid/subcomponents/snk-grid-config/snk-grid-config.js CHANGED
@@ -103,7 +103,7 @@ export class EzGridConfig {
103
103
  this._columListItems = [visibleGroup, hiddenGroup];
104
104
  }
105
105
  buildColumnListSlot(item, group) {
106
- const dataElementId = `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
106
+ const dataElementId = `configItem_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(item.label))}`;
107
107
  return (h("div", null, h("ez-check", { mode: 'switch', id: 'switch' + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === this.getMessage("snkGridConfig.group.visible"), "data-element-id": dataElementId, onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
108
108
  }
109
109
  buildOrderListSlot(item) {
@@ -466,7 +466,7 @@ export class EzGridConfig {
466
466
  ElementIDUtils.addIDInfo(this._element);
467
467
  }
468
468
  render() {
469
- return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
469
+ return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { "data-element-id": "searchColums", ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true, "data-element-id": "configCols" }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item), "data-element-id": "configDataOrder" })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
470
470
  }
471
471
  static get is() { return "snk-grid-config"; }
472
472
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/snk-pesquisa/snk-pesquisa.js CHANGED
@@ -296,7 +296,7 @@ export class SnkPesquisa {
296
296
  }
297
297
  render() {
298
298
  var _a;
299
- return (h(Host, null, h("div", { class: "snk-pesquisa" }, h("div", { class: "snk-pesquisa__input" }, h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument }, h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
299
+ return (h(Host, null, h("div", { class: "snk-pesquisa" }, h("div", { class: "snk-pesquisa__input" }, h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument, "data-element-id": "searchInput" }, h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
300
300
  ? h("button", { slot: "rightIcon", class: "snk-pesquisa__btn", onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
301
301
  : undefined), h("ez-button", { class: "ez-button--primary", label: "Pesquisar", onClick: () => this.onClickSearch() })), h("label", { class: "snk-pesquisa__records" }, this.getMessageView()), h("div", { class: "snk-pesquisa__content" }, this._itemList && this._itemList.map((item) => {
302
302
  return (h("ez-card-item", { onEzClick: (event) => this.createOption(event.detail), item: item }));
package/dist/collection/components/snk-taskbar/snk-taskbar.js CHANGED
@@ -115,12 +115,10 @@ export class SnkTaskbar {
115
115
  }
116
116
  }
117
117
  getIdElemBtnNative(taskbarElem) {
118
- const elemIdTaskbar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
119
- return `${elemIdTaskbar}_${StringUtils.toCamelCase(taskbarElem)}`;
118
+ return StringUtils.toCamelCase(taskbarElem);
120
119
  }
121
120
  getIdElemBtnCustom(btnCustom) {
122
- const elemIdTaskbar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
123
- return `${elemIdTaskbar}_${StringUtils.toCamelCase(btnCustom.name)}`;
121
+ return StringUtils.toCamelCase(btnCustom.name);
124
122
  }
125
123
  isDivider(element) {
126
124
  var _a;
package/dist/components/snk-configurator2.js CHANGED
@@ -88,7 +88,7 @@ const SnkConfigurator = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
88
88
  render() {
89
89
  return (h("ez-modal", { opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage("snkConfigurator.titleConfigurations")), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-radio-button", { class: "ez-margin-top--medium", label: this.getMessage("snkConfigurator.subTitleModeConfig"), value: this.getViewModeValue(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelGrid"), value: GRID_MODE.name }), h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelForm"), value: FORM_MODE.name })), h("ez-button", { mode: "slim", label: this.viewMode === GRID_MODE.name
90
90
  ? this.getMessage("snkConfigurator.labelConfigGrid")
91
- : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig() }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
91
+ : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
92
92
  }
93
93
  static get style() { return snkConfiguratorCss; }
94
94
  }, [2, "snk-configurator", {
package/dist/components/snk-crud.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
- import { ElementIDUtils, ApplicationContext } from '@sankhyalabs/core';
2
+ import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
3
3
  import { V as VIEW_MODE } from './constants.js';
4
4
  import { T as TaskbarElement, d as defineCustomElement$2 } from './snk-taskbar2.js';
5
5
  import { d as defineCustomElement$g } from './snk-config-options2.js';
@@ -74,10 +74,6 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
74
74
  this.setViewMode(GRID_MODE);
75
75
  }
76
76
  }
77
- getDataElementId(suffix) {
78
- const elemIdSnkCrud = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
79
- return `${elemIdSnkCrud}_${suffix}`;
80
- }
81
77
  componentWillLoad() {
82
78
  let parent = this._element.parentElement;
83
79
  while (parent) {
@@ -90,8 +86,12 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
90
86
  if (!this._dataUnit) {
91
87
  this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
92
88
  this._dataUnit = evt.detail;
89
+ this.addDataElementID();
93
90
  });
94
91
  }
92
+ else {
93
+ this.addDataElementID();
94
+ }
95
95
  this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
96
96
  this._dataState = evt.detail;
97
97
  });
@@ -104,12 +104,12 @@ const SnkCrud$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
104
104
  this.configName = application.configName;
105
105
  }
106
106
  }
107
- componentDidLoad() {
107
+ addDataElementID() {
108
108
  const dataInfo = { dataUnit: this._dataUnit };
109
109
  ElementIDUtils.addIDInfo(this._element, null, dataInfo);
110
110
  }
111
111
  render() {
112
- return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": this.getDataElementId("crud_ViewStack") }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": this.getDataElementId("crud_grid"), configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": this.getDataElementId("crud_form"), configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
112
+ return (h("ez-view-stack", { ref: (ref) => this._viewStack = ref, "data-element-id": "crud" }, h("stack-item", null, h("snk-grid", { ref: (ref) => this._snkGrid = ref, "data-element-id": "crud_grid", configName: this.configName, onGridDoubleClick: () => this.gridToForm(true), taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail), actionsList: this.actionsList, statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("slot", { name: "SnkGridHeader" }), h("slot", { name: "SnkGridFooter" }), h("slot", { name: "SnkGridTaskBar" }))), h("stack-item", null, h("snk-form", { ref: (ref) => this._snkForm = ref, "data-element-id": "crud_form", configName: this.configName, actionsList: this.actionsList, onExit: () => this.setViewMode(GRID_MODE), recordsValidator: this.recordsValidator, taskbarManager: this.taskbarManager, onActionClick: evt => this.executeAction(evt.detail) }, h("slot", { name: "SnkFormTaskBar" }))), h("snk-configurator", { ref: (ref) => this._snkConfigurator = ref, viewMode: this._viewMode, onConfigSelected: (evt) => this.executeAction(evt.detail), onOpenConfig: (evt) => this.openConfig(evt.detail) })));
113
113
  }
114
114
  get _element() { return this; }
115
115
  static get style() { return snkCrudCss; }
package/dist/components/snk-field-config2.js CHANGED
@@ -45,7 +45,7 @@ const SnkFieldConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
45
45
  this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
46
46
  }
47
47
  componentDidLoad() {
48
- ElementIDUtils.addIDInfo(this._element, this.fieldConfig.name);
48
+ ElementIDUtils.addIDInfo(this._element);
49
49
  }
50
50
  render() {
51
51
  if (this.fieldConfig == undefined) {
package/dist/components/snk-filter-bar2.js CHANGED
@@ -160,9 +160,6 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
160
160
  if (this._element) {
161
161
  const dataInfo = { dataUnit: this.dataUnit };
162
162
  ElementIDUtils.addIDInfo(this._element, null, dataInfo);
163
- const dataElementIdFilterBar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
164
- this._idSnkFilterItem = dataElementIdFilterBar;
165
- this._idSnkFilterList = dataElementIdFilterBar;
166
163
  }
167
164
  }
168
165
  processPendingFilter() {
@@ -479,7 +476,7 @@ const SnkFilterBar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
479
476
  if (!this.dataUnit || !this.filterConfig || this.filterConfig.length === 0) {
480
477
  return undefined;
481
478
  }
482
- return (h(Host, null, h("ez-scroller", { direction: "horizontal", activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail), "data-element-id": this._idSnkFilterList }), h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail), "data-element-id": this._idSnkFilterList }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
479
+ return (h(Host, null, h("ez-scroller", { direction: "horizontal", activeShadow: true, locked: this.scrollerLocked }, this.getFilterItems()), h("snk-filter-list", { id: APPLIED_FILTERS, onFocusin: () => this.itemFocused(APPLIED_FILTERS), items: this.getAppliedListItems(), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyAppliedFiltersList"), findFilterText: this.getMessage("snkFilterBar.findFilter"), iconName: "filter", class: "ez-padding-left--medium", buttonClass: this.getActiveClass(), onSnkItemSelected: evt => this.appliedFilterHandler(evt.detail), "data-element-id": "apppliedFilters" }), h("snk-filter-list", { id: ADD_FILTER, onFocusin: () => this.itemFocused(ADD_FILTER), items: this.getAddListItems(), label: this.getMessage("snkFilterBar.addFilter"), getMessage: (key, params) => this.getMessage(key, params), emptyText: this.getMessage("snkFilterBar.emptyFiltersList"), findFilterText: this.getMessage("snkFilterBar.findField"), class: "ez-padding-left--medium", onSnkItemSelected: evt => this.addFilterHandler(evt.detail), "data-element-id": "addFilters" }, h("ez-icon", { slot: "leftIcon", class: "ez-padding-right--small", iconName: "plus" }))));
483
480
  }
484
481
  get _element() { return this; }
485
482
  static get watchers() { return {
package/dist/components/snk-filter-item2.js CHANGED
@@ -148,9 +148,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
148
148
  componentDidLoad() {
149
149
  if (this._filterItemElement) {
150
150
  ElementIDUtils.addIDInfo(this._filterItemElement);
151
- const dataElementIdDoFilterItem = this._filterItemElement.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
152
- this._idSnkFilterDetail = `${dataElementIdDoFilterItem}_${this.config.id}`;
153
- this._idEzChip = `${dataElementIdDoFilterItem}_${this.config.id}`;
151
+ this._idSnkFilterDetail = `filterDetail_${this.config.id}`;
154
152
  }
155
153
  }
156
154
  componentDidRender() {
@@ -183,7 +181,7 @@ const SnkFilterItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
183
181
  }
184
182
  render() {
185
183
  const leftIcon = this.getLeftIconName();
186
- return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, "data-element-id": this._idEzChip }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
184
+ return (h(Host, null, h("ez-chip", { ref: ref => this._chipElement = ref, label: this.getLabel(), value: this.config.value != undefined, id: this.config.id }, leftIcon ? h("ez-icon", { ref: ref => this._leftIconElement = ref, iconName: leftIcon, class: "ez-padding-right--small", slot: "leftIcon" }) : undefined, h("ez-icon", { ref: ref => this._rightIconElement = ref, iconName: this.getRightIconName(), class: "ez-padding-left--small", slot: "rightIcon", id: "removeFilter" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("snk-filter-detail", { config: this.config, getMessage: this.getMessage, class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem, key: this.config.id, "data-element-id": this._idSnkFilterDetail }))));
187
185
  }
188
186
  get _filterItemElement() { return this; }
189
187
  static get watchers() { return {
package/dist/components/snk-filter-list2.js CHANGED
@@ -61,13 +61,15 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
61
61
  this._popover.remove();
62
62
  }
63
63
  }
64
+ this._element.querySelectorAll("button.sc-snk-filter-bar").forEach((itemListElement) => {
65
+ const dataElement = { id: itemListElement.getAttribute("name") };
66
+ itemListElement === null || itemListElement === void 0 ? void 0 : itemListElement.removeAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
67
+ ElementIDUtils.addIDInfoIfNotExists(itemListElement, "filterItemList", dataElement);
68
+ });
64
69
  }
65
70
  buildItemElement(item) {
66
71
  const itemId = ++this._selectableItemsCount;
67
- if (this._buttonElement) {
68
- ElementIDUtils.addIDInfo(this._buttonElement);
69
- }
70
- return (h("button", { id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name), ref: (el) => this._buttonElement = el }, item.iconName ? h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
72
+ return (h("button", { id: `filter-item${itemId}`, onFocusin: () => this._preselection = itemId, class: `ez-col ez-col--sd-12 ez-align--middle ez-padding--small sc-snk-filter-bar snk-filter-bar__filter-list-item`, onClick: () => this.itemSelected(item.name), name: item.label, key: itemId }, item.iconName ? h("ez-icon", { iconName: item.iconName, size: "small", class: `ez-padding-right--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__icon ${item.iconClass || ""}` }) : undefined, h("div", { class: `ez-text ez-text--medium ez-text--primary ez-padding--extra-small sc-snk-filter-bar snk-filter-bar__filter-list-item__label ${item.labelClass || ""}` }, item.label)));
71
73
  }
72
74
  itemSelected(itemName) {
73
75
  if (itemName === SHOW_MORE_ITEM_NAME) {
@@ -128,7 +130,7 @@ const SnkFilterList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
128
130
  }
129
131
  }
130
132
  render() {
131
- return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
133
+ return (h(Host, { class: "ez-flex ez-flex--column" }, h("ez-button", { class: this.buttonClass, label: this.label, onClick: () => this.buttonClick(), mode: this.iconName ? "icon" : undefined, iconName: this.iconName, size: "small" }, h("slot", { name: "leftIcon" })), h("section", { class: "ez-margin-top--small sc-snk-filter-bar snk-filter__popover-container", ref: elem => this._popoverContainer = elem }, h("div", { class: "sc-snk-filter-bar snk-filter__popover ez-padding--small", ref: elem => this._popover = elem }, h("ez-filter-input", { ref: ref => this._filterInput = ref, "data-element-id": "serachFilters", mode: "slim", label: this.findFilterText, value: this._filterArgument, onEzChange: (evt) => this._filterArgument = evt.detail, onFocus: () => this._preselection = 0 }), this.getFilterItems(), h("hr", { class: "sc-snk-filter-bar snk-filter__popover-rule" }), this.items ? this.getFooterItems().map(item => this.buildItemElement(item)) : undefined))));
132
134
  }
133
135
  get _element() { return this; }
134
136
  }, [4, "snk-filter-list", {
package/dist/components/snk-form-config2.js CHANGED
@@ -240,7 +240,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
240
240
  var _a;
241
241
  return ((_a = group.fields) === null || _a === void 0 ? void 0 : _a.length) ? group.fields.map((field) => {
242
242
  var _a, _b;
243
- return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
243
+ return h("div", { key: field.name, class: this.getFieldConfigStyle(field), "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, modeInsertion: false, fieldConfig: field, dataUnit: this.dataUnit, isConfigActive: ((_a = this._fieldConfigSelected) === null || _a === void 0 ? void 0 : _a.name) === field.name, id: field.name }), ((_b = this._fieldConfigSelected) === null || _b === void 0 ? void 0 : _b.name) === field.name &&
244
244
  h("div", { class: "ez-flex form-config__config-options" }, h("snk-config-options", { idConfig: field.name, dataUnit: this.dataUnit, fieldConfig: this._fieldConfigSelected, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), onConfigOptionsChanged: (evt) => this.handleconfigOptionsChanged(evt.detail) })));
245
245
  }) : h("div", { class: "form-config__add-group-container" }, h("div", { class: "form-config__add-group-content" }, h("div", { class: "form-config__add-group-label" }, h("label", { class: "ez-text ez-text--center ez-text--medium ez-text--primary ez-text--bold" }, this.getMessage("snkFormConfig.form.labelDropField")))));
246
246
  }
@@ -953,7 +953,7 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
953
953
  const configOptions = this._formConfigOptions.map((option) => {
954
954
  return { value: option.origin, label: option.name };
955
955
  });
956
- return (h(Host, null, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig() }), h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt) })), h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
956
+ return (h(Host, null, h("div", { class: "ez-row ez-padding--medium" }, h("div", { class: "ez-col ez-col--sd-7 ez-col--tb-9 ez-align--middle" }, h("ez-button", { mode: "icon", iconName: "arrow_back", class: "ez-padding--small", size: "small", onClick: () => this.closeFormConfig(), id: "formConfigToBack" }), h("h1", { class: "ez-title ez-title--extra-large ez-padding--small" }, this.getMessage("snkFormConfig.title")), h("ez-actions-button", { class: "form-config__actions-button ez-margin-left--medium", value: (_a = this._optionFormConfigSelected) === null || _a === void 0 ? void 0 : _a.origin, showLabel: true, displayIcon: "chevron-down", checkOption: true, size: "small", actions: configOptions, onEzAction: (evt) => this.controlSelectFormConfig(evt), id: "selectConfig" })), h("div", { class: "ez-col ez-col--sd-5 ez-col--tb-3 ez-align--middle ez-align--right" }, this._formConfigChanged === true && this._optionFormConfigChanged === false &&
957
957
  h("div", { class: "ez-row ez-align--middle ez-align--right" }, h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeConfig() }), h("ez-button", { label: "Salvar", class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.saveConfig() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "save" }))), this._optionFormConfigChanged === true &&
958
958
  h("div", { class: "ez-row ez-align--middle ez-align--right" }, h("ez-button", { label: "Cancelar", class: "ez-padding-left--medium", size: "small", onClick: () => this.cancelChangeOptionConfig() }), h("ez-button", { label: this.getMessage("snkFormConfig.applyConfig"), class: "ez-button--primary ez-padding-left--medium", size: "small", onClick: () => this.applyOptionConfig() })))), h("div", { class: "ez-row ez-padding--medium", ref: ref => this._sortableContainer = ref }, h("div", { class: "form-config__tab-container ez-col ez-col--sd-9 ez-col--tb-9 ez-padding-right--medium" }, ((_b = this._layoutFormConfig) === null || _b === void 0 ? void 0 : _b.length) > 0 &&
959
959
  h("section", { class: "ez-box__container", ref: ref => this._formContainer = ref }, h("snk-tab-config", { ref: ref => this._tabConfig = ref, selectedIndex: this._tabSelected, onEzTabChange: (ev) => this.changeTabSelected(ev.detail), onEzOrderChange: (ev) => this.changeTabOrder(ev.detail), onEditionTitleTab: (ev) => this.changeTabLabel(ev), onDeleteTab: (ev) => this.handleDeleteTab(ev), onHideTab: (ev) => this.changeHideTab(ev), onCanStartDrag: () => this.handleCanStartDragTab() }, this._layoutFormConfig.map((tab) => h("snk-tab", { tabKey: tab.tab, label: tab.tab, visible: tab.visible }))), this._layoutFormConfig.map((tab, indexTab) => h("div", { id: "tab" + indexTab, "data-draggable-parent": "group", class: this._tabSelected === indexTab
@@ -968,8 +968,8 @@ const SnkFormConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
968
968
  else {
969
969
  return h("div", { class: "ez-flex ez-flex--column ez-size-width--full" }, h("label", { class: "ez-text ez-text--secondary ez-margin-vertical--small" }, this.getMessage("snkFormConfig.form.subTitleInfo")), h("div", { id: CONTAINER_ID.withoutGroup, class: "ez-row", "data-draggable-parent": "field" }, this.getFieldsByGroup(group)), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" }));
970
970
  }
971
- }), this.renderTempGroupByTab(tab.tab))), h("div", { class: "form-config__btn-add-group ez-row" }, h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), h("ez-filter-input", { ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
972
- h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field })))))))));
971
+ }), this.renderTempGroupByTab(tab.tab))), h("div", { class: "form-config__btn-add-group ez-row" }, h("div", { class: "form-config__btn-add-group-container ez-col ez-col--sd-12 ez-col--tb-12 ez-align--center" }, h("ez-button", { label: this.getMessage("snkFormConfig.form.labelNewGroup"), class: "ez-padding-horizontal--small ez-button--primary", size: "small", onClick: () => this.addNewGroup() }, h("ez-icon", { class: "ez-margin-right--small", slot: "leftIcon", iconName: "plus" })))))), h("div", { class: "form-config__fields-available ez-col ez-col--sd-3 ez-col--tb-3" }, h("section", { class: "ez-box__container ez-col ez-col--pn-12" }, h("h1", { class: "ez-title ez-title--large ez-title--primary ez-padding-bottom--medium" }, this.getMessage("snkFormConfig.availableFields.title")), h("ez-filter-input", { id: "searchFields", ref: ref => this._filterFieldsAvailable = ref, label: this.getMessage("snkFormConfig.availableFields.labelSearchField"), onEzChange: evt => this.onFilterChange(evt.detail) }), h("span", { class: "ez-box__label-counter ez-text ez-text--medium ez-text--primary ez-margin-bottom--medium" }, this.handleLabelCounter((_c = this._fieldsAvailable) === null || _c === void 0 ? void 0 : _c.length)), ((_d = this._layoutFormConfig) === null || _d === void 0 ? void 0 : _d.length) > 0 &&
972
+ h("div", { id: CONTAINER_ID.fieldsAvailable, class: "ez-row", "data-draggable-parent": "field" }, this.orderFieldsAvailable(this._fieldsAvailable).map((field) => h("div", { key: field.name, class: this._fieldsAvailableStyle, "data-draggable-element": "field", onMouseDown: (evt) => this.controlMoveField(evt) }, h("snk-field-config", { onEzClickIcon: (evt) => { this.handleFieldConfigChange(evt); }, dataUnit: this.dataUnit, fieldConfig: field, id: field.name })))))))));
973
973
  }
974
974
  get _element() { return this; }
975
975
  static get watchers() { return {
package/dist/components/snk-form2.js CHANGED
@@ -150,10 +150,6 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
150
150
  const dataInfo = { dataUnit: this._dataUnit };
151
151
  ElementIDUtils.addIDInfo(this._element, null, dataInfo);
152
152
  }
153
- getDataElementId(suffix) {
154
- const elemIdSnkTaskBar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
155
- return `${elemIdSnkTaskBar}_${suffix}`;
156
- }
157
153
  componentWillLoad() {
158
154
  this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
159
155
  let parent = this._element.parentElement;
@@ -197,8 +193,8 @@ const SnkForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
197
193
  if (!this._dataUnit || !this._dataState) {
198
194
  return undefined;
199
195
  }
200
- return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm() }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", "data-element-id": this.getDataElementId("form_taskbar"), configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": this.getDataElementId("internal_form"), dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
201
- h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
196
+ return (h("section", { class: "snk-form" }, h("div", { class: "snk-form__header snk-form__header--fixed ez-row" }, h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6", key: "formHeader" }, h("ez-button", { title: this.getMessage("snkForm.goBackTitle"), mode: "icon", iconName: "arrow_back", class: "ez-padding-right--medium", size: "small", onClick: () => this.exitForm(), "data-element-id": "formToBack" }), h("h1", { class: "ez-title ez-title--primary ez-title--xlarge ez-align--middle" }, this.getMessage("snkForm.title"))), h("div", { class: "ez-col ez-col--sd-6 ez-col--tb-6 ez-align--right" }, h("snk-taskbar", { key: "formTaskbar", "data-element-id": "form", configName: this.configName, buttons: this._taskbarProcessor.buttons, disabledButtons: this._taskbarProcessor.disabledButtons, customButtons: this._taskbarProcessor.customButtons, actionsList: this.actionsList, primaryButton: ((_a = this._dataState) === null || _a === void 0 ? void 0 : _a.isDirty) ? "SAVE" : "INSERT", dataUnit: this._dataUnit }))), h("section", null, h("div", { class: "ez-row" }, h("div", { class: "ez-col ez-col--sd-12" }, h("ez-form", { key: "ezForm" + this._snkDataUnit.entityName, "data-element-id": "embedded", dataUnit: this._dataUnit, config: this.getFormConfig(), recordsValidator: this.recordsValidator, class: this._showFormConfig ? 'snk-form__form--hidden' : '' }), this._showFormConfig &&
197
+ h("snk-form-config", { dataUnit: this._dataUnit, formConfig: this.getFormConfig(), configName: this.configName, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigClose: () => this.closeConfig() }))))));
202
198
  }
203
199
  get _element() { return this; }
204
200
  static get style() { return snkFormCss; }
package/dist/components/snk-grid-config2.js CHANGED
@@ -111,7 +111,7 @@ const EzGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
111
111
  this._columListItems = [visibleGroup, hiddenGroup];
112
112
  }
113
113
  buildColumnListSlot(item, group) {
114
- const dataElementId = `${this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)}_configItem_${StringUtils.toCamelCase(item.label)}`;
114
+ const dataElementId = `configItem_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(item.label))}`;
115
115
  return (h("div", null, h("ez-check", { mode: 'switch', id: 'switch' + ((item === null || item === void 0 ? void 0 : item.label) || '') + ((group === null || group === void 0 ? void 0 : group.group) || ''), value: group.group === this.getMessage("snkGridConfig.group.visible"), "data-element-id": dataElementId, onEzChange: (evt) => { this.switchColumnGroup(evt, item); } })));
116
116
  }
117
117
  buildOrderListSlot(item) {
@@ -474,7 +474,7 @@ const EzGridConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
474
474
  ElementIDUtils.addIDInfo(this._element);
475
475
  }
476
476
  render() {
477
- return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item) })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
477
+ return (h(Host, null, h("div", { class: "grid-config__header" }, h("div", { class: "title-container" }, h("div", { class: "" }, h("label", { class: "title" }, this.getMessage("snkGridConfig.gridConfiguration")), h("label", { class: "subtitle" }, this.getMessage("snkGridConfig.columnVisibilityOrder"))), h("div", { class: "button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "tabselector-container" }, h("ez-tabselector", { selectedIndex: this.selectedIndex, onEzChange: (evt) => { this.handleTabChange(evt.detail); }, tabs: this.getColumnNames() })), h("div", null, h("ez-text-input", { "data-element-id": "searchColums", ref: (el) => this._searchElement = el, label: this.getMessage("snkGridConfig.findColumn"), onKeyUp: (evt) => this.locateColumn(evt) }, h("ez-icon", { slot: "leftIcon", size: "medium", iconName: "search" })))), h("div", { class: "grid-config__main" }, h("ez-list", { ref: (el) => this._columnList = el, class: this.selectedIndex === 0 ? "" : "hidden", dataSource: this._columListItems, onEzChange: (evt) => this.handleColumnListChange(evt), ezDraggable: true, ezSelectable: true, itemSlotBuilder: (item, group) => this.buildColumnListSlot(item, group), useGroups: true, "data-element-id": "configCols" }), h("div", { class: this.selectedIndex === 1 ? "group-name" : "hidden" }, this.getMessage("snkGridConfig.info.sortingSequence")), h("ez-list", { ref: (el) => this._orderList = el, class: this.selectedIndex === 1 ? "height-calc" : "hidden", dataSource: this._orderListItems, ezSelectable: true, onEzChange: (evt) => this.handleOrderListChange(evt), ezDraggable: true, itemSlotBuilder: (item) => this.buildOrderListSlot(item), "data-element-id": "configDataOrder" })), h("div", { class: "grid-config__footer" }, h("ez-button", { class: "padding-right--medium", label: this.getMessage("snkGridConfig.cancel"), onClick: () => this.closeConfig() }), h("ez-button", { label: this.getMessage("snkGridConfig.complete"), class: "ez-button--primary", onClick: () => this.finish() }))));
478
478
  }
479
479
  static get assetsDirs() { return ["../assets"]; }
480
480
  get _element() { return this; }
package/dist/components/snk-grid2.js CHANGED
@@ -77,14 +77,12 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
77
77
  });
78
78
  }
79
79
  saveConfig(config) {
80
- this._snkGridConfig.saveConfig(config)
81
- .then(() => {
82
- this.closeGridConfig();
83
- });
80
+ this._snkGridConfig.saveConfig(config);
84
81
  }
85
82
  changeConfig(config) {
86
83
  this._grid.setColumnsState(config.columns)
87
84
  .then(() => {
85
+ this.setGridConfig(config);
88
86
  this.closeGridConfig();
89
87
  });
90
88
  }
@@ -97,8 +95,12 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
97
95
  if (!this._dataUnit) {
98
96
  this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
99
97
  this._dataUnit = evt.detail;
98
+ this.addElementID();
100
99
  });
101
100
  }
101
+ else {
102
+ this.addElementID();
103
+ }
102
104
  this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
103
105
  this._dataState = evt.detail;
104
106
  });
@@ -113,19 +115,15 @@ const SnkGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
113
115
  this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
114
116
  this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
115
117
  }
116
- componentDidLoad() {
118
+ addElementID() {
117
119
  const dataInfo = { dataUnit: this._dataUnit };
118
120
  ElementIDUtils.addIDInfo(this._element, null, dataInfo);
119
121
  }
120
- getDataElementId(suffix) {
121
- const elemIdSnkGrid = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
122
- return `${elemIdSnkGrid}_${suffix}`;
123
- }
124
122
  render() {
125
123
  if (!this._dataUnit) {
126
124
  return undefined;
127
125
  }
128
- return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("internal_filter"), class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": this.getDataElementId("grid_top_taskbar"), key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": this.getDataElementId("internal_grid"), dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("grid_left_taskBar"), buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
126
+ return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
129
127
  }
130
128
  get _element() { return this; }
131
129
  static get style() { return snkGridCss; }
package/dist/components/snk-pesquisa2.js CHANGED
@@ -301,7 +301,7 @@ const SnkPesquisa = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
301
301
  }
302
302
  render() {
303
303
  var _a;
304
- return (h(Host, null, h("div", { class: "snk-pesquisa" }, h("div", { class: "snk-pesquisa__input" }, h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument }, h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
304
+ return (h(Host, null, h("div", { class: "snk-pesquisa" }, h("div", { class: "snk-pesquisa__input" }, h("ez-text-input", { label: "Buscar", class: "ez-margin-right--medium", canShowError: false, ref: (ref) => this._textInput = ref, onEzChange: (event) => this.onChangeValue(event), value: this.argument, "data-element-id": "searchInput" }, h("ez-icon", { slot: "leftIcon", iconName: "search" }), this.argument && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value)
305
305
  ? h("button", { slot: "rightIcon", class: "snk-pesquisa__btn", onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
306
306
  : undefined), h("ez-button", { class: "ez-button--primary", label: "Pesquisar", onClick: () => this.onClickSearch() })), h("label", { class: "snk-pesquisa__records" }, this.getMessageView()), h("div", { class: "snk-pesquisa__content" }, this._itemList && this._itemList.map((item) => {
307
307
  return (h("ez-card-item", { onEzClick: (event) => this.createOption(event.detail), item: item }));
package/dist/components/snk-tab-config2.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
2
2
  import { c as createCommonjsModule } from './_commonjsHelpers.js';
3
- import { ApplicationContext } from '@sankhyalabs/core';
3
+ import { ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
4
4
  import { C as CONFIG_EVENTS, K as KEY_EVENTS, c as TYPE_ACTIONS, b as TAB_NAMES } from './constants.js';
5
5
 
6
6
  var draggable_bundle = createCommonjsModule(function (module, exports) {
@@ -7177,6 +7177,13 @@ const SnkTabConfig = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement$
7177
7177
  this.updateScroll();
7178
7178
  this.controlSortableTab();
7179
7179
  }
7180
+ componentDidLoad() {
7181
+ ElementIDUtils.addIDInfo(this._hostElem, "itemConfig");
7182
+ this._processedTabs.forEach((tab, index) => {
7183
+ const dataID = { id: tab.label };
7184
+ ElementIDUtils.addIDInfo(this._hostElem.querySelector(`#tab${index}`), "itemConfig", dataID);
7185
+ });
7186
+ }
7180
7187
  render() {
7181
7188
  return (h(Host, null, h("button", { class: "tab-config__backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "tab-config__lower-bar" }), h("div", { class: "tab-config__scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev), "data-draggable-parent": "tab" }, this._processedTabs.map((tab, index) => {
7182
7189
  const tabId = "tab" + index;
package/dist/components/snk-taskbar2.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
2
- import { ElementIDUtils, StringUtils, ApplicationContext } from '@sankhyalabs/core';
2
+ import { StringUtils, ApplicationContext, ElementIDUtils } from '@sankhyalabs/core';
3
3
  import { A as AuthorizationConfig } from './AuthorizationConfig.js';
4
4
 
5
5
  var TaskbarElement;
@@ -213,12 +213,10 @@ const SnkTaskbar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
213
213
  }
214
214
  }
215
215
  getIdElemBtnNative(taskbarElem) {
216
- const elemIdTaskbar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
217
- return `${elemIdTaskbar}_${StringUtils.toCamelCase(taskbarElem)}`;
216
+ return StringUtils.toCamelCase(taskbarElem);
218
217
  }
219
218
  getIdElemBtnCustom(btnCustom) {
220
- const elemIdTaskbar = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
221
- return `${elemIdTaskbar}_${StringUtils.toCamelCase(btnCustom.name)}`;
219
+ return StringUtils.toCamelCase(btnCustom.name);
222
220
  }
223
221
  isDivider(element) {
224
222
  var _a;
package/dist/esm/snk-configurator_3.entry.js CHANGED
@@ -90,7 +90,7 @@ const SnkConfigurator = class {
90
90
  render() {
91
91
  return (h("ez-modal", { opened: this._opened, "close-esc": false, "close-outside-click": false, "modal-size": "small" }, h("div", { class: "snk-configurator" }, h("div", { class: "snk-configurator__header" }, h("label", { class: "snk-configurator__title" }, this.getMessage("snkConfigurator.titleConfigurations")), h("div", { class: "snk-configurator__button-close" }, h("ez-button", { mode: 'icon', iconName: "close", size: 'medium', onClick: () => this.closeConfig() }))), h("div", { class: "snk-configurator__main" }, h("ez-radio-button", { class: "ez-margin-top--medium", label: this.getMessage("snkConfigurator.subTitleModeConfig"), value: this.getViewModeValue(), onEzChange: (evt) => this.onViewModeChanged(evt), enabled: this.enableModeConfig() }, h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelGrid"), value: GRID_MODE.name }), h("ez-radio-button-option", { label: this.getMessage("snkConfigurator.labelForm"), value: FORM_MODE.name })), h("ez-button", { mode: "slim", label: this.viewMode === GRID_MODE.name
92
92
  ? this.getMessage("snkConfigurator.labelConfigGrid")
93
- : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig() }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
93
+ : this.getMessage("snkConfigurator.labelConfigForm"), class: "snk-configurator__button-config ez-button--primary", onClick: () => this.onClickOpenConfig(), id: "openConfigurator" }), h("hr", { class: "ez-divider-horizontal ez-margin-vertical--medium" })))));
94
94
  }
95
95
  };
96
96
  SnkConfigurator.style = snkConfiguratorCss;
@@ -137,7 +137,7 @@ const SnkFieldConfig = class {
137
137
  this._application = ApplicationContext.getContextValue("__SNK__APPLICATION__");
138
138
  }
139
139
  componentDidLoad() {
140
- ElementIDUtils.addIDInfo(this._element, this.fieldConfig.name);
140
+ ElementIDUtils.addIDInfo(this._element);
141
141
  }
142
142
  render() {
143
143
  if (this.fieldConfig == undefined) {
@@ -216,14 +216,12 @@ const SnkGrid = class {
216
216
  });
217
217
  }
218
218
  saveConfig(config) {
219
- this._snkGridConfig.saveConfig(config)
220
- .then(() => {
221
- this.closeGridConfig();
222
- });
219
+ this._snkGridConfig.saveConfig(config);
223
220
  }
224
221
  changeConfig(config) {
225
222
  this._grid.setColumnsState(config.columns)
226
223
  .then(() => {
224
+ this.setGridConfig(config);
227
225
  this.closeGridConfig();
228
226
  });
229
227
  }
@@ -236,8 +234,12 @@ const SnkGrid = class {
236
234
  if (!this._dataUnit) {
237
235
  this._snkDataUnit.addEventListener("dataUnitReady", (evt) => {
238
236
  this._dataUnit = evt.detail;
237
+ this.addElementID();
239
238
  });
240
239
  }
240
+ else {
241
+ this.addElementID();
242
+ }
241
243
  this._snkDataUnit.addEventListener("dataStateChange", (evt) => {
242
244
  this._dataState = evt.detail;
243
245
  });
@@ -252,19 +254,15 @@ const SnkGrid = class {
252
254
  this._headerTaskbarProcessor.process(headerTaskbarId, this.taskbarManager, this._dataState);
253
255
  this._topTaskbarProcessor.process("snkGridTopTaskbar", this.taskbarManager, this._dataState);
254
256
  }
255
- componentDidLoad() {
257
+ addElementID() {
256
258
  const dataInfo = { dataUnit: this._dataUnit };
257
259
  ElementIDUtils.addIDInfo(this._element, null, dataInfo);
258
260
  }
259
- getDataElementId(suffix) {
260
- const elemIdSnkGrid = this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
261
- return `${elemIdSnkGrid}_${suffix}`;
262
- }
263
261
  render() {
264
262
  if (!this._dataUnit) {
265
263
  return undefined;
266
264
  }
267
- return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("internal_filter"), class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": this.getDataElementId("grid_top_taskbar"), key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": this.getDataElementId("internal_grid"), dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": this.getDataElementId("grid_left_taskBar"), buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
265
+ return (h("div", { class: "snk-grid__container ez-flex ez-flex--column ez-flex-item--auto ez-padding--large" }, h("div", { class: "snk-grid__header ez-padding-bottom--medium ez-margin-bottom--medium" }, h("snk-filter-bar", { dataUnit: this._dataUnit, "data-element-id": "gridFilter", class: "snk-grid__filter-bar ez-align--top", configName: this.configName }), h("hr", { class: "ez-divider-vertical ez-divider--dark ez-margin-left--medium snk-grid__header-divider" }), h("snk-taskbar", { class: "ez-padding-left--medium", "data-element-id": "grid_top", key: "topTaskbar", configName: this.configName, dataUnit: this._dataUnit, buttons: this._topTaskbarProcessor.buttons, disabledButtons: this._topTaskbarProcessor.disabledButtons, customButtons: this._topTaskbarProcessor.customButtons, primaryButton: "INSERT" })), h("ez-grid", { ref: ref => this._grid = ref, "data-element-id": "embedded", dataUnit: this._dataUnit, key: "grid-" + this._snkDataUnit.entityName, config: this._gridConfig, onConfigChange: (evt) => { this.saveConfig(evt.detail); }, onEzDoubleClick: () => this.gridDoubleClick.emit(), statusResolver: this.statusResolver, multipleSelection: this.multipleSelection }, h("snk-taskbar", { dataUnit: this._dataUnit, "data-element-id": "grid_left", buttons: this._headerTaskbarProcessor.buttons, disabledButtons: this._headerTaskbarProcessor.disabledButtons, customButtons: this._headerTaskbarProcessor.customButtons, slot: "leftButtons", actionsList: this.actionsList })), h("div", { class: "ez-col ez-col--sd-12" }, h("slot", { name: "SnkGridFooter" })), h("ez-modal", { modalSize: "small", closeEsc: false, closeOutsideClick: false, opened: this._popUpGridConfig, onEzCloseModal: () => this.closeGridConfig() }, h("snk-grid-config", { ref: ref => this._snkGridConfig = ref, config: this._gridConfig, "data-element-id": this._element.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME), selectedIndex: 0, onConfigChange: (evt) => this.changeConfig(evt.detail), onConfigCancel: () => this.closeGridConfig() }))));
268
266
  }
269
267
  get _element() { return getElement(this); }
270
268
  };