@sankhyalabs/ezui 2.1.0 → 2.2.1

package/dist/cjs/ez-collapsible-box.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8646c40d.js');
+const core = require('@sankhyalabs/core');
 const ApplicationUtils = require('./ApplicationUtils-edc62c5c.js');
 require('./DialogType-aa435c52.js');
 require('./CheckMode-ecb90b87.js');
@@ -119,6 +120,9 @@ let EzCollapsibleBox = class {
     };
     return styledLabel;
   }
+  componentDidLoad() {
+    core.ElementIDUtils.addIDInfo(this._hostElement);
+  }
   render() {
     return (index.h("div", { class: "collapsible-box" }, index.h("div", { class: "collapsible-box__header" }, index.h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title" +
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +

package/dist/cjs/ez-form.cjs.entry.js

@@ -131,8 +131,8 @@ const FormItem = ({ source }) => {
   }
 };
 
-const FormSheet = ({ store, source }) => {
-  return (index.h("div", { class: "dynamic-content ez-box__container" },
+const FormSheet = ({ store, source, dataElementId }) => {
+  return (index.h("div", { class: "dynamic-content ez-box__container", "data-element-id": dataElementId },
     index.h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => index.h(FormItem, { store: store, source: item })))));
 };
 
@@ -945,9 +945,11 @@ let EzForm = class {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
-      result.push(index.h("ez-tabselector", { tabs: tabs, onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name }));
+      const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
+      result.push(index.h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    result.push(index.h(FormSheet, { store: this._store, source: currentSheet }));
+    const idFormSheet = `${this._dataElementIdEzForm}_${core.StringUtils.toCamelCase(currentSheet.label)}`;
+    result.push(index.h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
   processMetadata() {
@@ -1010,6 +1012,8 @@ let EzForm = class {
     this._store.subscribe(() => index.forceUpdate(this));
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
+    const dataInfo = { dataUnit: this.dataUnit };
+    this._dataElementIdEzForm = core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
@@ -1020,6 +1024,12 @@ let EzForm = class {
     this.dataUnit.removeInterceptor(this);
     this._dataBinder.onDisconnectedCallback();
   }
+  buildIdTabSelector(tabs) {
+    if (tabs) {
+      tabs.forEach(tab => tab["data-element-id"] = `${this._dataElementIdEzForm}_${core.StringUtils.toCamelCase(tab.label)}`);
+    }
+    return tabs;
+  }
   render() {
     return (index.h(index.Host, null, this.isStatic() ? null : this.getDynamicContent()));
   }

package/dist/cjs/ez-grid.cjs.entry.js

@@ -115345,6 +115345,13 @@ let EzGrid = class {
     if (this.config) {
       this.observeConfig(this.config);
     }
+    this.buildDataElementId();
+  }
+  buildDataElementId() {
+    const dataInfo = { dataUnit: this.dataUnit };
+    const dataElementIdEzGrid = core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const dtInfo = { id: `${dataElementIdEzGrid}_ezGrid_pagination` };
+    core.ElementIDUtils.addIDInfo(this._refPaginationControl, null, dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -115371,9 +115378,10 @@ let EzGrid = class {
     this._gridController.setColumnsState(config.columns);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container" }, this.getPaginationControl())), index.h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" })));
+    return (index.h(index.Host, null, index.h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, index.h("div", { class: "grid-header__container" }, index.h("slot", { name: "leftButtons" })), index.h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), index.h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), index.h("div", { class: "grid__footer" })));
   }
   static get assetsDirs() { return ["../assets"]; }
+  get _element() { return index.getElement(this); }
   static get watchers() { return {
     "config": ["observeConfig"]
   }; }

package/dist/cjs/ez-modal-container.cjs.entry.js

@@ -21,7 +21,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
 
-const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto 0;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
 
 let EzModalContainer = class {
   constructor(hostRef) {

package/dist/cjs/ez-tabselector.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8646c40d.js');
+const core = require('@sankhyalabs/core');
 
 const ezTabselectorCss = "@keyframes activate{0%{clip-path:inset(calc(100% - 3px) 50% 0px 50%)}100%{clip-path:inset(calc(100% - 3px) 0px 0px 0px)}}:host{display:flex;position:relative;width:100%;overflow:hidden;--tabselector--backward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z\"/></svg>');--tabselector--forward-icon:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>')}.scroll{display:flex;width:100%;scroll-behavior:smooth;overflow-x:auto;scrollbar-width:none}.scroll.startHidden{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px)}.scroll.middle{-webkit-mask-image:linear-gradient(90deg, transparent 20px, #000 48px, #000 calc(100% - 48px), transparent calc(100% - 20px))}.scroll.endHidden{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 48px), transparent calc(100% - 20px))}.tab{display:flex;border:none;min-width:100px;background-color:unset;cursor:pointer;padding:6px 12px;align-items:center;justify-content:center;color:var(--text--primary, #626e82);font-family:var(--font-pattern, \"Roboto\");font-size:var(--title--small, 14px)}.tab:focus,.forward-button,.backward-button{outline:none}.is-active{position:relative;color:var(--color--primary, #008561)}.is-active::after{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--color--primary, #008561);clip-path:inset(calc(100% - 3px) 0px 0px 0px);animation:activate 0.25s ease-in-out}.is-focused{border:1px dashed var(--color--primary, #000000c5)}.tab-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-shadow:var(--text-shadow);margin-bottom:var(--space--extra-small, 3px)}.forward-button,.backward-button{position:absolute;z-index:1;display:flex;box-sizing:border-box;padding:0px;top:0px;right:0px;width:16px;height:100%;border:none;background-color:unset;cursor:pointer;justify-content:center;align-items:center}.backward-button{left:0px}.forward-button::after,.backward-button::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:10px;height:16px}.forward-button::after{-webkit-mask-image:var(--tabselector--forward-icon);mask-image:var(--tabselector--forward-icon)}.backward-button::after{-webkit-mask-image:var(--tabselector--backward-icon);mask-image:var(--tabselector--backward-icon)}.forward-button:hover::after,.backward-button:hover::after{background-color:var(--color--primary, #4e4e4e)}.hidden{display:none}.scroll::-webkit-scrollbar{display:none}.left-icon{padding-right:var(--space--small)}.right-icon{padding-left:var(--space--small)}";
 
@@ -75,6 +76,7 @@ let EzTabselector = class {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
+    core.ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -82,6 +84,7 @@ let EzTabselector = class {
           this.tabs.split(",").forEach((label) => {
             label = label.trim();
             this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+            this.buildElementIdTab(this._processedTabs);
           });
         }
       }
@@ -97,9 +100,20 @@ let EzTabselector = class {
           this._hostElem.appendChild(content);
         }
         this._processedTabs.push(tab);
+        this.buildElementIdTab(this._processedTabs);
       });
     }
   }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  componentDidLoad() {
+    this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
+      const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+      const dataInfo = { id: `${elemIdTabSelector}_${core.StringUtils.toCamelCase(elem.id)}` };
+      core.ElementIDUtils.addIDInfo(elem, null, dataInfo);
+    });
+  }
   handleSlotChange(ev) {
     const slot = ev.target;
     const content = slot.assignedElements()[0];
@@ -125,9 +139,6 @@ let EzTabselector = class {
       container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
     }
   }
-  componentDidRender() {
-    this.updateScroll();
-  }
   updateScroll() {
     const container = this._scrollContainer;
     if (container) {
@@ -188,6 +199,15 @@ let EzTabselector = class {
       }
     });
   }
+  buildElementIdTab(tabs) {
+    tabs.forEach(tab => {
+      if (!tab.hasOwnProperty("data-element-id")) {
+        const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+        const dataElementID = `${elemIdTabSelector}_${core.StringUtils.toCamelCase(tab.tabKey)}`;
+        tab["data-element-id"] = dataElementID;
+      }
+    });
+  }
   render() {
     return (index.h(index.Host, null, index.h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), index.h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index$1) => {
       const labelStyle = { "min-width": this.getTextWidth(tab.label) };
@@ -197,7 +217,7 @@ let EzTabselector = class {
         this.selectedTab = tab.tabKey;
         this.selectedIndex = index$1;
       }
-      return index.h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, tab.leftIcon && index.h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), index.h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && index.h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+      return index.h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, tab.leftIcon && index.h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), index.h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && index.h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), index.h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
     })), index.h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   get _hostElem() { return index.getElement(this); }

package/dist/cjs/ez-view-stack.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8646c40d.js');
+const core = require('@sankhyalabs/core');
 
 const ezViewStackCss = ":host{width:100%;height:100%}.ez-view-stack__container{width:100%;height:100%}";
 
@@ -67,6 +68,9 @@ let EzViewStack = class {
       });
     }
   }
+  componentDidLoad() {
+    core.ElementIDUtils.addIDInfo(this._hostElem);
+  }
   disconectCallback() {
     this._hostElem = null;
     this._elemList = null;

package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js

@@ -1,4 +1,5 @@
 import { Component, h, Prop, Event, Watch, Method, Element, State } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
 import { ApplicationUtils } from "../../utils";
 export class EzCollapsibleBox {
   constructor() {
@@ -105,6 +106,9 @@ export class EzCollapsibleBox {
     };
     return styledLabel;
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement);
+  }
   render() {
     return (h("div", { class: "collapsible-box" },
       h("div", { class: "collapsible-box__header" },

package/dist/collection/components/ez-form/ez-form.js

@@ -1,5 +1,5 @@
 import { Component, h, Host, Prop, Element, forceUpdate, Method, Watch, Event } from "@stencil/core";
-import { DataUnit, Action, DataUnitAction } from "@sankhyalabs/core";
+import { DataUnit, Action, DataUnitAction, ElementIDUtils, StringUtils } from "@sankhyalabs/core";
 import { FormSheet } from "./structure/FormSheet";
 import { buildFromConfig, buildFromDataUnit } from "./structure/FormSheetMetadata";
 import { createStore } from "redux";
@@ -103,9 +103,11 @@ export class EzForm {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
-      result.push(h("ez-tabselector", { tabs: tabs, onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name }));
+      const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
+      result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    result.push(h(FormSheet, { store: this._store, source: currentSheet }));
+    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(currentSheet.label)}`;
+    result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
   processMetadata() {
@@ -168,6 +170,8 @@ export class EzForm {
     this._store.subscribe(() => forceUpdate(this));
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
+    const dataInfo = { dataUnit: this.dataUnit };
+    this._dataElementIdEzForm = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
@@ -178,6 +182,12 @@ export class EzForm {
     this.dataUnit.removeInterceptor(this);
     this._dataBinder.onDisconnectedCallback();
   }
+  buildIdTabSelector(tabs) {
+    if (tabs) {
+      tabs.forEach(tab => tab["data-element-id"] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
+    }
+    return tabs;
+  }
   render() {
     return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
   }

package/dist/collection/components/ez-form/structure/FormSheet.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { FormItem } from "./FormItem";
-export const FormSheet = ({ store, source }) => {
-  return (h("div", { class: "dynamic-content ez-box__container" },
+export const FormSheet = ({ store, source, dataElementId }) => {
+  return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": dataElementId },
     h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
 };

package/dist/collection/components/ez-grid/ez-grid.js

@@ -1,4 +1,5 @@
-import { Component, h, Host, Prop, Method, Event, State, Watch } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { Component, h, Host, Prop, Method, Event, State, Watch, Element } from "@stencil/core";
 import AgGridController from "./controller/ag-grid/AgGridController";
 export class EzGrid {
   constructor() {
@@ -139,6 +140,13 @@ export class EzGrid {
     if (this.config) {
       this.observeConfig(this.config);
     }
+    this.buildDataElementId();
+  }
+  buildDataElementId() {
+    const dataInfo = { dataUnit: this.dataUnit };
+    const dataElementIdEzGrid = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const dtInfo = { id: `${dataElementIdEzGrid}_ezGrid_pagination` };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, null, dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -171,7 +179,7 @@ export class EzGrid {
       h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" },
         h("div", { class: "grid-header__container" },
           h("slot", { name: "leftButtons" })),
-        h("div", { class: "grid-header__container" }, this.getPaginationControl())),
+        h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())),
       h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }),
       h("div", { class: "grid__footer" })));
   }
@@ -546,6 +554,7 @@ export class EzGrid {
       }
     }
   }; }
+  static get elementRef() { return "_element"; }
   static get watchers() { return [{
       "propName": "config",
       "methodName": "observeConfig"

package/dist/collection/components/ez-modal-container/ez-modal-container.css

@@ -1,6 +1,6 @@
 :host {
   display: grid;
-  grid-template-rows: 0 auto 1fr auto 0;
+  grid-template-rows: 0 auto 1fr auto;
   width: 100%;
   height: 100%;
 }

package/dist/collection/components/ez-tabselector/ez-tabselector.js

@@ -1,4 +1,5 @@
 import { Component, Event, Element, h, Prop, Host, State, Watch } from "@stencil/core";
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
 export class EzTabselector {
   constructor() {
     this.setFocusedParam = (ev) => {
@@ -66,6 +67,7 @@ export class EzTabselector {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
+    ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -73,6 +75,7 @@ export class EzTabselector {
           this.tabs.split(",").forEach((label) => {
             label = label.trim();
             this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+            this.buildElementIdTab(this._processedTabs);
           });
         }
       }
@@ -88,9 +91,20 @@ export class EzTabselector {
           this._hostElem.appendChild(content);
         }
         this._processedTabs.push(tab);
+        this.buildElementIdTab(this._processedTabs);
       });
     }
   }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  componentDidLoad() {
+    this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
+      const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+      const dataInfo = { id: `${elemIdTabSelector}_${StringUtils.toCamelCase(elem.id)}` };
+      ElementIDUtils.addIDInfo(elem, null, dataInfo);
+    });
+  }
   handleSlotChange(ev) {
     const slot = ev.target;
     const content = slot.assignedElements()[0];
@@ -116,9 +130,6 @@ export class EzTabselector {
       container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
     }
   }
-  componentDidRender() {
-    this.updateScroll();
-  }
   updateScroll() {
     const container = this._scrollContainer;
     if (container) {
@@ -180,6 +191,15 @@ export class EzTabselector {
       ;
     });
   }
+  buildElementIdTab(tabs) {
+    tabs.forEach(tab => {
+      if (!tab.hasOwnProperty("data-element-id")) {
+        const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+        const dataElementID = `${elemIdTabSelector}_${StringUtils.toCamelCase(tab.tabKey)}`;
+        tab["data-element-id"] = dataElementID;
+      }
+    });
+  }
   render() {
     return (h(Host, null,
       h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }),
@@ -191,7 +211,7 @@ export class EzTabselector {
           this.selectedTab = tab.tabKey;
           this.selectedIndex = index;
         }
-        return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle },
+        return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle },
           tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }),
           h("span", { class: "tab-label", title: tab.label }, tab.label),
           tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }),

package/dist/collection/components/ez-view-stack/ez-view-stack.js

@@ -1,4 +1,5 @@
 import { Component, h, Host, Element, Method } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
 export class EzViewStack {
   constructor() {
     /**
@@ -60,6 +61,9 @@ export class EzViewStack {
       });
     }
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem);
+  }
   disconectCallback() {
     this._hostElem = null;
     this._elemList = null;

package/dist/custom-elements/index.js

@@ -959,6 +959,9 @@ let EzCollapsibleBox$1 = class extends HTMLElement$1 {
     };
     return styledLabel;
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement);
+  }
   render() {
     return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title" +
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
@@ -2165,8 +2168,8 @@ const FormItem = ({ source }) => {
   }
 };
 
-const FormSheet = ({ store, source }) => {
-  return (h("div", { class: "dynamic-content ez-box__container" },
+const FormSheet = ({ store, source, dataElementId }) => {
+  return (h("div", { class: "dynamic-content ez-box__container", "data-element-id": dataElementId },
     h("div", { class: "ez-row ez-padding-vertical--small" }, source.items.map(item => h(FormItem, { store: store, source: item })))));
 };
 
@@ -2980,9 +2983,11 @@ let EzForm$1 = class extends HTMLElement$1 {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
-      result.push(h("ez-tabselector", { tabs: tabs, onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name }));
+      const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
+      result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    result.push(h(FormSheet, { store: this._store, source: currentSheet }));
+    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(currentSheet.label)}`;
+    result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
   processMetadata() {
@@ -3045,6 +3050,8 @@ let EzForm$1 = class extends HTMLElement$1 {
     this._store.subscribe(() => forceUpdate(this));
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
+    const dataInfo = { dataUnit: this.dataUnit };
+    this._dataElementIdEzForm = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
@@ -3055,6 +3062,12 @@ let EzForm$1 = class extends HTMLElement$1 {
     this.dataUnit.removeInterceptor(this);
     this._dataBinder.onDisconnectedCallback();
   }
+  buildIdTabSelector(tabs) {
+    if (tabs) {
+      tabs.forEach(tab => tab["data-element-id"] = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(tab.label)}`);
+    }
+    return tabs;
+  }
   render() {
     return (h(Host, null, this.isStatic() ? null : this.getDynamicContent()));
   }
@@ -118406,6 +118419,13 @@ let EzGrid$1 = class extends HTMLElement$1 {
     if (this.config) {
       this.observeConfig(this.config);
     }
+    this.buildDataElementId();
+  }
+  buildDataElementId() {
+    const dataInfo = { dataUnit: this.dataUnit };
+    const dataElementIdEzGrid = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const dtInfo = { id: `${dataElementIdEzGrid}_ezGrid_pagination` };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, null, dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {
@@ -118432,9 +118452,10 @@ let EzGrid$1 = class extends HTMLElement$1 {
     this._gridController.setColumnsState(config.columns);
   }
   render() {
-    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container" }, this.getPaginationControl())), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
+    return (h(Host, null, h("div", { class: "ez-box ez-box--shadow ez-padding--medium grid-header" }, h("div", { class: "grid-header__container" }, h("slot", { name: "leftButtons" })), h("div", { class: "grid-header__container", ref: ref => this._refPaginationControl = ref }, this.getPaginationControl())), h("div", { class: "grid__container ez-grid", ref: elem => this._container = elem }), h("div", { class: "grid__footer" })));
   }
   static get assetsDirs() { return ["../assets"]; }
+  get _element() { return this; }
   static get watchers() { return {
     "config": ["observeConfig"]
   }; }
@@ -119095,7 +119116,7 @@ var ModalButtonStatus;
 })(ModalButtonStatus || (ModalButtonStatus = {}));
 const ModalButtonStatus$1 = ModalButtonStatus;
 
-const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto 0;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
+const ezModalContainerCss = ".sc-ez-modal-container-h{display:grid;grid-template-rows:0 auto 1fr auto;width:100%;height:100%}.ez-modal-container__header.sc-ez-modal-container{display:flex;flex-wrap:nowrap;flex-direction:row;justify-content:space-between}.ez-modal-container__content.sc-ez-modal-container{overflow-y:auto;scrollbar-gutter:stable}.ez-modal-container__title.sc-ez-modal-container{display:grid}.ez-modal-container__close-button.sc-ez-modal-container{cursor:pointer;background-color:transparent;border:none}.ez-modal-container__close-icon.sc-ez-modal-container{--icon--color:var(--title--primary, #2B3A54)}.ez-modal-container__focus-ctrl.sc-ez-modal-container{height:0px;background-color:transparent;border:none}";
 
 let EzModalContainer$1 = class extends HTMLElement$1 {
   constructor() {
@@ -119859,6 +119880,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
+    ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -119866,6 +119888,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
           this.tabs.split(",").forEach((label) => {
             label = label.trim();
             this._processedTabs.push({ label, tabKey: label, index: this._processedTabs.length });
+            this.buildElementIdTab(this._processedTabs);
           });
         }
       }
@@ -119881,9 +119904,20 @@ let EzTabselector$1 = class extends HTMLElement$1 {
           this._hostElem.appendChild(content);
         }
         this._processedTabs.push(tab);
+        this.buildElementIdTab(this._processedTabs);
       });
     }
   }
+  componentDidRender() {
+    this.updateScroll();
+  }
+  componentDidLoad() {
+    this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
+      const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+      const dataInfo = { id: `${elemIdTabSelector}_${StringUtils$1.toCamelCase(elem.id)}` };
+      ElementIDUtils.addIDInfo(elem, null, dataInfo);
+    });
+  }
   handleSlotChange(ev) {
     const slot = ev.target;
     const content = slot.assignedElements()[0];
@@ -119909,9 +119943,6 @@ let EzTabselector$1 = class extends HTMLElement$1 {
       container.scrollLeft = lastTab.offsetLeft + lastTab.offsetWidth;
     }
   }
-  componentDidRender() {
-    this.updateScroll();
-  }
   updateScroll() {
     const container = this._scrollContainer;
     if (container) {
@@ -119972,6 +120003,15 @@ let EzTabselector$1 = class extends HTMLElement$1 {
       }
     });
   }
+  buildElementIdTab(tabs) {
+    tabs.forEach(tab => {
+      if (!tab.hasOwnProperty("data-element-id")) {
+        const elemIdTabSelector = this._hostElem.getAttribute("data-element-id");
+        const dataElementID = `${elemIdTabSelector}_${StringUtils$1.toCamelCase(tab.tabKey)}`;
+        tab["data-element-id"] = dataElementID;
+      }
+    });
+  }
   render() {
     return (h(Host, null, h("button", { class: "backward-button", ref: (el) => this._backwardButton = el, onClick: () => this.scrollBackward() }), h("div", { class: "scroll", ref: (el) => this._scrollContainer = el, onScroll: () => this.domScrollHandler(), onKeyDown: (ev) => this.setFocusedParam(ev) }, this._processedTabs.map((tab, index) => {
       const labelStyle = { "min-width": this.getTextWidth(tab.label) };
@@ -119981,7 +120021,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
         this.selectedTab = tab.tabKey;
         this.selectedIndex = index;
       }
-      return h("button", { id: tabId, class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
+      return h("button", { id: tabId, name: "tab-button", class: `tab${isSelected ? " is-active" : ""}`, onClick: () => this.handleTabClick(tab), style: labelStyle }, tab.leftIcon && h("ez-icon", { iconName: tab.leftIcon, class: "left-icon" }), h("span", { class: "tab-label", title: tab.label }, tab.label), tab.rightIcon && h("ez-icon", { iconName: tab.rightIcon, class: "right-icon" }), h("slot", { name: tabId, onSlotchange: (ev) => { this.handleSlotChange(ev); } }));
     })), h("button", { class: "forward-button", ref: (el) => this._forwardButton = el, onClick: () => this.scrollFoward() })));
   }
   get _hostElem() { return this; }
@@ -121197,6 +121237,9 @@ let EzViewStack$1 = class extends HTMLElement$1 {
       });
     }
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem);
+  }
   disconectCallback() {
     this._hostElem = null;
     this._elemList = null;

package/dist/esm/ez-collapsible-box.entry.js

@@ -1,4 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7bc778b3.js';
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { A as ApplicationUtils } from './ApplicationUtils-205ac4bc.js';
 import './DialogType-4059dc4d.js';
 import './CheckMode-bdb2ec19.js';
@@ -115,6 +116,9 @@ let EzCollapsibleBox = class {
     };
     return styledLabel;
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement);
+  }
   render() {
     return (h("div", { class: "collapsible-box" }, h("div", { class: "collapsible-box__header" }, h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title" +
         (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +