@sankhyalabs/ezui 0.0.0-bugfix-dev-KB-81596.1 → 0.0.0-bugfix-dev-KB-85226.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 +42 -17
- 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 +41 -24
- package/dist/cjs/ez-tooltip.cjs.entry.js +8 -3
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/filter-column.cjs.entry.js +0 -1
- package/dist/cjs/index-a7b0c73d.js +6 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-grid/subcomponents/filter-column.js +0 -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 +50 -22
- 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 -23
- 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 +95 -50
- package/dist/esm/{ez-dropdown_2.entry.js → ez-dropdown.entry.js} +1 -61
- package/dist/esm/ez-search-plus.entry.js +42 -17
- 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 +41 -24
- package/dist/esm/ez-tooltip.entry.js +8 -3
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/filter-column.entry.js +0 -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-0fb509ff.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-6825bdc7.entry.js +1 -0
- package/dist/ezui/p-7742802c.entry.js +1 -0
- package/dist/ezui/p-9f356046.entry.js +1 -0
- package/dist/ezui/p-d9e4a85a.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 +7 -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-0fa52b0f.entry.js +0 -1
- package/dist/ezui/p-2f45506d.entry.js +0 -1
- package/dist/ezui/p-3176a6ef.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() {
|
|
@@ -77181,7 +77181,8 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77181
77181
|
console.warn("[EzSearchPlus] Erro ao obter descrição do registro.", err);
|
|
77182
77182
|
throw err;
|
|
77183
77183
|
}
|
|
77184
|
-
this.
|
|
77184
|
+
this.value = this.buildCurrentValue();
|
|
77185
|
+
this.ezChange.emit(this.value);
|
|
77185
77186
|
}
|
|
77186
77187
|
canShowLoadSpinDescription() {
|
|
77187
77188
|
return this.isLoadingDescription;
|
|
@@ -77315,6 +77316,9 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77315
77316
|
if (!loadedOption) {
|
|
77316
77317
|
return "";
|
|
77317
77318
|
}
|
|
77319
|
+
if (Array.isArray(loadedOption)) {
|
|
77320
|
+
return loadedOption[0].label;
|
|
77321
|
+
}
|
|
77318
77322
|
return loadedOption.label;
|
|
77319
77323
|
}
|
|
77320
77324
|
finally {
|
|
@@ -77356,7 +77360,7 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77356
77360
|
}
|
|
77357
77361
|
async handleTextInputChangeHandler(event) {
|
|
77358
77362
|
if (!this.searchDescriptionIsOpen) {
|
|
77359
|
-
this._popover.
|
|
77363
|
+
this._popover.showUnder(this.el);
|
|
77360
77364
|
}
|
|
77361
77365
|
const argument = event.target.value;
|
|
77362
77366
|
await this.debounceLoaderOptions(argument);
|
|
@@ -77371,11 +77375,31 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77371
77375
|
}, this.SEARCH_DESCRIPTION_TIMEOUT);
|
|
77372
77376
|
});
|
|
77373
77377
|
}
|
|
77378
|
+
updateKeyOption(option) {
|
|
77379
|
+
return (Object.assign(Object.assign({}, option), { presentationValue: option.value, presentationLabel: option.label }));
|
|
77380
|
+
}
|
|
77381
|
+
parseSearchOptions(options = []) {
|
|
77382
|
+
if (Array.isArray(options)) {
|
|
77383
|
+
const firstOption = options[0];
|
|
77384
|
+
if (!firstOption) {
|
|
77385
|
+
return [];
|
|
77386
|
+
}
|
|
77387
|
+
if ("label" in firstOption || "value" in firstOption) {
|
|
77388
|
+
return options.map((option) => this.updateKeyOption(option));
|
|
77389
|
+
}
|
|
77390
|
+
return options;
|
|
77391
|
+
}
|
|
77392
|
+
if ("label" in options || "value" in options) {
|
|
77393
|
+
[this.updateKeyOption(options)];
|
|
77394
|
+
}
|
|
77395
|
+
return [options];
|
|
77396
|
+
}
|
|
77374
77397
|
async processOptionsLoader(argument) {
|
|
77375
77398
|
try {
|
|
77376
77399
|
this.showLoading = true;
|
|
77377
77400
|
const searchArgument = { mode: SearchMode$2.PREDICTIVE, argument };
|
|
77378
|
-
|
|
77401
|
+
const options = await this.optionLoader(searchArgument);
|
|
77402
|
+
this.visibleOptions = this.parseSearchOptions(options);
|
|
77379
77403
|
}
|
|
77380
77404
|
finally {
|
|
77381
77405
|
this.showLoading = false;
|
|
@@ -77407,12 +77431,13 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77407
77431
|
await ((_a = this._searchList) === null || _a === void 0 ? void 0 : _a.selectCurrentItem());
|
|
77408
77432
|
}
|
|
77409
77433
|
async cancelSelection() {
|
|
77410
|
-
var _a, _b, _c
|
|
77411
|
-
|
|
77412
|
-
|
|
77434
|
+
var _a, _b, _c;
|
|
77435
|
+
const label = typeof this.value === 'object' ? (_a = this.value) === null || _a === void 0 ? void 0 : _a.label : this.value;
|
|
77436
|
+
if (this._textInputDescriptionValue && this._textInputDescriptionValue.value != label) {
|
|
77437
|
+
this._textInputDescriptionValue.value = label;
|
|
77413
77438
|
}
|
|
77414
|
-
await ((
|
|
77415
|
-
(
|
|
77439
|
+
await ((_b = this._searchList) === null || _b === void 0 ? void 0 : _b.cancelSelection());
|
|
77440
|
+
(_c = this._popover) === null || _c === void 0 ? void 0 : _c.hide();
|
|
77416
77441
|
}
|
|
77417
77442
|
async handleInputTab() {
|
|
77418
77443
|
await this.cancelSelection();
|
|
@@ -77424,13 +77449,13 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77424
77449
|
}
|
|
77425
77450
|
async initKeyboardManager() {
|
|
77426
77451
|
this._keyboardManager = new KeyboardManager();
|
|
77427
|
-
const
|
|
77452
|
+
const defaultOpts = { element: this.el, propagate: true };
|
|
77428
77453
|
this._keyboardManager
|
|
77429
|
-
.bind("ArrowUp", () => this.handleArrowUp(),
|
|
77430
|
-
.bind("ArrowDown", () => this.handleArrowDown(),
|
|
77431
|
-
.bind("Enter", () => this.selectCurrentItem(),
|
|
77432
|
-
.bind("Tab", () => this.handleInputTab(),
|
|
77433
|
-
.bind("Escape", () => this.handleInputEsc(),
|
|
77454
|
+
.bind("ArrowUp", () => this.handleArrowUp(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
|
|
77455
|
+
.bind("ArrowDown", () => this.handleArrowDown(), Object.assign(Object.assign({}, defaultOpts), { propagate: false }))
|
|
77456
|
+
.bind("Enter", () => this.selectCurrentItem(), defaultOpts)
|
|
77457
|
+
.bind("Tab", () => this.handleInputTab(), defaultOpts)
|
|
77458
|
+
.bind("Escape", () => this.handleInputEsc(), defaultOpts);
|
|
77434
77459
|
}
|
|
77435
77460
|
disconnectedCallback() {
|
|
77436
77461
|
this._keyboardManager
|
|
@@ -77465,10 +77490,10 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77465
77490
|
render() {
|
|
77466
77491
|
ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
|
|
77467
77492
|
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":
|
|
77493
|
+
"ez-search-plus__code-input": !this.hideDescriptionInput,
|
|
77469
77494
|
"ez-search-plus__code-input-no-border": !this.hideDescriptionInput,
|
|
77470
77495
|
"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.
|
|
77496
|
+
}, "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.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
77497
|
}
|
|
77473
77498
|
get el() { return this; }
|
|
77474
77499
|
static get watchers() { return {
|
|
@@ -77477,7 +77502,7 @@ const EzSearchPlus$1 = class extends HTMLElement$1 {
|
|
|
77477
77502
|
static get style() { return ezSearchPlusCss; }
|
|
77478
77503
|
};
|
|
77479
77504
|
|
|
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)}.
|
|
77505
|
+
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
77506
|
|
|
77482
77507
|
const EzSearchResultList$1 = class extends HTMLElement$1 {
|
|
77483
77508
|
constructor() {
|
|
@@ -77563,8 +77588,7 @@ const EzSearchResultList$1 = class extends HTMLElement$1 {
|
|
|
77563
77588
|
render() {
|
|
77564
77589
|
return (h(Host, null, h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this.showLoading
|
|
77565
77590
|
&& 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)))));
|
|
77591
|
+
&& 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
77592
|
}
|
|
77569
77593
|
static get style() { return ezSearchResultListCss; }
|
|
77570
77594
|
};
|
|
@@ -79380,7 +79404,7 @@ const EzTextEdit$1 = class extends HTMLElement$1 {
|
|
|
79380
79404
|
static get style() { return ezTextEditCss; }
|
|
79381
79405
|
};
|
|
79382
79406
|
|
|
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(--
|
|
79407
|
+
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
79408
|
|
|
79385
79409
|
const EzTextInput$1 = class extends HTMLElement$1 {
|
|
79386
79410
|
constructor() {
|
|
@@ -79388,6 +79412,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79388
79412
|
this.__registerHost();
|
|
79389
79413
|
this.__attachShadow();
|
|
79390
79414
|
this.ezChange = createEvent(this, "ezChange", 7);
|
|
79415
|
+
this._isOverflowing = false;
|
|
79391
79416
|
this.label = undefined;
|
|
79392
79417
|
this.value = undefined;
|
|
79393
79418
|
this.enabled = true;
|
|
@@ -79403,29 +79428,17 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79403
79428
|
this.autoFocus = false;
|
|
79404
79429
|
this.hasRightSlotContent = false;
|
|
79405
79430
|
}
|
|
79406
|
-
observeHasInvalid() {
|
|
79407
|
-
if (
|
|
79431
|
+
observeHasInvalid(newValue, oldValue) {
|
|
79432
|
+
if (newValue === oldValue) {
|
|
79408
79433
|
return;
|
|
79409
|
-
if (this.hasInvalid) {
|
|
79410
|
-
this._inputElem.classList.add("hasError");
|
|
79411
|
-
}
|
|
79412
|
-
else {
|
|
79413
|
-
this._inputElem.classList.remove("hasError");
|
|
79414
79434
|
}
|
|
79435
|
+
this.validateErrors();
|
|
79415
79436
|
}
|
|
79416
|
-
observeErrorMessage() {
|
|
79417
|
-
if (
|
|
79418
|
-
|
|
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
|
-
});
|
|
79437
|
+
observeErrorMessage(newValue, oldValue) {
|
|
79438
|
+
if (newValue === oldValue) {
|
|
79439
|
+
return;
|
|
79428
79440
|
}
|
|
79441
|
+
this.validateErrors();
|
|
79429
79442
|
}
|
|
79430
79443
|
observeMask() {
|
|
79431
79444
|
if (this.mask) {
|
|
@@ -79443,6 +79456,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79443
79456
|
this._inputElem.value = this.value || "";
|
|
79444
79457
|
this.handleChange();
|
|
79445
79458
|
this.adjustFloatingLabel();
|
|
79459
|
+
this.checkIsOverflowing();
|
|
79446
79460
|
if (!this.isSlaveMode()) {
|
|
79447
79461
|
this.errorMessage = "";
|
|
79448
79462
|
this.ezChange.emit(this.value);
|
|
@@ -79453,6 +79467,25 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79453
79467
|
//---------------------------------------------
|
|
79454
79468
|
// Private methods
|
|
79455
79469
|
//---------------------------------------------
|
|
79470
|
+
validateErrors() {
|
|
79471
|
+
const hasErrorMessage = this.handleValidateErrorMessage(this.errorMessage);
|
|
79472
|
+
const hasError = hasErrorMessage || this.hasInvalid;
|
|
79473
|
+
this.updateClassError(hasError);
|
|
79474
|
+
}
|
|
79475
|
+
handleValidateErrorMessage(message = this.errorMessage) {
|
|
79476
|
+
return typeof message === "string" && message.trim() !== "";
|
|
79477
|
+
}
|
|
79478
|
+
updateClassError(status) {
|
|
79479
|
+
if (!this._inputElem) {
|
|
79480
|
+
return;
|
|
79481
|
+
}
|
|
79482
|
+
if (status) {
|
|
79483
|
+
this._inputElem.classList.add("hasError");
|
|
79484
|
+
}
|
|
79485
|
+
else {
|
|
79486
|
+
this._inputElem.classList.remove("hasError");
|
|
79487
|
+
}
|
|
79488
|
+
}
|
|
79456
79489
|
adjustFloatingLabel() {
|
|
79457
79490
|
if (this.label && this._labelElem) {
|
|
79458
79491
|
if (this._inputElem && !this._inputElem.classList.contains("input--with--label")) {
|
|
@@ -79511,7 +79544,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79511
79544
|
* Retorna se o conteúdo é inválido.
|
|
79512
79545
|
*/
|
|
79513
79546
|
async isInvalid() {
|
|
79514
|
-
return
|
|
79547
|
+
return this.handleValidateErrorMessage();
|
|
79515
79548
|
}
|
|
79516
79549
|
//---------------------------------------------
|
|
79517
79550
|
// Event handlers
|
|
@@ -79622,7 +79655,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79622
79655
|
}
|
|
79623
79656
|
slot.name && ElementIDUtils.addIDInfo(content, slot.name);
|
|
79624
79657
|
}
|
|
79625
|
-
this.
|
|
79658
|
+
this.validateErrors();
|
|
79626
79659
|
}
|
|
79627
79660
|
doFocus() {
|
|
79628
79661
|
if (this.label && this._labelElem && !this._labelElem.classList.contains("input__label--floated")) {
|
|
@@ -79633,6 +79666,13 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79633
79666
|
getValue() {
|
|
79634
79667
|
return this.mask && this.cleanValueMask ? this.applyMask(this.value) : this.value;
|
|
79635
79668
|
}
|
|
79669
|
+
checkIsOverflowing() {
|
|
79670
|
+
if (this._inputElem) {
|
|
79671
|
+
this._isOverflowing = this._inputElem.offsetWidth < this._inputElem.scrollWidth;
|
|
79672
|
+
return;
|
|
79673
|
+
}
|
|
79674
|
+
this._isOverflowing = false;
|
|
79675
|
+
}
|
|
79636
79676
|
//---------------------------------------------
|
|
79637
79677
|
// Lifecycle web component
|
|
79638
79678
|
//---------------------------------------------
|
|
@@ -79660,10 +79700,11 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79660
79700
|
}
|
|
79661
79701
|
componentDidLoad() {
|
|
79662
79702
|
var _a;
|
|
79663
|
-
this.
|
|
79703
|
+
this.validateErrors();
|
|
79664
79704
|
this.observeMask();
|
|
79665
79705
|
this.adjustFloatingLabel();
|
|
79666
79706
|
this.adjustBorderInput();
|
|
79707
|
+
this.checkIsOverflowing();
|
|
79667
79708
|
if (this.autoFocus) {
|
|
79668
79709
|
requestAnimationFrame(() => {
|
|
79669
79710
|
this.setFocus({ selectText: true });
|
|
@@ -79678,7 +79719,7 @@ const EzTextInput$1 = class extends HTMLElement$1 {
|
|
|
79678
79719
|
ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');
|
|
79679
79720
|
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
79721
|
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(),
|
|
79722
|
+
: 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
79723
|
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
79724
|
}
|
|
79684
79725
|
get _hostElement() { return this; }
|
|
@@ -79953,7 +79994,7 @@ const EzToast$1 = class extends HTMLElement$1 {
|
|
|
79953
79994
|
static get style() { return ezToastCss; }
|
|
79954
79995
|
};
|
|
79955
79996
|
|
|
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)}";
|
|
79997
|
+
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
79998
|
|
|
79958
79999
|
const EzTooltip$1 = class extends HTMLElement$1 {
|
|
79959
80000
|
constructor() {
|
|
@@ -79968,7 +80009,8 @@ const EzTooltip$1 = class extends HTMLElement$1 {
|
|
|
79968
80009
|
this.type = 'default';
|
|
79969
80010
|
this.debouncingTime = 500;
|
|
79970
80011
|
this.active = true;
|
|
79971
|
-
this.
|
|
80012
|
+
this.maxWidth = 200;
|
|
80013
|
+
this.useAnchorSize = false;
|
|
79972
80014
|
}
|
|
79973
80015
|
watchAnchoringElement(newValue, oldValue) {
|
|
79974
80016
|
if (newValue) {
|
|
@@ -80004,6 +80046,10 @@ const EzTooltip$1 = class extends HTMLElement$1 {
|
|
|
80004
80046
|
if (!element || !this._opened) {
|
|
80005
80047
|
return;
|
|
80006
80048
|
}
|
|
80049
|
+
if (this.useAnchorSize) {
|
|
80050
|
+
const anchorSize = element.getBoundingClientRect().width;
|
|
80051
|
+
this._tooltipElement.style.width = `${anchorSize}px`;
|
|
80052
|
+
}
|
|
80007
80053
|
await computePosition(element, this._tooltipElement, {
|
|
80008
80054
|
placement: this.placement,
|
|
80009
80055
|
middleware: [
|
|
@@ -80065,7 +80111,7 @@ const EzTooltip$1 = class extends HTMLElement$1 {
|
|
|
80065
80111
|
"tooltip": true,
|
|
80066
80112
|
[`${this.type}-tooltip`]: true,
|
|
80067
80113
|
}, style: {
|
|
80068
|
-
|
|
80114
|
+
maxWidth: (this.maxWidth && !this.useAnchorSize) ? `${this.maxWidth}px` : undefined,
|
|
80069
80115
|
}, 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
80116
|
}
|
|
80071
80117
|
get _element() { return this; }
|
|
@@ -81166,7 +81212,6 @@ const FilterColumn$1 = class extends HTMLElement$1 {
|
|
|
81166
81212
|
*/
|
|
81167
81213
|
async show(configs) {
|
|
81168
81214
|
if (this.canShow(configs)) {
|
|
81169
|
-
await this.hide();
|
|
81170
81215
|
this.fieldDescriptor = this.dataUnit.getField(configs.columnName);
|
|
81171
81216
|
this.buildIsTextSearch();
|
|
81172
81217
|
this.columnName = configs.columnName;
|
|
@@ -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 };
|