@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-81596.1 → 0.0.0-bugfix-dev-KB-87154.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-dropdown_2.cjs.entry.js → ez-dropdown.cjs.entry.js} +0 -61
- package/dist/cjs/ez-search-plus.cjs.entry.js +43 -14
- package/dist/cjs/ez-search-result-list.cjs.entry.js +2 -3
- package/dist/cjs/ez-skeleton.cjs.entry.js +67 -0
- package/dist/cjs/ez-text-input.cjs.entry.js +39 -27
- package/dist/cjs/ez-tooltip.cjs.entry.js +8 -3
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/index-a7b0c73d.js +6 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-search-plus/ez-search-plus.css +1 -1
- package/dist/collection/components/ez-search-plus/ez-search-plus.js +51 -19
- package/dist/collection/components/ez-search-plus/subcomponent/ez-search-result-list/ez-search-result-list.css +4 -10
- package/dist/collection/components/ez-search-plus/subcomponent/ez-search-result-list/ez-search-result-list.js +1 -2
- package/dist/collection/components/ez-text-input/ez-text-input.css +3 -1
- package/dist/collection/components/ez-text-input/ez-text-input.js +40 -26
- package/dist/collection/components/ez-tooltip/ez-tooltip.css +1 -0
- package/dist/collection/components/ez-tooltip/ez-tooltip.js +29 -6
- package/dist/custom-elements/index.js +94 -49
- package/dist/esm/{ez-dropdown_2.entry.js → ez-dropdown.entry.js} +1 -61
- package/dist/esm/ez-search-plus.entry.js +43 -14
- package/dist/esm/ez-search-result-list.entry.js +2 -3
- package/dist/esm/ez-skeleton.entry.js +63 -0
- package/dist/esm/ez-text-input.entry.js +39 -27
- package/dist/esm/ez-tooltip.entry.js +8 -3
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/index-baa5e267.js +6 -2
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-2a0b2c5e.entry.js +1 -0
- package/dist/ezui/p-2b4df33d.entry.js +1 -0
- package/dist/ezui/p-4cf0aaeb.entry.js +1 -0
- package/dist/ezui/{p-3176a6ef.entry.js → p-61ac2054.entry.js} +1 -1
- package/dist/ezui/p-6825bdc7.entry.js +1 -0
- package/dist/ezui/p-7742802c.entry.js +1 -0
- package/dist/types/components/ez-search-plus/ez-search-plus.d.ts +6 -4
- package/dist/types/components/ez-text-input/ez-text-input.d.ts +6 -2
- package/dist/types/components/ez-tooltip/ez-tooltip.d.ts +6 -2
- package/dist/types/components.d.ts +19 -11
- package/package.json +1 -1
- package/dist/ezui/p-2f45506d.entry.js +0 -1
- package/dist/ezui/p-81145609.entry.js +0 -1
- package/dist/ezui/p-9142b27a.entry.js +0 -1
- package/dist/ezui/p-c5df78be.entry.js +0 -1
|
@@ -77120,7 +77120,7 @@ var SearchMode;
|
|
|
77120
77120
|
SearchMode["PREDICTIVE"] = "PREDICTIVE";
|
|
77121
77121
|
})(SearchMode || (SearchMode = {}));
|
|
77122
77122
|
|
|
77123
|
-
const ezSearchPlusCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.list-options{margin-top:0px;box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}.ez-search-plus__container{display:flex;flex-grow:1;gap:3px}.ez-search-plus__text-input{--ez-text-input--border-top-left-radius:0px;--ez-text-input--border-bottom-left-radius:0px}.ez-search-plus__code-input-no-border{--ez-text-input--border-top-right-radius:0px;--ez-text-input--border-bottom-right-radius:0px}.ez-search-plus__code-input{width:
|
|
77123
|
+
const ezSearchPlusCss = ":host{--ez-search--height:42px;--ez-search--width:100%;--ez-search__icon--width:48px;--ez-search--border-radius:var(--border--radius-medium, 12px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-color--xlight:var(--background--xlight, #fff);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px);--ez-search__input--background-color:var(--background--medium, #e0e0e0);--ez-search__input--border:var(--border--medium, 2px solid);--ez-search__input--border-color:var(--ez-search__input--background-color);--ez-search__input--focus--border-color:var(--color--primary, #008561);--ez-search__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-search__input--disabled--color:var(--text--disable, #AFB6C0);--ez-search__input--error--border-color:#CC2936;--ez-search__btn--color:var(--title--primary, #2B3A54);--ez-search__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-search__btn-hover--color:var(--color--primary, #4e4e4e);--ez-search__label--color:var(--title--primary, #2B3A54);--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search--space--medium:var(--space--medium, 12px);--ez-search--space--small:var(--space--small, 6px);--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-search--width)}ez-icon{--ez-icon--color:inherit;font-weight:var(--text-weight--large, 600)}.suppressed-search-input{--ez-text-input__input--border-color:var(--color--strokes, #dce0e8);--ez-text-input__input--disabled--background-color:var(--background--xlight, #fff);--ez-text-input__input--disabled--color:var(--title--primary, #2B3A54)}.list-container{min-width:var(--ez-search__list-min-width);overflow:auto;position:relative;width:100%}.list-wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:0;z-index:var(--more-visible, 2);max-height:350px;min-width:150px;background-color:var(--ez-search--background-color--xlight);border-radius:var(--ez-search--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000)}.list-options{margin-top:0px;box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.message__loading{border-radius:50%;width:14px;height:14px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border:3px solid var(--ez-search__list-title--primary);border-top:3px solid transparent}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-search__btn--color)}.btn:disabled{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:disabled:hover{cursor:not-allowed;color:var(--ez-search__btn-disabled--color)}.btn:hover{color:var(--ez-search__btn-hover--color)}.btn__close{visibility:hidden}ez-text-input:hover .btn__close,ez-text-input:focus .btn__close{visibility:visible}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}.ez-search-plus__container{display:flex;flex-grow:1;gap:3px}.ez-search-plus__text-input{--ez-text-input--border-top-left-radius:0px;--ez-text-input--border-bottom-left-radius:0px}.ez-search-plus__code-input-no-border{--ez-text-input--border-top-right-radius:0px;--ez-text-input--border-bottom-right-radius:0px}.ez-search-plus__code-input{max-width:85px}.ez-search-plus__code-input-full{width:100%}.description-input-container{width:100%}";
|
|
77124
77124
|
|
|
77125
77125
|
const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
77126
77126
|
constructor() {
|
|
@@ -77164,24 +77164,29 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77164
77164
|
async observeValue(newValue, oldValue) {
|
|
77165
77165
|
const newNormalizedValue = this.normalizeValueToCodeValue(newValue);
|
|
77166
77166
|
const oldNormalizedValue = this.normalizeValueToCodeValue(oldValue);
|
|
77167
|
-
if (newNormalizedValue
|
|
77168
|
-
return;
|
|
77169
|
-
if (newNormalizedValue == undefined) {
|
|
77167
|
+
if (newNormalizedValue === undefined) {
|
|
77170
77168
|
this.codeValue = undefined;
|
|
77171
77169
|
this.descriptionValue = undefined;
|
|
77172
77170
|
this.ezChange.emit(undefined);
|
|
77173
77171
|
return;
|
|
77174
77172
|
}
|
|
77173
|
+
if (newNormalizedValue === oldNormalizedValue) {
|
|
77174
|
+
return;
|
|
77175
|
+
}
|
|
77175
77176
|
this.codeValue = newNormalizedValue;
|
|
77176
77177
|
try {
|
|
77177
77178
|
this.descriptionValue = await this.normalizeCodeToDescriptionValue(newValue);
|
|
77179
|
+
if (this.descriptionValue === null || this.descriptionValue === undefined) {
|
|
77180
|
+
throw new Error("Valor não encontrado!");
|
|
77181
|
+
}
|
|
77178
77182
|
}
|
|
77179
77183
|
catch (err) {
|
|
77180
77184
|
this.value = undefined;
|
|
77181
77185
|
console.warn("[EzSearchPlus] Erro ao obter descrição do registro.", err);
|
|
77182
77186
|
throw err;
|
|
77183
77187
|
}
|
|
77184
|
-
this.
|
|
77188
|
+
this.value = this.buildCurrentValue();
|
|
77189
|
+
this.ezChange.emit(this.value);
|
|
77185
77190
|
}
|
|
77186
77191
|
canShowLoadSpinDescription() {
|
|
77187
77192
|
return this.isLoadingDescription;
|
|
@@ -77315,6 +77320,9 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77315
77320
|
if (!loadedOption) {
|
|
77316
77321
|
return "";
|
|
77317
77322
|
}
|
|
77323
|
+
if (Array.isArray(loadedOption)) {
|
|
77324
|
+
return loadedOption[0].label;
|
|
77325
|
+
}
|
|
77318
77326
|
return loadedOption.label;
|
|
77319
77327
|
}
|
|
77320
77328
|
finally {
|
|
@@ -77356,7 +77364,7 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77356
77364
|
}
|
|
77357
77365
|
async handleTextInputChangeHandler(event) {
|
|
77358
77366
|
if (!this.searchDescriptionIsOpen) {
|
|
77359
|
-
this._popover.
|
|
77367
|
+
this._popover.showUnder(this.el);
|
|
77360
77368
|
}
|
|
77361
77369
|
const argument = event.target.value;
|
|
77362
77370
|
await this.debounceLoaderOptions(argument);
|
|
@@ -77371,11 +77379,31 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77371
77379
|
}, this.SEARCH_DESCRIPTION_TIMEOUT);
|
|
77372
77380
|
});
|
|
77373
77381
|
}
|
|
77382
|
+
updateKeyOption(option) {
|
|
77383
|
+
return (Object.assign(Object.assign({}, option), { presentationValue: option.value, presentationLabel: option.label }));
|
|
77384
|
+
}
|
|
77385
|
+
parseSearchOptions(options = []) {
|
|
77386
|
+
if (Array.isArray(options)) {
|
|
77387
|
+
const firstOption = options[0];
|
|
77388
|
+
if (!firstOption) {
|
|
77389
|
+
return [];
|
|
77390
|
+
}
|
|
77391
|
+
if ("label" in firstOption || "value" in firstOption) {
|
|
77392
|
+
return options.map((option) => this.updateKeyOption(option));
|
|
77393
|
+
}
|
|
77394
|
+
return options;
|
|
77395
|
+
}
|
|
77396
|
+
if ("label" in options || "value" in options) {
|
|
77397
|
+
[this.updateKeyOption(options)];
|
|
77398
|
+
}
|
|
77399
|
+
return [options];
|
|
77400
|
+
}
|
|
77374
77401
|
async processOptionsLoader(argument) {
|
|
77375
77402
|
try {
|
|
77376
77403
|
this.showLoading = true;
|
|
77377
77404
|
const searchArgument = { mode: SearchMode$2.PREDICTIVE, argument };
|
|
77378
|
-
|
|
77405
|
+
const options = await this.optionLoader(searchArgument);
|
|
77406
|
+
this.visibleOptions = this.parseSearchOptions(options);
|
|
77379
77407
|
}
|
|
77380
77408
|
finally {
|
|
77381
77409
|
this.showLoading = false;
|
|
@@ -77407,12 +77435,13 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77407
77435
|
await ((_a = this._searchList) === null || _a === void 0 ? void 0 : _a.selectCurrentItem());
|
|
77408
77436
|
}
|
|
77409
77437
|
async cancelSelection() {
|
|
77410
|
-
var _a, _b, _c
|
|
77411
|
-
|
|
77412
|
-
|
|
77438
|
+
var _a, _b, _c;
|
|
77439
|
+
const label = typeof this.value === 'object' ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.label : this.value;
|
|
77440
|
+
if (this._textInputDescriptionValue && this._textInputDescriptionValue.value != label) {
|
|
77441
|
+
this._textInputDescriptionValue.value = label;
|
|
77413
77442
|
}
|
|
77414
|
-
await ((
|
|
77415
|
-
(
|
|
77443
|
+
await ((_b = this._searchList) === null || _b === void 0 ? void 0 : _b.cancelSelection());
|
|
77444
|
+
(_c = this._popover) === null || _c === void 0 ? void 0 : _c.hide();
|
|
77416
77445
|
}
|
|
77417
77446
|
async handleInputTab() {
|
|
77418
77447
|
await this.cancelSelection();
|
|
@@ -77465,10 +77494,10 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77465
77494
|
render() {
|
|
77466
77495
|
ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
|
|
77467
77496
|
return (h(Host, null, h("div", { class: "ez-search-plus__container" }, h("ez-text-input", { ref: elem => this._textInputCodeValue = elem, class: {
|
|
77468
|
-
"ez-search-plus__code-input":
|
|
77497
|
+
"ez-search-plus__code-input": !this.hideDescriptionInput,
|
|
77469
77498
|
"ez-search-plus__code-input-no-border": !this.hideDescriptionInput,
|
|
77470
77499
|
"ez-search-plus__code-input-full": this.hideDescriptionInput
|
|
77471
|
-
}, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, mode: this.mode, label: this.getCodLabel(), hasInvalid: !StringUtils$1.isEmpty(this.errorMessage), errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus() }, this.getLeftIconElement()), !this.hideDescriptionInput && h("div", { class: "description-input-container" }, h("ez-text-input", { ref: elem => this._textInputDescriptionValue = elem, tabIndex: -1, class: "ez-search-plus__text-input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, value: this.descriptionValue, onInput: event => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus() }, this.getRightIconElement()), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.
|
|
77500
|
+
}, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, mode: this.mode, label: this.getCodLabel(), canShowError: this.canShowError, hasInvalid: !StringUtils$1.isEmpty(this.errorMessage), errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus() }, this.getLeftIconElement()), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-text-input", { ref: elem => this._textInputDescriptionValue = elem, tabIndex: -1, class: "ez-search-plus__text-input", "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode, value: this.descriptionValue, onInput: event => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus() }, this.getRightIconElement()), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.searchDescriptionIsOpen = event.detail }, h("ez-search-result-list", { ref: (ref) => this._searchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) })))))));
|
|
77472
77501
|
}
|
|
77473
77502
|
get el() { return this; }
|
|
77474
77503
|
static get watchers() { return {
|
|
@@ -77477,7 +77506,7 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77477
77506
|
static get style() { return ezSearchPlusCss; }
|
|
77478
77507
|
};
|
|
77479
77508
|
|
|
77480
|
-
const ezSearchResultListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.
|
|
77509
|
+
const ezSearchResultListCss = ":host{--ez-search__list-title--primary:var(--title--primary, #2B3A54);--ez-search__list-text--primary:var(--text--primary, #626e82);--ez-search__list-height:calc(var(--ez-search--font-size) + var(--ez-search--space--medium) + 4px);--ez-search__list-min-width:64px;--ez-search__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-search__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-search__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-search__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-search__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-search__scrollbar--width:var(--space--small, 6px);--ez-search--border-radius-small:var(--border--radius-small, 6px);--ez-search--font-size:var(--text--medium, 14px);--ez-search--font-family:var(--font-pattern, Arial);--ez-search--font-weight--large:var(--text-weight--large, 500);--ez-search--font-weight--medium:var(--text-weight--medium, 400);--ez-search--background-medium:var(--background--medium, #f0f3f7);--ez-search--line-height:calc(var(--text--medium, 14px) + 4px)}.list-options{position:relative;z-index:var(--more-visible, 2);margin:var(--space--small) 0px;padding:0px;padding-inline-start:0px;box-sizing:border-box;width:100%;height:100%;max-height:350px;min-width:150px;display:flex;flex-direction:column;scroll-behavior:smooth;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ez-search__scrollbar--color-clicked) var(--ez-search__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--scrollbar--background);width:var(--space--small);max-width:var(--space--small);min-width:var(--space--small);height:var(--space--small);max-height:var(--space--small);min-height:var(--space--small)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-search__scrollbar--color-background);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-search__scrollbar--color-default);border-radius:var(--ez-search__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-search__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-search__scrollbar--color-clicked)}.message{text-align:center;display:flex;justify-content:center;align-items:center;list-style-type:none;margin:var(--space--medium) 0px;min-height:var(--ez-search__list-height)}.message__no-result{color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size)}.loading__container{display:flex;flex-direction:column;margin:var(--space--small)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-search__list-title--primary);font-family:var(--ez-search--font-family);font-size:var(--ez-search--font-size);line-height:var(--ez-search--line-height)}.item__label{font-weight:var(--ez-search--font-weight--medium)}.item__label--bold{font-weight:var(--ez-search--font-weight--large)}.item__value{text-align:center;color:var(--ez-search__list-text--primary);font-weight:var(--ez-search--font-weight--large)}.item__value--hidden{visibility:hidden;position:absolute;white-space:nowrap;z-index:-1;top:0;left:0}.item__label{text-align:left}.item__list>li:hover{background-color:var(--ez-search--background-medium)}.item{display:flex;align-items:center;width:100%;box-sizing:border-box;list-style-type:none;cursor:pointer;border-radius:var(--ez-search--border-radius-small);gap:var(--space--small, 6px)}.preselected{background-color:var(--background--medium)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@supports not (scrollbar-width: thin){.item{padding-right:8px}}";
|
|
77481
77510
|
|
|
77482
77511
|
const EzSearchResultList$1 = class extends HTMLElement$1 {
|
|
77483
77512
|
constructor() {
|
|
@@ -77563,8 +77592,7 @@ const EzSearchResultList$1 = class extends HTMLElement$1 {
|
|
|
77563
77592
|
render() {
|
|
77564
77593
|
return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
|
|
77565
77594
|
&& this.visibleOptions.length === 0
|
|
77566
|
-
&& h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this.showLoading
|
|
77567
|
-
&& h("div", { class: "message" }, h("div", { class: "message__loading" })), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
|
|
77595
|
+
&& h("div", { class: "message" }, h("span", { class: "message__no-result" }, this._textEmptyList)), this.showLoading && (h("div", { class: "loading__container" }, h("ez-skeleton", { count: 4, height: '20px' }))), this.canShowListOptions() && this.visibleOptions.map((opt, index) => this.buildItem(opt, index)))));
|
|
77568
77596
|
}
|
|
77569
77597
|
static get style() { return ezSearchResultListCss; }
|
|
77570
77598
|
};
|
|
@@ -79380,7 +79408,7 @@ const EzTextEdit$1 = class extends HTMLElement$1 {
|
|
|
79380
79408
|
static get style() { return ezTextEditCss; }
|
|
79381
79409
|
};
|
|
79382
79410
|
|
|
79383
|
-
const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:30px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--border-top-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-top-right-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-right-radius:var(--ez-text-input--border-radius);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__margin-bottom:var(--space--small);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:var(--ez-text-input--height);border-top-left-radius:var(--ez-text-input--border-top-left-radius);border-bottom-left-radius:var(--ez-text-input--border-bottom-left-radius);border-top-right-radius:var(--ez-text-input--border-top-right-radius);border-bottom-right-radius:var(--ez-text-input--border-bottom-right-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding);margin-bottom:var(--ez-text-input__margin-bottom)}input.no--margin{--ez-text-input__margin-bottom:0}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--
|
|
79411
|
+
const ezTextInputCss = ":host{--ez-text-input--height:42px;--ez-text-input--width:100%;--ez-text-input__icon--width:30px;--ez-text-input--height--slim:32px;--ez-text-input__min-width:0px;--ez-text-input__max-width:100%;--ez-text-input--border-radius:var(--border--radius-medium, 12px);--ez-text-input--border-top-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-left-radius:var(--ez-text-input--border-radius);--ez-text-input--border-top-right-radius:var(--ez-text-input--border-radius);--ez-text-input--border-bottom-right-radius:var(--ez-text-input--border-radius);--ez-text-input--font-size:var(--text--medium, 14px);--ez-text-input--font-family:var(--font-pattern, Arial);--ez-text-input--font-weight:var(--text-weight--medium, 400);--ez-text-input--color:var(--title--primary, #2B3A54);--ez-text-input__margin-bottom:var(--space--small);--ez-text-input__input--background-color:var(--background--light, #ffffff);--ez-text-input__input--border:var(--border--small, 1px solid);--ez-text-input__input--border-color:var(--color--strokes,#DCE0E8);--ez-text-input__input--focus--border-color:var(--color--primary, #008561);--ez-text-input__input--disabled--background-color:var(--background--medium, #F0F3F7);--ez-text-input__input--disabled--color:var(--text--primary, #626E82);--ez-text-input__input--error--border-color:var(--color-alert--error-800,#BD0025);--ez-text-input__input--noborder-color:white;--ez-text-input__input--padding:var(--space--medium, 6px);--ez-text-input__placeholder--color:var(--text--secondary, #a2abb9);--ez-text-input__tooltip_icon--error--color:var(--color-alert--error-800,#BD0025);--ez-text-input__label--floating--top:6px;--ez-text-input__label--padding-top:12px;--ez-text-input__label--padding-left:14px;--ez-text-input__label--padding-right:12px;--ez-text-input__input--focus--icon-color:var(--title--primary, #2B3A54);--ez-text-input__input--disabled--focus--icon-color:var(--text--primary, #626E82);--ez-text-input__tooltip-icon--spacing:var(--space--large);--ez-text-input__tooltip-icon---width:var(--space--large);--ez-text-input__tooltip-icon---horizontal-margin:var(--space--medium, 12px);--ez-text-input__tooltip-icon---vertical-margin:10px;display:flex;flex-wrap:wrap;position:relative;width:var(--ez-text-input--width);min-width:var(--ez-text-input__min-width);max-width:var(--ez-text-input__max-width)}:host(.grid_editor){--ez-text-input--height--slim:25px}input{width:100%;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;height:var(--ez-text-input--height);border-top-left-radius:var(--ez-text-input--border-top-left-radius);border-bottom-left-radius:var(--ez-text-input--border-bottom-left-radius);border-top-right-radius:var(--ez-text-input--border-top-right-radius);border-bottom-right-radius:var(--ez-text-input--border-bottom-right-radius);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);border:var(--ez-text-input__input--border);border-color:var(--ez-text-input__input--border-color);background-color:var(--ez-text-input__input--background-color);color:var(--ez-text-input--color);font-weight:var(--ez-text-input--font-weight);padding:var(--ez-text-input__input--padding);margin-bottom:var(--ez-text-input__margin-bottom)}input.no--margin{--ez-text-input__margin-bottom:0}input:disabled{background-color:var(--ez-text-input__input--disabled--background-color);color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}input:focus{outline:none;border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--focus--border-color)}input.icon--left{padding-left:var(--ez-text-input__icon--width)}input.icon--left.hasError{padding-right:var(--ez-text-input__icon--width)}input.icon--right{padding-right:var(--ez-text-input__icon--width)}input.icon--right.hasError{padding-right:calc(var(--ez-text-input__icon--width) + var(--ez-text-input__tooltip-icon--spacing))}input.hasError{color:var(--ez-text-input--color);border:var(--border--medium, 2px solid);border-color:var(--ez-text-input__input--error--border-color);padding-right:calc(var(--ez-text-input__tooltip-icon---width) + (2*var(--ez-text-input__tooltip-icon---horizontal-margin)))}input:disabled.hasError{color:var(--ez-text-input__input--disabled--color)}input.text--right{text-align:right}input:disabled,input:read-only{cursor:not-allowed}.hasError{color:var(--ez-text-input__tooltip_icon--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--elevation--24, 24);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(--ez-text-input__label--padding-right));left:var(--ez-text-input--space--medium);font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input--color);top:var(--ez-text-input__label--padding-top);left:var(--ez-text-input__label--padding-left);padding-right:var(--ez-text-input__label--padding-right)}.input__label.hasError{width:calc(100% - 2*(var(--ez-text-input__tooltip-icon--spacing)))}.input__label--floated{font-family:var(--ez-text-input--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--ez-text-input__label--floating--top)}.input__label--disabled{color:var(--ez-text-input__input--disabled--color);cursor:not-allowed}.input__label--left{text-align:left;left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--left.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--right{right:var(--ez-text-input__icon--width);width:calc(100% - var(--ez-text-input__icon--width))}.input__label--right.hasError{width:calc(100% - var(--ez-text-input__icon--width) - var(--ez-text-input__tooltip-icon--spacing))}.input__label--left.input__label--right{left:calc(var(--ez-text-input__icon--width) + 2px);width:calc(100% - var(--ez-text-input__icon--width) * 2)}.input--with--label{padding-bottom:0}.input--slim{padding-top:var(--space--small, 3px);padding-bottom:var(--space--small, 3px);height:var(--ez-text-input--height--slim)}.input__slim--title{font-size:16px;font-weight:bold}.input--slim::-webkit-input-placeholder,.input--slim:-moz-placeholder,.input--slim::-moz-placeholder,.input--slim:-ms-input-placeholder,.input--slim::placeholder{font-family:var(--ez-text-input--font-family);font-size:var(--ez-text-input--font-size);font-weight:var(--ez-text-input--font-weight);color:var(--ez-text-input__placeholder--color)}.input--slim:disabled::-webkit-input-placeholder,.input--slim:disabled:-moz-placeholder,.input--slim:disabled::-moz-placeholder,.input--slim:disabled:-ms-input-placeholder,.input--slim:disabled::placeholder{color:var(--ez-text-input__input--disabled--color)}input.input__slim--noborder{box-shadow:0 0 0 0;border:0 none;outline:0;background:var(--ez-text-input__input--noborder-color)}ez-icon.tooltip-icon{position:absolute;display:flex;align-items:center;justify-content:center;overflow:hidden;width:var(--ez-text-input__tooltip-icon---width);height:22px;margin:var(--ez-text-input__tooltip-icon---vertical-margin) var(--ez-text-input__tooltip-icon---horizontal-margin);top:0;right:0;z-index:var(--elevation--4);border-radius:var(--ez-text-input--border-radius)}ez-icon.tooltip-icon.rightIconSlot{right:var(--ez-text-input__tooltip-icon--spacing)}ez-icon.tooltip-icon.hasError{--ez-icon--color:var(--ez-text-input__tooltip_icon--error--color)}";
|
|
79384
79412
|
|
|
79385
79413
|
const EzTextInput$1 = class extends HTMLElement$1 {
|
|
79386
79414
|
constructor() {
|
|
@@ -79388,6 +79416,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79388
79416
|
this.__registerHost();
|
|
79389
79417
|
this.__attachShadow();
|
|
79390
79418
|
this.ezChange = createEvent(this, "ezChange", 7);
|
|
79419
|
+
this._isOverflowing = false;
|
|
79391
79420
|
this.label = undefined;
|
|
79392
79421
|
this.value = undefined;
|
|
79393
79422
|
this.enabled = true;
|
|
@@ -79403,29 +79432,11 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79403
79432
|
this.autoFocus = false;
|
|
79404
79433
|
this.hasRightSlotContent = false;
|
|
79405
79434
|
}
|
|
79406
|
-
observeHasInvalid() {
|
|
79407
|
-
if (
|
|
79435
|
+
observeHasInvalid(newValue, oldValue) {
|
|
79436
|
+
if (newValue === oldValue) {
|
|
79408
79437
|
return;
|
|
79409
|
-
if (this.hasInvalid) {
|
|
79410
|
-
this._inputElem.classList.add("hasError");
|
|
79411
|
-
}
|
|
79412
|
-
else {
|
|
79413
|
-
this._inputElem.classList.remove("hasError");
|
|
79414
|
-
}
|
|
79415
|
-
}
|
|
79416
|
-
observeErrorMessage() {
|
|
79417
|
-
if (this._inputElem) {
|
|
79418
|
-
this.isInvalid().then((hasError) => {
|
|
79419
|
-
if (hasError) {
|
|
79420
|
-
this._inputElem.classList.add("hasError");
|
|
79421
|
-
// this._tooltipPositioningObserver?.observe(this._inputElem);
|
|
79422
|
-
}
|
|
79423
|
-
else {
|
|
79424
|
-
this._inputElem.classList.remove("hasError");
|
|
79425
|
-
// this.removeGlobalTooltip();
|
|
79426
|
-
}
|
|
79427
|
-
});
|
|
79428
79438
|
}
|
|
79439
|
+
this.validateErrors();
|
|
79429
79440
|
}
|
|
79430
79441
|
observeMask() {
|
|
79431
79442
|
if (this.mask) {
|
|
@@ -79443,6 +79454,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79443
79454
|
this._inputElem.value = this.value || "";
|
|
79444
79455
|
this.handleChange();
|
|
79445
79456
|
this.adjustFloatingLabel();
|
|
79457
|
+
this.checkIsOverflowing();
|
|
79446
79458
|
if (!this.isSlaveMode()) {
|
|
79447
79459
|
this.errorMessage = "";
|
|
79448
79460
|
this.ezChange.emit(this.value);
|
|
@@ -79453,6 +79465,25 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79453
79465
|
//---------------------------------------------
|
|
79454
79466
|
// Private methods
|
|
79455
79467
|
//---------------------------------------------
|
|
79468
|
+
validateErrors() {
|
|
79469
|
+
const hasErrorMessage = this.handleValidateErrorMessage(this.errorMessage);
|
|
79470
|
+
const hasError = this.canShowError && (hasErrorMessage || this.hasInvalid);
|
|
79471
|
+
this.updateClassError(hasError);
|
|
79472
|
+
}
|
|
79473
|
+
handleValidateErrorMessage(message = this.errorMessage) {
|
|
79474
|
+
return typeof message === "string" && message.trim() !== "";
|
|
79475
|
+
}
|
|
79476
|
+
updateClassError(status) {
|
|
79477
|
+
if (!this._inputElem) {
|
|
79478
|
+
return;
|
|
79479
|
+
}
|
|
79480
|
+
if (status) {
|
|
79481
|
+
this._inputElem.classList.add("hasError");
|
|
79482
|
+
}
|
|
79483
|
+
else {
|
|
79484
|
+
this._inputElem.classList.remove("hasError");
|
|
79485
|
+
}
|
|
79486
|
+
}
|
|
79456
79487
|
adjustFloatingLabel() {
|
|
79457
79488
|
if (this.label && this._labelElem) {
|
|
79458
79489
|
if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
|
|
@@ -79511,7 +79542,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79511
79542
|
* Retorna se o conteúdo é inválido.
|
|
79512
79543
|
*/
|
|
79513
79544
|
async isInvalid() {
|
|
79514
|
-
return
|
|
79545
|
+
return this.handleValidateErrorMessage();
|
|
79515
79546
|
}
|
|
79516
79547
|
//---------------------------------------------
|
|
79517
79548
|
// Event handlers
|
|
@@ -79622,7 +79653,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79622
79653
|
}
|
|
79623
79654
|
slot.name && ElementIDUtils.addIDInfo(content, slot.name);
|
|
79624
79655
|
}
|
|
79625
|
-
this.
|
|
79656
|
+
this.validateErrors();
|
|
79626
79657
|
}
|
|
79627
79658
|
doFocus() {
|
|
79628
79659
|
if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
|
|
@@ -79633,6 +79664,13 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79633
79664
|
getValue() {
|
|
79634
79665
|
return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
|
|
79635
79666
|
}
|
|
79667
|
+
checkIsOverflowing() {
|
|
79668
|
+
if (this._inputElem) {
|
|
79669
|
+
this._isOverflowing = this._inputElem.offsetWidth < this._inputElem.scrollWidth;
|
|
79670
|
+
return;
|
|
79671
|
+
}
|
|
79672
|
+
this._isOverflowing = false;
|
|
79673
|
+
}
|
|
79636
79674
|
//---------------------------------------------
|
|
79637
79675
|
// Lifecycle web component
|
|
79638
79676
|
//---------------------------------------------
|
|
@@ -79660,10 +79698,11 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79660
79698
|
}
|
|
79661
79699
|
componentDidLoad() {
|
|
79662
79700
|
var _a;
|
|
79663
|
-
this.
|
|
79701
|
+
this.validateErrors();
|
|
79664
79702
|
this.observeMask();
|
|
79665
79703
|
this.adjustFloatingLabel();
|
|
79666
79704
|
this.adjustBorderInput();
|
|
79705
|
+
this.checkIsOverflowing();
|
|
79667
79706
|
if (this.autoFocus) {
|
|
79668
79707
|
requestAnimationFrame(() => {
|
|
79669
79708
|
this.setFocus({ selectText: true });
|
|
@@ -79678,13 +79717,14 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79678
79717
|
ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
79679
79718
|
return (h(Host, { style: this._hostElement.classList.contains("grid_editor") ? { "height": "100%" } : null }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label && this.mode != "slim" ?
|
|
79680
79719
|
h("label", { ref: (el) => this._labelElem = el, class: `${this.enabled ? "input__label" : "input__label input__label--disabled"} ${this.errorMessage ? "hasError" : ""}`, onClick: () => this._inputElem.focus(), title: this.label }, this.label)
|
|
79681
|
-
: null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(),
|
|
79720
|
+
: null, h("input", { "data-element-id": ElementIDUtils.getInternalIDInfo("input"), onFocus: () => this.doFocus(), ref: (el) => this._inputElem = el, type: this.password ? "password" : "text", class: `${this.mode === "slim" ? "input--slim" : ""}`, placeholder: this.mode === "slim" && this.label ? this.label : "", value: this.getValue(), disabled: !this.enabled, onInput: () => { this.handleChange(); }, onFocusout: () => { this.handleFocusout(); } }), h("ez-tooltip", { anchoringElement: this._hostElement, message: this.getValue(), active: this._isOverflowing, useAnchorSize: true }), this.canShowError && this.mode != "slim" && this.errorMessage &&
|
|
79682
79721
|
h("ez-tooltip", { type: "error", message: this.errorMessage }, h("ez-icon", { class: `tooltip-icon ${this.errorMessage ? "hasError" : ""} ${this.hasRightSlotContent ? "rightIconSlot" : ""}`, "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip-icon"), ref: (el) => this._tooltipIconElem = el, iconName: "alert-circle" })), h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }, " ")));
|
|
79683
79722
|
}
|
|
79684
79723
|
get _hostElement() { return this; }
|
|
79685
79724
|
static get watchers() { return {
|
|
79686
79725
|
"hasInvalid": ["observeHasInvalid"],
|
|
79687
|
-
"errorMessage": ["
|
|
79726
|
+
"errorMessage": ["observeHasInvalid"],
|
|
79727
|
+
"canShowError": ["observeHasInvalid"],
|
|
79688
79728
|
"mask": ["observeMask"],
|
|
79689
79729
|
"value": ["observeValue"]
|
|
79690
79730
|
}; }
|
|
@@ -79953,7 +79993,7 @@ const EzToast$1 = class extends HTMLElement$1 {
|
|
|
79953
79993
|
static get style() { return ezToastCss; }
|
|
79954
79994
|
};
|
|
79955
79995
|
|
|
79956
|
-
const ezTooltipCss = ":host{--triangle-size:8px}.tooltip{position:absolute;z-index:var(--elevation--24);padding:var(--space--extra-small, 3px) var(--space--small, 6px);border-radius:var(--border--radius-small);box-sizing:border-box;font-family:var(--font-pattern\t, 'Roboto', sans-serif);font-size:var(--text--small, 12px);font-weight:var(--text-weight--medium, 400);text-align:center;display:none}.arrow{position:absolute;width:var(--triangle-size);height:var(--triangle-size);transform:rotate(45deg)}.default-tooltip{background:var(--title--primary, #2b3a54);color:var(--color--inverted)}.default-tooltip .arrow{background:var(--title--primary, #2b3a54)}.error-tooltip{background:var(--color-alert--error-800, #BD0025);color:var(--color--error-200, #F7E0E5)}.error-tooltip .arrow{background:var(--color-alert--error-800, #BD0025)}.success-tooltip{background:var(--color--success, #00cb94);color:var(--color--success-200, #EBFFFA)}.success-tooltip .arrow{background:var(--color--success, #00cb94)}.warning-tooltip{background:var(--color--warning, #f2d410);color:var(--color--warning-200, #FDF8D8)}.warning-tooltip .arrow{background:var(--color--warning, #f2d410)}";
|
|
79996
|
+
const ezTooltipCss = ":host{--triangle-size:8px}.tooltip{position:absolute;z-index:var(--elevation--24);padding:var(--space--extra-small, 3px) var(--space--small, 6px);border-radius:var(--border--radius-small);box-sizing:border-box;font-family:var(--font-pattern\t, 'Roboto', sans-serif);font-size:var(--text--small, 12px);font-weight:var(--text-weight--medium, 400);text-align:center;width:max-content;display:none}.arrow{position:absolute;width:var(--triangle-size);height:var(--triangle-size);transform:rotate(45deg)}.default-tooltip{background:var(--title--primary, #2b3a54);color:var(--color--inverted)}.default-tooltip .arrow{background:var(--title--primary, #2b3a54)}.error-tooltip{background:var(--color-alert--error-800, #BD0025);color:var(--color--error-200, #F7E0E5)}.error-tooltip .arrow{background:var(--color-alert--error-800, #BD0025)}.success-tooltip{background:var(--color--success, #00cb94);color:var(--color--success-200, #EBFFFA)}.success-tooltip .arrow{background:var(--color--success, #00cb94)}.warning-tooltip{background:var(--color--warning, #f2d410);color:var(--color--warning-200, #FDF8D8)}.warning-tooltip .arrow{background:var(--color--warning, #f2d410)}";
|
|
79957
79997
|
|
|
79958
79998
|
const EzTooltip$1 = class extends HTMLElement$1 {
|
|
79959
79999
|
constructor() {
|
|
@@ -79968,7 +80008,8 @@ const EzTooltip$1 = class extends HTMLElement$1 {
|
|
|
79968
80008
|
this.type = 'default';
|
|
79969
80009
|
this.debouncingTime = 500;
|
|
79970
80010
|
this.active = true;
|
|
79971
|
-
this.
|
|
80011
|
+
this.maxWidth = 200;
|
|
80012
|
+
this.useAnchorSize = false;
|
|
79972
80013
|
}
|
|
79973
80014
|
watchAnchoringElement(newValue, oldValue) {
|
|
79974
80015
|
if (newValue) {
|
|
@@ -80004,6 +80045,10 @@ const EzTooltip$1 = class extends HTMLElement$1 {
|
|
|
80004
80045
|
if (!element || !this._opened) {
|
|
80005
80046
|
return;
|
|
80006
80047
|
}
|
|
80048
|
+
if (this.useAnchorSize) {
|
|
80049
|
+
const anchorSize = element.getBoundingClientRect().width;
|
|
80050
|
+
this._tooltipElement.style.width = `${anchorSize}px`;
|
|
80051
|
+
}
|
|
80007
80052
|
await computePosition(element, this._tooltipElement, {
|
|
80008
80053
|
placement: this.placement,
|
|
80009
80054
|
middleware: [
|
|
@@ -80065,7 +80110,7 @@ const EzTooltip$1 = class extends HTMLElement$1 {
|
|
|
80065
80110
|
"tooltip": true,
|
|
80066
80111
|
[`${this.type}-tooltip`]: true,
|
|
80067
80112
|
}, style: {
|
|
80068
|
-
|
|
80113
|
+
maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
|
|
80069
80114
|
}, role: "tooltip", "data-element-id": ElementIDUtils.getInternalIDInfo("tooltip") }), this.message, h("div", { ref: ref => this._arrowElement = ref, class: "arrow" })), h("slot", { onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
80070
80115
|
}
|
|
80071
80116
|
get _element() { return this; }
|
|
@@ -81388,7 +81433,7 @@ const EzPopup = /*@__PURE__*/proxyCustomElement(EzPopup$1, [1,"ez-popup",{"size"
|
|
|
81388
81433
|
const EzRadioButton = /*@__PURE__*/proxyCustomElement(EzRadioButton$1, [1,"ez-radio-button",{"value":[1544],"options":[1040],"enabled":[516],"label":[513],"direction":[1537]}]);
|
|
81389
81434
|
const EzScroller = /*@__PURE__*/proxyCustomElement(EzScroller$1, [1,"ez-scroller",{"direction":[1],"locked":[4],"activeShadow":[4,"active-shadow"],"isActive":[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]);
|
|
81390
81435
|
const EzSearch = /*@__PURE__*/proxyCustomElement(EzSearch$1, [1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"optionLoader":[16],"contextProperties":[8,"context-properties"],"showSelectedValue":[4,"show-selected-value"],"showOptionValue":[4,"show-option-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"mode":[513],"canShowError":[516,"can-show-error"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"options":[1040],"suppressSearch":[4,"suppress-search"],"ensureClearButtonVisible":[4,"ensure-clear-button-visible"],"suppressPreLoad":[4,"suppress-pre-load"],"autoFocus":[4,"auto-focus"],"_preSelection":[32],"_visibleOptions":[32],"_startLoading":[32],"_showLoading":[32],"_showLoadingDescription":[32],"_criteria":[32]}]);
|
|
81391
|
-
const EzSearchPlus = /*@__PURE__*/proxyCustomElement(EzSearchPlus$1, [1,"ez-search-plus",{"value":[
|
|
81436
|
+
const EzSearchPlus = /*@__PURE__*/proxyCustomElement(EzSearchPlus$1, [1,"ez-search-plus",{"value":[1537],"enabled":[1540],"disableCodeInput":[1540,"disable-code-input"],"disableDescriptionInput":[1540,"disable-description-input"],"label":[1537],"codLabel":[1537,"cod-label"],"hideDescriptionInput":[1540,"hide-description-input"],"canShowError":[516,"can-show-error"],"errorMessage":[1537,"error-message"],"mode":[513],"contextProperties":[8,"context-properties"],"optionLoader":[16],"showOptionValue":[4,"show-option-value"],"stopPropagateEnterKeyEvent":[4,"stop-propagate-enter-key-event"],"autoFocus":[4,"auto-focus"],"showSelectedValue":[4,"show-selected-value"],"suppressEmptyOption":[4,"suppress-empty-option"],"hideErrorOnFocusOut":[4,"hide-error-on-focus-out"],"listOptionsPosition":[16],"isTextSearch":[4,"is-text-search"],"ignoreLimitCharsToSearch":[4,"ignore-limit-chars-to-search"],"suppressSearch":[4,"suppress-search"],"suppressPreLoad":[4,"suppress-pre-load"],"ensureClearButtonVisible":[4,"ensure-clear-button-visible"],"descriptionValue":[32],"codeValue":[32],"isLoadingDescription":[32],"searchDescriptionIsOpen":[32],"visibleOptions":[32],"showLoading":[32]}]);
|
|
81392
81437
|
const EzSearchResultList = /*@__PURE__*/proxyCustomElement(EzSearchResultList$1, [1,"ez-search-result-list",{"showLoading":[4,"show-loading"],"visibleOptions":[16],"value":[1],"showOptionValue":[4,"show-option-value"],"_preSelection":[32]}]);
|
|
81393
81438
|
const EzSidebarButton = /*@__PURE__*/proxyCustomElement(EzSidebarButton$1, [1,"ez-sidebar-button"]);
|
|
81394
81439
|
const EzSidebarNavigator = /*@__PURE__*/proxyCustomElement(EzSidebarNavigator$1, [1,"ez-sidebar-navigator",{"type":[1],"mode":[1025],"size":[1],"isResponsive":[4,"is-responsive"],"titleMenu":[1,"title-menu"],"showCollapseMenu":[4,"show-collapse-menu"],"showFixedButton":[4,"show-fixed-button"],"open":[32]}]);
|
|
@@ -81402,7 +81447,7 @@ const EzTextEdit = /*@__PURE__*/proxyCustomElement(EzTextEdit$1, [1,"ez-text-edi
|
|
|
81402
81447
|
const EzTextInput = /*@__PURE__*/proxyCustomElement(EzTextInput$1, [1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"errorMessage":[1537,"error-message"],"hasInvalid":[1540,"has-invalid"],"mask":[1],"cleanValueMask":[4,"clean-value-mask"],"canShowError":[516,"can-show-error"],"restrict":[1],"mode":[513],"noBorder":[516,"no-border"],"password":[4],"autoFocus":[4,"auto-focus"],"hasRightSlotContent":[32]}]);
|
|
81403
81448
|
const EzTimeInput = /*@__PURE__*/proxyCustomElement(EzTimeInput$1, [1,"ez-time-input",{"label":[513],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"mode":[513],"canShowError":[516,"can-show-error"],"autoFocus":[4,"auto-focus"]}]);
|
|
81404
81449
|
const EzToast = /*@__PURE__*/proxyCustomElement(EzToast$1, [1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"canClose":[1028,"can-close"]}]);
|
|
81405
|
-
const EzTooltip = /*@__PURE__*/proxyCustomElement(EzTooltip$1, [1,"ez-tooltip",{"message":[1],"anchoringElement":[16],"placement":[1],"gapOptions":[16],"type":[1],"debouncingTime":[2,"debouncing-time"],"active":[4],"
|
|
81450
|
+
const EzTooltip = /*@__PURE__*/proxyCustomElement(EzTooltip$1, [1,"ez-tooltip",{"message":[1],"anchoringElement":[16],"placement":[1],"gapOptions":[16],"type":[1],"debouncingTime":[2,"debouncing-time"],"active":[4],"maxWidth":[2,"max-width"],"useAnchorSize":[4,"use-anchor-size"]}]);
|
|
81406
81451
|
const EzTree = /*@__PURE__*/proxyCustomElement(EzTree$1, [1,"ez-tree",{"items":[1040],"value":[1040],"selectedId":[1537,"selected-id"],"iconResolver":[16],"tooltipResolver":[16],"_tree":[32],"_waintingForLoad":[32]},[[2,"keydown","onKeyDownListener"]]]);
|
|
81407
81452
|
const EzUpload = /*@__PURE__*/proxyCustomElement(EzUpload$1, [1,"ez-upload",{"label":[1],"subtitle":[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]}]);
|
|
81408
81453
|
const EzViewStack = /*@__PURE__*/proxyCustomElement(EzViewStack$1, [0,"ez-view-stack"]);
|
|
@@ -520,64 +520,4 @@ const EzDropdown = class {
|
|
|
520
520
|
};
|
|
521
521
|
EzDropdown.style = ezDropdownCss;
|
|
522
522
|
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
const ezSkeletonCss = ".skeleton {\n\tbackground: var(--skeleton-background, #eff1f6) no-repeat;\n\n\tborder-radius: var(--skeleton-border-radius, 4px);\n\twidth: var(--skeleton-width, 100%);\n\theight: var(--skeleton-height, 20px);\n\tdisplay: inline-block;\n\tmargin-bottom: var(--skeleton-margin-bottom, 0px);\t\n\tbox-sizing: border-box;\n\toutline: none;\n\toverflow: hidden;\n\tposition: relative;\n\t-webkit-will-change: transform;\n -moz-will-change: transform;\n\twill-change: transform;\n\n\t&:after,\n\t&:before {\n\t\tbox-sizing: border-box;\n\t}\n\n\t&.circle {\n\t\twidth: var(--skeleton-width, 40px);\n\t\theight: var(--skeleton-height, 40px);\n\t\tmargin-bottom: var(--skeleton-margin-bottom, 5px);\n\t\tborder-radius: var(--skeleton-border-radius, 50%);\n\t}\n\n\t&.rect {\n\t\tborder-radius: var(--skeleton-border-radius, 0px);\n\t}\n\n\t&.progress,\n\t&.progress-dark {\n\t\t-webkit-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n -moz-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n -ms-animation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation: progress 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tbackground-size: 200px 100%;\n\t}\n\n\t&.progress {\n\t\tbackground-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));\n\t}\n\n\t&.progress-dark {\n\t\tbackground-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n background-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);\n background-image: -ms-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent); \n\t\tbackground-image: linear-gradient(90deg,transparent,rgba(0, 0, 0, 0.2),transparent);\n\t}\n\n\t&.pulse {\n\t\t-webkit-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n -moz-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n -ms-animation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation: pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;\n\t\tanimation-delay: 0.5s;\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t&.pulse,\n\t\t&.progress-dark,\n\t\t&.progress {\n\t\t\tanimation: none;\n\t\t}\n\n\t\t&.progress,\n\t\t&.progress-dark {\n\t\t\tbackground-image: none;\n\t\t}\n\t}\n}\n\n@-webkit-keyframes progress {\n 0% { background-position: -200px 0; }\n 100% { background-position: calc(200px + 100%) 0; }\n}\n@-moz-keyframes progress {\n 0% { background-position: -200px 0; }\n 100% { background-position: calc(200px + 100%) 0; }\n}\n@-ms-keyframes progress {\n 0% { background-position: -200px 0; }\n 100% { background-position: calc(200px + 100%) 0; }\n}\n@keyframes progress {\n\t0% { background-position: -200px 0; }\n\t100% { background-position: calc(200px + 100%) 0; }\n}\n\n@-webkit-keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.4; }\n 100% { opacity: 1; }\n}\n@-moz-keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.4; }\n 100% { opacity: 1; }\n}\n@-ms-keyframes pulse {\n 0% { opacity: 1; }\n 50% { opacity: 0.4; }\n 100% { opacity: 1; }\n}\n@keyframes pulse {\n\t0% { opacity: 1; }\n\t50% { opacity: 0.4; }\n\t100% { opacity: 1; }\n}";
|
|
526
|
-
|
|
527
|
-
const EzSkeleton = class {
|
|
528
|
-
constructor(hostRef) {
|
|
529
|
-
registerInstance(this, hostRef);
|
|
530
|
-
this.items = [];
|
|
531
|
-
this.count = 1;
|
|
532
|
-
this.variant = 'text';
|
|
533
|
-
this.width = null;
|
|
534
|
-
this.height = null;
|
|
535
|
-
this.marginBottom = null;
|
|
536
|
-
this.animation = 'progress';
|
|
537
|
-
}
|
|
538
|
-
componentWillLoad() {
|
|
539
|
-
this.init();
|
|
540
|
-
}
|
|
541
|
-
componentWillUpdate() {
|
|
542
|
-
this.init();
|
|
543
|
-
}
|
|
544
|
-
init() {
|
|
545
|
-
this.items.length = this.count;
|
|
546
|
-
this.items.fill(1);
|
|
547
|
-
if (!ALLOWED_ANIMATIONS.includes(this.animation)) {
|
|
548
|
-
this.animation = 'progress';
|
|
549
|
-
}
|
|
550
|
-
}
|
|
551
|
-
get style() {
|
|
552
|
-
let dimenssionsStyles = {
|
|
553
|
-
width: null,
|
|
554
|
-
height: null,
|
|
555
|
-
marginBottom: null
|
|
556
|
-
};
|
|
557
|
-
if (this.width) {
|
|
558
|
-
dimenssionsStyles.width = this.width;
|
|
559
|
-
}
|
|
560
|
-
if (this.height) {
|
|
561
|
-
dimenssionsStyles.height = this.height;
|
|
562
|
-
}
|
|
563
|
-
if (this.marginBottom) {
|
|
564
|
-
dimenssionsStyles.marginBottom = this.marginBottom;
|
|
565
|
-
}
|
|
566
|
-
return dimenssionsStyles;
|
|
567
|
-
}
|
|
568
|
-
render() {
|
|
569
|
-
return this.items.map((_, index) => {
|
|
570
|
-
return (h("span", { key: index, class: {
|
|
571
|
-
circle: this.variant === 'circle',
|
|
572
|
-
rect: this.variant === 'rect',
|
|
573
|
-
progress: this.animation === 'progress',
|
|
574
|
-
'progress-dark': this.animation === 'progress-dark',
|
|
575
|
-
pulse: this.animation === 'pulse',
|
|
576
|
-
skeleton: true
|
|
577
|
-
}, "data-busy": "true", "data-valuemin": "0", "data-valuemax": "100", "data-valuetext": "Loading...", role: "progressbar", tabindex: "0", style: this.style }));
|
|
578
|
-
});
|
|
579
|
-
}
|
|
580
|
-
};
|
|
581
|
-
EzSkeleton.style = ezSkeletonCss;
|
|
582
|
-
|
|
583
|
-
export { EzDropdown as ez_dropdown, EzSkeleton as ez_skeleton };
|
|
523
|
+
export { EzDropdown as ez_dropdown };
|