@sankhyalabs/ezui 2.3.12 → 2.3.14

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

@@ -17,9 +17,9 @@ export class EzCollapsibleBox {
      */
     this.iconPlacement = "left";
     /**
-     * Se true o título irá ocupar toda a largura do componente.
+     * Define a posição do conteúdo do cabeçalho do componente.
      */
-    this.stretchTitle = false;
+    this.headerAlign = "left";
     /**
      * Se true mostra o ícone para remoção do componente.
      */
@@ -112,11 +112,10 @@ export class EzCollapsibleBox {
   render() {
     return (h("div", { class: "collapsible-box" },
       h("div", { class: "collapsible-box__header" },
-        h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title" +
+        h("button", Object.assign({}, (!this._activeEditText ? { onClick: () => { this.showHide(); } } : null), { class: "collapsible-box__title collapsible-box__title--" + (this.headerAlign || "left") +
             (this.iconPlacement === "right" ? " collapsible-box__title--icon-right" : "") +
-            (this.stretchTitle ? " collapsible-box__title--stretched" : "") +
             (this.value ? " collapsible-box__title--no-margin" : "") }),
-          h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : "") }),
+          h("ez-icon", { slot: "icon", "icon-name": "chevron-right", size: this.getHeaderSize(), class: "collapsible-box__icon collapsible-box__icon--" + this.getHeaderSize() + (this.value ? " collapsible-box__icon--collapsed" : ""), id: "toggleCollapsible" }),
           !this._activeEditText ?
             h("label", { class: "collapsible-box__label font--" + this.getHeaderSize(), title: this.label, ref: elem => this._refLabel = elem },
               h("span", null, this.label),
@@ -208,23 +207,23 @@ export class EzCollapsibleBox {
       "reflect": true,
       "defaultValue": "\"left\""
     },
-    "stretchTitle": {
-      "type": "boolean",
+    "headerAlign": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "\"center\" | \"left\" | \"right\" | \"stretch\" | undefined",
+        "resolved": "\"center\" | \"left\" | \"right\" | \"stretch\"",
         "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Se true o t\u00EDtulo ir\u00E1 ocupar toda a largura do componente."
+        "text": "Define a posi\u00E7\u00E3o do conte\u00FAdo do cabe\u00E7alho do componente."
       },
-      "attribute": "stretch-title",
+      "attribute": "header-align",
       "reflect": true,
-      "defaultValue": "false"
+      "defaultValue": "\"left\""
     },
     "removable": {
       "type": "boolean",

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

@@ -441,9 +441,9 @@ export class EzComboBox {
   }
   render() {
     var _a;
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
     return (h(Host, null,
-      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode },
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode },
         h("button", { class: "btn", slot: this.searchMode ? "leftIcon" : "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() },
           h("ez-icon", { iconName: this.searchMode ? "search" : "chevron-down" })),
         this.searchMode && ((_a = this._textInput) === null || _a === void 0 ? void 0 : _a.value) && (this._criteria || this.value)

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

@@ -133,11 +133,11 @@ export class EzDateInput {
     this.setInputValue();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
     return (h(Host, null,
-      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), 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 },
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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 },
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
-      h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
+      h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.hideCalendar(); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem })));
   }
   static get is() { return "ez-date-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -186,11 +186,11 @@ export class EzDateTimeInput {
     this.setInputValue();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
     return (h(Host, null,
-      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), 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() },
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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() },
         h("button", { disabled: !this.enabled, tabindex: -1, class: "btn-open-cal", onClick: () => this.showCalendar(), slot: "leftIcon" })),
-      h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
+      h("ez-calendar", { "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => { this.changeValue(this._calendar.value); event.stopPropagation(); }, floating: true, ref: elem => this._calendar = elem, time: true, showSeconds: this.showSeconds })));
   }
   static get is() { return "ez-date-time-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -57,8 +57,8 @@ export class EzFilterInput {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), 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, mode: this.mode },
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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, mode: this.mode },
       h("ez-icon", { slot: "leftIcon", iconName: "search" })));
   }
   static get is() { return "ez-filter-input"; }

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

@@ -100,10 +100,10 @@ export class EzForm {
       const tabs = allSheets.map((sheet, index) => {
         return { tabKey: sheet.name, label: sheet.label, index };
       });
-      const idTabSelector = `${this._dataElementIdEzForm}_internal_tabSelector`;
+      const idTabSelector = `selector`;
       result.push(h("ez-tabselector", { tabs: this.buildIdTabSelector(tabs), onEzChange: (evt) => this._store.dispatch(changeTab(evt.detail)), selectedTab: currentSheet.name, "data-element-id": idTabSelector }));
     }
-    const idFormSheet = `${this._dataElementIdEzForm}_${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}`;
+    const idFormSheet = `${StringUtils.replaceAccentuatedChars(StringUtils.toCamelCase(currentSheet.label), false)}_selectorContainer`;
     result.push(h(FormSheet, { store: this._store, source: currentSheet, dataElementId: idFormSheet }));
     return result;
   }
@@ -168,7 +168,7 @@ export class EzForm {
     this._staticFields = Array.from(this._element.querySelectorAll("[data-field-name]"));
     this.processMetadata();
     const dataInfo = { dataUnit: this.dataUnit };
-    this._dataElementIdEzForm = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
   }
   componentDidRender() {
     this._dataBinder.bind(Array.from(this._element.querySelectorAll("[data-field-name]")));
@@ -181,7 +181,7 @@ export class EzForm {
   }
   buildIdTabSelector(tabs) {
     if (tabs) {
-      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
+      tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = StringUtils.toCamelCase(tab.label));
     }
     return tabs;
   }

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

@@ -3,7 +3,7 @@ import { buildField } from "../fieldbuilder/FieldBuilder";
 export const FormItem = ({ source }) => {
   if ("items" in source) {
     const fieldSet = source;
-    return h("ez-collapsible-box", { label: source.label, "header-size": "large" }, fieldSet.items.map(fi => buildField(fi)));
+    return h("ez-collapsible-box", { label: source.label, "header-size": "large", key: source.label }, fieldSet.items.map(fi => buildField(fi)));
   }
   else {
     return buildField(source);

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

@@ -152,9 +152,9 @@ export class EzGrid {
   }
   buildDataElementId() {
     const dataInfo = { dataUnit: this.dataUnit };
-    const dataElementIdEzGrid = ElementIDUtils.addIDInfo(this._element, null, dataInfo);
-    const dtInfo = { id: `${dataElementIdEzGrid}_ezGrid_pagination` };
-    ElementIDUtils.addIDInfo(this._refPaginationControl, null, dtInfo);
+    ElementIDUtils.addIDInfo(this._element, null, dataInfo);
+    const dtInfo = { id: "ezGrid" };
+    ElementIDUtils.addIDInfo(this._refPaginationControl, "pagination", dtInfo);
   }
   previousPage() {
     if (this.dataUnit) {

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

@@ -1,5 +1,5 @@
-import { StringUtils } from "@sankhyalabs/core";
-import { Component, h, Host, Prop } from "@stencil/core";
+import { ElementIDUtils, StringUtils } from "@sankhyalabs/core";
+import { Component, Element, h, Host, Prop } from "@stencil/core";
 export class EzIcon {
   constructor() {
     /**
@@ -25,6 +25,9 @@ export class EzIcon {
       return h("img", { class: this.size, src: this.href });
     }
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElement, "icon");
+  }
   render() {
     return (h(Host, null, this.getIconContent()));
   }
@@ -90,4 +93,5 @@ export class EzIcon {
       "reflect": true
     }
   }; }
+  static get elementRef() { return "_hostElement"; }
 }

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

@@ -1,3 +1,4 @@
+import { ElementIDUtils } from "@sankhyalabs/core";
 import { Component, Event, h, Host, Method, Prop, State } from "@stencil/core";
 ;
 ;
@@ -159,6 +160,9 @@ export class EzList {
   componentWillRender() {
     this.createList();
   }
+  componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._element);
+  }
   onDrop(ev, dragEndItem) {
     this.removeOverClass();
     this.setSelection(undefined);

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

@@ -126,8 +126,8 @@ export class EzNumberInput {
     this.setInputValue();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), 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 }));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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 }));
   }
   static get is() { return "ez-number-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class EzRadioButton {
     return (h(Host, null,
       this.label && h("label", { class: "label" }, this.label),
       h("div", { class: "form form--" + this.direction }, this._options.map((option, key) => h("div", { class: "form__group" },
-        h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value }),
+        h("input", { id: "rad" + key, class: "form__radio", name: "theradio", type: "radio", value: option.value, onChange: (ev) => { this.handleInputChange(ev); }, disabled: !this.enabled, checked: option.value === this.value, "data-element-id": ElementIDUtils.getInternalIDInfo(`input_${option.value}`) }),
         h("label", { htmlFor: "rad" + key, class: "form__label" }, option.label))))));
   }
   static get is() { return "ez-radio-button"; }

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

@@ -64,8 +64,8 @@ export class EzSearch {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "combo"), 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 }));
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    return (h("ez-combo-box", { "data-element-id": ElementIDUtils.getInternalIDInfo("combo"), 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 }));
   }
   ;
   static get is() { return "ez-search"; }

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

@@ -67,7 +67,6 @@ export class EzTabselector {
     this.setFocusedBtn(false, tab.index);
   }
   componentWillRender() {
-    ElementIDUtils.addIDInfo(this._hostElem);
     if (!this._processedTabs) {
       this._processedTabs = [];
       if (this.tabs) {
@@ -99,10 +98,12 @@ export class EzTabselector {
     this.updateScroll();
   }
   componentDidLoad() {
+    ElementIDUtils.addIDInfo(this._hostElem, "itemsSelector");
     this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
-      const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
-      const dataInfo = { id: `${elemIdTabSelector}_${StringUtils.toCamelCase(elem.id)}` };
-      ElementIDUtils.addIDInfo(elem, null, dataInfo);
+      var _a;
+      const label = (_a = elem.querySelector('span.tab-label')) === null || _a === void 0 ? void 0 : _a.innerText;
+      const dataInfo = { id: `${StringUtils.toCamelCase(label)}` };
+      ElementIDUtils.addIDInfo(elem, "itemSelector", dataInfo);
     });
   }
   handleSlotChange(ev) {

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

@@ -136,13 +136,13 @@ export class EzTextArea {
     this.observeMode();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null,
       h("div", { class: "textarea", ref: (el) => this._container = el },
         this.label && this.mode != "slim" ?
           h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "textarea__label" : "textarea__label textarea__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
           : null,
-        h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
+        h("textarea", { onFocus: () => this.handleFocus(), "data-element-id": ElementIDUtils.getInternalIDInfo("input"), ref: (el) => this._inputElem = el, value: this.value, disabled: !this.enabled, class: this.mode === "slim" ? "textarea--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); }, onKeyDown: event => event.stopPropagation(), rows: this.rows })),
       this.canShowError && this.mode != "slim" &&
         h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
   }

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

@@ -81,10 +81,10 @@ export class EzTextEdit {
     this.setStyledInput();
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
     return (h(Host, null,
       h("span", { class: "text-edit__hidden-value", ref: elem => this._valueBasis = elem }),
-      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), 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 }),
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), 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 }),
       h("ez-button", { class: "text-edit__icon-check", mode: "icon", iconName: "check", size: "small", onClick: () => { this.handleSaveEdition(); } }),
       h("ez-button", { class: "text-edit__icon-close", mode: "icon", iconName: "close", size: "small", onClick: () => { this.cancelEdition.emit(); } })));
   }

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

@@ -223,13 +223,13 @@ export class EzTextInput {
     }
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
     return (h(Host, null,
       h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
       this.label && this.mode != "slim" ?
         h("label", { ref: (el) => this._labelElem = el, class: this.enabled ? "input__label" : "input__label input__label--disabled", onClick: () => this._inputElem.focus(), title: this.label }, this.label)
         : null,
-      h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
+      h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: "text", class: this.mode === "slim" ? "input--slim" : "", placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.value, disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }),
       h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
       this.canShowError && this.mode != "slim" &&
         h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));

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

@@ -142,9 +142,9 @@ export class EzTimeInput {
     }
   }
   render() {
-    let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
+    ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
     return (h(Host, null,
-      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo(elementId, "textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode },
+      h("ez-text-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (el) => this._textInput = el, "data-slave-mode": "true", value: this._viewValue, enabled: this.enabled, label: this.label, restrict: "0123456789:", onBlur: () => this.handleBlur(), onInput: () => this.handleInput(), errorMessage: this.errorMessage, mode: this.mode },
         h("ez-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
   }
   static get is() { return "ez-time-input"; }