@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.
Files changed (39) hide show
  1. package/dist/cjs/ez-card-item_3.cjs.entry.js +182 -0
  2. package/dist/cjs/ez-combo-box.cjs.entry.js +11 -155
  3. package/dist/cjs/ez-search.cjs.entry.js +611 -31
  4. package/dist/cjs/ez-split-panel.cjs.entry.js +1 -1
  5. package/dist/cjs/ezui.cjs.js +1 -1
  6. package/dist/cjs/index-a7b0c73d.js +2 -6
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/collection-manifest.json +2 -2
  9. package/dist/collection/components/ez-card-item/ez-card-item.css +35 -0
  10. package/dist/collection/components/ez-combo-box/ez-combo-box.js +12 -173
  11. package/dist/collection/components/ez-search/ez-search.css +331 -0
  12. package/dist/collection/components/ez-search/ez-search.js +689 -55
  13. package/dist/collection/components/ez-split-panel/ez-split-panel.js +1 -1
  14. package/dist/custom-elements/index.js +630 -197
  15. package/dist/esm/ez-card-item_3.entry.js +176 -0
  16. package/dist/esm/ez-combo-box.entry.js +12 -156
  17. package/dist/esm/ez-search.entry.js +613 -33
  18. package/dist/esm/ez-split-panel.entry.js +1 -1
  19. package/dist/esm/ezui.js +1 -1
  20. package/dist/esm/index-baa5e267.js +2 -6
  21. package/dist/esm/loader.js +1 -1
  22. package/dist/ezui/ezui.esm.js +1 -1
  23. package/dist/ezui/p-133fae4a.entry.js +1 -0
  24. package/dist/ezui/p-428a05fe.entry.js +1 -0
  25. package/dist/ezui/{p-93c3df4f.entry.js → p-8d80101c.entry.js} +1 -1
  26. package/dist/ezui/p-e52cbcc7.entry.js +1 -0
  27. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +0 -15
  28. package/dist/types/components/ez-search/ez-search.d.ts +100 -10
  29. package/dist/types/components.d.ts +23 -14
  30. package/dist/types/utils/interfaces/AbstractFieldMetadata.d.ts +2 -1
  31. package/package.json +1 -1
  32. package/dist/cjs/ez-card-item.cjs.entry.js +0 -52
  33. package/dist/cjs/ez-filter-input_2.cjs.entry.js +0 -137
  34. package/dist/esm/ez-card-item.entry.js +0 -48
  35. package/dist/esm/ez-filter-input_2.entry.js +0 -132
  36. package/dist/ezui/p-05f5a778.entry.js +0 -1
  37. package/dist/ezui/p-5613fe63.entry.js +0 -1
  38. package/dist/ezui/p-a32aaac6.entry.js +0 -1
  39. package/dist/ezui/p-a5ac7151.entry.js +0 -1
@@ -1,8 +1,30 @@
1
1
  import { EventEmitter } from "../../stencil-public-runtime";
2
- import { IEzCheckBoxListPosition, IOption, ISearchArgument } from '../ez-combo-box/ez-combo-box';
2
+ import { IEzCheckBoxListPosition } from '../ez-combo-box/ez-combo-box';
3
3
  export declare class EzSearch {
4
- private _elem;
5
- private _comboElement;
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
- * Aplica o foco no campo.
70
- */
102
+ * Aplica o foco no campo.
103
+ */
71
104
  setFocus(): Promise<void>;
72
105
  /**
73
- * Remove o foco do campo.
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
- getValueAsync(): Promise<unknown>;
85
- onComboChange(event: any): void;
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 { IEzCheckBoxListPosition as IEzCheckBoxListPosition1, IOption as IOption1, ISearchArgument as ISearchArgument1 } from "./components/ez-combo-box/ez-combo-box";
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: ISearchArgument1) => Promise<Array<IOption1>> | Array<IOption1> | IOption1;
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": IOption1 | string;
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<IOption1>) => void;
3173
+ "onEzChange"?: (event: EzSearchCustomEvent<IOption>) => void;
3173
3174
  /**
3174
3175
  * Carrega as opções dinamicamente.
3175
3176
  */
3176
- "optionLoader"?: (argument: ISearchArgument1) => Promise<Array<IOption1>> | Array<IOption1> | IOption1;
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"?: IOption1 | string;
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 { IOption, ISearchArgument } from "../../components/ez-combo-box/ez-combo-box";
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@sankhyalabs/ezui",
3
- "version": "5.20.0-dev.4",
3
+ "version": "5.20.0-dev.6",
4
4
  "description": "Biblioteca de componentes Sankhya.",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/custom-elements/index.js",
@@ -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}