@sankhyalabs/ezui 2.0.10 → 2.1.0

package/dist/cjs/ez-button.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 ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--width:'auto';--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:0px;--ez-button--padding-bottom:0px;--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--justify-content:center;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{position:relative;display:flex;align-items:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;white-space:nowrap;min-width:var(--ez-button--min-width);width:var(--ez-button--width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);justify-content:var(--ez-button--justify-content)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
 
@@ -30,6 +31,15 @@ let EzButton = class {
   async setBlur() {
     this._button.blur();
   }
+  componentDidLoad() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._button) {
+      const dataInfo = { id: 'ezButton_internal_button' };
+      core.ElementIDUtils.addIDInfo(this._button, null, dataInfo);
+    }
+  }
   getIconSize(sizeParam = "medium") {
     const sizeList = ["small", "medium", "large"];
     const sizeLowerCase = this.size && this.size.toLowerCase();
@@ -73,6 +83,7 @@ let EzButton = class {
       return (index.h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
     }
   }
+  get _element() { return index.getElement(this); }
 };
 EzButton.style = ezButtonCss;
 

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

@@ -179,6 +179,7 @@ let EzCalendar = class {
       const date = new Date();
       date.setTime(firstDate.getTime());
       date.setDate(date.getDate() + offset + index$1);
+      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 @@ let EzCalendar = class {
       else if (this.isSelectedDate(date)) {
         classNames += " calendar__cell--selected";
       }
-      return index.h("div", { class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
+      return index.h("div", { "data-day-month": dataDayMonth, class: classNames, onClick: () => this.selectDate(date) }, date.getDate());
     })))), index.h("div", { class: "calendar__footer" }, index.h("button", { class: "calendar__btn-today", onClick: () => this.selectDate(new Date()) }, this._todayLabel))), (this.time || this.showSeconds) &&
       index.h("div", { class: "calendar-time" }, index.h("div", { class: "calendar-time__header" }, index.h("div", null, "H"), index.h("div", { class: "separatorTime" }, ":"), index.h("div", null, "M"), this.showSeconds &&
         index.h("div", { class: "separatorTime" }, ":"), this.showSeconds &&

package/dist/cjs/ez-card-item.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 ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n               4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
 
@@ -14,6 +15,11 @@ let EzCardItem = class {
   componentWillRender() {
     this.createDetailList();
   }
+  componentDidLoad() {
+    var _a, _b;
+    const dataInfo = { id: core.StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
+    core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+  }
   createDetailList() {
     var _a, _b, _c;
     this._details = { detailsLeft: [], detailsRight: [] };
@@ -38,6 +44,7 @@ let EzCardItem = class {
         return this.buildDetailContent(detail);
       }))))));
   }
+  get _element() { return index.getElement(this); }
 };
 EzCardItem.style = ezCardItemCss;
 

package/dist/cjs/ez-check.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 CheckMode = require('./CheckMode-ecb90b87.js');
 
 const ezCheckCss = ":host{--ez-check--box--width:18px;--ez-check--box--height:18px;--ez-check--width:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--height:calc(var(--ez-check--box--width) + var(--ez-check--outter-gap, 14px));--ez-check--border-radius:var(--border--radius-small);--ez-check--checked--background-color:var(--color--primary-200);--ez-check--focus--background-color:var(--color--strokes, #FFFFFF);--ez-check--hover--background-color:var(--background--medium);--ez-check--checked--disabled--background-color:var(--color--disable-secondary);--ez-check--border:var(--border--medium) var(--title--primary);--ez-check--disabled--border:var(--border--medium) var(--color--strokes);--ez-check--checked--border:var(--border--medium) var(--color--primary);--ez-check--checked--hover--background-color:var(--color--primary-200);--ez-check--checked--focus--background-color:var(--color--primary-300, #FFFFFF);--ez-check--check--image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"7\" viewBox=\"0 0 8 7\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z\"/></svg>');--ez-check--indeterminate--image:url('data:image/svg+xml;utf8,<svg width=\"10\" height=\"2\" viewBox=\"0 0 10 2\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m 1,0 h 8 c 0.554,0 1,0.446 1,1 0,0.554 -0.446,1 -1,1 H 1 C 0.446,2 0,1.554 0,1 0,0.446 0.446,0 1,0 Z\" /></svg>');--ez-check--check--background-color:var(--color--primary);--ez-check--check--disabled--background-color:var(--color--strokes);--ez-switch--slider--width:34px;--ez-switch--slider--height:14px;--ez-switch--pin--width:19px;--ez-switch--pin--height:19px;--ez-switch--focus--width:32px;--ez-switch--focus--height:32px;--ez-switch--background-color:var(--color--strokes);--ez-switch--disabled--background-color:var(--color--disable-secondary);--ez-switch--disabled--checked--background-color:var(--color--primary-300);--ez-switch--checked--background-color:var(--color--primary);--ez-switch--pin--background-color:var(--background--xlight);--ez-switch--pin--disabled--background-color:var(--color--disable-primary);--ez-switch--pin--checked--background-color:var(--background--xlight);--ez-switch--pin--checked--disabled--background-color:#E8F7F4;--ez-switch--pin--focus--background-color:var(--text--disable);--ez-switch--pin--checked--focus--background-color:var(--color--primary);--ez-switch--pin--border-color:var(--text--primary);--ez-switch--pin--disabled--border-color:var(--text--secondary);--ez-check--label--font-size:var(--text--medium, 14px);--ez-check--label--font-family:var(--font-pattern, Arial);--ez-check--label--color:var(--title--primary, #000);--ez-check--label--disabled--color:var(--text--disable, #AFB6C0);display:flex;width:100%;align-items:center;margin:0}input.regular-mode{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;box-sizing:border-box;-webkit-appearance:none;appearance:none;cursor:pointer;border-radius:50%;position:relative;width:var(--ez-check--width);height:var(--ez-check--height)}input.regular-mode:enabled:hover{background-color:var(--ez-check--hover--background-color)}input.regular-mode:enabled:focus{outline:none;background-color:var(--ez-check--focus--background-color)}input.regular-mode:disabled{cursor:auto;background:none}input.regular-mode::before{box-sizing:border-box;content:\"\";display:block;width:var(--ez-check--box--width);height:var(--ez-check--box--height);border-radius:var(--ez-check--border-radius);border:var(--ez-check--border)}input.regular-mode:disabled::before{border:var(--ez-check--disabled--border)}input.regular-mode:checked:enabled:hover,input.regular-mode:indeterminate:enabled:hover{background-color:var(--ez-check--checked--hover--background-color)}input.regular-mode:checked:enabled:focus,input.regular-mode:indeterminate:enabled:focus{background-color:var(--ez-check--checked--focus--background-color)}input.regular-mode:checked::before,input.regular-mode:indeterminate::before{border:var(--ez-check--checked--border);background-color:var(--ez-check--checked--background-color)}input.regular-mode:disabled:before{border:var(--ez-check--disabled--border);background-color:var(--ez-check--checked--disabled--background-color)}input.regular-mode:checked::after,input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:8px;height:7px;-webkit-mask-image:var(--ez-check--check--image);mask-image:var(--ez-check--check--image)}input.regular-mode:indeterminate:after{display:flex;position:absolute;content:\"\";background-color:var(--ez-check--check--background-color);width:10px;height:2px;-webkit-mask-image:var(--ez-check--indeterminate--image);mask-image:var(--ez-check--indeterminate--image)}input.regular-mode:checked:disabled::after,input.regular-mode:indeterminate:disabled::after{background-color:var(--ez-check--check--disabled--background-color)}input.switch-mode{flex-shrink:0;-webkit-appearance:none;appearance:none;position:relative;outline:none;cursor:pointer;border-radius:20px;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);transition:background-color var(--transition);width:var(--ez-switch--slider--width);height:var(--ez-switch--slider--height);background-color:var(--ez-switch--background-color)}input.switch-mode:disabled{background-color:var(--ez-switch--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked:disabled{background-color:var(--ez-switch--disabled--checked--background-color)}input.switch-mode::after{content:\"\";display:block;position:absolute;box-shadow:var(--shadow);transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(-2px) translateY(-4px);border-radius:50%;border:var(--border--small, 1px solid) var(--ez-switch--pin--border-color, #626e82);width:var(--ez-switch--pin--width);height:var(--ez-switch--pin--height);background-color:var(--ez-switch--pin--background-color)}input.switch-mode:disabled::after{background-color:var(--ez-switch--pin--disabled--background-color);border:var(--border--small, 1px solid) var(--ez-switch--pin--disabled--border-color, #a2abb9)}input.switch-mode:checked{transition:background-color var(--transition), border var(--transition);background-color:var(--ez-switch--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode::before{display:block;content:\"\";display:block;position:absolute;border-radius:50%;opacity:0;width:var(--ez-switch--focus--width);height:var(--ez-switch--focus--height);top:calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);left:calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width) - 2px) / 2);background-color:var(--ez-switch--pin--focus--background-color)}input.switch-mode:focus::before{opacity:0.24;transition:opacity var(--transition)}input.switch-mode:checked:focus::before{background-color:var(--ez-switch--pin--checked--focus--background-color);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width) + 2px))}input.switch-mode:checked::after{transition:transform var(--transition);transition:background-color var(--transition);transition:border-color var(--transition);transform:translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-4px);box-shadow:var(--shadow);background-color:var(--ez-switch--pin--checked--background-color);border:var(--border--small, 1px solid) var(--color--primary, #008561)}input.switch-mode:checked:disabled::after{background-color:var(--ez-switch--pin--checked--disabled--background-color)}.label{flex-shrink:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-check--label--color);font-size:var(--ez-check--label--font-size);font-family:var(--ez-check--label--font-family);cursor:default;padding-left:var(--space--small)}.label--disabled{color:var(--ez-check--label--disabled--color)}";
@@ -38,6 +39,14 @@ let EzCheck = class {
   async setFocus() {
     this._inputElem.focus();
   }
+  componentDidLoad() {
+    if (this._inputElem) {
+      core.ElementIDUtils.addIDInfo(this._inputElem, 'input');
+    }
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element, 'input');
+    }
+  }
   changeValue() {
     if (!this.enabled) {
       return;
@@ -59,6 +68,7 @@ let EzCheck = class {
   render() {
     return (index.h(index.Host, null, index.h("input", { type: "checkbox", ref: (el) => this._inputElem = el, class: this.getInputClasses(), checked: this.value === true, onChange: () => { this.changeValue(); }, indeterminate: this.indeterminate, disabled: !this.enabled }), this.label ? index.h("label", { class: this.getLabelClasses(), onClick: () => { this.changeValue(); }, title: this.label }, this.label) : undefined));
   }
+  get _element() { return index.getElement(this); }
 };
 EzCheck.style = ezCheckCss;
 

package/dist/cjs/ez-chip.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 ezChipCss = ":host{--ez-label-chip--height:30px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--medium, 400);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #2B3A54);--ez-label-chip__label--text--primary:var(--text--primary, #626e82);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:var(--color--primary-300);--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--active:var(--color--primary, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-300, #f2faf8);--ez-label-chip__label__container--default--color--hover:var(--color--primary, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__label__container--default--border-color--active:var(--color--primary)}.lbl{display:flex;white-space:nowrap;align-items:center;cursor:pointer;user-select:none;color:var(--ez-label-chip__label--title--primary);height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size);font-weight:var(--ez-label-chip__label--font-weight)}.lbl--active{color:var(--ez-label-chip__label__container--default--color--hover)}.lbl--disabled{color:var(--ez-label-chip__label__container--text--disabled)}.label__container{cursor:pointer;width:max-content;display:flex;flex-wrap:wrap;align-items:center;background-color:#FFFFFF;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);outline-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__content{display:flex;align-items:center;flex-wrap:wrap;--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--disabled{cursor:default;border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__container--active{border-color:var(--ez-label-chip__label__container--default--background-color--hover);background-color:var(--ez-label-chip__label__container--default--background-color--hover);color:var(--ez-label-chip__label__container--default--color--hover);fill:var(--ez-label-chip__label__container--default--color--hover);--ez-icon--color:var(--ez-label-chip__label__container--default--color--hover)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--active)}.label__container--disabled:hover{cursor:default;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);background-color:var(--ez-label-chip__label__container-color--disable-secondary);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);--ez-icon--color:var(--ez-label-chip__label__container--text--disabled)}.label__content__icon{display:flex;cursor:pointer;color:var(--ez-label-chip__label--text--primary);fill:var(--ez-label-chip__label--text--primary);--ez-icon--color:var(--ez-label-chip__label--text--primary)}.label__container--row-reverse{flex-direction:row-reverse}.label__container .btn-close{padding:0px 0px 0px 8px}.label__container--row-reverse .btn-close{padding:0px 8px 0px 0px}.cursor-disable{cursor:default}ez-icon{--ez-icon--color:inherit}";
 
@@ -89,14 +90,20 @@ let EzChip = class {
   // Lifecycle web component
   //---------------------------------------------
   componentDidLoad() {
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element, 'ezChip');
+    }
     if (this._containerElem) {
       this.observeValue();
       this.observeEnabled();
+      this._containerElem.setAttribute("data-element-id", 'ezChip_internal_button');
+      core.ElementIDUtils.addIDInfo(this._containerElem);
     }
   }
   render() {
     return (index.h("button", { onClick: (ev) => this.handleClick(ev), class: "label__container" + (this.removePosition === "left" ? " label__container--row-reverse" : ""), ref: (el) => this._containerElem = el }, index.h("div", { class: "label__content" }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), index.h("label", { class: "lbl " + (this.value ? "lbl--active " : ""), ref: (el) => this._labelElem = el, title: this.label }, this.formatLabel()), index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })), this.mode !== 'action' && this.removePosition && index.h("ez-icon", { class: "btn-close", size: "small", "icon-name": "close" })));
   }
+  get _element() { return index.getElement(this); }
   static get watchers() { return {
     "value": ["observeValue"],
     "enabled": ["observeEnabled"]

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

@@ -359,6 +359,12 @@ let EzComboBox = class {
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
     this.setInputValue(false);
+    if (this.el) {
+      core.ElementIDUtils.addIDInfo(this.el, 'input');
+      if (this._textInput) {
+        core.ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this.el.getAttribute("data-element-id") });
+      }
+    }
   }
   //---------------------------------------------
   // Event handlers

package/dist/cjs/ez-date-input.cjs.entry.js

@@ -142,6 +142,15 @@ let EzDateInput = class {
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this._elem) {
+      core.ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        core.ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+      if (this._calendar) {
+        core.ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));

package/dist/cjs/ez-date-time-input.cjs.entry.js

@@ -197,6 +197,15 @@ let EzDateTimeInput = class {
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this._elem) {
+      core.ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        core.ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+      if (this._calendar) {
+        core.ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (index.h(index.Host, null, index.h("ez-text-input", { ref: elem => this._textInput = elem, "data-slave-mode": "true", label: this.label, restrict: "0123456789/: ", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, onKeyDown: event => { this.handleKeyDown(event); }, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), onFocus: () => this.handleFocus(), onClick: () => this.handleClick() }, index.h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })), index.h("ez-calendar", { onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));

package/dist/cjs/ez-filter-input.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 CSSVarsUtils = require('./CSSVarsUtils-af809e73.js');
 
 const ezFilterInputCss = ":host{display:block;width:100%}";
@@ -63,6 +64,12 @@ let EzFilterInput = class {
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this._elem) {
+      core.ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        core.ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (index.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 }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));

package/dist/cjs/ez-number-input.cjs.entry.js

@@ -137,6 +137,12 @@ let EzNumberInput = class {
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
     this.setInputValue();
+    if (this._elem) {
+      core.ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        core.ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (index.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/cjs/ez-radio-button.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 ezRadioButtonCss = ":host{--ez-radio-button--font-family:var(--font-pattern, Arial);--ez-radio-button--font-size:var(--text--medium, 14px);--ez-radio-button--font-weight:var(--text-weight--large);--ez-radio-button--font-color:var(--title--primary, #2B3A54);--ez-radio-button--padding-vertical:var(--space--medium, 12px);--ez-radio-button--padding-horizontal:0px;--ez-radio-button__form-label--font-family:var(--font-pattern, Arial);--ez-radio-button__form-label--font-weight:var(--text-weight--medium, 400);--ez-radio-button__form-label--title-primary:var(--title--primary, #2B3A54);--ez-radio-button__form-label--font-size:var(--text--medium, 14px);--ez-radio-button__form-label--padding-horizontal:var(--space--medium, 12px);--ez-radio-button__form-radio--border-color:var(--title--primary, #2B3A54);--ez-radio-button__form-radio--checked--color:var(--color--primary, #008561);--ez-radio-button__form-radio--disabled--border-color:var(--color--strokes, #dce0e8);--ez-radio-button__form-radio--disabled--background-color:var(--background--medium, #f0f3f7);--ez-radio-button__form-radio--disabled--color:var(--color--strokes, #dce0e8);--ez-radio-button__form-radio--disabled--before--background-color:var(--color--strokes, #dce0e8);--ez-radio-button__form-radio--focus--background-color:var(--color--inverted, #fff);--ez-radio-button__form-radio--checked--box-shadow-color:var(--background--strong, #e4eaf1);--ez-radio-button__form-radio--checked--focus--background-color:var(--color--inverted, #fff);--ez-radio-button__form-radio--checked--focus--box-shadow-color:var(--color--primary-300, #e2f4ef);--ez-radio-button__form-radio--checked--hover--background-color:var(--color--inverted, #fff);--ez-radio-button__form-radio--checked--hover--box-shadow-color:#daece7;--ez-radio-button__form-radio--hover--box-shadow-color:var(--color--strokes, #dce0e8);--ez-radio-button__form-radio--checked--disabled--hover--background-color:var(--background--medium, #f0f3f7);display:flex;width:100%;flex-direction:column;align-items:flex-start;box-sizing:border-box}.form{padding:var(--ez-radio-button--padding-vertical) var(--ez-radio-button--padding-horizontal);gap:var(--ez-radio-button__form-label--padding-horizontal)}.form--vertical{display:flex;flex-direction:column}.form--horizontal{display:flex;flex-direction:row}.form__group{display:flex;align-items:center}.label{font-family:var(--ez-radio-button--font-family);font-size:var(--ez-radio-button--font-size);font-weight:var(--ez-radio-button--font-weight);color:var(--ez-radio-button--font-color)}.form__label{cursor:pointer;font-weight:var(--ez-radio-button__form-label--font-weight);color:var(--ez-radio-button__form-label--title-primary);font-family:var(--ez-radio-button__form-label--font-family);font-size:var(--ez-radio-button__form-label--font-size);padding-left:var(--ez-radio-button__form-label--padding-horizontal);padding-right:var(--ez-radio-button__form-label--padding-horizontal)}.form__radio{cursor:pointer;appearance:none;outline:none;position:relative;display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ez-radio-button__form-radio--border-color)}.form__radio::before{content:'';display:block;position:absolute;opacity:0;transition:all 300ms ease-in-out;height:calc(18px/2);width:calc(18px/2);border-radius:50%;background:var(--ez-radio-button__form-radio--checked--color)}.form__radio:checked:before{opacity:1}.form__radio:checked{border:2px solid var(--ez-radio-button__form-radio--checked--color)}.form__radio:disabled{cursor:default;border:2px solid var(--ez-radio-button__form-radio--disabled--border-color);background-color:var(--ez-radio-button__form-radio--disabled--background-color)}.form__radio:disabled:hover{box-shadow:inherit}input[type=radio]:disabled~label{cursor:default;color:var(--ez-radio-button__form-radio--disabled--color)}.form__radio:disabled:before{background:var(--ez-radio-button__form-radio--disabled--before--background-color)}.form__radio:focus{transition:0.25s linear;background-color:var(--ez-radio-button__form-radio--focus--background-color);box-shadow:0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--box-shadow-color)}.form__radio:checked:focus{transition:0.25s linear;background-color:var(--ez-radio-button__form-radio--checked--focus--background-color);box-shadow:0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--focus--box-shadow-color)}.form__radio:checked:hover{transition:0.25s linear;background-color:var(--ez-radio-button__form-radio--checked--hover--background-color);box-shadow:0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--hover--box-shadow-color)}.form__radio:hover{transition:0.25s linear;box-shadow:0px 0px 0px 6px var(--ez-radio-button__form-radio--hover--box-shadow-color)}.form__radio:checked:disabled:hover{box-shadow:none;background-color:var(--ez-radio-button__form-radio--checked--disabled--hover--background-color)}";
 
@@ -23,6 +24,11 @@ let EzRadioButton = class {
      */
     this.direction = "vertical";
   }
+  componentDidLoad() {
+    if (this.hostElement) {
+      core.ElementIDUtils.addIDInfo(this.hostElement, 'input');
+    }
+  }
   componentWillLoad() {
     this._options = this.options;
     const optionsTags = this.hostElement.querySelectorAll("ez-radio-button-option");

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8646c40d.js');
 const CSSVarsUtils = require('./CSSVarsUtils-af809e73.js');
+const core = require('@sankhyalabs/core');
 
 const ezSearchCss = ":host{width:100%}";
 
@@ -71,6 +72,12 @@ let EzSearch = class {
   }
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
+    if (this._elem) {
+      core.ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._comboElement) {
+        core.ElementIDUtils.addIDInfo(this._comboElement, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (index.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/cjs/ez-text-area.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 ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--medium, 400);--text-area--color:var(--title--primary, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;width:100%;padding:0;background:none;font-weight:var(--text-area--font-weight);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);margin-top:calc(var(--space--medium, 12px) + 4px)}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:3px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color)}.textarea--slim{margin-top:var(--space--small, 6px)}.textarea--slim::-webkit-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::-moz-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:-ms-input-placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim::placeholder{font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color)}.textarea--slim:disabled::-webkit-input-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::-moz-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled:-ms-input-placeholder{color:var(--text-area__input--disabled--color)}.textarea--slim:disabled::placeholder{color:var(--text-area__input--disabled--color)}";
 
@@ -142,6 +143,12 @@ let EzTextArea = class {
     this.observeErrorMessage();
     this.adjustFloatingLabel();
     this.observeMode();
+    if (this._hostElement) {
+      core.ElementIDUtils.addIDInfo(this._hostElement, 'input');
+      if (this._inputElem) {
+        core.ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
+      }
+    }
   }
   render() {
     return (index.h(index.Host, null, index.h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?

package/dist/cjs/ez-text-edit.cjs.entry.js

@@ -90,6 +90,12 @@ let EzTextEdit = class {
   componentDidLoad() {
     this.applyFocusSelect();
     this.setNewValue(this.value);
+    if (this._element) {
+      core.ElementIDUtils.addIDInfo(this._element, 'input');
+      if (this._inputElement) {
+        core.ElementIDUtils.addIDInfo(this._inputElement, 'internal_input', { id: this._element.getAttribute("data-element-id") });
+      }
+    }
   }
   componentDidRender() {
     this.setStyledInput();
@@ -97,6 +103,7 @@ let EzTextEdit = class {
   render() {
     return (index.h(index.Host, null, index.h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }), index.h("ez-text-input", { onInput: () => { this.calcSizeInput(this._newValue); }, class: "text-edit__form-input", value: this._newValue, ref: (elem) => this._inputElement = elem, mode: "slim", onEzChange: (evt) => this.setNewValue(evt === null || evt === void 0 ? void 0 : evt.detail), noBorder: true }), index.h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }), index.h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
   }
+  get _element() { return index.getElement(this); }
 };
 EzTextEdit.style = ezTextEditCss;
 

package/dist/cjs/ez-text-input.cjs.entry.js

@@ -213,6 +213,12 @@ let EzTextInput = class {
     this.observeMask();
     this.adjustFloatingLabel();
     this.adjustBorderInput();
+    if (this._hostElement) {
+      core.ElementIDUtils.addIDInfo(this._hostElement, 'input');
+      if (this._inputElem) {
+        core.ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
+      }
+    }
   }
   componentWillLoad() {
     this.observeMask();

package/dist/cjs/ez-time-input.cjs.entry.js

@@ -142,6 +142,12 @@ let EzTimeInput = class {
   //---------------------------------------------
   componentDidLoad() {
     CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this._elem) {
+      core.ElementIDUtils.addIDInfo(this._elem, 'input');
+      if (this._textInput) {
+        core.ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
+      }
+    }
   }
   componentWillLoad() {
     this.observeShowSeconds();

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-8646c40d.js');
 const ApplicationUtils = require('./ApplicationUtils-edc62c5c.js');
+const core = require('@sankhyalabs/core');
 require('./DialogType-aa435c52.js');
 
 class RemoteFile {
@@ -335,6 +336,9 @@ let EzUpload = class {
         this._dropZone.style.background = "";
       });
     }
+    if (this._host) {
+      core.ElementIDUtils.addIDInfo(this._host, 'input');
+    }
   }
   componentWillRender() {
     if (this.value) {

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-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 },