@sankhyalabs/ezui 5.20.0-dev.1 → 5.20.0-dev.2
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-card-item_3.cjs.entry.js +182 -0
- package/dist/cjs/ez-combo-box.cjs.entry.js +11 -155
- package/dist/cjs/ez-search.cjs.entry.js +611 -31
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/index-a7b0c73d.js +2 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/ez-card-item/ez-card-item.css +16 -0
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +12 -173
- package/dist/collection/components/ez-search/ez-search.css +330 -0
- package/dist/collection/components/ez-search/ez-search.js +689 -55
- package/dist/custom-elements/index.js +628 -195
- package/dist/esm/ez-card-item_3.entry.js +176 -0
- package/dist/esm/ez-combo-box.entry.js +12 -156
- package/dist/esm/ez-search.entry.js +613 -33
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/index-baa5e267.js +2 -6
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-133fae4a.entry.js +1 -0
- package/dist/ezui/p-43b03119.entry.js +1 -0
- package/dist/ezui/p-ba875f37.entry.js +1 -0
- package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +0 -15
- package/dist/types/components/ez-search/ez-search.d.ts +100 -10
- package/dist/types/components.d.ts +23 -14
- package/dist/types/utils/interfaces/AbstractFieldMetadata.d.ts +2 -1
- package/package.json +1 -1
- package/dist/cjs/ez-card-item.cjs.entry.js +0 -52
- package/dist/cjs/ez-filter-input_2.cjs.entry.js +0 -137
- package/dist/esm/ez-card-item.entry.js +0 -48
- package/dist/esm/ez-filter-input_2.entry.js +0 -132
- package/dist/ezui/p-05f5a778.entry.js +0 -1
- package/dist/ezui/p-5613fe63.entry.js +0 -1
- package/dist/ezui/p-a32aaac6.entry.js +0 -1
- package/dist/ezui/p-a5ac7151.entry.js +0 -1
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-a7b0c73d.js');
|
|
6
|
+
const core = require('@sankhyalabs/core');
|
|
7
|
+
const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
|
|
8
|
+
|
|
9
|
+
const ezCardItemCss = ":host {\n /*@doc Define o tamanho da fonte do componente.*/\n --ez-card-item--font-size: var(--text--medium, 14px);\n\n /*@doc Define a família da fonte do componente.*/\n --ez-card-item--font-family: var(--font-pattern, Arial);\n\n /*@doc Define o peso da fonte do componente.*/\n --ez-card-item--font-weight: var(--text-weight--medium, 400);\n\n /*@doc Define o peso da fonte do title do componente.*/\n --ez-card-item--font-weight-large: var(--text-weight--large, 600);\n\n /*@doc Define a cor da fonte do componente.*/\n --ez-card-item--color: var(--title--primary, #2B3A54);\n\n /*@doc Define a cor da fonte da key do componente.*/\n --ez-card-item__key--color: var(--text--primary, #626e82);\n\n /*@doc Define a cor da fonte do label do detalhe do componente.*/\n --ez-card-item__detail-label--color: var(--text--secondary, #A2ABB9);\n\n /*@doc Define o espaçamento inferior dos detalhes do componente.*/\n --ez-card-item__detail--padding-bottom: var(--space--extra-small, 3px);\n\n /*@doc Define o espaçamento inferior do title do componente.*/\n --ez-card-item__title--padding-bottom: var(--space--extra-small, 3px);\n\n /*@doc Define a cor do highlight / marcação nos textos do componente.*/\n --ez-card-item__highlight--color: var(--color--primary-300, #E2F4EF);\n\n width: 100%;\n display: flex;\n cursor: pointer;\n}\n\n.card-item {\n display: flex;\n flex-direction: column;\n width: 100%;\n cursor: pointer;\n padding: 12px;\n z-index: 0;\n position: relative;\n container-type: inline-size;\n container-name: box;\n}\n\n.card-item:hover {\n background: #F0F3F7;\n border-radius: 12px;\n}\n\n.card-item__title {\n display: flex;\n align-items: center;\n line-height: 18px;\n cursor: pointer;\n\n /*public*/\n font-size: var(--ez-card-item--font-size);\n font-family: var(--ez-card-item--font-family);\n font-weight: var(--ez-card-item--font-weight-large);\n color: var(--ez-card-item--color);\n padding-bottom: var(--ez-card-item__title--padding-bottom);\n gap: var(--space--small, 6px);\n}\n\n.card-item__key {\n /*public*/\n color: var(--ez-card-item__key--color);\n}\n\n.card-item__details {\n display: flex;\n cursor: pointer;\n justify-content: space-between;\n gap: var(--space--small, 6px);\n}\n\n.card-item__details-left {\n cursor: pointer;\n width: 50%;\n}\n\n.card-item__details-right {\n width: 50%;\n cursor: pointer;\n}\n\n.card-item__detail:not(:last-child) {\n cursor: pointer;\n\n /*public*/\n padding-bottom: var(--ez-card-item__detail--padding-bottom);\n}\n\n.card-item__detail-label {\n cursor: pointer;\n\n /*public*/\n font-size: var(--ez-card-item--font-size);\n font-family: var(--ez-card-item--font-family);\n font-weight: var(--ez-card-item--font-weight);\n color: var(--ez-card-item__detail-label--color);\n}\n\n.card-item__detail-value {\n cursor: pointer;\n line-break: anywhere;\n\n /*public*/\n font-size: var(--ez-card-item--font-size);\n font-family: var(--ez-card-item--font-family);\n font-weight: var(--ez-card-item--font-weight);\n color: var(--ez-card-item--color);\n}\n\n.card-item__highlight {\n position: relative;\n border-radius: 8px;\n z-index: -1;\n\n /*public*/\n background-color: var(--ez-card-item__highlight--color);\n outline: 2px solid var(--ez-card-item__highlight--color);\n box-shadow: -4px 0px 0px 0px var(--ez-card-item__highlight--color), \n 4px 0px 0px 0px var(--ez-card-item__highlight--color);\n}\n\n@container box (max-width: 500px) {\n .card-item__details {\n flex-direction: column;\n }\n\n .card-item__details-left {\n width: 100%;\n }\n \n .card-item__details-right {\n width: 100%;\n }\n}";
|
|
10
|
+
|
|
11
|
+
const EzCardItem = class {
|
|
12
|
+
constructor(hostRef) {
|
|
13
|
+
index.registerInstance(this, hostRef);
|
|
14
|
+
this.ezClick = index.createEvent(this, "ezClick", 7);
|
|
15
|
+
this.item = undefined;
|
|
16
|
+
}
|
|
17
|
+
componentWillRender() {
|
|
18
|
+
this.createDetailList();
|
|
19
|
+
}
|
|
20
|
+
componentDidLoad() {
|
|
21
|
+
var _a, _b;
|
|
22
|
+
const dataInfo = { id: core.StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
|
|
23
|
+
core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
|
|
24
|
+
}
|
|
25
|
+
createDetailList() {
|
|
26
|
+
var _a, _b, _c;
|
|
27
|
+
this._details = { detailsLeft: [], detailsRight: [] };
|
|
28
|
+
let cont = 0;
|
|
29
|
+
if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
|
|
30
|
+
for (const attribute in this.item.details) {
|
|
31
|
+
cont < 3 ?
|
|
32
|
+
this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
|
|
33
|
+
this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
|
|
34
|
+
cont++;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
buildDetailContent(detail) {
|
|
39
|
+
return index.h("div", { class: "card-item__detail" }, index.h("label", { class: "card-item__detail-label" }, detail.label), ": ", index.h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
|
|
40
|
+
}
|
|
41
|
+
render() {
|
|
42
|
+
return (index.h(index.Host, null, this.item &&
|
|
43
|
+
index.h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, index.h("label", { class: "card-item__title" }, index.h("span", { class: "card-item__key", innerHTML: this.item.key }), index.h("span", { innerHTML: this.item.title })), index.h("div", { class: "card-item__details" }, index.h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
|
|
44
|
+
return this.buildDetailContent(detail);
|
|
45
|
+
})), index.h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
|
|
46
|
+
return this.buildDetailContent(detail);
|
|
47
|
+
}))))));
|
|
48
|
+
}
|
|
49
|
+
get _element() { return index.getElement(this); }
|
|
50
|
+
};
|
|
51
|
+
EzCardItem.style = ezCardItemCss;
|
|
52
|
+
|
|
53
|
+
const ezFilterInputCss = ":host{display:block;width:100%}";
|
|
54
|
+
|
|
55
|
+
const EzFilterInput = class {
|
|
56
|
+
constructor(hostRef) {
|
|
57
|
+
index.registerInstance(this, hostRef);
|
|
58
|
+
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
59
|
+
this.ezSearching = index.createEvent(this, "ezSearching", 7);
|
|
60
|
+
this.ezFocusIn = index.createEvent(this, "ezFocusIn", 7);
|
|
61
|
+
this._searchingText = "";
|
|
62
|
+
this.handleFocus = () => {
|
|
63
|
+
if (this._searchingText === "") {
|
|
64
|
+
this._textInput.value = "";
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
this._textInput.value = this._searchingText;
|
|
68
|
+
}
|
|
69
|
+
this.ezFocusIn.emit();
|
|
70
|
+
};
|
|
71
|
+
this.label = undefined;
|
|
72
|
+
this.value = undefined;
|
|
73
|
+
this.enabled = true;
|
|
74
|
+
this.errorMessage = undefined;
|
|
75
|
+
this.restrict = undefined;
|
|
76
|
+
this.mode = "regular";
|
|
77
|
+
this.asyncSearch = false;
|
|
78
|
+
this.canShowError = true;
|
|
79
|
+
}
|
|
80
|
+
observeLabel() {
|
|
81
|
+
if (this._textInput) {
|
|
82
|
+
this._textInput.label = this.label;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
observeErrorMessage() {
|
|
86
|
+
if (this._textInput) {
|
|
87
|
+
this._textInput.errorMessage = this.errorMessage;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
observeValue(newValue, oldValue) {
|
|
91
|
+
if (this._textInput && newValue != oldValue) {
|
|
92
|
+
this._textInput.value = newValue;
|
|
93
|
+
this.ezChange.emit(newValue);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Aplica o foco no campo.
|
|
98
|
+
*/
|
|
99
|
+
async setFocus() {
|
|
100
|
+
this._textInput.setFocus();
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* Remove o foco do campo.
|
|
104
|
+
*/
|
|
105
|
+
async setBlur() {
|
|
106
|
+
this._textInput.setBlur();
|
|
107
|
+
}
|
|
108
|
+
/**
|
|
109
|
+
* Retorna se o conteúdo é inválido.
|
|
110
|
+
*/
|
|
111
|
+
async isInvalid() {
|
|
112
|
+
return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
|
|
113
|
+
}
|
|
114
|
+
/**
|
|
115
|
+
* Método responsável por setar um novo valor ao campo.
|
|
116
|
+
*/
|
|
117
|
+
async setValue(newValue) {
|
|
118
|
+
if (!this.asyncSearch || this._textInput == undefined) {
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
if (newValue !== this.value) {
|
|
122
|
+
this.value = newValue;
|
|
123
|
+
this._searchingText = "";
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
this._textInput.value = newValue;
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
/**
|
|
130
|
+
* Método responsável por resetar o valor do campo para o ultimo valor inputado.
|
|
131
|
+
*/
|
|
132
|
+
async endSearch() {
|
|
133
|
+
if (!this.asyncSearch || this._textInput == undefined) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
if (this._textInput.value !== this.value) {
|
|
137
|
+
this._textInput.value = this.value;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
handleChange(evt) {
|
|
141
|
+
const newValue = evt.detail;
|
|
142
|
+
this.errorMessage = "";
|
|
143
|
+
if (this.asyncSearch) {
|
|
144
|
+
this._searchingText = newValue;
|
|
145
|
+
this.ezSearching.emit(newValue);
|
|
146
|
+
}
|
|
147
|
+
else if (newValue !== this.value) {
|
|
148
|
+
this.value = newValue;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
componentDidLoad() {
|
|
152
|
+
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
153
|
+
}
|
|
154
|
+
render() {
|
|
155
|
+
core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
156
|
+
return (index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), ref: elem => this._textInput = elem, label: this.label, onEzChange: evt => this.handleChange(evt), value: this.value, enabled: this.enabled, errorMessage: this.errorMessage, restrict: this.restrict, mode: this.mode, onFocusin: this.handleFocus, canShowError: this.canShowError }, index.h("ez-icon", { slot: "leftIcon", iconName: "search" })));
|
|
157
|
+
}
|
|
158
|
+
get _elem() { return index.getElement(this); }
|
|
159
|
+
static get watchers() { return {
|
|
160
|
+
"label": ["observeLabel"],
|
|
161
|
+
"errorMessage": ["observeErrorMessage"],
|
|
162
|
+
"value": ["observeValue"]
|
|
163
|
+
}; }
|
|
164
|
+
};
|
|
165
|
+
EzFilterInput.style = ezFilterInputCss;
|
|
166
|
+
|
|
167
|
+
const multiSelectionBoxMessageCss = ".multi-selection__message{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;min-height:320px;text-align:center}.multi-selection__text-message{margin-top:-30px;font-family:var(--font-pattern);font-size:var(--text--meduim);padding:var(--space-xs);color:var(--text--primary)}";
|
|
168
|
+
|
|
169
|
+
const MultiSelectionBoxMessage = class {
|
|
170
|
+
constructor(hostRef) {
|
|
171
|
+
index.registerInstance(this, hostRef);
|
|
172
|
+
this.message = undefined;
|
|
173
|
+
}
|
|
174
|
+
render() {
|
|
175
|
+
return (index.h("div", { class: "multi-selection__message" }, index.h("span", { class: "multi-selection__text-message" }, this.message)));
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
MultiSelectionBoxMessage.style = multiSelectionBoxMessageCss;
|
|
179
|
+
|
|
180
|
+
exports.ez_card_item = EzCardItem;
|
|
181
|
+
exports.ez_filter_input = EzFilterInput;
|
|
182
|
+
exports.multi_selection_box_message = MultiSelectionBoxMessage;
|
|
@@ -4,11 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-a7b0c73d.js');
|
|
6
6
|
const core = require('@sankhyalabs/core');
|
|
7
|
-
|
|
7
|
+
require('./ApplicationUtils-c9d1205c.js');
|
|
8
8
|
const CSSVarsUtils = require('./CSSVarsUtils-b136a156.js');
|
|
9
9
|
require('./DialogType-2114c337.js');
|
|
10
10
|
require('./CheckMode-ecb90b87.js');
|
|
11
|
-
const constants = require('./constants-2714478b.js');
|
|
12
11
|
|
|
13
12
|
const ezComboBoxCss = ":host{--ez-combo-box--height:42px;--ez-combo-box--width:100%;--ez-combo-box__icon--width:48px;--ez-combo-box--border-radius:var(--border--radius-medium, 12px);--ez-combo-box--border-radius-small:var(--border--radius-small, 6px);--ez-combo-box--font-size:var(--text--medium, 14px);--ez-combo-box--font-family:var(--font-pattern, Arial);--ez-combo-box--font-weight--large:var(--text-weight--large, 500);--ez-combo-box--font-weight--medium:var(--text-weight--medium, 400);--ez-combo-box--background-color--xlight:var(--background--xlight, #fff);--ez-combo-box--background-medium:var(--background--medium, #f0f3f7);--ez-combo-box--line-height:calc(var(--text--medium, 14px) + 4px);--ez-combo-box__input--background-color:var(--background--medium, #e0e0e0);--ez-combo-box__input--border:var(--border--medium, 2px solid);--ez-combo-box__input--border-color:var(--ez-combo-box__input--background-color);--ez-combo-box__input--focus--border-color:var(--color--primary, #008561);--ez-combo-box__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--ez-combo-box__input--disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__input--error--border-color:#CC2936;--ez-combo-box__btn--color:var(--title--primary, #2B3A54);--ez-combo-box__btn-disabled--color:var(--text--disable, #AFB6C0);--ez-combo-box__btn-hover--color:var(--color--primary, #4e4e4e);--ez-combo-box__label--color:var(--title--primary, #2B3A54);--ez-combo-box__list-title--primary:var(--title--primary, #2B3A54);--ez-combo-box__list-text--primary:var(--text--primary, #626e82);--ez-combo-box__list-height:calc(var(--ez-combo-box--font-size) + var(--ez-combo-box--space--medium) + 4px);--ez-combo-box__list-min-width:64px;--ez-combo-box--space--medium:var(--space--medium, 12px);--ez-combo-box--space--small:var(--space--small, 6px);--ez-combo-box__scrollbar--color-default:var(--scrollbar--default, #626e82);--ez-combo-box__scrollbar--color-background:var(--scrollbar--background, #E5EAF0);--ez-combo-box__scrollbar--color-hover:var(--scrollbar--hover, #2B3A54);--ez-combo-box__scrollbar--color-clicked:var(--scrollbar--clicked, #a2abb9);--ez-combo-box__scrollbar--border-radius:var(--border--radius-small, 6px);--ez-combo-box__scrollbar--width:var(--space--medium, 12px);display:flex;flex-wrap:wrap;position:relative;width:var(--ez-combo-box--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-combo-box__list-min-width);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:calc(4*var(--ez-combo-box__list-height) + 2*var(--ez-combo-box--space--small) + 9px);background-color:var(--ez-combo-box--background-color--xlight);border-radius:var(--ez-combo-box--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);padding:var(--ez-combo-box--space--small)}.list-options{box-sizing:border-box;width:100%;height:100%;padding:0;display:flex;flex-direction:column;scroll-behavior:smooth;overflow:auto;scrollbar-width:thin;gap:3px;scrollbar-color:var(--ez-combo-box__scrollbar--color-clicked) var(--ez-combo-box__scrollbar--color-background)}.list-options::-webkit-scrollbar{background-color:var(--ez-combo-box__scrollbar--color-background);width:var(--ez-combo-box__scrollbar--width);max-width:var(--ez-combo-box__scrollbar--width);min-width:var(--ez-combo-box__scrollbar--width)}.list-options::-webkit-scrollbar-track{background-color:var(--ez-combo-box__scrollbar--color-background);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb{background-color:var(--ez-combo-box__scrollbar--color-default);border-radius:var(--ez-combo-box__scrollbar--border-radius)}.list-options::-webkit-scrollbar-thumb:vertical:hover,.list-options::-webkit-scrollbar-thumb:horizontal:hover{background-color:var(--ez-combo-box__scrollbar--color-hover)}.list-options::-webkit-scrollbar-thumb:vertical:active,.list-options::-webkit-scrollbar-thumb:horizontal:active{background-color:var(--ez-combo-box__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-combo-box--border-radius-small);padding:var(--ez-combo-box--space--small);min-height:var(--ez-combo-box__list-height);gap:var(--space--small, 6px)}.item__value,.item__label{flex-basis:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--font-size);line-height:var(--ez-combo-box--line-height)}.item__label{font-weight:var(--ez-combo-box--font-weight--medium)}.item__label--bold{font-weight:var(--ez-combo-box--font-weight--large)}.item__value{text-align:center;color:var(--ez-combo-box__list-text--primary);font-weight:var(--ez-combo-box--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-combo-box__list-height)}.message__no-result{color:var(--ez-combo-box__list-title--primary);font-family:var(--ez-combo-box--font-family);font-size:var(--ez-combo-box--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-combo-box__list-title--primary);border-top:3px solid transparent}li:hover{background-color:var(--ez-combo-box--background-medium)}.preselected{background-color:var(--background--medium)}.btn{outline:none;border:none;background:none;cursor:pointer;color:var(--ez-combo-box__btn--color)}.btn:disabled{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:disabled:hover{cursor:unset;color:var(--ez-combo-box__btn-disabled--color)}.btn:hover{color:var(--ez-combo-box__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)}}";
|
|
14
13
|
|
|
@@ -21,7 +20,6 @@ const EzComboBox = class {
|
|
|
21
20
|
this._maxWidthValue = 0;
|
|
22
21
|
this._tabPressed = false;
|
|
23
22
|
this._textEmptyList = "Nenhum resultado encontrado";
|
|
24
|
-
this._textEmptySearch = "Nenhum resultado de {0} encontrado";
|
|
25
23
|
this._lookupMode = false;
|
|
26
24
|
this._preSelection = undefined;
|
|
27
25
|
this._visibleOptions = undefined;
|
|
@@ -34,7 +32,6 @@ const EzComboBox = class {
|
|
|
34
32
|
this.enabled = true;
|
|
35
33
|
this.options = undefined;
|
|
36
34
|
this.errorMessage = undefined;
|
|
37
|
-
this.searchMode = undefined;
|
|
38
35
|
this.showSelectedValue = false;
|
|
39
36
|
this.showOptionValue = false;
|
|
40
37
|
this.suppressSearch = false;
|
|
@@ -58,7 +55,7 @@ const EzComboBox = class {
|
|
|
58
55
|
observeValue(newValue, oldValue) {
|
|
59
56
|
if (this._textInput && newValue != oldValue) {
|
|
60
57
|
try {
|
|
61
|
-
if (
|
|
58
|
+
if (typeof newValue === "string") {
|
|
62
59
|
this.setInputValue();
|
|
63
60
|
return;
|
|
64
61
|
}
|
|
@@ -221,7 +218,7 @@ const EzComboBox = class {
|
|
|
221
218
|
}
|
|
222
219
|
updateVisibleOptions() {
|
|
223
220
|
let opts = this._source || [];
|
|
224
|
-
if (
|
|
221
|
+
if (this._criteria) {
|
|
225
222
|
const upperCriteria = this._criteria.toUpperCase();
|
|
226
223
|
opts = opts.filter(opt => opt.label.toLocaleUpperCase().indexOf(upperCriteria) > -1);
|
|
227
224
|
}
|
|
@@ -296,7 +293,7 @@ const EzComboBox = class {
|
|
|
296
293
|
return this._floatingID !== undefined && core.FloatingManager.isFloating(this._floatingID);
|
|
297
294
|
}
|
|
298
295
|
nextOption() {
|
|
299
|
-
if (
|
|
296
|
+
if (!this.isOptionsVisible()) {
|
|
300
297
|
return;
|
|
301
298
|
}
|
|
302
299
|
this.showOptions();
|
|
@@ -319,9 +316,6 @@ const EzComboBox = class {
|
|
|
319
316
|
this.selectOption(this._visibleOptions[this._preSelection]);
|
|
320
317
|
this._preSelection = undefined;
|
|
321
318
|
}
|
|
322
|
-
else {
|
|
323
|
-
this.controlListWithOnlyOne();
|
|
324
|
-
}
|
|
325
319
|
}
|
|
326
320
|
updateSource(source) {
|
|
327
321
|
this._startLoading = false;
|
|
@@ -340,7 +334,6 @@ const EzComboBox = class {
|
|
|
340
334
|
this.updateVisibleOptions();
|
|
341
335
|
if (this._tabPressed) {
|
|
342
336
|
this._tabPressed = false;
|
|
343
|
-
this.controlEmptySearch();
|
|
344
337
|
}
|
|
345
338
|
}
|
|
346
339
|
else {
|
|
@@ -348,10 +341,6 @@ const EzComboBox = class {
|
|
|
348
341
|
}
|
|
349
342
|
}
|
|
350
343
|
}
|
|
351
|
-
clearSource() {
|
|
352
|
-
this._source = [];
|
|
353
|
-
this.updateVisibleOptions();
|
|
354
|
-
}
|
|
355
344
|
selectOption(newOption) {
|
|
356
345
|
var _a, _b;
|
|
357
346
|
const currentValue = this.getSelectedOption(this.value);
|
|
@@ -363,10 +352,6 @@ const EzComboBox = class {
|
|
|
363
352
|
else {
|
|
364
353
|
this.resetOptions();
|
|
365
354
|
}
|
|
366
|
-
if (this.searchMode) {
|
|
367
|
-
this._visibleOptions = [];
|
|
368
|
-
this.clearSource();
|
|
369
|
-
}
|
|
370
355
|
}
|
|
371
356
|
loadOptions(mode, argument = "") {
|
|
372
357
|
this._criteria = argument;
|
|
@@ -402,93 +387,6 @@ const EzComboBox = class {
|
|
|
402
387
|
clearSearch() {
|
|
403
388
|
this.value = null;
|
|
404
389
|
}
|
|
405
|
-
controlListWithOnlyOne() {
|
|
406
|
-
var _a;
|
|
407
|
-
if (this.searchMode) {
|
|
408
|
-
const source = (_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.filter((opt) => opt.label !== "" && opt.value != undefined);
|
|
409
|
-
if ((source === null || source === void 0 ? void 0 : source.length) === 1) {
|
|
410
|
-
this.selectOption(source[0]);
|
|
411
|
-
}
|
|
412
|
-
}
|
|
413
|
-
}
|
|
414
|
-
controlEmptySearch() {
|
|
415
|
-
var _a;
|
|
416
|
-
if (this.searchMode) {
|
|
417
|
-
if (!((_a = this._visibleOptions) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
418
|
-
this.clearSearch();
|
|
419
|
-
ApplicationUtils.ApplicationUtils.info(this._textEmptyList);
|
|
420
|
-
}
|
|
421
|
-
else {
|
|
422
|
-
this.controlListWithOnlyOne();
|
|
423
|
-
}
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
validateDescriptionValue() {
|
|
427
|
-
if (!this.searchMode || core.StringUtils.isEmpty(this.value)) {
|
|
428
|
-
return;
|
|
429
|
-
}
|
|
430
|
-
let value = this.value;
|
|
431
|
-
if (typeof value === "object") {
|
|
432
|
-
return;
|
|
433
|
-
}
|
|
434
|
-
if (core.StringUtils.isEmpty(value)) {
|
|
435
|
-
return;
|
|
436
|
-
}
|
|
437
|
-
this.loadDescriptionValue(value);
|
|
438
|
-
}
|
|
439
|
-
async loadDescriptionValue(argument) {
|
|
440
|
-
var _a, _b;
|
|
441
|
-
if (argument == undefined) {
|
|
442
|
-
return;
|
|
443
|
-
}
|
|
444
|
-
if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
|
|
445
|
-
this.loadOptionValue(argument);
|
|
446
|
-
return;
|
|
447
|
-
}
|
|
448
|
-
const searchArgument = {
|
|
449
|
-
mode: SearchMode.PREDICTIVE,
|
|
450
|
-
argument
|
|
451
|
-
};
|
|
452
|
-
const source = await ((_b = this.optionLoader) === null || _b === void 0 ? void 0 : _b.call(this, searchArgument));
|
|
453
|
-
if (source == undefined) {
|
|
454
|
-
return;
|
|
455
|
-
}
|
|
456
|
-
if (source instanceof Promise) {
|
|
457
|
-
source.then((result) => {
|
|
458
|
-
this.setDescriptionValue(result);
|
|
459
|
-
});
|
|
460
|
-
}
|
|
461
|
-
else {
|
|
462
|
-
this.setDescriptionValue(source);
|
|
463
|
-
}
|
|
464
|
-
}
|
|
465
|
-
setDescriptionValue(source) {
|
|
466
|
-
const value = (source === null || source === void 0 ? void 0 : source[0]) || source;
|
|
467
|
-
if (value == undefined || !Object.keys(value).length) {
|
|
468
|
-
this.showNoResultMessage();
|
|
469
|
-
return;
|
|
470
|
-
}
|
|
471
|
-
this._lookupMode = true;
|
|
472
|
-
this.value = value;
|
|
473
|
-
}
|
|
474
|
-
loadOptionValue(argument) {
|
|
475
|
-
var _a;
|
|
476
|
-
const source = (_a = this.options) === null || _a === void 0 ? void 0 : _a.find((opt) => opt.value === argument);
|
|
477
|
-
if (source != undefined) {
|
|
478
|
-
this.selectOption(source);
|
|
479
|
-
}
|
|
480
|
-
else {
|
|
481
|
-
this.showNoResultMessage();
|
|
482
|
-
}
|
|
483
|
-
}
|
|
484
|
-
async showNoResultMessage() {
|
|
485
|
-
this.clearSearch();
|
|
486
|
-
ApplicationUtils.ApplicationUtils.info(this._textEmptySearch.replace("{0}", this.getFieldLabel()));
|
|
487
|
-
}
|
|
488
|
-
getFieldLabel() {
|
|
489
|
-
var _a;
|
|
490
|
-
return (_a = this.label) === null || _a === void 0 ? void 0 : _a.replace(constants.REQUIRED_INFO, "").toUpperCase();
|
|
491
|
-
}
|
|
492
390
|
resetOptions() {
|
|
493
391
|
this.hideOptions();
|
|
494
392
|
this._criteria = undefined;
|
|
@@ -514,12 +412,7 @@ const EzComboBox = class {
|
|
|
514
412
|
});
|
|
515
413
|
}
|
|
516
414
|
}
|
|
517
|
-
|
|
518
|
-
this.updateSource([]);
|
|
519
|
-
}
|
|
520
|
-
else {
|
|
521
|
-
this.loadOptions(SearchMode.PRELOAD);
|
|
522
|
-
}
|
|
415
|
+
this.loadOptions(SearchMode.PRELOAD);
|
|
523
416
|
}
|
|
524
417
|
componentDidRender() {
|
|
525
418
|
var _a;
|
|
@@ -529,7 +422,6 @@ const EzComboBox = class {
|
|
|
529
422
|
(_a = this._optionsList) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item").forEach((elem) => {
|
|
530
423
|
core.ElementIDUtils.addIDInfoIfNotExists(elem, "itemComboBox");
|
|
531
424
|
});
|
|
532
|
-
this.validateDescriptionValue();
|
|
533
425
|
}
|
|
534
426
|
componentDidLoad() {
|
|
535
427
|
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this.el, this._textInput);
|
|
@@ -549,13 +441,7 @@ const EzComboBox = class {
|
|
|
549
441
|
// Event handlers
|
|
550
442
|
//---------------------------------------------
|
|
551
443
|
handlerIconClick() {
|
|
552
|
-
this.
|
|
553
|
-
}
|
|
554
|
-
buildNumberArgument(argument) {
|
|
555
|
-
if (this.isTextSearch) {
|
|
556
|
-
return NaN;
|
|
557
|
-
}
|
|
558
|
-
return Number(argument || undefined);
|
|
444
|
+
this.showOptions();
|
|
559
445
|
}
|
|
560
446
|
onTextInputChangeHandler(event) {
|
|
561
447
|
var _a;
|
|
@@ -572,36 +458,12 @@ const EzComboBox = class {
|
|
|
572
458
|
}
|
|
573
459
|
this._criteria = argument;
|
|
574
460
|
if (argument) {
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
this.clearSource();
|
|
578
|
-
const enoughChars = argument.length >= this.limitCharsToSearch;
|
|
579
|
-
const argumentNumber = this.buildNumberArgument(argument);
|
|
580
|
-
if (enoughChars || !isNaN(argumentNumber)) {
|
|
581
|
-
this._showLoading = true;
|
|
582
|
-
this._changeDeboucingTimeout = window.setTimeout(() => {
|
|
583
|
-
this.loadOptions(SearchMode.PREDICTIVE, isNaN(argumentNumber) ? argument : argumentNumber.toString());
|
|
584
|
-
}, this._deboucingTime);
|
|
585
|
-
this.showOptions();
|
|
586
|
-
}
|
|
587
|
-
else {
|
|
588
|
-
this.hideOptions();
|
|
589
|
-
}
|
|
590
|
-
}
|
|
591
|
-
else {
|
|
592
|
-
this.updateVisibleOptions();
|
|
593
|
-
this.showOptions();
|
|
594
|
-
}
|
|
461
|
+
this.updateVisibleOptions();
|
|
462
|
+
this.showOptions();
|
|
595
463
|
}
|
|
596
464
|
else {
|
|
597
465
|
this.hideOptions();
|
|
598
|
-
|
|
599
|
-
this._showLoading = false;
|
|
600
|
-
this.clearSource();
|
|
601
|
-
}
|
|
602
|
-
else {
|
|
603
|
-
this.updateVisibleOptions();
|
|
604
|
-
}
|
|
466
|
+
this.updateVisibleOptions();
|
|
605
467
|
}
|
|
606
468
|
}
|
|
607
469
|
clearDeboucingTimeout() {
|
|
@@ -611,9 +473,7 @@ const EzComboBox = class {
|
|
|
611
473
|
}
|
|
612
474
|
}
|
|
613
475
|
onTextInputClickHandler() {
|
|
614
|
-
|
|
615
|
-
this.showOptions();
|
|
616
|
-
}
|
|
476
|
+
this.showOptions();
|
|
617
477
|
}
|
|
618
478
|
keyDownHandler(event) {
|
|
619
479
|
this._tabPressed = false;
|
|
@@ -645,7 +505,6 @@ const EzComboBox = class {
|
|
|
645
505
|
break;
|
|
646
506
|
case "Tab":
|
|
647
507
|
this._tabPressed = true;
|
|
648
|
-
this.controlListWithOnlyOne();
|
|
649
508
|
break;
|
|
650
509
|
}
|
|
651
510
|
//ATENÇÃO: Existe a necessidade de propagar o evento de teclado.
|
|
@@ -662,11 +521,8 @@ const EzComboBox = class {
|
|
|
662
521
|
return !this._showLoading && this._visibleOptions.length > 0;
|
|
663
522
|
}
|
|
664
523
|
render() {
|
|
665
|
-
var _a;
|
|
666
524
|
core.ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
|
|
667
|
-
return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, index.h("button", { class: "btn", slot:
|
|
668
|
-
? index.h("button", { class: "btn btn__close", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.clearSearch() }, index.h("ez-icon", { iconName: "close" }))
|
|
669
|
-
: undefined), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
|
|
525
|
+
return (index.h(index.Host, null, index.h("ez-text-input", { "data-element-id": core.ElementIDUtils.getInternalIDInfo("textInput"), class: this.suppressSearch ? "suppressed-search-input" : "", ref: elem => this._textInput = elem, "data-slave-mode": "true", enabled: this.enabled && !this.suppressSearch, onInput: event => this.onTextInputChangeHandler(event), onClick: () => this.onTextInputClickHandler(), onFocusout: () => this.onTextInputFocusOutHandler(), onKeyDown: event => this.keyDownHandler(event), label: this.label, canShowError: this.canShowError, errorMessage: this.errorMessage, mode: this.mode }, index.h("button", { class: "btn", slot: "rightIcon", disabled: !this.enabled, tabindex: -1, onClick: () => this.handlerIconClick() }, index.h("ez-icon", { iconName: "chevron-down" }))), index.h("section", { class: "list-container", ref: elem => this._listContainer = elem }, index.h("div", { class: "list-wrapper", ref: elem => this._listWrapper = elem }, index.h("ul", { class: "list-options", ref: elem => this._optionsList = elem }, !this._showLoading
|
|
670
526
|
&& this._visibleOptions.length === 0
|
|
671
527
|
&& index.h("div", { class: "message" }, index.h("span", { class: "message__no-result" }, this._textEmptyList)), this._showLoading
|
|
672
528
|
&& index.h("div", { class: "message" }, index.h("div", { class: "message__loading" })), this.showOptionValue
|