@sankhyalabs/ezui 2.0.10 → 2.2.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-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-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-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-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-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-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/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;