@sankhyalabs/ezui 1.1.129 → 1.1.130
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-button.cjs.entry.js +10 -12
- package/dist/collection/components/ez-button/ez-button.css +73 -28
- package/dist/collection/components/ez-button/ez-button.js +15 -18
- package/dist/custom-elements/index.js +10 -12
- package/dist/esm/ez-button.entry.js +10 -12
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-27db8fba.entry.js +1 -0
- package/dist/types/components/ez-button/ez-button.d.ts +3 -3
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
- package/dist/ezui/p-495cdb4c.entry.js +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-0e284e03.js');
|
|
6
6
|
|
|
7
|
-
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover
|
|
7
|
+
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
|
|
8
8
|
|
|
9
9
|
let EzButton = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -17,10 +17,6 @@ let EzButton = class {
|
|
|
17
17
|
* Define o modo de uso do botão; opções: icon, link e regular
|
|
18
18
|
*/
|
|
19
19
|
this.mode = "regular";
|
|
20
|
-
/**
|
|
21
|
-
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
22
|
-
*/
|
|
23
|
-
this.size = "medium";
|
|
24
20
|
}
|
|
25
21
|
/**
|
|
26
22
|
* Realiza o foco no botão
|
|
@@ -34,8 +30,10 @@ let EzButton = class {
|
|
|
34
30
|
async setBlur() {
|
|
35
31
|
this._button.blur();
|
|
36
32
|
}
|
|
37
|
-
getIconSize() {
|
|
38
|
-
|
|
33
|
+
getIconSize(sizeParam = "medium") {
|
|
34
|
+
const sizeList = ["small", "medium", "large"];
|
|
35
|
+
const sizeLowerCase = this.size && this.size.toLowerCase();
|
|
36
|
+
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
39
37
|
}
|
|
40
38
|
handleSlotChange(ev) {
|
|
41
39
|
const slot = ev.target;
|
|
@@ -50,27 +48,27 @@ let EzButton = class {
|
|
|
50
48
|
}
|
|
51
49
|
}
|
|
52
50
|
else {
|
|
53
|
-
content.style.setProperty(
|
|
51
|
+
content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
|
|
54
52
|
}
|
|
55
53
|
}
|
|
56
54
|
render() {
|
|
57
55
|
if (this.mode == "icon") {
|
|
58
|
-
return (index.h("button", { class: "icon " + this.
|
|
56
|
+
return (index.h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
59
57
|
if (!this.enabled)
|
|
60
58
|
evt.stopPropagation();
|
|
61
59
|
} })));
|
|
62
60
|
}
|
|
63
61
|
else if (this.mode == "label-icon") {
|
|
64
|
-
return (index.h("div", { class: "label-icon" }, index.h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size:
|
|
62
|
+
return (index.h("div", { class: "label-icon" }, index.h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
65
63
|
if (!this.enabled)
|
|
66
64
|
evt.stopPropagation();
|
|
67
65
|
} })), index.h("label", { title: this.label }, this.label)));
|
|
68
66
|
}
|
|
69
67
|
else if (this.mode == "link") {
|
|
70
|
-
return (index.h("a", { class: this.
|
|
68
|
+
return (index.h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
71
69
|
}
|
|
72
70
|
else {
|
|
73
|
-
return (index.h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
71
|
+
return (index.h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, index.h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, index.h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
74
72
|
}
|
|
75
73
|
}
|
|
76
74
|
};
|
|
@@ -37,15 +37,10 @@
|
|
|
37
37
|
/*@doc Define o estilo da borda do botão.*/
|
|
38
38
|
--ez-button--border: none;
|
|
39
39
|
|
|
40
|
-
/*@doc Define a cor
|
|
41
|
-
--ez-button--hover--background-color: var(--background--strong, var(--ez-button--background-color));
|
|
42
|
-
/*@doc Define a cor do texto quando o cursor está sobre o botão.*/
|
|
40
|
+
/*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
|
|
43
41
|
--ez-button--hover-color: var(--color--primary-600);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
--ez-button--active--background-color: var(--background--strong, --color--primary-700);
|
|
47
|
-
/*@doc Define a cor do texto quando o botão está ativado.*/
|
|
48
|
-
--ez-button--active-color: var(--color--primary-700);
|
|
42
|
+
/*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
|
|
43
|
+
--ez-button--hover--background-color: var(--background--medium, var(--ez-button--background-color));
|
|
49
44
|
|
|
50
45
|
/*@doc Define a cor do texto quando o botão está desabilitado.*/
|
|
51
46
|
--ez-button--disabled-color: var(--text--disable);
|
|
@@ -57,6 +52,11 @@
|
|
|
57
52
|
/*@doc Define a sombra do botão quando selecionado.*/
|
|
58
53
|
--ez-button--focus--box-shadow: none;
|
|
59
54
|
|
|
55
|
+
/*@doc Define a cor do texto e do ícone ao ativar o botão.*/
|
|
56
|
+
--ez-button--active-color: var(--color--primary-700);
|
|
57
|
+
/*@doc Define a cor do fundo ao ativar o botão.*/
|
|
58
|
+
--ez-button--active--background-color: var(--background--strong);
|
|
59
|
+
|
|
60
60
|
/*@doc Define a cor do texto do botão no modo link.*/
|
|
61
61
|
--ez-button--link-color: var(--color--primary, '#008561');
|
|
62
62
|
--ez-button--link--hover-color: var(--color--primary-700, '#1C1D22');
|
|
@@ -92,23 +92,21 @@ button {
|
|
|
92
92
|
color: var(--ez-button--color);
|
|
93
93
|
fill: var(--ez-button--color);
|
|
94
94
|
border: var(--ez-button--border);
|
|
95
|
-
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
button:focus {
|
|
98
|
+
outline: var(--ez-button--focus--border);
|
|
99
|
+
box-shadow: var(--ez-button--focus--box-shadow);
|
|
96
100
|
}
|
|
97
101
|
|
|
98
102
|
button:hover {
|
|
99
103
|
outline: none;
|
|
104
|
+
background-color: var(--ez-button--hover--background-color);
|
|
100
105
|
color: var(--ez-button--hover-color);
|
|
101
106
|
fill: var(--ez-button--hover-color);
|
|
102
|
-
background-color: var(--ez-button--hover--background-color);
|
|
103
107
|
--ez-icon--color: var(--ez-button--hover-color);
|
|
104
108
|
}
|
|
105
109
|
|
|
106
|
-
button:focus {
|
|
107
|
-
outline: none;
|
|
108
|
-
outline: var(--ez-button--focus--border);
|
|
109
|
-
box-shadow: var(--ez-button--focus--box-shadow);
|
|
110
|
-
}
|
|
111
|
-
|
|
112
110
|
button:active {
|
|
113
111
|
outline: none;
|
|
114
112
|
box-shadow: none;
|
|
@@ -122,31 +120,44 @@ button:disabled {
|
|
|
122
120
|
background-color: var(--ez-button--disabled--background-color);
|
|
123
121
|
color: var(--ez-button--disabled-color);
|
|
124
122
|
fill: var(--ez-button--disabled-color);
|
|
125
|
-
--ez-icon--color: var(--ez-button--disabled-color);
|
|
126
123
|
border: none;
|
|
124
|
+
--ez-icon--color: var(--ez-button--disabled-color);
|
|
127
125
|
cursor: no-drop;
|
|
128
126
|
}
|
|
129
127
|
|
|
130
|
-
|
|
131
|
-
|
|
128
|
+
.small{
|
|
129
|
+
height: 32px;
|
|
130
|
+
--ez-button--font-size: var(--text--small, 12px);
|
|
132
131
|
}
|
|
133
132
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
133
|
+
.medium{
|
|
134
|
+
height: 42px;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.large{
|
|
138
|
+
height: 46px;
|
|
138
139
|
}
|
|
139
140
|
|
|
140
|
-
|
|
141
|
+
.btn-icon {
|
|
142
|
+
padding: 0px;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.btn-icon--medium {
|
|
141
146
|
width: 42px;
|
|
142
147
|
min-width: 42px;
|
|
143
148
|
height: 42px;
|
|
144
149
|
}
|
|
145
150
|
|
|
146
|
-
|
|
147
|
-
width:
|
|
148
|
-
min-width:
|
|
149
|
-
height:
|
|
151
|
+
.btn-icon--small {
|
|
152
|
+
width: 32px;
|
|
153
|
+
min-width: 32px;
|
|
154
|
+
height: 32px;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.btn-icon--large {
|
|
158
|
+
width: 46px;
|
|
159
|
+
min-width: 46px;
|
|
160
|
+
height: 46px;
|
|
150
161
|
}
|
|
151
162
|
|
|
152
163
|
.label-icon {
|
|
@@ -156,6 +167,18 @@ button.large {
|
|
|
156
167
|
color: var(--ez-button--color);
|
|
157
168
|
}
|
|
158
169
|
|
|
170
|
+
.label-icon:hover {
|
|
171
|
+
color: var(--ez-button--hover-color);
|
|
172
|
+
fill: var(--ez-button--hover-color);
|
|
173
|
+
--ez-icon--color: var(--ez-button--hover-color);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.label-icon:active {
|
|
177
|
+
color: var(--ez-button--active-color);
|
|
178
|
+
fill: var(--ez-button--active-color);
|
|
179
|
+
--ez-icon--color: var(--ez-button--active-color);
|
|
180
|
+
}
|
|
181
|
+
|
|
159
182
|
.label-icon label {
|
|
160
183
|
max-width: 150px;
|
|
161
184
|
white-space: nowrap;
|
|
@@ -165,6 +188,28 @@ button.large {
|
|
|
165
188
|
font-family: var(--ez-button--font-family);
|
|
166
189
|
font-size: var(--ez-button--font-size);
|
|
167
190
|
font-weight: var(--ez-button--font-weight);
|
|
191
|
+
user-select: none;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
button:disabled+label {
|
|
195
|
+
max-width: 150px;
|
|
196
|
+
white-space: nowrap;
|
|
197
|
+
overflow: hidden;
|
|
198
|
+
text-overflow: ellipsis;
|
|
199
|
+
cursor: pointer;
|
|
200
|
+
font-family: var(--ez-button--font-family);
|
|
201
|
+
font-size: var(--ez-button--font-size);
|
|
202
|
+
font-weight: var(--ez-button--font-weight);
|
|
203
|
+
color: var(--ez-button--disabled-color);
|
|
204
|
+
cursor: no-drop;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
div.label-icon{
|
|
208
|
+
cursor: pointer;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
div.label-icon,button:disabled{
|
|
212
|
+
cursor: no-drop;
|
|
168
213
|
}
|
|
169
214
|
|
|
170
215
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, h, Prop, Method } from
|
|
1
|
+
import { Component, h, Prop, Method } from "@stencil/core";
|
|
2
2
|
export class EzButton {
|
|
3
3
|
constructor() {
|
|
4
4
|
/**
|
|
@@ -9,10 +9,6 @@ export class EzButton {
|
|
|
9
9
|
* Define o modo de uso do botão; opções: icon, link e regular
|
|
10
10
|
*/
|
|
11
11
|
this.mode = "regular";
|
|
12
|
-
/**
|
|
13
|
-
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
14
|
-
*/
|
|
15
|
-
this.size = "medium";
|
|
16
12
|
}
|
|
17
13
|
/**
|
|
18
14
|
* Realiza o foco no botão
|
|
@@ -26,8 +22,10 @@ export class EzButton {
|
|
|
26
22
|
async setBlur() {
|
|
27
23
|
this._button.blur();
|
|
28
24
|
}
|
|
29
|
-
getIconSize() {
|
|
30
|
-
|
|
25
|
+
getIconSize(sizeParam = "medium") {
|
|
26
|
+
const sizeList = ["small", "medium", "large"];
|
|
27
|
+
const sizeLowerCase = this.size && this.size.toLowerCase();
|
|
28
|
+
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
31
29
|
}
|
|
32
30
|
handleSlotChange(ev) {
|
|
33
31
|
const slot = ev.target;
|
|
@@ -42,30 +40,30 @@ export class EzButton {
|
|
|
42
40
|
}
|
|
43
41
|
}
|
|
44
42
|
else {
|
|
45
|
-
content.style.setProperty(
|
|
43
|
+
content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
46
|
render() {
|
|
49
47
|
if (this.mode == "icon") {
|
|
50
|
-
return (h("button", { class: "icon " + this.
|
|
48
|
+
return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
|
|
51
49
|
h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => { if (!this.enabled)
|
|
52
50
|
evt.stopPropagation(); } })));
|
|
53
51
|
}
|
|
54
52
|
else if (this.mode == "label-icon") {
|
|
55
53
|
return (h("div", { class: "label-icon" },
|
|
56
|
-
h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
|
|
57
|
-
h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size:
|
|
54
|
+
h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
|
|
55
|
+
h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => { if (!this.enabled)
|
|
58
56
|
evt.stopPropagation(); } })),
|
|
59
57
|
h("label", { title: this.label }, this.label)));
|
|
60
58
|
}
|
|
61
59
|
else if (this.mode == "link") {
|
|
62
|
-
return (h("a", { class: this.
|
|
60
|
+
return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el },
|
|
63
61
|
h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
|
|
64
62
|
this.label,
|
|
65
63
|
h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
66
64
|
}
|
|
67
65
|
else {
|
|
68
|
-
return (h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
|
|
66
|
+
return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el },
|
|
69
67
|
h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }),
|
|
70
68
|
this.label,
|
|
71
69
|
h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
@@ -145,7 +143,7 @@ export class EzButton {
|
|
|
145
143
|
"optional": false,
|
|
146
144
|
"docs": {
|
|
147
145
|
"tags": [],
|
|
148
|
-
"text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o. Esta propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo
|
|
146
|
+
"text": "Define o icone svg que ser\u00E1 utilizado no bot\u00E3o. Esta propriedade s\u00F3 \u00E9 utilizada caso o componente esteja no modo \"icon\""
|
|
149
147
|
},
|
|
150
148
|
"attribute": "image",
|
|
151
149
|
"reflect": true
|
|
@@ -171,8 +169,8 @@ export class EzButton {
|
|
|
171
169
|
"type": "string",
|
|
172
170
|
"mutable": false,
|
|
173
171
|
"complexType": {
|
|
174
|
-
"original": "
|
|
175
|
-
"resolved": "
|
|
172
|
+
"original": "\"small\" | \"medium\" | \"large\" | undefined",
|
|
173
|
+
"resolved": "\"large\" | \"medium\" | \"small\"",
|
|
176
174
|
"references": {}
|
|
177
175
|
},
|
|
178
176
|
"required": false,
|
|
@@ -182,8 +180,7 @@ export class EzButton {
|
|
|
182
180
|
"text": "\u00C9 poss\u00EDvel escolher entre [small,medium,large] (somente para os modos \"icon\" e \"link\")"
|
|
183
181
|
},
|
|
184
182
|
"attribute": "size",
|
|
185
|
-
"reflect": true
|
|
186
|
-
"defaultValue": "\"medium\""
|
|
183
|
+
"reflect": true
|
|
187
184
|
}
|
|
188
185
|
}; }
|
|
189
186
|
static get methods() { return {
|
|
@@ -45,7 +45,7 @@ let EzApplication$1 = class extends HTMLElement$1 {
|
|
|
45
45
|
static get style() { return ezApplicationCss; }
|
|
46
46
|
};
|
|
47
47
|
|
|
48
|
-
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover
|
|
48
|
+
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
|
|
49
49
|
|
|
50
50
|
let EzButton$1 = class extends HTMLElement$1 {
|
|
51
51
|
constructor() {
|
|
@@ -60,10 +60,6 @@ let EzButton$1 = class extends HTMLElement$1 {
|
|
|
60
60
|
* Define o modo de uso do botão; opções: icon, link e regular
|
|
61
61
|
*/
|
|
62
62
|
this.mode = "regular";
|
|
63
|
-
/**
|
|
64
|
-
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
65
|
-
*/
|
|
66
|
-
this.size = "medium";
|
|
67
63
|
}
|
|
68
64
|
/**
|
|
69
65
|
* Realiza o foco no botão
|
|
@@ -77,8 +73,10 @@ let EzButton$1 = class extends HTMLElement$1 {
|
|
|
77
73
|
async setBlur() {
|
|
78
74
|
this._button.blur();
|
|
79
75
|
}
|
|
80
|
-
getIconSize() {
|
|
81
|
-
|
|
76
|
+
getIconSize(sizeParam = "medium") {
|
|
77
|
+
const sizeList = ["small", "medium", "large"];
|
|
78
|
+
const sizeLowerCase = this.size && this.size.toLowerCase();
|
|
79
|
+
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
82
80
|
}
|
|
83
81
|
handleSlotChange(ev) {
|
|
84
82
|
const slot = ev.target;
|
|
@@ -93,27 +91,27 @@ let EzButton$1 = class extends HTMLElement$1 {
|
|
|
93
91
|
}
|
|
94
92
|
}
|
|
95
93
|
else {
|
|
96
|
-
content.style.setProperty(
|
|
94
|
+
content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
render() {
|
|
100
98
|
if (this.mode == "icon") {
|
|
101
|
-
return (h("button", { class: "icon " + this.
|
|
99
|
+
return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
102
100
|
if (!this.enabled)
|
|
103
101
|
evt.stopPropagation();
|
|
104
102
|
} })));
|
|
105
103
|
}
|
|
106
104
|
else if (this.mode == "label-icon") {
|
|
107
|
-
return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size:
|
|
105
|
+
return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
108
106
|
if (!this.enabled)
|
|
109
107
|
evt.stopPropagation();
|
|
110
108
|
} })), h("label", { title: this.label }, this.label)));
|
|
111
109
|
}
|
|
112
110
|
else if (this.mode == "link") {
|
|
113
|
-
return (h("a", { class: this.
|
|
111
|
+
return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
114
112
|
}
|
|
115
113
|
else {
|
|
116
|
-
return (h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
114
|
+
return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
117
115
|
}
|
|
118
116
|
}
|
|
119
117
|
static get style() { return ezButtonCss; }
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-bf1aef20.js';
|
|
2
2
|
|
|
3
|
-
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover
|
|
3
|
+
const ezButtonCss = ":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";
|
|
4
4
|
|
|
5
5
|
let EzButton = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -13,10 +13,6 @@ let EzButton = class {
|
|
|
13
13
|
* Define o modo de uso do botão; opções: icon, link e regular
|
|
14
14
|
*/
|
|
15
15
|
this.mode = "regular";
|
|
16
|
-
/**
|
|
17
|
-
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
18
|
-
*/
|
|
19
|
-
this.size = "medium";
|
|
20
16
|
}
|
|
21
17
|
/**
|
|
22
18
|
* Realiza o foco no botão
|
|
@@ -30,8 +26,10 @@ let EzButton = class {
|
|
|
30
26
|
async setBlur() {
|
|
31
27
|
this._button.blur();
|
|
32
28
|
}
|
|
33
|
-
getIconSize() {
|
|
34
|
-
|
|
29
|
+
getIconSize(sizeParam = "medium") {
|
|
30
|
+
const sizeList = ["small", "medium", "large"];
|
|
31
|
+
const sizeLowerCase = this.size && this.size.toLowerCase();
|
|
32
|
+
return sizeList.includes(sizeLowerCase) ? sizeLowerCase : sizeParam;
|
|
35
33
|
}
|
|
36
34
|
handleSlotChange(ev) {
|
|
37
35
|
const slot = ev.target;
|
|
@@ -46,27 +44,27 @@ let EzButton = class {
|
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
46
|
else {
|
|
49
|
-
content.style.setProperty(
|
|
47
|
+
content.style.setProperty("--ez-icon--color", "var(--ez-icon--color)");
|
|
50
48
|
}
|
|
51
49
|
}
|
|
52
50
|
render() {
|
|
53
51
|
if (this.mode == "icon") {
|
|
54
|
-
return (h("button", { class: "icon " + this.
|
|
52
|
+
return (h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
55
53
|
if (!this.enabled)
|
|
56
54
|
evt.stopPropagation();
|
|
57
55
|
} })));
|
|
58
56
|
}
|
|
59
57
|
else if (this.mode == "label-icon") {
|
|
60
|
-
return (h("div", { class: "label-icon" }, h("button", { class: "icon", type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size:
|
|
58
|
+
return (h("div", { class: "label-icon" }, h("button", { class: "btn-icon " + ((this.getIconSize()) ? `btn-icon--${this.getIconSize()}` : ""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("ez-icon", { class: "icon", href: this.image, iconName: this.iconName, size: this.getIconSize(), onClick: evt => {
|
|
61
59
|
if (!this.enabled)
|
|
62
60
|
evt.stopPropagation();
|
|
63
61
|
} })), h("label", { title: this.label }, this.label)));
|
|
64
62
|
}
|
|
65
63
|
else if (this.mode == "link") {
|
|
66
|
-
return (h("a", { class: this.
|
|
64
|
+
return (h("a", { class: this.getIconSize(), ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
67
65
|
}
|
|
68
66
|
else {
|
|
69
|
-
return (h("button", { type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
67
|
+
return (h("button", { class: this.getIconSize(""), type: "button", disabled: !this.enabled, ref: (el) => this._button = el }, h("slot", { name: "leftIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } }), this.label, h("slot", { name: "rightIcon", onSlotchange: (ev) => { this.handleSlotChange(ev); } })));
|
|
70
68
|
}
|
|
71
69
|
}
|
|
72
70
|
};
|
package/dist/ezui/ezui.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as s}from"./p-60138b72.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),e(o)})().then((e=>s([["p-2d165ca8",[[6,"ez-grid",{multipleSelection:[4,"multiple-selection"],config:[1040],pageSize:[2,"page-size"],serverUrl:[1,"server-url"],dataUnit:[16],_navigationHasPrevious:[32],_navigationHasNext:[32],_navigationFirstRow:[32],_navigationLastRow:[32],_navigationTotalRows:[32],_popUpVisible:[32],setColumnsDef:[64],addColumnMenuItem:[64],setColumnsState:[64],setData:[64],getSelection:[64],getColumnsState:[64],getColumns:[64],refresh:[64],quickFilter:[64]}]]],["p-05cca198",[[1,"ez-dialog",{confirm:[1028],critical:[1028],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],handleButtonClick:[64],show:[64]}]]],["p-ec205792",[[1,"ez-filter-input",{label:[1],value:[1537],enabled:[4],loading:[516],errorMessage:[1537,"error-message"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-8a0e5e59",[[1,"ez-action-chip",{label:[513],enabled:[516]}]]],["p-4884b056",[[0,"ez-application"]]],["p-bd29c55f",[[1,"ez-label-chip",{label:[513],enabled:[516],removable:[516],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-0cb4aec1",[[1,"ez-popover",{autoClose:[516,"auto-close"],top:[1537],left:[1537],bottom:[1537],right:[1537],boxWidth:[513,"box-width"],opened:[1540],innerElement:[1537,"inner-element"],updatePosition:[64],show:[64],hide:[64]}]]],["p-1ced597f",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[1540,"use-header"],ezTitle:[1,"ez-title"]}]]],["p-2d55888f",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-6d39b7ea",[[2,"grid-config",{selectedTab:[1025,"selected-tab"],columns:[1040],config:[1040]}]]],["p-ef8f1275",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-f65302bb",[[1,"ez-text-input",{label:[513],value:[1537],enabled:[516],loading:[516],errorMessage:[1537,"error-message"],mask:[1],canShowError:[516,"can-show-error"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-5821c335",[[1,"ez-search",{value:[1537],label:[1537],enabled:[1540],errorMessage:[1537,"error-message"],optionLoader:[16],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressEmptyOption:[4,"suppress-empty-option"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-5b7405e8",[[1,"select-box",{selectedOption:[1,"selected-option"]}]]],["p-cbfb94cb",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-5f725a93",[[1,"ez-date-time-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-ed1e0331",[[1,"ez-time-input",{label:[513],viewValue:[1537,"view-value"],value:[1026],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-c6b2b2e5",[[1,"ez-number-input",{label:[1],value:[1538],enabled:[4],errorMessage:[1537,"error-message"],precision:[2],prettyPrecision:[2,"pretty-precision"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-7d5b2ebf",[[1,"ez-list",{dataSource:[1040],useGroups:[1540,"use-groups"],ezDraggable:[1028,"ez-draggable"],ezSelectable:[1028,"ez-selectable"],itemSlotBuilder:[1040],_listItems:[32],_listGroupItems:[32],clearHistory:[64],setSelection:[64],getSelection:[64],getList:[64]}]]],["p-5a9ab4f7",[[1,"ez-text-area",{label:[513],value:[1537],enabled:[516],loading:[516],errorMessage:[1537,"error-message"],rows:[1538],canShowError:[516,"can-show-error"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-fa9157c1",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-ef17f443",[[1,"ez-collapsible-box",{value:[1540],label:[513],headerSize:[513,"header-size"],iconPlacement:[513,"icon-placement"],stretchTitle:[516,"stretch-title"],showHide:[64]}]]],["p-a4a21738",[[1,"ez-upload",{label:[1],enabled:[4],maxFileSize:[2,"max-file-size"],maxFiles:[2,"max-files"],requestHeaders:[8,"request-headers"],urlUpload:[1,"url-upload"],urlDelete:[1,"url-delete"],value:[1040],addFiles:[64],setFocus:[64],setBlur:[64]}]]],["p-
|
|
1
|
+
import{p as e,b as s}from"./p-60138b72.js";(()=>{const s=import.meta.url,o={};return""!==s&&(o.resourcesUrl=new URL(".",s).href),e(o)})().then((e=>s([["p-2d165ca8",[[6,"ez-grid",{multipleSelection:[4,"multiple-selection"],config:[1040],pageSize:[2,"page-size"],serverUrl:[1,"server-url"],dataUnit:[16],_navigationHasPrevious:[32],_navigationHasNext:[32],_navigationFirstRow:[32],_navigationLastRow:[32],_navigationTotalRows:[32],_popUpVisible:[32],setColumnsDef:[64],addColumnMenuItem:[64],setColumnsState:[64],setData:[64],getSelection:[64],getColumnsState:[64],getColumns:[64],refresh:[64],quickFilter:[64]}]]],["p-05cca198",[[1,"ez-dialog",{confirm:[1028],critical:[1028],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],handleButtonClick:[64],show:[64]}]]],["p-ec205792",[[1,"ez-filter-input",{label:[1],value:[1537],enabled:[4],loading:[516],errorMessage:[1537,"error-message"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-8a0e5e59",[[1,"ez-action-chip",{label:[513],enabled:[516]}]]],["p-4884b056",[[0,"ez-application"]]],["p-bd29c55f",[[1,"ez-label-chip",{label:[513],enabled:[516],removable:[516],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-0cb4aec1",[[1,"ez-popover",{autoClose:[516,"auto-close"],top:[1537],left:[1537],bottom:[1537],right:[1537],boxWidth:[513,"box-width"],opened:[1540],innerElement:[1537,"inner-element"],updatePosition:[64],show:[64],hide:[64]}]]],["p-1ced597f",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[1540,"use-header"],ezTitle:[1,"ez-title"]}]]],["p-2d55888f",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-6d39b7ea",[[2,"grid-config",{selectedTab:[1025,"selected-tab"],columns:[1040],config:[1040]}]]],["p-ef8f1275",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-f65302bb",[[1,"ez-text-input",{label:[513],value:[1537],enabled:[516],loading:[516],errorMessage:[1537,"error-message"],mask:[1],canShowError:[516,"can-show-error"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-5821c335",[[1,"ez-search",{value:[1537],label:[1537],enabled:[1540],errorMessage:[1537,"error-message"],optionLoader:[16],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressEmptyOption:[4,"suppress-empty-option"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-5b7405e8",[[1,"select-box",{selectedOption:[1,"selected-option"]}]]],["p-cbfb94cb",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-5f725a93",[[1,"ez-date-time-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-ed1e0331",[[1,"ez-time-input",{label:[513],viewValue:[1537,"view-value"],value:[1026],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-c6b2b2e5",[[1,"ez-number-input",{label:[1],value:[1538],enabled:[4],errorMessage:[1537,"error-message"],precision:[2],prettyPrecision:[2,"pretty-precision"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-7d5b2ebf",[[1,"ez-list",{dataSource:[1040],useGroups:[1540,"use-groups"],ezDraggable:[1028,"ez-draggable"],ezSelectable:[1028,"ez-selectable"],itemSlotBuilder:[1040],_listItems:[32],_listGroupItems:[32],clearHistory:[64],setSelection:[64],getSelection:[64],getList:[64]}]]],["p-5a9ab4f7",[[1,"ez-text-area",{label:[513],value:[1537],enabled:[516],loading:[516],errorMessage:[1537,"error-message"],rows:[1538],canShowError:[516,"can-show-error"],mode:[513],setFocus:[64],setBlur:[64]}]]],["p-fa9157c1",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-ef17f443",[[1,"ez-collapsible-box",{value:[1540],label:[513],headerSize:[513,"header-size"],iconPlacement:[513,"icon-placement"],stretchTitle:[516,"stretch-title"],showHide:[64]}]]],["p-a4a21738",[[1,"ez-upload",{label:[1],enabled:[4],maxFileSize:[2,"max-file-size"],maxFiles:[2,"max-files"],requestHeaders:[8,"request-headers"],urlUpload:[1,"url-upload"],urlDelete:[1,"url-delete"],value:[1040],addFiles:[64],setFocus:[64],setBlur:[64]}]]],["p-27db8fba",[[1,"ez-button",{label:[513],enabled:[516],mode:[513],image:[513],iconName:[513,"icon-name"],size:[513],setFocus:[64],setBlur:[64]}]]],["p-593a17e7",[[1,"ez-calendar",{value:[1040],floating:[516],time:[516],showSeconds:[516,"show-seconds"],show:[64],fitVertical:[64],hide:[64]}]]],["p-dc0aa563",[[1,"ez-check",{label:[513],value:[1540],enabled:[1540],mode:[513],getMode:[64],setFocus:[64]}]]],["p-66adbed5",[[1,"ez-tabselector",{selectedIndex:[1538,"selected-index"],selectedTab:[1537,"selected-tab"],tabs:[1]}]]],["p-6e844308",[[1,"ez-combo-box",{value:[1537],label:[513],enabled:[516],options:[1040],errorMessage:[1537,"error-message"],searchMode:[4,"search-mode"],showSelectedValue:[4,"show-selected-value"],showOptionValue:[4,"show-option-value"],suppressSearch:[4,"suppress-search"],optionLoader:[16],suppressEmptyOption:[4,"suppress-empty-option"],canShowError:[516,"can-show-error"],mode:[513],_preSelection:[32],_visibleOptions:[32],setFocus:[64],setBlur:[64]}]]],["p-47fe4273",[[0,"ez-form",{dataUnit:[1040],config:[16],submit:[64],cancel:[64],validate:[64]}]]],["p-6aa0c6f1",[[0,"test-du",{isDirty:[32]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as o,h as t}from"./p-60138b72.js";let e=class{constructor(t){o(this,t),this.enabled=!0,this.mode="regular"}async setFocus(){this._button.focus()}async setBlur(){this._button.blur()}getIconSize(o="medium"){const t=this.size&&this.size.toLowerCase();return["small","medium","large"].includes(t)?t:o}handleSlotChange(o){const t=o.target,e=t.assignedElements()[0];"link"==this.mode?(e.style.display="inline","leftIcon"==t.name?e.style.paddingRight="var(--ez-button__inline__icon--padding)":"rightIcon"==t.name&&(e.style.paddingLeft="var(--ez-button__inline__icon--padding)")):e.style.setProperty("--ez-icon--color","var(--ez-icon--color)")}render(){return"icon"==this.mode?t("button",{class:"btn-icon "+(this.getIconSize()?`btn-icon--${this.getIconSize()}`:""),type:"button",disabled:!this.enabled,ref:o=>this._button=o},t("ez-icon",{class:"icon",href:this.image,iconName:this.iconName,size:this.getIconSize(),onClick:o=>{this.enabled||o.stopPropagation()}})):"label-icon"==this.mode?t("div",{class:"label-icon"},t("button",{class:"btn-icon "+(this.getIconSize()?`btn-icon--${this.getIconSize()}`:""),type:"button",disabled:!this.enabled,ref:o=>this._button=o},t("ez-icon",{class:"icon",href:this.image,iconName:this.iconName,size:this.getIconSize(),onClick:o=>{this.enabled||o.stopPropagation()}})),t("label",{title:this.label},this.label)):"link"==this.mode?t("a",{class:this.getIconSize(),ref:o=>this._button=o},t("slot",{name:"leftIcon",onSlotchange:o=>{this.handleSlotChange(o)}}),this.label,t("slot",{name:"rightIcon",onSlotchange:o=>{this.handleSlotChange(o)}})):t("button",{class:this.getIconSize(""),type:"button",disabled:!this.enabled,ref:o=>this._button=o},t("slot",{name:"leftIcon",onSlotchange:o=>{this.handleSlotChange(o)}}),this.label,t("slot",{name:"rightIcon",onSlotchange:o=>{this.handleSlotChange(o)}}))}};e.style=":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover-color:var(--color--primary-600);--ez-button--hover--background-color:var(--background--medium, var(--ez-button--background-color));--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--active-color:var(--color--primary-700);--ez-button--active--background-color:var(--background--strong);--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border)}button:focus{outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:hover{outline:none;background-color:var(--ez-button--hover--background-color);color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);border:none;--ez-icon--color:var(--ez-button--disabled-color);cursor:no-drop}.small{height:32px;--ez-button--font-size:var(--text--small, 12px)}.medium{height:42px}.large{height:46px}.btn-icon{padding:0px}.btn-icon--medium{width:42px;min-width:42px;height:42px}.btn-icon--small{width:32px;min-width:32px;height:32px}.btn-icon--large{width:46px;min-width:46px;height:46px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon:hover{color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);--ez-icon--color:var(--ez-button--hover-color)}.label-icon:active{color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);user-select:none}button:disabled+label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);color:var(--ez-button--disabled-color);cursor:no-drop}div.label-icon{cursor:pointer}div.label-icon,button:disabled{cursor:no-drop}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";export{e as ez_button}
|
|
@@ -13,7 +13,7 @@ export declare class EzButton {
|
|
|
13
13
|
*/
|
|
14
14
|
mode: string;
|
|
15
15
|
/**
|
|
16
|
-
* Define o icone svg que será utilizado no botão. Esta propriedade só é utilizada caso o componente esteja no modo
|
|
16
|
+
* Define o icone svg que será utilizado no botão. Esta propriedade só é utilizada caso o componente esteja no modo "icon"
|
|
17
17
|
*/
|
|
18
18
|
image: string;
|
|
19
19
|
/**
|
|
@@ -23,7 +23,7 @@ export declare class EzButton {
|
|
|
23
23
|
/**
|
|
24
24
|
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
25
25
|
*/
|
|
26
|
-
size:
|
|
26
|
+
size: "small" | "medium" | "large" | undefined;
|
|
27
27
|
/**
|
|
28
28
|
* Realiza o foco no botão
|
|
29
29
|
*/
|
|
@@ -32,7 +32,7 @@ export declare class EzButton {
|
|
|
32
32
|
* Remove o foco no botão
|
|
33
33
|
*/
|
|
34
34
|
setBlur(): Promise<void>;
|
|
35
|
-
getIconSize(): string;
|
|
35
|
+
getIconSize(sizeParam?: string): string;
|
|
36
36
|
handleSlotChange(ev: Event): void;
|
|
37
37
|
render(): any;
|
|
38
38
|
}
|
|
@@ -37,7 +37,7 @@ export namespace Components {
|
|
|
37
37
|
*/
|
|
38
38
|
"iconName": string;
|
|
39
39
|
/**
|
|
40
|
-
* Define o icone svg que será utilizado no botão. Esta propriedade só é utilizada caso o componente esteja no modo
|
|
40
|
+
* Define o icone svg que será utilizado no botão. Esta propriedade só é utilizada caso o componente esteja no modo "icon"
|
|
41
41
|
*/
|
|
42
42
|
"image": string;
|
|
43
43
|
/**
|
|
@@ -59,7 +59,7 @@ export namespace Components {
|
|
|
59
59
|
/**
|
|
60
60
|
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
61
61
|
*/
|
|
62
|
-
"size":
|
|
62
|
+
"size": "small" | "medium" | "large" | undefined;
|
|
63
63
|
}
|
|
64
64
|
interface EzCalendar {
|
|
65
65
|
/**
|
|
@@ -1112,7 +1112,7 @@ declare namespace LocalJSX {
|
|
|
1112
1112
|
*/
|
|
1113
1113
|
"iconName"?: string;
|
|
1114
1114
|
/**
|
|
1115
|
-
* Define o icone svg que será utilizado no botão. Esta propriedade só é utilizada caso o componente esteja no modo
|
|
1115
|
+
* Define o icone svg que será utilizado no botão. Esta propriedade só é utilizada caso o componente esteja no modo "icon"
|
|
1116
1116
|
*/
|
|
1117
1117
|
"image"?: string;
|
|
1118
1118
|
/**
|
|
@@ -1126,7 +1126,7 @@ declare namespace LocalJSX {
|
|
|
1126
1126
|
/**
|
|
1127
1127
|
* É possível escolher entre [small,medium,large] (somente para os modos "icon" e "link")
|
|
1128
1128
|
*/
|
|
1129
|
-
"size"?:
|
|
1129
|
+
"size"?: "small" | "medium" | "large" | undefined;
|
|
1130
1130
|
}
|
|
1131
1131
|
interface EzCalendar {
|
|
1132
1132
|
/**
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,h as t}from"./p-60138b72.js";let e=class{constructor(t){o(this,t),this.enabled=!0,this.mode="regular",this.size="medium"}async setFocus(){this._button.focus()}async setBlur(){this._button.blur()}getIconSize(){return this.size}handleSlotChange(o){const t=o.target,e=t.assignedElements()[0];"link"==this.mode?(e.style.display="inline","leftIcon"==t.name?e.style.paddingRight="var(--ez-button__inline__icon--padding)":"rightIcon"==t.name&&(e.style.paddingLeft="var(--ez-button__inline__icon--padding)")):e.style.setProperty("--ez-icon--color","var(--ez-icon--color)")}render(){return"icon"==this.mode?t("button",{class:"icon "+this.size,type:"button",disabled:!this.enabled,ref:o=>this._button=o},t("ez-icon",{class:"icon",href:this.image,iconName:this.iconName,size:this.getIconSize(),onClick:o=>{this.enabled||o.stopPropagation()}})):"label-icon"==this.mode?t("div",{class:"label-icon"},t("button",{class:"icon",type:"button",disabled:!this.enabled,ref:o=>this._button=o},t("ez-icon",{class:"icon",href:this.image,iconName:this.iconName,size:"large",onClick:o=>{this.enabled||o.stopPropagation()}})),t("label",{title:this.label},this.label)):"link"==this.mode?t("a",{class:this.size,ref:o=>this._button=o},t("slot",{name:"leftIcon",onSlotchange:o=>{this.handleSlotChange(o)}}),this.label,t("slot",{name:"rightIcon",onSlotchange:o=>{this.handleSlotChange(o)}})):t("button",{type:"button",disabled:!this.enabled,ref:o=>this._button=o},t("slot",{name:"leftIcon",onSlotchange:o=>{this.handleSlotChange(o)}}),this.label,t("slot",{name:"rightIcon",onSlotchange:o=>{this.handleSlotChange(o)}}))}};e.style=":host{--ez-button--min-width:100px;--ez-button--height:42px;--ez-button__icon--width:18px;--ez-button__inline__icon--padding:12px;--ez-button--padding-top:var(--space--medium, 12px);--ez-button--padding-bottom:var(--space--medium, 12px);--ez-button--padding-right:var(--space--large, 24px);--ez-button--padding-left:var(--space--large, 24px);--ez-button--color:var(--title--primary, #FFF);--ez-button--font-size:var(--text--medium, 14px);--ez-button--font-family:var(--font-pattern, Arial);--ez-button--font-weight:var(--text-weight--large);--ez-button--background-color:var(--background--medium, #c0c0c0);--ez-button--border-radius:var(--border--radius-large, 12px);--ez-button--border:none;--ez-button--hover--background-color:var(--background--strong, var(--ez-button--background-color));--ez-button--hover-color:var(--color--primary-600);--ez-button--active--background-color:var(--background--strong, --color--primary-700);--ez-button--active-color:var(--color--primary-700);--ez-button--disabled-color:var(--text--disable);--ez-button--disabled--background-color:var(--color--disable-secondary);--ez-button--focus--border:var(--border--xlarge, 4px solid) var(--color--primary-300);--ez-button--focus--box-shadow:none;--ez-button--link-color:var(--color--primary, '#008561');--ez-button--link--hover-color:var(--color--primary-700, '#1C1D22');--ez-button--link--small--font-size:var(--text--small, 12px);--ez-button--link--medium--font-size:var(--text--medium, 14px);--ez-button--link--large--font-size:var(--text--large, 16px)}ez-icon{--ez-icon--color:inherit}button{display:flex;align-items:center;justify-content:center;margin:0;cursor:pointer;transition:background-color 0.2s linear;min-width:var(--ez-button--min-width);height:var(--ez-button--height);font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight);padding:var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);border-radius:var(--ez-button--border-radius);background-color:var(--ez-button--background-color);color:var(--ez-button--color);fill:var(--ez-button--color);border:var(--ez-button--border);--ez-icon--color:var(--ez-button--color)}button:hover{outline:none;color:var(--ez-button--hover-color);fill:var(--ez-button--hover-color);background-color:var(--ez-button--hover--background-color);--ez-icon--color:var(--ez-button--hover-color)}button:focus{outline:none;outline:var(--ez-button--focus--border);box-shadow:var(--ez-button--focus--box-shadow)}button:active{outline:none;box-shadow:none;background-color:var(--ez-button--active--background-color);color:var(--ez-button--active-color);fill:var(--ez-button--active-color);--ez-icon--color:var(--ez-button--active-color)}button:disabled{background-color:var(--ez-button--disabled--background-color);color:var(--ez-button--disabled-color);fill:var(--ez-button--disabled-color);--ez-icon--color:var(--ez-button--disabled-color);border:none;cursor:no-drop}button.icon{padding:0px}button.small{width:32px;min-width:32px;height:32px}button.medium{width:42px;min-width:42px;height:42px}button.large{width:52px;min-width:52px;height:52px}.label-icon{display:flex;flex-direction:column;align-items:center;color:var(--ez-button--color)}.label-icon label{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-family:var(--ez-button--font-family);font-size:var(--ez-button--font-size);font-weight:var(--ez-button--font-weight)}a{font-family:var(--ez-button--font-family);font-weight:var(--ez-button--font-weight);color:var(--ez-button--link-color);cursor:pointer;display:flex;align-items:center;justify-content:center;}a:hover{color:var(--ez-button--link--hover-color)}a.small{font-size:var(--ez-button--link--small--font-size);line-height:var(--ez-button--link--small--font-size)}a.medium{font-size:var(--ez-button--link--medium--font-size);line-height:var(--ez-button--link--medium--font-size)}a.large{font-size:var(--ez-button--link--large--font-size);line-height:var(--ez-button--link--large--font-size)}";export{e as ez_button}
|