@sankhyalabs/ezui 2.0.10 → 2.2.0

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

@@ -1,4 +1,5 @@
-import { Component, h, Prop, Method } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { Component, h, Prop, Method, Element } from "@stencil/core";
 export class EzButton {
   constructor() {
     /**
@@ -22,6 +23,15 @@ export class EzButton {
   async setBlur() {
     this._button.blur();
   }
+  componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'ezButton_internal_button' };
+      ElementIDUtils.addIDInfo(this._button, null, dataInfo);
+    }
+  }
   getIconSize(sizeParam = "medium") {
     const sizeList = ["small", "medium", "large"];
     const sizeLowerCase = this.size && this.size.toLowerCase();
@@ -219,4 +229,5 @@ export class EzButton {
       }
     }
   }; }
+  static get elementRef() { return "_element"; }
 }

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

@@ -179,6 +179,7 @@ export class EzCalendar {
               const date = new Date();
               date.setTime(firstDate.getTime());
               date.setDate(date.getDate() + offset + index);
+              let dataDayMonth = `${date.getMonth() + 1}-${date.getDate()}-${date.getFullYear()}`;
               let classNames = "calendar__cell";
               if (this._currentPosition.getMonth() != date.getMonth()) {
                 classNames += " calendar__cell--secondary";
@@ -186,7 +187,7 @@ export class EzCalendar {
               else if (this.isSelectedDate(date)) {
                 classNames += " calendar__cell--selected";
               }
-              return h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
+              return h("div", { "data-day-month": dataDayMonth, class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
             })))),
           h("div", { class: "calendar__footer" },
             h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))),

package/dist/collection/components/ez-card-item/ez-card-item.js

@@ -1,8 +1,14 @@
-import { Component, Event, h, Host, Prop } from '@stencil/core';
+import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
+import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
 export class EzCardItem {
   componentWillRender() {
     this.createDetailList();
   }
+  componentDidLoad() {
+    var _a, _b;
+    const dataInfo = { id: StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   createDetailList() {
     var _a, _b, _c;
     this._details = { detailsLeft: [], detailsRight: [] };
@@ -85,4 +91,5 @@ export class EzCardItem {
         }
       }
     }]; }
+  static get elementRef() { return "_element"; }
 }

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

@@ -1,4 +1,5 @@
-import { Component, Prop, h, Method, Event, Host } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import { Component, Prop, h, Method, Event, Host, Element } from '@stencil/core';
 import { CheckMode } from './CheckMode';
 export class EzCheck {
   constructor() {
@@ -29,6 +30,14 @@ export class EzCheck {
   async setFocus() {
     this._inputElem.focus();
   }
+  componentDidLoad() {
+    if (this._inputElem) {
+      ElementIDUtils.addIDInfo(this._inputElem, 'input');
+    }
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'input');
+    }
+  }
   changeValue() {
     if (!this.enabled) {
       return;
@@ -199,4 +208,5 @@ export class EzCheck {
       }
     }
   }; }
+  static get elementRef() { return "_element"; }
 }

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

@@ -1,4 +1,5 @@
-import { Component, Prop, h, Method, Watch, Event } from "@stencil/core";
+import { Component, Element, Prop, h, Method, Watch, Event } from "@stencil/core";
+import { ElementIDUtils } from '@sankhyalabs/core';
 export class EzChip {
   constructor() {
     /**
@@ -78,9 +79,14 @@ export class EzChip {
   // Lifecycle web component
   //---------------------------------------------
   componentDidLoad() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'ezChip');
+    }
     if (this._containerElem) {
       this.observeValue();
       this.observeEnabled();
+      this._containerElem.setAttribute("data-element-id", 'ezChip_internal_button');
+      ElementIDUtils.addIDInfo(this._containerElem);
     }
   }
   render() {
@@ -268,6 +274,7 @@ export class EzChip {
       }
     }
   }; }
+  static get elementRef() { return "_element"; }
   static get watchers() { return [{
       "propName": "value",
       "methodName": "observeValue"

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-combo-box/ez-combo-box.js

@@ -1,4 +1,4 @@
-import { FloatingManager } from "@sankhyalabs/core";
+import { ElementIDUtils, FloatingManager } from "@sankhyalabs/core";
 import { Component, h, Host, Prop, State, Event, Element, Watch, Method } from "@stencil/core";
 import { ApplicationUtils, CSSVarsUtils } from "../../utils";
 export class EzComboBox {
@@ -349,6 +349,12 @@ export class EzComboBox {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
+    if (this.el) {
+      ElementIDUtils.addIDInfo(this.el, 'input');
+      if (this._textInput) {
+        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this.el.getAttribute("data-element-id") });
+      }
+    }
   }
   //---------------------------------------------
   // Event handlers

package/dist/collection/components/ez-date-input/ez-date-input.js

@@ -1,5 +1,5 @@
 import { Component, Element, Host, h, Prop, Watch, Event, Method } from '@stencil/core';
-import { DateUtils } from '@sankhyalabs/core';
+import { DateUtils, ElementIDUtils } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateInput {
   constructor() {
@@ -131,6 +131,15 @@ export class EzDateInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this._elem) {
+      ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+      if (this._calendar) {
+        ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (h(Host, null,

package/dist/collection/components/ez-date-time-input/ez-date-time-input.js

@@ -1,5 +1,5 @@
 import { Component, Element, Host, h, Prop, Watch, Event, Method } from '@stencil/core';
-import { DateUtils, TimeFormatter } from '@sankhyalabs/core';
+import { DateUtils, ElementIDUtils, TimeFormatter } from '@sankhyalabs/core';
 import CSSVarsUtils from '../../utils/CSSVarsUtils';
 export class EzDateTimeInput {
   constructor() {
@@ -184,6 +184,15 @@ export class EzDateTimeInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this._elem) {
+      ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+      if (this._calendar) {
+        ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (h(Host, null,

package/dist/collection/components/ez-filter-input/ez-filter-input.js

@@ -1,3 +1,4 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
 import { Component, h, Event, Prop, Watch, Element, Method } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzFilterInput {
@@ -54,6 +55,12 @@ export class EzFilterInput {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this._elem) {
+      ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (h("ez-text-input", { ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.changeValue(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, loading: this.loading, mode: this.mode },

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-number-input/ez-number-input.js

@@ -1,4 +1,4 @@
-import { NumberUtils } from "@sankhyalabs/core";
+import { ElementIDUtils, NumberUtils } from "@sankhyalabs/core";
 import { Component, h, Event, Prop, Element, Method, Watch } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzNumberInput {
@@ -124,6 +124,12 @@ export class EzNumberInput {
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this._elem) {
+      ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), restrict: this.precision > 0 ? "0123456789-,." : "0123456789-", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }));

package/dist/collection/components/ez-radio-button/ez-radio-button.js

@@ -1,3 +1,4 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { Event, Prop, Element, Component, Host, h } from '@stencil/core';
 export class EzRadioButton {
   constructor() {
@@ -14,6 +15,11 @@ export class EzRadioButton {
      */
     this.direction = "vertical";
   }
+  componentDidLoad() {
+    if (this.hostElement) {
+      ElementIDUtils.addIDInfo(this.hostElement, 'input');
+    }
+  }
   componentWillLoad() {
     this._options = this.options;
     const optionsTags = this.hostElement.querySelectorAll("ez-radio-button-option");

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

@@ -1,5 +1,6 @@
 import { Component, Event, h, Prop, Watch, Element, Method } from "@stencil/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
+import { ElementIDUtils } from "@sankhyalabs/core";
 export class EzSearch {
   constructor() {
     /**
@@ -61,6 +62,12 @@ export class EzSearch {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
+    if (this._elem) {
+      ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._comboElement) {
+        ElementIDUtils.addIDInfo(this._comboElement, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: event => this.onComboChange(event), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue, suppressEmptyOption: this.suppressEmptyOption, mode: this.mode }));

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-text-area/ez-text-area.js

@@ -1,3 +1,4 @@
+import { ElementIDUtils } from '@sankhyalabs/core';
 import { Component, Prop, h, Watch, Host, Method, Event, Element } from '@stencil/core';
 export class EzTextArea {
   constructor() {
@@ -133,6 +134,12 @@ export class EzTextArea {
     this.observeErrorMessage();
     this.adjustFloatingLabel();
     this.observeMode();
+    if (this._hostElement) {
+      ElementIDUtils.addIDInfo(this._hostElement, 'input');
+      if (this._inputElem) {
+        ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (h(Host, null,

package/dist/collection/components/ez-text-edit/ez-text-edit.js

@@ -1,5 +1,5 @@
-import { Component, Host, h, Prop, Event, State, Method } from '@stencil/core';
-import { StringUtils } from '@sankhyalabs/core';
+import { Component, Host, h, Prop, Event, State, Method, Element } from '@stencil/core';
+import { ElementIDUtils, StringUtils } from '@sankhyalabs/core';
 import { ApplicationUtils } from "../../utils";
 export class EzTextEdit {
   /**
@@ -76,6 +76,12 @@ export class EzTextEdit {
   componentDidLoad() {
     this.applyFocusSelect();
     this.setNewValue(this.value);
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element, 'input');
+      if (this._inputElement) {
+        ElementIDUtils.addIDInfo(this._inputElement, 'internal_input', { id: this._element.getAttribute("data-element-id") });
+      }
+    }
   }
   componentDidRender() {
     this.setStyledInput();
@@ -185,4 +191,5 @@ export class EzTextEdit {
       }
     }
   }; }
+  static get elementRef() { return "_element"; }
 }

package/dist/collection/components/ez-text-input/ez-text-input.js

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Watch, Host, Method, Event, Element } from "@stencil/core";
-import { MaskFormatter } from "@sankhyalabs/core";
+import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
 export class EzTextInput {
   constructor() {
     /**
@@ -204,6 +204,12 @@ export class EzTextInput {
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
+    if (this._hostElement) {
+      ElementIDUtils.addIDInfo(this._hostElement, 'input');
+      if (this._inputElem) {
+        ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
+      }
+    }
   }
   componentWillLoad() {
     this.observeMask();

package/dist/collection/components/ez-time-input/ez-time-input.js

@@ -1,5 +1,5 @@
 import { Element, Component, Prop, h, Watch, Host, Method, Event } from "@stencil/core";
-import { TimeFormatter, MaskFormatter, NumberUtils } from "@sankhyalabs/core";
+import { TimeFormatter, MaskFormatter, NumberUtils, ElementIDUtils } from "@sankhyalabs/core";
 import CSSVarsUtils from "../../utils/CSSVarsUtils";
 export class EzTimeInput {
   constructor() {
@@ -131,6 +131,12 @@ export class EzTimeInput {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this._elem) {
+      ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   componentWillLoad() {
     this.observeShowSeconds();

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

@@ -1,5 +1,6 @@
 import { Component, h, Prop, Element, Event, Method, Watch, forceUpdate } from "@stencil/core";
 import ApplicationUtils from "../../utils/ApplicationUtils";
+import { ElementIDUtils } from "@sankhyalabs/core";
 import RemoteFile from "./RemoteFile";
 export class EzUpload {
   constructor() {
@@ -229,6 +230,9 @@ export class EzUpload {
         this._dropZone.style.background = "";
       });
     }
+    if (this._host) {
+      ElementIDUtils.addIDInfo(this._host, 'input');
+    }
   }
   componentWillRender() {
     if (this.value) {

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;