@sankhyalabs/ezui 5.20.0-dev.4 → 5.20.0-dev.6
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/ez-split-panel.cjs.entry.js +1 -1
- 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 +35 -0
- package/dist/collection/components/ez-combo-box/ez-combo-box.js +12 -173
- package/dist/collection/components/ez-search/ez-search.css +331 -0
- package/dist/collection/components/ez-search/ez-search.js +689 -55
- package/dist/collection/components/ez-split-panel/ez-split-panel.js +1 -1
- package/dist/custom-elements/index.js +630 -197
- 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/ez-split-panel.entry.js +1 -1
- 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-428a05fe.entry.js +1 -0
- package/dist/ezui/{p-93c3df4f.entry.js → p-8d80101c.entry.js} +1 -1
- package/dist/ezui/p-e52cbcc7.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
|
@@ -1,8 +1,30 @@
|
|
|
1
1
|
import { EventEmitter } from "../../stencil-public-runtime";
|
|
2
|
-
import { IEzCheckBoxListPosition
|
|
2
|
+
import { IEzCheckBoxListPosition } from '../ez-combo-box/ez-combo-box';
|
|
3
3
|
export declare class EzSearch {
|
|
4
|
-
private
|
|
5
|
-
private
|
|
4
|
+
private _textInput;
|
|
5
|
+
private _optionsList;
|
|
6
|
+
private _listContainer;
|
|
7
|
+
private _listWrapper;
|
|
8
|
+
private _itemValueBasis;
|
|
9
|
+
private _floatingID;
|
|
10
|
+
private _source;
|
|
11
|
+
private _changeDeboucingTimeout;
|
|
12
|
+
private _limitCharsToSearch;
|
|
13
|
+
private _deboucingTime;
|
|
14
|
+
_maxWidthValue: number;
|
|
15
|
+
private _tabPressed;
|
|
16
|
+
private _textEmptyList;
|
|
17
|
+
private _textEmptySearch;
|
|
18
|
+
private _lookupMode;
|
|
19
|
+
private _resizeObserver;
|
|
20
|
+
private _startHighlightTag;
|
|
21
|
+
private _endHighlightTag;
|
|
22
|
+
private el;
|
|
23
|
+
private _preSelection;
|
|
24
|
+
private _visibleOptions;
|
|
25
|
+
private _startLoading;
|
|
26
|
+
private _showLoading;
|
|
27
|
+
private _criteria;
|
|
6
28
|
/**
|
|
7
29
|
* Define o valor do campo.
|
|
8
30
|
*/
|
|
@@ -63,15 +85,26 @@ export declare class EzSearch {
|
|
|
63
85
|
* Emitido quando acontece a alteração de valor do campo.
|
|
64
86
|
*/
|
|
65
87
|
ezChange: EventEmitter<IOption>;
|
|
88
|
+
/**
|
|
89
|
+
* Array com as opções do ez-combo-box. Os elementos devem obedecer
|
|
90
|
+
* o formato: `{value: string, label: string}`.
|
|
91
|
+
*/
|
|
92
|
+
options: Array<IOption>;
|
|
93
|
+
/**
|
|
94
|
+
* Se true desabilita a digitação dentro do componente.
|
|
95
|
+
*/
|
|
96
|
+
suppressSearch: boolean;
|
|
66
97
|
observeErrorMessage(): void;
|
|
67
|
-
observeValue(): void;
|
|
98
|
+
observeValue(newValue: IOption | string, oldValue: IOption | string): void;
|
|
99
|
+
observeOptions(newOptions: IOption[], oldOptions: IOption[]): void;
|
|
100
|
+
getValueAsync(): Promise<unknown>;
|
|
68
101
|
/**
|
|
69
|
-
|
|
70
|
-
|
|
102
|
+
* Aplica o foco no campo.
|
|
103
|
+
*/
|
|
71
104
|
setFocus(): Promise<void>;
|
|
72
105
|
/**
|
|
73
|
-
|
|
74
|
-
|
|
106
|
+
* Remove o foco do campo.
|
|
107
|
+
*/
|
|
75
108
|
setBlur(): Promise<void>;
|
|
76
109
|
/**
|
|
77
110
|
* Retorna se o conteúdo é inválido.
|
|
@@ -81,8 +114,65 @@ export declare class EzSearch {
|
|
|
81
114
|
* Limpa o valor do campo de pesquisa
|
|
82
115
|
*/
|
|
83
116
|
clearValue(): Promise<void>;
|
|
84
|
-
|
|
85
|
-
|
|
117
|
+
scrollListener(): void;
|
|
118
|
+
private updateListPosition;
|
|
119
|
+
private getListPosition;
|
|
120
|
+
private isDifferentValues;
|
|
121
|
+
private getFormattedText;
|
|
122
|
+
private getText;
|
|
123
|
+
private getSelectedOption;
|
|
124
|
+
private updateVisibleOptions;
|
|
125
|
+
private getMaxWidthValue;
|
|
126
|
+
private getWidthValue;
|
|
127
|
+
private createOption;
|
|
128
|
+
private buildItem;
|
|
129
|
+
private showOptions;
|
|
130
|
+
private hideOptions;
|
|
131
|
+
private isOptionsVisible;
|
|
132
|
+
private nextOption;
|
|
133
|
+
private previousOption;
|
|
134
|
+
private scrollToOption;
|
|
135
|
+
private selectCurrentOption;
|
|
136
|
+
private updateSource;
|
|
137
|
+
private clearSource;
|
|
138
|
+
private selectOption;
|
|
139
|
+
private loadOptions;
|
|
140
|
+
private cancelPreselection;
|
|
141
|
+
private setInputValue;
|
|
142
|
+
private clearSearch;
|
|
143
|
+
private controlListWithOnlyOne;
|
|
144
|
+
private controlEmptySearch;
|
|
145
|
+
private validateDescriptionValue;
|
|
146
|
+
private loadDescriptionValue;
|
|
147
|
+
private setDescriptionValue;
|
|
148
|
+
private loadOptionValue;
|
|
149
|
+
private showNoResultMessage;
|
|
150
|
+
private getFieldLabel;
|
|
151
|
+
private resetOptions;
|
|
152
|
+
componentWillLoad(): void;
|
|
153
|
+
componentDidRender(): void;
|
|
86
154
|
componentDidLoad(): void;
|
|
155
|
+
private handlerIconClick;
|
|
156
|
+
private buildNumberArgument;
|
|
157
|
+
private onTextInputChangeHandler;
|
|
158
|
+
private clearDeboucingTimeout;
|
|
159
|
+
private keyDownHandler;
|
|
160
|
+
private onTextInputFocusOutHandler;
|
|
161
|
+
private canShowListOptions;
|
|
87
162
|
render(): any;
|
|
88
163
|
}
|
|
164
|
+
export interface IOption {
|
|
165
|
+
value: string;
|
|
166
|
+
label: string;
|
|
167
|
+
details?: any;
|
|
168
|
+
}
|
|
169
|
+
export interface ISearchArgument {
|
|
170
|
+
mode: SearchMode;
|
|
171
|
+
argument: string;
|
|
172
|
+
}
|
|
173
|
+
declare enum SearchMode {
|
|
174
|
+
ADVANCED = "ADVANCED",
|
|
175
|
+
PRELOAD = "PRELOAD",
|
|
176
|
+
PREDICTIVE = "PREDICTIVE"
|
|
177
|
+
}
|
|
178
|
+
export {};
|
|
@@ -30,7 +30,8 @@ import { TFocusOptions } from "./components/ez-text-input/ez-text-input";
|
|
|
30
30
|
import { IEzPopoverAnchorOptions } from "./components/ez-popover/ez-popover";
|
|
31
31
|
import { Radio } from "./components/ez-radio-button/ez-radio-button";
|
|
32
32
|
import { EzScrollDirection } from "./components/ez-scroller/EzScrollDirection";
|
|
33
|
-
import {
|
|
33
|
+
import { IOption as IOption1, ISearchArgument as ISearchArgument1 } from "./components/ez-search/ez-search";
|
|
34
|
+
import { IEzCheckBoxListPosition as IEzCheckBoxListPosition1 } from "./components/ez-combo-box/ez-combo-box";
|
|
34
35
|
import { Tab } from "./components/ez-tabselector/ez-tabselector";
|
|
35
36
|
import { IStyled } from "./components/ez-text-edit/ez-text-edit";
|
|
36
37
|
import { TFocusOptions as TFocusOptions1 } from "./components/ez-text-input/ez-text-input";
|
|
@@ -413,10 +414,6 @@ export namespace Components {
|
|
|
413
414
|
* Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
|
|
414
415
|
*/
|
|
415
416
|
"options": Array<IOption>;
|
|
416
|
-
/**
|
|
417
|
-
* Se true ativa o modo pesquisa do ez-combo-box.
|
|
418
|
-
*/
|
|
419
|
-
"searchMode": boolean;
|
|
420
417
|
/**
|
|
421
418
|
* Remove o foco do campo.
|
|
422
419
|
*/
|
|
@@ -1172,7 +1169,11 @@ export namespace Components {
|
|
|
1172
1169
|
/**
|
|
1173
1170
|
* Carrega as opções dinamicamente.
|
|
1174
1171
|
*/
|
|
1175
|
-
"optionLoader": (argument:
|
|
1172
|
+
"optionLoader": (argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption;
|
|
1173
|
+
/**
|
|
1174
|
+
* Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
|
|
1175
|
+
*/
|
|
1176
|
+
"options": Array<IOption>;
|
|
1176
1177
|
/**
|
|
1177
1178
|
* Remove o foco do campo.
|
|
1178
1179
|
*/
|
|
@@ -1193,10 +1194,14 @@ export namespace Components {
|
|
|
1193
1194
|
* Se true remove a opção vazia da lista.
|
|
1194
1195
|
*/
|
|
1195
1196
|
"suppressEmptyOption": boolean;
|
|
1197
|
+
/**
|
|
1198
|
+
* Se true desabilita a digitação dentro do componente.
|
|
1199
|
+
*/
|
|
1200
|
+
"suppressSearch": boolean;
|
|
1196
1201
|
/**
|
|
1197
1202
|
* Define o valor do campo.
|
|
1198
1203
|
*/
|
|
1199
|
-
"value":
|
|
1204
|
+
"value": IOption | string;
|
|
1200
1205
|
}
|
|
1201
1206
|
interface EzSidebarButton {
|
|
1202
1207
|
}
|
|
@@ -2454,10 +2459,6 @@ declare namespace LocalJSX {
|
|
|
2454
2459
|
* Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
|
|
2455
2460
|
*/
|
|
2456
2461
|
"options"?: Array<IOption>;
|
|
2457
|
-
/**
|
|
2458
|
-
* Se true ativa o modo pesquisa do ez-combo-box.
|
|
2459
|
-
*/
|
|
2460
|
-
"searchMode"?: boolean;
|
|
2461
2462
|
/**
|
|
2462
2463
|
* Se true cada opção na lista exibe o `value` junto com `label`.
|
|
2463
2464
|
*/
|
|
@@ -3169,11 +3170,15 @@ declare namespace LocalJSX {
|
|
|
3169
3170
|
/**
|
|
3170
3171
|
* Emitido quando acontece a alteração de valor do campo.
|
|
3171
3172
|
*/
|
|
3172
|
-
"onEzChange"?: (event: EzSearchCustomEvent<
|
|
3173
|
+
"onEzChange"?: (event: EzSearchCustomEvent<IOption>) => void;
|
|
3173
3174
|
/**
|
|
3174
3175
|
* Carrega as opções dinamicamente.
|
|
3175
3176
|
*/
|
|
3176
|
-
"optionLoader"?: (argument:
|
|
3177
|
+
"optionLoader"?: (argument: ISearchArgument) => Promise<Array<IOption>> | Array<IOption> | IOption;
|
|
3178
|
+
/**
|
|
3179
|
+
* Array com as opções do ez-combo-box. Os elementos devem obedecer o formato: `{value: string, label: string}`.
|
|
3180
|
+
*/
|
|
3181
|
+
"options"?: Array<IOption>;
|
|
3177
3182
|
/**
|
|
3178
3183
|
* Se false cada opção na lista deve exibir somente o `label`.
|
|
3179
3184
|
*/
|
|
@@ -3186,10 +3191,14 @@ declare namespace LocalJSX {
|
|
|
3186
3191
|
* Se true remove a opção vazia da lista.
|
|
3187
3192
|
*/
|
|
3188
3193
|
"suppressEmptyOption"?: boolean;
|
|
3194
|
+
/**
|
|
3195
|
+
* Se true desabilita a digitação dentro do componente.
|
|
3196
|
+
*/
|
|
3197
|
+
"suppressSearch"?: boolean;
|
|
3189
3198
|
/**
|
|
3190
3199
|
* Define o valor do campo.
|
|
3191
3200
|
*/
|
|
3192
|
-
"value"?:
|
|
3201
|
+
"value"?: IOption | string;
|
|
3193
3202
|
}
|
|
3194
3203
|
interface EzSidebarButton {
|
|
3195
3204
|
/**
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { FieldDescriptor, UserInterface } from "@sankhyalabs/core";
|
|
2
|
-
import {
|
|
2
|
+
import { ISearchArgument } from "../../components/ez-combo-box/ez-combo-box";
|
|
3
|
+
import { IOption } from "../../components/ez-search/ez-search";
|
|
3
4
|
import { IFieldConfig } from "./IFieldConfig";
|
|
4
5
|
export default interface IAbstractFieldMetadata {
|
|
5
6
|
userInterface: UserInterface;
|
package/package.json
CHANGED
|
@@ -1,52 +0,0 @@
|
|
|
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
|
-
|
|
8
|
-
const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;line-break:anywhere;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n 4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
|
|
9
|
-
|
|
10
|
-
const EzCardItem = class {
|
|
11
|
-
constructor(hostRef) {
|
|
12
|
-
index.registerInstance(this, hostRef);
|
|
13
|
-
this.ezClick = index.createEvent(this, "ezClick", 7);
|
|
14
|
-
this.item = undefined;
|
|
15
|
-
}
|
|
16
|
-
componentWillRender() {
|
|
17
|
-
this.createDetailList();
|
|
18
|
-
}
|
|
19
|
-
componentDidLoad() {
|
|
20
|
-
var _a, _b;
|
|
21
|
-
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) || "") };
|
|
22
|
-
core.ElementIDUtils.addIDInfo(this._element, null, dataInfo);
|
|
23
|
-
}
|
|
24
|
-
createDetailList() {
|
|
25
|
-
var _a, _b, _c;
|
|
26
|
-
this._details = { detailsLeft: [], detailsRight: [] };
|
|
27
|
-
let cont = 0;
|
|
28
|
-
if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
|
|
29
|
-
for (const attribute in this.item.details) {
|
|
30
|
-
cont < 3 ?
|
|
31
|
-
this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
|
|
32
|
-
this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
|
|
33
|
-
cont++;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
buildDetailContent(detail) {
|
|
38
|
-
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 }));
|
|
39
|
-
}
|
|
40
|
-
render() {
|
|
41
|
-
return (index.h(index.Host, null, this.item &&
|
|
42
|
-
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 => {
|
|
43
|
-
return this.buildDetailContent(detail);
|
|
44
|
-
})), index.h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
|
|
45
|
-
return this.buildDetailContent(detail);
|
|
46
|
-
}))))));
|
|
47
|
-
}
|
|
48
|
-
get _element() { return index.getElement(this); }
|
|
49
|
-
};
|
|
50
|
-
EzCardItem.style = ezCardItemCss;
|
|
51
|
-
|
|
52
|
-
exports.ez_card_item = EzCardItem;
|
|
@@ -1,137 +0,0 @@
|
|
|
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 ezFilterInputCss = ":host{display:block;width:100%}";
|
|
10
|
-
|
|
11
|
-
const EzFilterInput = class {
|
|
12
|
-
constructor(hostRef) {
|
|
13
|
-
index.registerInstance(this, hostRef);
|
|
14
|
-
this.ezChange = index.createEvent(this, "ezChange", 7);
|
|
15
|
-
this.ezSearching = index.createEvent(this, "ezSearching", 7);
|
|
16
|
-
this.ezFocusIn = index.createEvent(this, "ezFocusIn", 7);
|
|
17
|
-
this._searchingText = "";
|
|
18
|
-
this.handleFocus = () => {
|
|
19
|
-
if (this._searchingText === "") {
|
|
20
|
-
this._textInput.value = "";
|
|
21
|
-
}
|
|
22
|
-
else {
|
|
23
|
-
this._textInput.value = this._searchingText;
|
|
24
|
-
}
|
|
25
|
-
this.ezFocusIn.emit();
|
|
26
|
-
};
|
|
27
|
-
this.label = undefined;
|
|
28
|
-
this.value = undefined;
|
|
29
|
-
this.enabled = true;
|
|
30
|
-
this.errorMessage = undefined;
|
|
31
|
-
this.restrict = undefined;
|
|
32
|
-
this.mode = "regular";
|
|
33
|
-
this.asyncSearch = false;
|
|
34
|
-
this.canShowError = true;
|
|
35
|
-
}
|
|
36
|
-
observeLabel() {
|
|
37
|
-
if (this._textInput) {
|
|
38
|
-
this._textInput.label = this.label;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
observeErrorMessage() {
|
|
42
|
-
if (this._textInput) {
|
|
43
|
-
this._textInput.errorMessage = this.errorMessage;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
observeValue(newValue, oldValue) {
|
|
47
|
-
if (this._textInput && newValue != oldValue) {
|
|
48
|
-
this._textInput.value = newValue;
|
|
49
|
-
this.ezChange.emit(newValue);
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* Aplica o foco no campo.
|
|
54
|
-
*/
|
|
55
|
-
async setFocus() {
|
|
56
|
-
this._textInput.setFocus();
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Remove o foco do campo.
|
|
60
|
-
*/
|
|
61
|
-
async setBlur() {
|
|
62
|
-
this._textInput.setBlur();
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Retorna se o conteúdo é inválido.
|
|
66
|
-
*/
|
|
67
|
-
async isInvalid() {
|
|
68
|
-
return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Método responsável por setar um novo valor ao campo.
|
|
72
|
-
*/
|
|
73
|
-
async setValue(newValue) {
|
|
74
|
-
if (!this.asyncSearch || this._textInput == undefined) {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
if (newValue !== this.value) {
|
|
78
|
-
this.value = newValue;
|
|
79
|
-
this._searchingText = "";
|
|
80
|
-
}
|
|
81
|
-
else {
|
|
82
|
-
this._textInput.value = newValue;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
/**
|
|
86
|
-
* Método responsável por resetar o valor do campo para o ultimo valor inputado.
|
|
87
|
-
*/
|
|
88
|
-
async endSearch() {
|
|
89
|
-
if (!this.asyncSearch || this._textInput == undefined) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
if (this._textInput.value !== this.value) {
|
|
93
|
-
this._textInput.value = this.value;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
handleChange(evt) {
|
|
97
|
-
const newValue = evt.detail;
|
|
98
|
-
this.errorMessage = "";
|
|
99
|
-
if (this.asyncSearch) {
|
|
100
|
-
this._searchingText = newValue;
|
|
101
|
-
this.ezSearching.emit(newValue);
|
|
102
|
-
}
|
|
103
|
-
else if (newValue !== this.value) {
|
|
104
|
-
this.value = newValue;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
componentDidLoad() {
|
|
108
|
-
CSSVarsUtils.CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
109
|
-
}
|
|
110
|
-
render() {
|
|
111
|
-
core.ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
112
|
-
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" })));
|
|
113
|
-
}
|
|
114
|
-
get _elem() { return index.getElement(this); }
|
|
115
|
-
static get watchers() { return {
|
|
116
|
-
"label": ["observeLabel"],
|
|
117
|
-
"errorMessage": ["observeErrorMessage"],
|
|
118
|
-
"value": ["observeValue"]
|
|
119
|
-
}; }
|
|
120
|
-
};
|
|
121
|
-
EzFilterInput.style = ezFilterInputCss;
|
|
122
|
-
|
|
123
|
-
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)}";
|
|
124
|
-
|
|
125
|
-
const MultiSelectionBoxMessage = class {
|
|
126
|
-
constructor(hostRef) {
|
|
127
|
-
index.registerInstance(this, hostRef);
|
|
128
|
-
this.message = undefined;
|
|
129
|
-
}
|
|
130
|
-
render() {
|
|
131
|
-
return (index.h("div", { class: "multi-selection__message" }, index.h("span", { class: "multi-selection__text-message" }, this.message)));
|
|
132
|
-
}
|
|
133
|
-
};
|
|
134
|
-
MultiSelectionBoxMessage.style = multiSelectionBoxMessageCss;
|
|
135
|
-
|
|
136
|
-
exports.ez_filter_input = EzFilterInput;
|
|
137
|
-
exports.multi_selection_box_message = MultiSelectionBoxMessage;
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-baa5e267.js';
|
|
2
|
-
import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
|
|
3
|
-
|
|
4
|
-
const ezCardItemCss = ":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;line-break:anywhere;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n 4px 0px 0px 0px var(--ez-card-item__highlight--color)}";
|
|
5
|
-
|
|
6
|
-
const EzCardItem = class {
|
|
7
|
-
constructor(hostRef) {
|
|
8
|
-
registerInstance(this, hostRef);
|
|
9
|
-
this.ezClick = createEvent(this, "ezClick", 7);
|
|
10
|
-
this.item = undefined;
|
|
11
|
-
}
|
|
12
|
-
componentWillRender() {
|
|
13
|
-
this.createDetailList();
|
|
14
|
-
}
|
|
15
|
-
componentDidLoad() {
|
|
16
|
-
var _a, _b;
|
|
17
|
-
const dataInfo = { id: StringUtils.toCamelCase(((_a = this.item) === null || _a === void 0 ? void 0 : _a.key) || ((_b = this.item) === null || _b === void 0 ? void 0 : _b.title) || "") };
|
|
18
|
-
ElementIDUtils.addIDInfo(this._element, null, dataInfo);
|
|
19
|
-
}
|
|
20
|
-
createDetailList() {
|
|
21
|
-
var _a, _b, _c;
|
|
22
|
-
this._details = { detailsLeft: [], detailsRight: [] };
|
|
23
|
-
let cont = 0;
|
|
24
|
-
if ((_a = this.item) === null || _a === void 0 ? void 0 : _a.details) {
|
|
25
|
-
for (const attribute in this.item.details) {
|
|
26
|
-
cont < 3 ?
|
|
27
|
-
this._details.detailsLeft.push({ label: attribute, value: (_b = this.item.details[attribute]) === null || _b === void 0 ? void 0 : _b.toString() }) :
|
|
28
|
-
this._details.detailsRight.push({ label: attribute, value: (_c = this.item.details[attribute]) === null || _c === void 0 ? void 0 : _c.toString() });
|
|
29
|
-
cont++;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
buildDetailContent(detail) {
|
|
34
|
-
return h("div", { class: "card-item__detail" }, h("label", { class: "card-item__detail-label" }, detail.label), ": ", h("label", { class: "card-item__detail-value", innerHTML: detail.value }));
|
|
35
|
-
}
|
|
36
|
-
render() {
|
|
37
|
-
return (h(Host, null, this.item &&
|
|
38
|
-
h("div", { class: "card-item", onClick: () => { this.ezClick.emit(this.item); } }, h("label", { class: "card-item__title" }, h("span", { class: "card-item__key", innerHTML: this.item.key }), h("span", { innerHTML: this.item.title })), h("div", { class: "card-item__details" }, h("div", { class: "card-item__details-left" }, this._details.detailsLeft.map(detail => {
|
|
39
|
-
return this.buildDetailContent(detail);
|
|
40
|
-
})), h("div", { class: "card-item__details-right" }, this._details.detailsRight.map(detail => {
|
|
41
|
-
return this.buildDetailContent(detail);
|
|
42
|
-
}))))));
|
|
43
|
-
}
|
|
44
|
-
get _element() { return getElement(this); }
|
|
45
|
-
};
|
|
46
|
-
EzCardItem.style = ezCardItemCss;
|
|
47
|
-
|
|
48
|
-
export { EzCardItem as ez_card_item };
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
|
|
2
|
-
import { ElementIDUtils } from '@sankhyalabs/core';
|
|
3
|
-
import { C as CSSVarsUtils } from './CSSVarsUtils-a97cfa29.js';
|
|
4
|
-
|
|
5
|
-
const ezFilterInputCss = ":host{display:block;width:100%}";
|
|
6
|
-
|
|
7
|
-
const EzFilterInput = class {
|
|
8
|
-
constructor(hostRef) {
|
|
9
|
-
registerInstance(this, hostRef);
|
|
10
|
-
this.ezChange = createEvent(this, "ezChange", 7);
|
|
11
|
-
this.ezSearching = createEvent(this, "ezSearching", 7);
|
|
12
|
-
this.ezFocusIn = createEvent(this, "ezFocusIn", 7);
|
|
13
|
-
this._searchingText = "";
|
|
14
|
-
this.handleFocus = () => {
|
|
15
|
-
if (this._searchingText === "") {
|
|
16
|
-
this._textInput.value = "";
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
this._textInput.value = this._searchingText;
|
|
20
|
-
}
|
|
21
|
-
this.ezFocusIn.emit();
|
|
22
|
-
};
|
|
23
|
-
this.label = undefined;
|
|
24
|
-
this.value = undefined;
|
|
25
|
-
this.enabled = true;
|
|
26
|
-
this.errorMessage = undefined;
|
|
27
|
-
this.restrict = undefined;
|
|
28
|
-
this.mode = "regular";
|
|
29
|
-
this.asyncSearch = false;
|
|
30
|
-
this.canShowError = true;
|
|
31
|
-
}
|
|
32
|
-
observeLabel() {
|
|
33
|
-
if (this._textInput) {
|
|
34
|
-
this._textInput.label = this.label;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
observeErrorMessage() {
|
|
38
|
-
if (this._textInput) {
|
|
39
|
-
this._textInput.errorMessage = this.errorMessage;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
observeValue(newValue, oldValue) {
|
|
43
|
-
if (this._textInput && newValue != oldValue) {
|
|
44
|
-
this._textInput.value = newValue;
|
|
45
|
-
this.ezChange.emit(newValue);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
/**
|
|
49
|
-
* Aplica o foco no campo.
|
|
50
|
-
*/
|
|
51
|
-
async setFocus() {
|
|
52
|
-
this._textInput.setFocus();
|
|
53
|
-
}
|
|
54
|
-
/**
|
|
55
|
-
* Remove o foco do campo.
|
|
56
|
-
*/
|
|
57
|
-
async setBlur() {
|
|
58
|
-
this._textInput.setBlur();
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* Retorna se o conteúdo é inválido.
|
|
62
|
-
*/
|
|
63
|
-
async isInvalid() {
|
|
64
|
-
return typeof this.errorMessage === "string" && this.errorMessage.trim() !== "";
|
|
65
|
-
}
|
|
66
|
-
/**
|
|
67
|
-
* Método responsável por setar um novo valor ao campo.
|
|
68
|
-
*/
|
|
69
|
-
async setValue(newValue) {
|
|
70
|
-
if (!this.asyncSearch || this._textInput == undefined) {
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
if (newValue !== this.value) {
|
|
74
|
-
this.value = newValue;
|
|
75
|
-
this._searchingText = "";
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
this._textInput.value = newValue;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* Método responsável por resetar o valor do campo para o ultimo valor inputado.
|
|
83
|
-
*/
|
|
84
|
-
async endSearch() {
|
|
85
|
-
if (!this.asyncSearch || this._textInput == undefined) {
|
|
86
|
-
return;
|
|
87
|
-
}
|
|
88
|
-
if (this._textInput.value !== this.value) {
|
|
89
|
-
this._textInput.value = this.value;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
handleChange(evt) {
|
|
93
|
-
const newValue = evt.detail;
|
|
94
|
-
this.errorMessage = "";
|
|
95
|
-
if (this.asyncSearch) {
|
|
96
|
-
this._searchingText = newValue;
|
|
97
|
-
this.ezSearching.emit(newValue);
|
|
98
|
-
}
|
|
99
|
-
else if (newValue !== this.value) {
|
|
100
|
-
this.value = newValue;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
componentDidLoad() {
|
|
104
|
-
CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
|
|
105
|
-
}
|
|
106
|
-
render() {
|
|
107
|
-
ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
|
|
108
|
-
return (h("ez-text-input", { "data-element-id": 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 }, h("ez-icon", { slot: "leftIcon", iconName: "search" })));
|
|
109
|
-
}
|
|
110
|
-
get _elem() { return getElement(this); }
|
|
111
|
-
static get watchers() { return {
|
|
112
|
-
"label": ["observeLabel"],
|
|
113
|
-
"errorMessage": ["observeErrorMessage"],
|
|
114
|
-
"value": ["observeValue"]
|
|
115
|
-
}; }
|
|
116
|
-
};
|
|
117
|
-
EzFilterInput.style = ezFilterInputCss;
|
|
118
|
-
|
|
119
|
-
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)}";
|
|
120
|
-
|
|
121
|
-
const MultiSelectionBoxMessage = class {
|
|
122
|
-
constructor(hostRef) {
|
|
123
|
-
registerInstance(this, hostRef);
|
|
124
|
-
this.message = undefined;
|
|
125
|
-
}
|
|
126
|
-
render() {
|
|
127
|
-
return (h("div", { class: "multi-selection__message" }, h("span", { class: "multi-selection__text-message" }, this.message)));
|
|
128
|
-
}
|
|
129
|
-
};
|
|
130
|
-
MultiSelectionBoxMessage.style = multiSelectionBoxMessageCss;
|
|
131
|
-
|
|
132
|
-
export { EzFilterInput as ez_filter_input, MultiSelectionBoxMessage as multi_selection_box_message };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as a,g as r}from"./p-23a36bb6.js";import{StringUtils as l,ElementIDUtils as o}from"@sankhyalabs/core";const d=class{constructor(i){t(this,i),this.ezClick=e(this,"ezClick",7),this.item=void 0}componentWillRender(){this.createDetailList()}componentDidLoad(){var t,e;const i={id:l.toCamelCase((null===(t=this.item)||void 0===t?void 0:t.key)||(null===(e=this.item)||void 0===e?void 0:e.title)||"")};o.addIDInfo(this._element,null,i)}createDetailList(){var t,e,i;this._details={detailsLeft:[],detailsRight:[]};let a=0;if(null===(t=this.item)||void 0===t?void 0:t.details)for(const t in this.item.details)a<3?this._details.detailsLeft.push({label:t,value:null===(e=this.item.details[t])||void 0===e?void 0:e.toString()}):this._details.detailsRight.push({label:t,value:null===(i=this.item.details[t])||void 0===i?void 0:i.toString()}),a++}buildDetailContent(t){return i("div",{class:"card-item__detail"},i("label",{class:"card-item__detail-label"},t.label),": ",i("label",{class:"card-item__detail-value",innerHTML:t.value}))}render(){return i(a,null,this.item&&i("div",{class:"card-item",onClick:()=>{this.ezClick.emit(this.item)}},i("label",{class:"card-item__title"},i("span",{class:"card-item__key",innerHTML:this.item.key}),i("span",{innerHTML:this.item.title})),i("div",{class:"card-item__details"},i("div",{class:"card-item__details-left"},this._details.detailsLeft.map((t=>this.buildDetailContent(t)))),i("div",{class:"card-item__details-right"},this._details.detailsRight.map((t=>this.buildDetailContent(t)))))))}get _element(){return r(this)}};d.style=":host{--ez-card-item--font-size:var(--text--medium, 14px);--ez-card-item--font-family:var(--font-pattern, Arial);--ez-card-item--font-weight:var(--text-weight--medium, 400);--ez-card-item--font-weight-large:var(--text-weight--large, 600);--ez-card-item--color:var(--title--primary, #2B3A54);--ez-card-item__key--color:var(--text--primary, #626e82);--ez-card-item__detail-label--color:var(--text--secondary, #A2ABB9);--ez-card-item__detail--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__title--padding-bottom:var(--space--extra-small, 3px);--ez-card-item__highlight--color:var(--color--primary-300, #E2F4EF);width:100%;display:flex;cursor:pointer}.card-item{display:flex;flex-direction:column;width:100%;cursor:pointer;padding:12px;z-index:0;position:relative}.card-item:hover{background:#F0F3F7;border-radius:12px}.card-item__title{display:flex;align-items:center;line-height:18px;cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight-large);color:var(--ez-card-item--color);padding-bottom:var(--ez-card-item__title--padding-bottom);gap:var(--space--small, 6px)}.card-item__key{color:var(--ez-card-item__key--color)}.card-item__details{display:flex;cursor:pointer;justify-content:space-between;gap:var(--space--small, 6px)}.card-item__details-left{cursor:pointer;width:50%}.card-item__details-right{width:50%;cursor:pointer}.card-item__detail:not(:last-child){cursor:pointer;padding-bottom:var(--ez-card-item__detail--padding-bottom)}.card-item__detail-label{cursor:pointer;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item__detail-label--color)}.card-item__detail-value{cursor:pointer;line-break:anywhere;font-size:var(--ez-card-item--font-size);font-family:var(--ez-card-item--font-family);font-weight:var(--ez-card-item--font-weight);color:var(--ez-card-item--color)}.card-item__highlight{position:relative;border-radius:8px;z-index:-1;background-color:var(--ez-card-item__highlight--color);outline:2px solid var(--ez-card-item__highlight--color);box-shadow:-4px 0px 0px 0px var(--ez-card-item__highlight--color), \n 4px 0px 0px 0px var(--ez-card-item__highlight--color)}";export{d as ez_card_item}
|