@sankhyalabs/ezui 2.2.3 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ez-chip.cjs.entry.js +1 -1
- package/dist/cjs/ez-combo-box.cjs.entry.js +2 -7
- package/dist/cjs/ez-date-input.cjs.entry.js +2 -10
- package/dist/cjs/ez-date-time-input.cjs.entry.js +2 -10
- package/dist/cjs/ez-filter-input.cjs.entry.js +2 -7
- package/dist/cjs/ez-form.cjs.entry.js +1 -1
- package/dist/cjs/ez-number-input.cjs.entry.js +2 -7
- package/dist/cjs/ez-search.cjs.entry.js +2 -7
- package/dist/cjs/ez-tabselector.cjs.entry.js +4 -4
- package/dist/cjs/ez-text-area.cjs.entry.js +2 -7
- package/dist/cjs/ez-text-edit.cjs.entry.js +2 -7
- package/dist/cjs/ez-text-input.cjs.entry.js +2 -7
- package/dist/cjs/ez-time-input.cjs.entry.js +2 -7
- package/dist/collection/components/ez-chip/ez-chip.js +1 -1
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +2 -7
- package/dist/collection/components/ez-date-input/ez-date-input.js +3 -11
- package/dist/collection/components/ez-date-time-input/ez-date-time-input.js +3 -11
- package/dist/collection/components/ez-filter-input/ez-filter-input.js +2 -7
- package/dist/collection/components/ez-form/ez-form.js +1 -1
- package/dist/collection/components/ez-number-input/ez-number-input.js +2 -7
- package/dist/collection/components/ez-search/ez-search.js +2 -7
- package/dist/collection/components/ez-tabselector/ez-tabselector.js +4 -4
- package/dist/collection/components/ez-text-area/ez-text-area.js +2 -7
- package/dist/collection/components/ez-text-edit/ez-text-edit.js +2 -7
- package/dist/collection/components/ez-text-input/ez-text-input.js +2 -7
- package/dist/collection/components/ez-time-input/ez-time-input.js +2 -7
- package/dist/custom-elements/index.js +26 -82
- package/dist/esm/ez-chip.entry.js +1 -1
- package/dist/esm/ez-combo-box.entry.js +2 -7
- package/dist/esm/ez-date-input.entry.js +2 -10
- package/dist/esm/ez-date-time-input.entry.js +2 -10
- package/dist/esm/ez-filter-input.entry.js +2 -7
- package/dist/esm/ez-form.entry.js +1 -1
- package/dist/esm/ez-number-input.entry.js +2 -7
- package/dist/esm/ez-search.entry.js +2 -7
- package/dist/esm/ez-tabselector.entry.js +4 -4
- package/dist/esm/ez-text-area.entry.js +2 -7
- package/dist/esm/ez-text-edit.entry.js +2 -7
- package/dist/esm/ez-text-input.entry.js +2 -7
- package/dist/esm/ez-time-input.entry.js +2 -7
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/{p-b484a0b3.entry.js → p-0fb5f4be.entry.js} +1 -1
- package/dist/ezui/p-66ebdf34.entry.js +1 -0
- package/dist/ezui/p-6bcf35fd.entry.js +1 -0
- package/dist/ezui/{p-587e8dca.entry.js → p-72d755a8.entry.js} +1 -1
- package/dist/ezui/p-7cf71eb3.entry.js +1 -0
- package/dist/ezui/{p-107aff56.entry.js → p-81fb0c90.entry.js} +1 -1
- package/dist/ezui/p-855f99f8.entry.js +1 -0
- package/dist/ezui/{p-8eae779b.entry.js → p-941d9bf9.entry.js} +1 -1
- package/dist/ezui/p-ac15d77e.entry.js +1 -0
- package/dist/ezui/p-c2ebc450.entry.js +1 -0
- package/dist/ezui/p-ca9a0a49.entry.js +1 -0
- package/dist/ezui/{p-a595dd4e.entry.js → p-cba61296.entry.js} +1 -1
- package/dist/ezui/p-f4d2438e.entry.js +1 -0
- package/package.json +2 -2
- package/dist/ezui/p-019c7fc4.entry.js +0 -1
- package/dist/ezui/p-4b2595f4.entry.js +0 -1
- package/dist/ezui/p-6a8e7fb2.entry.js +0 -1
- package/dist/ezui/p-74e6c2a9.entry.js +0 -1
- package/dist/ezui/p-7b8d1f1c.entry.js +0 -1
- package/dist/ezui/p-c55f63c6.entry.js +0 -1
- package/dist/ezui/p-dff2b725.entry.js +0 -1
- package/dist/ezui/p-fe578dc0.entry.js +0 -1
|
@@ -826,7 +826,7 @@ let EzChip$1 = class extends HTMLElement$1 {
|
|
|
826
826
|
if (this._containerElem) {
|
|
827
827
|
this.observeValue();
|
|
828
828
|
this.observeEnabled();
|
|
829
|
-
this._containerElem.setAttribute(
|
|
829
|
+
this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, 'ezChip_internal_button');
|
|
830
830
|
ElementIDUtils.addIDInfo(this._containerElem);
|
|
831
831
|
}
|
|
832
832
|
}
|
|
@@ -1331,12 +1331,6 @@ let EzComboBox$1 = class extends HTMLElement$1 {
|
|
|
1331
1331
|
componentDidLoad() {
|
|
1332
1332
|
CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
|
|
1333
1333
|
this.setInputValue(false);
|
|
1334
|
-
if (this.el) {
|
|
1335
|
-
ElementIDUtils.addIDInfo(this.el, 'input');
|
|
1336
|
-
if (this._textInput) {
|
|
1337
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this.el.getAttribute("data-element-id") });
|
|
1338
|
-
}
|
|
1339
|
-
}
|
|
1340
1334
|
}
|
|
1341
1335
|
//---------------------------------------------
|
|
1342
1336
|
// Event handlers
|
|
@@ -1429,7 +1423,8 @@ let EzComboBox$1 = class extends HTMLElement$1 {
|
|
|
1429
1423
|
}
|
|
1430
1424
|
render() {
|
|
1431
1425
|
var _a;
|
|
1432
|
-
|
|
1426
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
|
|
1427
|
+
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("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)
|
|
1433
1428
|
? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
|
|
1434
1429
|
: undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
|
|
1435
1430
|
&& h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
|
|
@@ -1588,18 +1583,10 @@ let EzDateInput$1 = class extends HTMLElement$1 {
|
|
|
1588
1583
|
componentDidLoad() {
|
|
1589
1584
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
1590
1585
|
this.setInputValue();
|
|
1591
|
-
if (this._elem) {
|
|
1592
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
1593
|
-
if (this._textInput) {
|
|
1594
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
1595
|
-
}
|
|
1596
|
-
if (this._calendar) {
|
|
1597
|
-
ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
|
|
1598
|
-
}
|
|
1599
|
-
}
|
|
1600
1586
|
}
|
|
1601
1587
|
render() {
|
|
1602
|
-
|
|
1588
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
1589
|
+
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("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 })));
|
|
1603
1590
|
}
|
|
1604
1591
|
get _elem() { return this; }
|
|
1605
1592
|
static get watchers() { return {
|
|
@@ -1803,18 +1790,10 @@ let EzDateTimeInput$1 = class extends HTMLElement$1 {
|
|
|
1803
1790
|
componentDidLoad() {
|
|
1804
1791
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
1805
1792
|
this.setInputValue();
|
|
1806
|
-
if (this._elem) {
|
|
1807
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
1808
|
-
if (this._textInput) {
|
|
1809
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
1810
|
-
}
|
|
1811
|
-
if (this._calendar) {
|
|
1812
|
-
ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
|
|
1813
|
-
}
|
|
1814
|
-
}
|
|
1815
1793
|
}
|
|
1816
1794
|
render() {
|
|
1817
|
-
|
|
1795
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
1796
|
+
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("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 })));
|
|
1818
1797
|
}
|
|
1819
1798
|
get _elem() { return this; }
|
|
1820
1799
|
static get watchers() { return {
|
|
@@ -2026,15 +2005,10 @@ let EzFilterInput$1 = class extends HTMLElement$1 {
|
|
|
2026
2005
|
}
|
|
2027
2006
|
componentDidLoad() {
|
|
2028
2007
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
2029
|
-
if (this._elem) {
|
|
2030
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
2031
|
-
if (this._textInput) {
|
|
2032
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
2033
|
-
}
|
|
2034
|
-
}
|
|
2035
2008
|
}
|
|
2036
2009
|
render() {
|
|
2037
|
-
|
|
2010
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
2011
|
+
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, loading: this.loading, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
|
|
2038
2012
|
}
|
|
2039
2013
|
get _elem() { return this; }
|
|
2040
2014
|
static get watchers() { return {
|
|
@@ -3064,7 +3038,7 @@ let EzForm$1 = class extends HTMLElement$1 {
|
|
|
3064
3038
|
}
|
|
3065
3039
|
buildIdTabSelector(tabs) {
|
|
3066
3040
|
if (tabs) {
|
|
3067
|
-
tabs.forEach(tab => tab[
|
|
3041
|
+
tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils$1.toCamelCase(tab.label)}`);
|
|
3068
3042
|
}
|
|
3069
3043
|
return tabs;
|
|
3070
3044
|
}
|
|
@@ -119284,15 +119258,10 @@ let EzNumberInput$1 = class extends HTMLElement$1 {
|
|
|
119284
119258
|
componentDidLoad() {
|
|
119285
119259
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
119286
119260
|
this.setInputValue();
|
|
119287
|
-
if (this._elem) {
|
|
119288
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
119289
|
-
if (this._textInput) {
|
|
119290
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
119291
|
-
}
|
|
119292
|
-
}
|
|
119293
119261
|
}
|
|
119294
119262
|
render() {
|
|
119295
|
-
|
|
119263
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
119264
|
+
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 }));
|
|
119296
119265
|
}
|
|
119297
119266
|
get _elem() { return this; }
|
|
119298
119267
|
static get watchers() { return {
|
|
@@ -119788,15 +119757,10 @@ let EzSearch$1 = class extends HTMLElement$1 {
|
|
|
119788
119757
|
}
|
|
119789
119758
|
componentDidLoad() {
|
|
119790
119759
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
|
|
119791
|
-
if (this._elem) {
|
|
119792
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
119793
|
-
if (this._comboElement) {
|
|
119794
|
-
ElementIDUtils.addIDInfo(this._comboElement, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
119795
|
-
}
|
|
119796
|
-
}
|
|
119797
119760
|
}
|
|
119798
119761
|
render() {
|
|
119799
|
-
|
|
119762
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
119763
|
+
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 }));
|
|
119800
119764
|
}
|
|
119801
119765
|
;
|
|
119802
119766
|
get _elem() { return this; }
|
|
@@ -119913,7 +119877,7 @@ let EzTabselector$1 = class extends HTMLElement$1 {
|
|
|
119913
119877
|
}
|
|
119914
119878
|
componentDidLoad() {
|
|
119915
119879
|
this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
|
|
119916
|
-
const elemIdTabSelector = this._hostElem.getAttribute(
|
|
119880
|
+
const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
|
|
119917
119881
|
const dataInfo = { id: `${elemIdTabSelector}_${StringUtils$1.toCamelCase(elem.id)}` };
|
|
119918
119882
|
ElementIDUtils.addIDInfo(elem, null, dataInfo);
|
|
119919
119883
|
});
|
|
@@ -120005,10 +119969,10 @@ let EzTabselector$1 = class extends HTMLElement$1 {
|
|
|
120005
119969
|
}
|
|
120006
119970
|
buildElementIdTab(tabs) {
|
|
120007
119971
|
tabs.forEach(tab => {
|
|
120008
|
-
if (!tab.hasOwnProperty(
|
|
120009
|
-
const elemIdTabSelector = this._hostElem.getAttribute(
|
|
119972
|
+
if (!tab.hasOwnProperty(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
|
|
119973
|
+
const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
|
|
120010
119974
|
const dataElementID = `${elemIdTabSelector}_${StringUtils$1.toCamelCase(tab.tabKey)}`;
|
|
120011
|
-
tab[
|
|
119975
|
+
tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
|
|
120012
119976
|
}
|
|
120013
119977
|
});
|
|
120014
119978
|
}
|
|
@@ -120171,17 +120135,12 @@ let EzTextArea$1 = class extends HTMLElement$1 {
|
|
|
120171
120135
|
this.observeErrorMessage();
|
|
120172
120136
|
this.adjustFloatingLabel();
|
|
120173
120137
|
this.observeMode();
|
|
120174
|
-
if (this._hostElement) {
|
|
120175
|
-
ElementIDUtils.addIDInfo(this._hostElement, 'input');
|
|
120176
|
-
if (this._inputElem) {
|
|
120177
|
-
ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
|
|
120178
|
-
}
|
|
120179
|
-
}
|
|
120180
120138
|
}
|
|
120181
120139
|
render() {
|
|
120140
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
120182
120141
|
return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
|
|
120183
120142
|
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)
|
|
120184
|
-
: null, h("textarea", { onFocus: () => this.handleFocus(), 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" &&
|
|
120143
|
+
: 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 })), this.canShowError && this.mode != "slim" &&
|
|
120185
120144
|
h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
120186
120145
|
}
|
|
120187
120146
|
get _hostElement() { return this; }
|
|
@@ -120278,18 +120237,13 @@ let EzTextEdit$1 = class extends HTMLElement$1 {
|
|
|
120278
120237
|
componentDidLoad() {
|
|
120279
120238
|
this.applyFocusSelect();
|
|
120280
120239
|
this.setNewValue(this.value);
|
|
120281
|
-
if (this._element) {
|
|
120282
|
-
ElementIDUtils.addIDInfo(this._element, 'input');
|
|
120283
|
-
if (this._inputElement) {
|
|
120284
|
-
ElementIDUtils.addIDInfo(this._inputElement, 'internal_input', { id: this._element.getAttribute("data-element-id") });
|
|
120285
|
-
}
|
|
120286
|
-
}
|
|
120287
120240
|
}
|
|
120288
120241
|
componentDidRender() {
|
|
120289
120242
|
this.setStyledInput();
|
|
120290
120243
|
}
|
|
120291
120244
|
render() {
|
|
120292
|
-
|
|
120245
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
|
|
120246
|
+
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-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(); } })));
|
|
120293
120247
|
}
|
|
120294
120248
|
get _element() { return this; }
|
|
120295
120249
|
static get style() { return ezTextEditCss; }
|
|
@@ -120505,12 +120459,6 @@ let EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
120505
120459
|
this.observeMask();
|
|
120506
120460
|
this.adjustFloatingLabel();
|
|
120507
120461
|
this.adjustBorderInput();
|
|
120508
|
-
if (this._hostElement) {
|
|
120509
|
-
ElementIDUtils.addIDInfo(this._hostElement, 'input');
|
|
120510
|
-
if (this._inputElem) {
|
|
120511
|
-
ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
|
|
120512
|
-
}
|
|
120513
|
-
}
|
|
120514
120462
|
}
|
|
120515
120463
|
componentWillLoad() {
|
|
120516
120464
|
this.observeMask();
|
|
@@ -120530,9 +120478,10 @@ let EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
120530
120478
|
}
|
|
120531
120479
|
}
|
|
120532
120480
|
render() {
|
|
120481
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
120533
120482
|
return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
|
|
120534
120483
|
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)
|
|
120535
|
-
: null, h("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" &&
|
|
120484
|
+
: 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("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
|
|
120536
120485
|
h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
120537
120486
|
}
|
|
120538
120487
|
get _hostElement() { return this; }
|
|
@@ -120682,12 +120631,6 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
|
|
|
120682
120631
|
//---------------------------------------------
|
|
120683
120632
|
componentDidLoad() {
|
|
120684
120633
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
120685
|
-
if (this._elem) {
|
|
120686
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
120687
|
-
if (this._textInput) {
|
|
120688
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
120689
|
-
}
|
|
120690
|
-
}
|
|
120691
120634
|
}
|
|
120692
120635
|
componentWillLoad() {
|
|
120693
120636
|
this.observeShowSeconds();
|
|
@@ -120699,7 +120642,8 @@ let EzTimeInput$1 = class extends HTMLElement$1 {
|
|
|
120699
120642
|
}
|
|
120700
120643
|
}
|
|
120701
120644
|
render() {
|
|
120702
|
-
|
|
120645
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
120646
|
+
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-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
|
|
120703
120647
|
}
|
|
120704
120648
|
static get assetsDirs() { return ["../assets"]; }
|
|
120705
120649
|
get _elem() { return this; }
|
|
@@ -92,7 +92,7 @@ let EzChip = class {
|
|
|
92
92
|
if (this._containerElem) {
|
|
93
93
|
this.observeValue();
|
|
94
94
|
this.observeEnabled();
|
|
95
|
-
this._containerElem.setAttribute(
|
|
95
|
+
this._containerElem.setAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME, 'ezChip_internal_button');
|
|
96
96
|
ElementIDUtils.addIDInfo(this._containerElem);
|
|
97
97
|
}
|
|
98
98
|
}
|
|
@@ -355,12 +355,6 @@ let EzComboBox = class {
|
|
|
355
355
|
componentDidLoad() {
|
|
356
356
|
CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
|
|
357
357
|
this.setInputValue(false);
|
|
358
|
-
if (this.el) {
|
|
359
|
-
ElementIDUtils.addIDInfo(this.el, 'input');
|
|
360
|
-
if (this._textInput) {
|
|
361
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this.el.getAttribute("data-element-id") });
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
358
|
}
|
|
365
359
|
//---------------------------------------------
|
|
366
360
|
// Event handlers
|
|
@@ -453,7 +447,8 @@ let EzComboBox = class {
|
|
|
453
447
|
}
|
|
454
448
|
render() {
|
|
455
449
|
var _a;
|
|
456
|
-
|
|
450
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
|
|
451
|
+
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("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)
|
|
457
452
|
? h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, h("ez-icon", { iconName: "close" }))
|
|
458
453
|
: undefined), h("section", { class: "list-container", ref: elem => this._listContainer = elem }, h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, h("div", { class: "list-options", ref: elem => this._optionsList = elem }, this._visibleOptions.length === 0
|
|
459
454
|
&& h("div", { class: "message" }, !this._showLoading && h("span", { class: "message__no-result" }, this._textEmptyList), this._showLoading && h("div", { class: "message__loading" })), this.showOptionValue
|
|
@@ -138,18 +138,10 @@ let EzDateInput = class {
|
|
|
138
138
|
componentDidLoad() {
|
|
139
139
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
140
140
|
this.setInputValue();
|
|
141
|
-
if (this._elem) {
|
|
142
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
143
|
-
if (this._textInput) {
|
|
144
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
145
|
-
}
|
|
146
|
-
if (this._calendar) {
|
|
147
|
-
ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
141
|
}
|
|
151
142
|
render() {
|
|
152
|
-
|
|
143
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
144
|
+
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("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 })));
|
|
153
145
|
}
|
|
154
146
|
get _elem() { return getElement(this); }
|
|
155
147
|
static get watchers() { return {
|
|
@@ -193,18 +193,10 @@ let EzDateTimeInput = class {
|
|
|
193
193
|
componentDidLoad() {
|
|
194
194
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
195
195
|
this.setInputValue();
|
|
196
|
-
if (this._elem) {
|
|
197
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
198
|
-
if (this._textInput) {
|
|
199
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
200
|
-
}
|
|
201
|
-
if (this._calendar) {
|
|
202
|
-
ElementIDUtils.addIDInfo(this._calendar, 'internal_calendar', { id: this._elem.getAttribute("data-element-id") });
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
196
|
}
|
|
206
197
|
render() {
|
|
207
|
-
|
|
198
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
199
|
+
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("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 })));
|
|
208
200
|
}
|
|
209
201
|
get _elem() { return getElement(this); }
|
|
210
202
|
static get watchers() { return {
|
|
@@ -60,15 +60,10 @@ let EzFilterInput = class {
|
|
|
60
60
|
}
|
|
61
61
|
componentDidLoad() {
|
|
62
62
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
63
|
-
if (this._elem) {
|
|
64
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
65
|
-
if (this._textInput) {
|
|
66
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
63
|
}
|
|
70
64
|
render() {
|
|
71
|
-
|
|
65
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
66
|
+
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, loading: this.loading, mode: this.mode }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
|
|
72
67
|
}
|
|
73
68
|
get _elem() { return getElement(this); }
|
|
74
69
|
static get watchers() { return {
|
|
@@ -1022,7 +1022,7 @@ let EzForm = class {
|
|
|
1022
1022
|
}
|
|
1023
1023
|
buildIdTabSelector(tabs) {
|
|
1024
1024
|
if (tabs) {
|
|
1025
|
-
tabs.forEach(tab => tab[
|
|
1025
|
+
tabs.forEach(tab => tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = `${this._dataElementIdEzForm}_${StringUtils.toCamelCase(tab.label)}`);
|
|
1026
1026
|
}
|
|
1027
1027
|
return tabs;
|
|
1028
1028
|
}
|
|
@@ -133,15 +133,10 @@ let EzNumberInput = class {
|
|
|
133
133
|
componentDidLoad() {
|
|
134
134
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
135
135
|
this.setInputValue();
|
|
136
|
-
if (this._elem) {
|
|
137
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
138
|
-
if (this._textInput) {
|
|
139
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
136
|
}
|
|
143
137
|
render() {
|
|
144
|
-
|
|
138
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
139
|
+
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 }));
|
|
145
140
|
}
|
|
146
141
|
get _elem() { return getElement(this); }
|
|
147
142
|
static get watchers() { return {
|
|
@@ -68,15 +68,10 @@ let EzSearch = class {
|
|
|
68
68
|
}
|
|
69
69
|
componentDidLoad() {
|
|
70
70
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._comboElement);
|
|
71
|
-
if (this._elem) {
|
|
72
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
73
|
-
if (this._comboElement) {
|
|
74
|
-
ElementIDUtils.addIDInfo(this._comboElement, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
71
|
}
|
|
78
72
|
render() {
|
|
79
|
-
|
|
73
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
74
|
+
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 }));
|
|
80
75
|
}
|
|
81
76
|
;
|
|
82
77
|
get _elem() { return getElement(this); }
|
|
@@ -105,7 +105,7 @@ let EzTabselector = class {
|
|
|
105
105
|
}
|
|
106
106
|
componentDidLoad() {
|
|
107
107
|
this._hostElem.shadowRoot.querySelectorAll('button[name="tab-button"]').forEach((elem) => {
|
|
108
|
-
const elemIdTabSelector = this._hostElem.getAttribute(
|
|
108
|
+
const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
|
|
109
109
|
const dataInfo = { id: `${elemIdTabSelector}_${StringUtils.toCamelCase(elem.id)}` };
|
|
110
110
|
ElementIDUtils.addIDInfo(elem, null, dataInfo);
|
|
111
111
|
});
|
|
@@ -197,10 +197,10 @@ let EzTabselector = class {
|
|
|
197
197
|
}
|
|
198
198
|
buildElementIdTab(tabs) {
|
|
199
199
|
tabs.forEach(tab => {
|
|
200
|
-
if (!tab.hasOwnProperty(
|
|
201
|
-
const elemIdTabSelector = this._hostElem.getAttribute(
|
|
200
|
+
if (!tab.hasOwnProperty(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME)) {
|
|
201
|
+
const elemIdTabSelector = this._hostElem.getAttribute(ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME);
|
|
202
202
|
const dataElementID = `${elemIdTabSelector}_${StringUtils.toCamelCase(tab.tabKey)}`;
|
|
203
|
-
tab[
|
|
203
|
+
tab[ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME] = dataElementID;
|
|
204
204
|
}
|
|
205
205
|
});
|
|
206
206
|
}
|
|
@@ -139,17 +139,12 @@ let EzTextArea = class {
|
|
|
139
139
|
this.observeErrorMessage();
|
|
140
140
|
this.adjustFloatingLabel();
|
|
141
141
|
this.observeMode();
|
|
142
|
-
if (this._hostElement) {
|
|
143
|
-
ElementIDUtils.addIDInfo(this._hostElement, 'input');
|
|
144
|
-
if (this._inputElem) {
|
|
145
|
-
ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
142
|
}
|
|
149
143
|
render() {
|
|
144
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
150
145
|
return (h(Host, null, h("div", { class: "textarea", ref: (el) => this._container = el }, this.label && this.mode != "slim" ?
|
|
151
146
|
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)
|
|
152
|
-
: null, h("textarea", { onFocus: () => this.handleFocus(), 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" &&
|
|
147
|
+
: 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 })), this.canShowError && this.mode != "slim" &&
|
|
153
148
|
h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
154
149
|
}
|
|
155
150
|
get _hostElement() { return getElement(this); }
|
|
@@ -86,18 +86,13 @@ let EzTextEdit = class {
|
|
|
86
86
|
componentDidLoad() {
|
|
87
87
|
this.applyFocusSelect();
|
|
88
88
|
this.setNewValue(this.value);
|
|
89
|
-
if (this._element) {
|
|
90
|
-
ElementIDUtils.addIDInfo(this._element, 'input');
|
|
91
|
-
if (this._inputElement) {
|
|
92
|
-
ElementIDUtils.addIDInfo(this._inputElement, 'internal_input', { id: this._element.getAttribute("data-element-id") });
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
89
|
}
|
|
96
90
|
componentDidRender() {
|
|
97
91
|
this.setStyledInput();
|
|
98
92
|
}
|
|
99
93
|
render() {
|
|
100
|
-
|
|
94
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._element, 'input');
|
|
95
|
+
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-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(); } })));
|
|
101
96
|
}
|
|
102
97
|
get _element() { return getElement(this); }
|
|
103
98
|
};
|
|
@@ -209,12 +209,6 @@ let EzTextInput = class {
|
|
|
209
209
|
this.observeMask();
|
|
210
210
|
this.adjustFloatingLabel();
|
|
211
211
|
this.adjustBorderInput();
|
|
212
|
-
if (this._hostElement) {
|
|
213
|
-
ElementIDUtils.addIDInfo(this._hostElement, 'input');
|
|
214
|
-
if (this._inputElem) {
|
|
215
|
-
ElementIDUtils.addIDInfo(this._inputElem, 'internal_input', { id: this._hostElement.getAttribute("data-element-id") });
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
212
|
}
|
|
219
213
|
componentWillLoad() {
|
|
220
214
|
this.observeMask();
|
|
@@ -234,9 +228,10 @@ let EzTextInput = class {
|
|
|
234
228
|
}
|
|
235
229
|
}
|
|
236
230
|
render() {
|
|
231
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
237
232
|
return (h(Host, null, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
|
|
238
233
|
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)
|
|
239
|
-
: null, h("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" &&
|
|
234
|
+
: 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("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.canShowError && this.mode != "slim" &&
|
|
240
235
|
h("span", { class: "message-box", ref: (el) => this._messageBoxElem = el, title: this.errorMessage }, this.errorMessage)));
|
|
241
236
|
}
|
|
242
237
|
get _hostElement() { return getElement(this); }
|
|
@@ -138,12 +138,6 @@ let EzTimeInput = class {
|
|
|
138
138
|
//---------------------------------------------
|
|
139
139
|
componentDidLoad() {
|
|
140
140
|
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
141
|
-
if (this._elem) {
|
|
142
|
-
ElementIDUtils.addIDInfo(this._elem, 'input');
|
|
143
|
-
if (this._textInput) {
|
|
144
|
-
ElementIDUtils.addIDInfo(this._textInput, 'internal_input', { id: this._elem.getAttribute("data-element-id") });
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
141
|
}
|
|
148
142
|
componentWillLoad() {
|
|
149
143
|
this.observeShowSeconds();
|
|
@@ -155,7 +149,8 @@ let EzTimeInput = class {
|
|
|
155
149
|
}
|
|
156
150
|
}
|
|
157
151
|
render() {
|
|
158
|
-
|
|
152
|
+
let elementId = ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
153
|
+
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-icon", { slot: "leftIcon", iconName: "timer-outline" }))));
|
|
159
154
|
}
|
|
160
155
|
static get assetsDirs() { return ["../assets"]; }
|
|
161
156
|
get _elem() { return getElement(this); }
|
package/dist/ezui/ezui.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-3c7ea91b.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-8c2105a5",[[1,"ez-actions-button",{enabled:[516],actions:[1040],size:[513],showLabel:[516,"show-label"],displayIcon:[513,"display-icon"],checkOption:[516,"check-option"],value:[513],isTransparent:[516,"is-transparent"],arrowActive:[516,"arrow-active"],_selectedAction:[32],hideActions:[64],isOpened:[64]}]]],["p-f6afdc4d",[[1,"ez-dialog",{confirm:[1028],dialogType:[1025,"dialog-type"],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],handleButtonClick:[64],show:[64]}]]],["p-
|
|
1
|
+
import{p as e,b as o}from"./p-3c7ea91b.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-8c2105a5",[[1,"ez-actions-button",{enabled:[516],actions:[1040],size:[513],showLabel:[516,"show-label"],displayIcon:[513,"display-icon"],checkOption:[516,"check-option"],value:[513],isTransparent:[516,"is-transparent"],arrowActive:[516,"arrow-active"],_selectedAction:[32],hideActions:[64],isOpened:[64]}]]],["p-f6afdc4d",[[1,"ez-dialog",{confirm:[1028],dialogType:[1025,"dialog-type"],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],handleButtonClick:[64],show:[64]}]]],["p-855f99f8",[[1,"ez-filter-input",{label:[1],value:[1537],enabled:[4],loading:[516],errorMessage:[1537,"error-message"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-77b7b623",[[6,"ez-grid",{multipleSelection:[4,"multiple-selection"],config:[1040],serverUrl:[1,"server-url"],dataUnit:[16],statusResolver:[16],_paginationInfo:[32],setColumnsDef:[64],addColumnMenuItem:[64],setColumnsState:[64],setData:[64],getSelection:[64],getColumnsState:[64],getColumns:[64],quickFilter:[64]}]]],["p-def4cd05",[[6,"ez-modal-container",{modalTitle:[1,"modal-title"],modalSubTitle:[1,"modal-sub-title"],showTitleBar:[4,"show-title-bar"],cancelButtonLabel:[1,"cancel-button-label"],okButtonLabel:[1,"ok-button-label"],cancelButtonStatus:[1,"cancel-button-status"],okButtonStatus:[1,"ok-button-status"]}]]],["p-66ebdf34",[[1,"ez-chip",{label:[513],enabled:[516],removePosition:[513,"remove-position"],mode:[513],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-1cc11468",[[0,"ez-application"]]],["p-3cfefc57",[[1,"ez-card-item",{item:[16]}]]],["p-42c6493e",[[1,"ez-list",{dataSource:[1040],useGroups:[1540,"use-groups"],ezDraggable:[1028,"ez-draggable"],ezSelectable:[1028,"ez-selectable"],itemSlotBuilder:[1040],_listItems:[32],_listGroupItems:[32],clearHistory:[64],scrollToTop:[64],setSelection:[64],getSelection:[64],getList:[64]}]]],["p-ed2135a5",[[1,"ez-loading-bar",{_showLoading:[32],hide:[64],show:[64]}]]],["p-7c227b86",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-bffae598",[[1,"ez-popover",{autoClose:[516,"auto-close"],top:[1537],left:[1537],bottom:[1537],right:[1537],boxWidth:[513,"box-width"],opened:[1540],innerElement:[1537,"inner-element"],updatePosition:[64],show:[64],hide:[64]}]]],["p-cfcc23e6",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[1540,"use-header"],heightMode:[1537,"height-mode"],ezTitle:[1,"ez-title"]}]]],["p-e38c4efe",[[1,"ez-radio-button",{value:[1544],options:[1040],enabled:[516],label:[513],direction:[1537]}]]],["p-1ba371a3",[[1,"ez-scroller",{direction:[1],locked:[4],activeShadow:[4,"active-shadow"],isFirefox:[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["p-482c3dd8",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-04fab1e9",[[0,"ez-view-stack",{show:[64],getSelectedIndex:[64]}]]],["p-ac15d77e",[[1,"ez-text-input",{label:[513],value:[1537],enabled:[516],loading:[516],errorMessage:[1537,"error-message"],mask:[1],canShowError:[516,"can-show-error"],restrict:[1],mode:[513],noBorder:[516,"no-border"],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-8c874b58",[[1,"ez-collapsible-box",{value:[1540],label:[513],headerSize:[513,"header-size"],iconPlacement:[513,"icon-placement"],stretchTitle:[516,"stretch-title"],removable:[516],editable:[516],conditionalSave:[16],_activeEditText:[32],showHide:[64],applyFocusTextEdit:[64],cancelEdition:[64]}]]],["p-0fb5f4be",[[1,"ez-search",{value:[1537],label:[1537],enabled:[1540],errorMessage:[1537,"error-message"],optionLoader:[16],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressEmptyOption:[4,"suppress-empty-option"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-c2ebc450",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-7cf71eb3",[[1,"ez-date-time-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-72d755a8",[[1,"ez-time-input",{label:[513],value:[1026],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-941d9bf9",[[1,"ez-number-input",{label:[1],value:[1538],enabled:[4],errorMessage:[1537,"error-message"],precision:[2],prettyPrecision:[2,"pretty-precision"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-f4d2438e",[[1,"ez-tabselector",{selectedIndex:[1538,"selected-index"],selectedTab:[1537,"selected-tab"],tabs:[1],_processedTabs:[32]}]]],["p-6700360e",[[1,"ez-check",{label:[513],value:[1540],enabled:[1540],indeterminate:[4],mode:[513],getMode:[64],setFocus:[64]}]]],["p-6bcf35fd",[[1,"ez-text-area",{label:[513],value:[1537],enabled:[516],loading:[516],errorMessage:[1537,"error-message"],rows:[1538],canShowError:[516,"can-show-error"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-a713a1aa",[[1,"ez-upload",{label:[1],enabled:[4],maxFileSize:[2,"max-file-size"],maxFiles:[2,"max-files"],requestHeaders:[8,"request-headers"],urlUpload:[1,"url-upload"],urlDelete:[1,"url-delete"],value:[1040],addFiles:[64],setFocus:[64],setBlur:[64]}]]],["p-81fb0c90",[[1,"ez-text-edit",{value:[1],styled:[16],_newValue:[32],applyFocusSelect:[64]}]]],["p-ca9a0a49",[[1,"ez-combo-box",{value:[1537],label:[513],enabled:[516],options:[1040],errorMessage:[1537,"error-message"],searchMode:[4,"search-mode"],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressSearch:[4,"suppress-search"],optionLoader:[16],suppressEmptyOption:[4,"suppress-empty-option"],canShowError:[516,"can-show-error"],mode:[513],_preSelection:[32],_visibleOptions:[32],_startLoading:[32],_showLoading:[32],_criteria:[32],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-9d57e44a",[[1,"ez-calendar",{value:[1040],floating:[516],time:[516],showSeconds:[516,"show-seconds"],show:[64],fitVertical:[64],hide:[64]}]]],["p-ec9decf2",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-88d0fc06",[[1,"ez-button",{label:[513],enabled:[516],mode:[513],image:[513],iconName:[513,"icon-name"],size:[513],setFocus:[64],setBlur:[64]}]]],["p-cba61296",[[0,"ez-form",{dataUnit:[1040],config:[16],recordsValidator:[16],submit:[64],cancel:[64],validate:[64]}]]]],e)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as s,c as t,h as e,g as i}from"./p-3c7ea91b.js";import{C as h}from"./p-4a5e37a7.js";import{ElementIDUtils as r}from"@sankhyalabs/core";let o=class{constructor(e){s(this,e),this.ezChange=t(this,"ezChange",7),this.showPopup=t(this,"showPopup",7),this.enabled=!0,this.showSelectedValue=!0,this.showOptionValue=!0,this.suppressEmptyOption=!1,this.mode="regular"}observeErrorMessage(){this._comboElement&&(this._comboElement.errorMessage=this.errorMessage)}observeValue(){this._comboElement&&(this._comboElement.value=this.value)}async setFocus(){this._comboElement.setFocus()}async setBlur(){this._comboElement.setBlur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}onComboChange(s){s.stopPropagation(),this.value=s.detail,this.ezChange.emit(s.detail),this.errorMessage!==this._comboElement.errorMessage&&(this.errorMessage=this._comboElement.errorMessage)}componentDidLoad(){h.applyVarsTextInput(this._elem,this._comboElement)
|
|
1
|
+
import{r as s,c as t,h as e,g as i}from"./p-3c7ea91b.js";import{C as h}from"./p-4a5e37a7.js";import{ElementIDUtils as r}from"@sankhyalabs/core";let o=class{constructor(e){s(this,e),this.ezChange=t(this,"ezChange",7),this.showPopup=t(this,"showPopup",7),this.enabled=!0,this.showSelectedValue=!0,this.showOptionValue=!0,this.suppressEmptyOption=!1,this.mode="regular"}observeErrorMessage(){this._comboElement&&(this._comboElement.errorMessage=this.errorMessage)}observeValue(){this._comboElement&&(this._comboElement.value=this.value)}async setFocus(){this._comboElement.setFocus()}async setBlur(){this._comboElement.setBlur()}async isInvalid(){return"string"==typeof this.errorMessage&&""!==this.errorMessage.trim()}onComboChange(s){s.stopPropagation(),this.value=s.detail,this.ezChange.emit(s.detail),this.errorMessage!==this._comboElement.errorMessage&&(this.errorMessage=this._comboElement.errorMessage)}componentDidLoad(){h.applyVarsTextInput(this._elem,this._comboElement)}render(){let s=r.addIDInfoIfNotExists(this._elem,"input");return e("ez-combo-box",{"data-element-id":r.getInternalIDInfo(s,"combo"),ref:s=>this._comboElement=s,value:this.value,label:this.label,enabled:this.enabled,errorMessage:this.errorMessage,optionLoader:this.optionLoader,searchMode:!0,onEzChange:s=>this.onComboChange(s),showSelectedValue:this.showSelectedValue,showOptionValue:this.showOptionValue,suppressEmptyOption:this.suppressEmptyOption,mode:this.mode})}get _elem(){return i(this)}static get watchers(){return{errorMessage:["observeErrorMessage"],value:["observeValue"]}}};o.style=":host{width:100%}";export{o as ez_search}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,c as l,h as a,g as r}from"./p-3c7ea91b.js";import{ElementIDUtils as i}from"@sankhyalabs/core";let o=class{constructor(a){e(this,a),this.valueChange=l(this,"valueChange",7),this.removeChip=l(this,"removeChip",7),this.actionClick=l(this,"actionClick",7),this.enabled=!0,this.value=!1}async setFocus(){this._labelElem.focus()}async setBlur(){this._labelElem.blur()}handleSlotChange(e){e.target.assignedElements()[0].style.setProperty("--ez-icon--color","var(--ez-icon--color)")}handleValueChange(){this.swichState(),this.valueChange.emit(this.value)}handleClick(e){const l=e.target;if(this.enabled)return"action"===this.mode?this.actionClick.emit():"ez-icon"!==l.tagName.toLowerCase()?this.handleValueChange():l.classList.contains("btn-close")?this.removeChip.emit():void 0}swichState(){this.enabled&&(this.value=!this.value)}formatLabel(){return this.label.length>t.CHAR_LIMIT?this.label.substring(0,t.CHAR_LIMIT)+"...":this.label}observeValue(){this.value&&"action"!==this.mode?this._containerElem.classList.add("label__container--active"):this._containerElem.classList.remove("label__container--active")}observeEnabled(){this.enabled?(this._containerElem.classList.remove("label__container--disabled"),this._labelElem.classList.remove("lbl--disabled"),this._labelElem.classList.remove("cursor-disable")):(this._containerElem.classList.add("label__container--disabled"),this._labelElem.classList.add("lbl--disabled"),this._labelElem.classList.add("cursor-disable"))}componentDidLoad(){this._element&&i.addIDInfo(this._element,"ezChip"),this._containerElem&&(this.observeValue(),this.observeEnabled(),this._containerElem.setAttribute(i.DATA_ELEMENT_ID_ATTRIBUTE_NAME,"ezChip_internal_button"),i.addIDInfo(this._containerElem))}render(){return a("button",{onClick:e=>this.handleClick(e),class:"label__container"+("left"===this.removePosition?" label__container--row-reverse":""),ref:e=>this._containerElem=e},a("div",{class:"label__content"},a("slot",{name:"leftIcon",onSlotchange:e=>{this.handleSlotChange(e)}}),a("label",{class:"lbl "+(this.value?"lbl--active ":""),ref:e=>this._labelElem=e,title:this.label},this.formatLabel()),a("slot",{name:"rightIcon",onSlotchange:e=>{this.handleSlotChange(e)}})),"action"!==this.mode&&this.removePosition&&a("ez-icon",{class:"btn-close",size:"small","icon-name":"close"}))}get _element(){return r(this)}static get watchers(){return{value:["observeValue"],enabled:["observeEnabled"]}}};var t;!function(e){e[e.CHAR_LIMIT=28]="CHAR_LIMIT"}(t||(t={})),o.style=":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}";export{o as ez_chip}
|