@sankhyalabs/ezui 2.3.10 → 2.3.11
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/README.md +1 -0
- package/dist/cjs/ez-actions-button.cjs.entry.js +51 -9
- package/dist/collection/components/ez-actions-button/ez-actions-button.css +14 -3
- package/dist/collection/components/ez-actions-button/ez-actions-button.js +50 -8
- package/dist/custom-elements/index.js +51 -9
- package/dist/esm/ez-actions-button.entry.js +51 -9
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-205fc8bc.entry.js +1 -0
- package/dist/types/components/ez-actions-button/ez-actions-button.d.ts +5 -0
- package/package.json +1 -1
- package/dist/ezui/p-96265e26.entry.js +0 -1
package/README.md
CHANGED
|
@@ -76,3 +76,4 @@ o build do ezui, link do react-output e ezui, build do react-output e a disponib
|
|
|
76
76
|
- [Diretrizes de documentação](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Diretrizes-de-documenta%C3%A7%C3%A3o)
|
|
77
77
|
- [Link ente projetos](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Link-ente-projetos)
|
|
78
78
|
- [Definindo bons data-element-id de testabilidade no design system](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Definindo-bons-data-element-id-de-testabilidade-no-design-system)
|
|
79
|
+
- [Criando exemplos de componentes](https://git.sankhya.com.br/sankhyalabs/ez-ui/-/wikis/Criando-exemplos-de-componentes)
|
|
@@ -9,12 +9,13 @@ const CSSVarsUtils = require('./CSSVarsUtils-af809e73.js');
|
|
|
9
9
|
require('./DialogType-aa435c52.js');
|
|
10
10
|
require('./CheckMode-ecb90b87.js');
|
|
11
11
|
|
|
12
|
-
const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:
|
|
12
|
+
const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
|
|
13
13
|
|
|
14
14
|
let EzActionsButton = class {
|
|
15
15
|
constructor(hostRef) {
|
|
16
16
|
index.registerInstance(this, hostRef);
|
|
17
17
|
this.ezAction = index.createEvent(this, "ezAction", 7);
|
|
18
|
+
this._arrowOffset = 5;
|
|
18
19
|
/**
|
|
19
20
|
* Se false o usuário não pode interagir com o componente.
|
|
20
21
|
*/
|
|
@@ -71,25 +72,61 @@ let EzActionsButton = class {
|
|
|
71
72
|
return this._floatingID != undefined;
|
|
72
73
|
}
|
|
73
74
|
showActions() {
|
|
74
|
-
var _a
|
|
75
|
+
var _a;
|
|
75
76
|
if (!this.enabled) {
|
|
76
77
|
return;
|
|
77
78
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
let options = {
|
|
80
|
+
autoClose: true,
|
|
81
|
+
innerClickTest: this.innerClickCheck,
|
|
82
|
+
isFixed: true,
|
|
83
|
+
top: this.getPositionTop(),
|
|
84
|
+
left: this.getPositionLeft()
|
|
85
|
+
};
|
|
81
86
|
this._floatingID = core.FloatingManager.float(this._actionsList, this._listContainer, options);
|
|
82
87
|
const docWidth = document.body.clientWidth;
|
|
83
|
-
const boundingList = (
|
|
88
|
+
const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
84
89
|
if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
|
|
85
|
-
|
|
86
|
-
|
|
90
|
+
options = {
|
|
91
|
+
autoClose: true,
|
|
92
|
+
innerClickTest: this.innerClickCheck,
|
|
93
|
+
isFixed: true,
|
|
94
|
+
top: this.getPositionTop(),
|
|
95
|
+
left: (docWidth - boundingList.width) + "px"
|
|
96
|
+
};
|
|
87
97
|
core.FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
|
|
88
98
|
}
|
|
89
99
|
window.requestAnimationFrame(() => {
|
|
90
100
|
this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
91
101
|
});
|
|
92
102
|
}
|
|
103
|
+
getPositionTop() {
|
|
104
|
+
var _a;
|
|
105
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
106
|
+
if (boundingHost == undefined) {
|
|
107
|
+
return null;
|
|
108
|
+
}
|
|
109
|
+
return (boundingHost.y + boundingHost.height) + "px";
|
|
110
|
+
}
|
|
111
|
+
getBoundingLeft() {
|
|
112
|
+
var _a;
|
|
113
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
114
|
+
if (boundingHost == undefined) {
|
|
115
|
+
return null;
|
|
116
|
+
}
|
|
117
|
+
const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
|
|
118
|
+
return (boundingHost.x - arrowOffset) + "px";
|
|
119
|
+
}
|
|
120
|
+
getPositionLeft() {
|
|
121
|
+
const boundingLeft = this.getBoundingLeft();
|
|
122
|
+
if (boundingLeft) {
|
|
123
|
+
return boundingLeft;
|
|
124
|
+
}
|
|
125
|
+
else if (this.arrowActive) {
|
|
126
|
+
return `-${this._arrowOffset}px`;
|
|
127
|
+
}
|
|
128
|
+
return null;
|
|
129
|
+
}
|
|
93
130
|
hasLabelOrCheckOption() {
|
|
94
131
|
var _a;
|
|
95
132
|
return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
@@ -98,6 +135,10 @@ let EzActionsButton = class {
|
|
|
98
135
|
var _a;
|
|
99
136
|
return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
|
|
100
137
|
}
|
|
138
|
+
controlScrollPage() {
|
|
139
|
+
window.removeEventListener("scroll", this.hideActions.bind(this));
|
|
140
|
+
window.addEventListener("scroll", this.hideActions.bind(this));
|
|
141
|
+
}
|
|
101
142
|
//---------------------------------------------
|
|
102
143
|
// Event handlers
|
|
103
144
|
//---------------------------------------------
|
|
@@ -131,6 +172,7 @@ let EzActionsButton = class {
|
|
|
131
172
|
}
|
|
132
173
|
componentDidLoad() {
|
|
133
174
|
CSSVarsUtils.CSSVarsUtils.applyVarsButton(this._element, this._button);
|
|
175
|
+
this.controlScrollPage();
|
|
134
176
|
}
|
|
135
177
|
componentDidRender() {
|
|
136
178
|
if (this._floatingID == undefined) {
|
|
@@ -150,7 +192,7 @@ let EzActionsButton = class {
|
|
|
150
192
|
return (index.h(index.Host, null, index.h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
|
|
151
193
|
(this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
|
|
152
194
|
index.h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), index.h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
|
|
153
|
-
index.h("div", { class: "ez-actions-button__arrow" +
|
|
195
|
+
index.h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
|
|
154
196
|
(this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), index.h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
|
|
155
197
|
(this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
|
|
156
198
|
var _a;
|
|
@@ -88,12 +88,11 @@
|
|
|
88
88
|
|
|
89
89
|
.ez-actions-button__arrow {
|
|
90
90
|
/*private*/
|
|
91
|
-
position:
|
|
91
|
+
position: absolute;
|
|
92
92
|
border-left: 10px solid transparent;
|
|
93
93
|
border-right: 10px solid transparent;
|
|
94
94
|
width: 0;
|
|
95
95
|
height: 0;
|
|
96
|
-
margin-left: 6px;
|
|
97
96
|
|
|
98
97
|
/*public*/
|
|
99
98
|
z-index: calc(var(--more-visible, 2) + 1);
|
|
@@ -102,7 +101,19 @@
|
|
|
102
101
|
|
|
103
102
|
.ez-actions-button__arrow--upped {
|
|
104
103
|
/*private*/
|
|
105
|
-
margin-top: calc((var(--ez-actions-button__actions-list--top-margin) +
|
|
104
|
+
margin-top: calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.ez-actions-button__arrow--small {
|
|
108
|
+
margin-left: 6px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.ez-actions-button__arrow--medium {
|
|
112
|
+
margin-left: 11px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.ez-actions-button__arrow--large {
|
|
116
|
+
margin-left: 13px;
|
|
106
117
|
}
|
|
107
118
|
|
|
108
119
|
.ez-actions-button__arrow:only-child {
|
|
@@ -3,6 +3,7 @@ import { Component, Element, Event, h, Host, Prop, State, Method } from '@stenci
|
|
|
3
3
|
import { CSSVarsUtils } from '../../utils';
|
|
4
4
|
export class EzActionsButton {
|
|
5
5
|
constructor() {
|
|
6
|
+
this._arrowOffset = 5;
|
|
6
7
|
/**
|
|
7
8
|
* Se false o usuário não pode interagir com o componente.
|
|
8
9
|
*/
|
|
@@ -59,25 +60,61 @@ export class EzActionsButton {
|
|
|
59
60
|
return this._floatingID != undefined;
|
|
60
61
|
}
|
|
61
62
|
showActions() {
|
|
62
|
-
var _a
|
|
63
|
+
var _a;
|
|
63
64
|
if (!this.enabled) {
|
|
64
65
|
return;
|
|
65
66
|
}
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
let options = {
|
|
68
|
+
autoClose: true,
|
|
69
|
+
innerClickTest: this.innerClickCheck,
|
|
70
|
+
isFixed: true,
|
|
71
|
+
top: this.getPositionTop(),
|
|
72
|
+
left: this.getPositionLeft()
|
|
73
|
+
};
|
|
69
74
|
this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
|
|
70
75
|
const docWidth = document.body.clientWidth;
|
|
71
|
-
const boundingList = (
|
|
76
|
+
const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
72
77
|
if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
|
|
73
|
-
|
|
74
|
-
|
|
78
|
+
options = {
|
|
79
|
+
autoClose: true,
|
|
80
|
+
innerClickTest: this.innerClickCheck,
|
|
81
|
+
isFixed: true,
|
|
82
|
+
top: this.getPositionTop(),
|
|
83
|
+
left: (docWidth - boundingList.width) + "px"
|
|
84
|
+
};
|
|
75
85
|
FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
|
|
76
86
|
}
|
|
77
87
|
window.requestAnimationFrame(() => {
|
|
78
88
|
this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
79
89
|
});
|
|
80
90
|
}
|
|
91
|
+
getPositionTop() {
|
|
92
|
+
var _a;
|
|
93
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
94
|
+
if (boundingHost == undefined) {
|
|
95
|
+
return null;
|
|
96
|
+
}
|
|
97
|
+
return (boundingHost.y + boundingHost.height) + "px";
|
|
98
|
+
}
|
|
99
|
+
getBoundingLeft() {
|
|
100
|
+
var _a;
|
|
101
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
102
|
+
if (boundingHost == undefined) {
|
|
103
|
+
return null;
|
|
104
|
+
}
|
|
105
|
+
const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
|
|
106
|
+
return (boundingHost.x - arrowOffset) + "px";
|
|
107
|
+
}
|
|
108
|
+
getPositionLeft() {
|
|
109
|
+
const boundingLeft = this.getBoundingLeft();
|
|
110
|
+
if (boundingLeft) {
|
|
111
|
+
return boundingLeft;
|
|
112
|
+
}
|
|
113
|
+
else if (this.arrowActive) {
|
|
114
|
+
return `-${this._arrowOffset}px`;
|
|
115
|
+
}
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
81
118
|
hasLabelOrCheckOption() {
|
|
82
119
|
var _a;
|
|
83
120
|
return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
@@ -86,6 +123,10 @@ export class EzActionsButton {
|
|
|
86
123
|
var _a;
|
|
87
124
|
return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
|
|
88
125
|
}
|
|
126
|
+
controlScrollPage() {
|
|
127
|
+
window.removeEventListener("scroll", this.hideActions.bind(this));
|
|
128
|
+
window.addEventListener("scroll", this.hideActions.bind(this));
|
|
129
|
+
}
|
|
89
130
|
//---------------------------------------------
|
|
90
131
|
// Event handlers
|
|
91
132
|
//---------------------------------------------
|
|
@@ -119,6 +160,7 @@ export class EzActionsButton {
|
|
|
119
160
|
}
|
|
120
161
|
componentDidLoad() {
|
|
121
162
|
CSSVarsUtils.applyVarsButton(this._element, this._button);
|
|
163
|
+
this.controlScrollPage();
|
|
122
164
|
}
|
|
123
165
|
componentDidRender() {
|
|
124
166
|
if (this._floatingID == undefined) {
|
|
@@ -141,7 +183,7 @@ export class EzActionsButton {
|
|
|
141
183
|
h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })),
|
|
142
184
|
h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem },
|
|
143
185
|
this.arrowActive &&
|
|
144
|
-
h("div", { class: "ez-actions-button__arrow" +
|
|
186
|
+
h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
|
|
145
187
|
(this.isTransparent ? " ez-actions-button__arrow--upped" : "") }),
|
|
146
188
|
h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
|
|
147
189
|
(this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
|
|
@@ -145,7 +145,7 @@ var CheckMode;
|
|
|
145
145
|
CheckMode["SWITCH"] = "SWITCH";
|
|
146
146
|
})(CheckMode || (CheckMode = {}));
|
|
147
147
|
|
|
148
|
-
const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:
|
|
148
|
+
const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
|
|
149
149
|
|
|
150
150
|
let EzActionsButton$1 = class extends HTMLElement$1 {
|
|
151
151
|
constructor() {
|
|
@@ -153,6 +153,7 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
|
|
|
153
153
|
this.__registerHost();
|
|
154
154
|
this.__attachShadow();
|
|
155
155
|
this.ezAction = createEvent(this, "ezAction", 7);
|
|
156
|
+
this._arrowOffset = 5;
|
|
156
157
|
/**
|
|
157
158
|
* Se false o usuário não pode interagir com o componente.
|
|
158
159
|
*/
|
|
@@ -209,25 +210,61 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
|
|
|
209
210
|
return this._floatingID != undefined;
|
|
210
211
|
}
|
|
211
212
|
showActions() {
|
|
212
|
-
var _a
|
|
213
|
+
var _a;
|
|
213
214
|
if (!this.enabled) {
|
|
214
215
|
return;
|
|
215
216
|
}
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
217
|
+
let options = {
|
|
218
|
+
autoClose: true,
|
|
219
|
+
innerClickTest: this.innerClickCheck,
|
|
220
|
+
isFixed: true,
|
|
221
|
+
top: this.getPositionTop(),
|
|
222
|
+
left: this.getPositionLeft()
|
|
223
|
+
};
|
|
219
224
|
this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
|
|
220
225
|
const docWidth = document.body.clientWidth;
|
|
221
|
-
const boundingList = (
|
|
226
|
+
const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
222
227
|
if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
|
|
223
|
-
|
|
224
|
-
|
|
228
|
+
options = {
|
|
229
|
+
autoClose: true,
|
|
230
|
+
innerClickTest: this.innerClickCheck,
|
|
231
|
+
isFixed: true,
|
|
232
|
+
top: this.getPositionTop(),
|
|
233
|
+
left: (docWidth - boundingList.width) + "px"
|
|
234
|
+
};
|
|
225
235
|
FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
|
|
226
236
|
}
|
|
227
237
|
window.requestAnimationFrame(() => {
|
|
228
238
|
this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
229
239
|
});
|
|
230
240
|
}
|
|
241
|
+
getPositionTop() {
|
|
242
|
+
var _a;
|
|
243
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
244
|
+
if (boundingHost == undefined) {
|
|
245
|
+
return null;
|
|
246
|
+
}
|
|
247
|
+
return (boundingHost.y + boundingHost.height) + "px";
|
|
248
|
+
}
|
|
249
|
+
getBoundingLeft() {
|
|
250
|
+
var _a;
|
|
251
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
252
|
+
if (boundingHost == undefined) {
|
|
253
|
+
return null;
|
|
254
|
+
}
|
|
255
|
+
const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
|
|
256
|
+
return (boundingHost.x - arrowOffset) + "px";
|
|
257
|
+
}
|
|
258
|
+
getPositionLeft() {
|
|
259
|
+
const boundingLeft = this.getBoundingLeft();
|
|
260
|
+
if (boundingLeft) {
|
|
261
|
+
return boundingLeft;
|
|
262
|
+
}
|
|
263
|
+
else if (this.arrowActive) {
|
|
264
|
+
return `-${this._arrowOffset}px`;
|
|
265
|
+
}
|
|
266
|
+
return null;
|
|
267
|
+
}
|
|
231
268
|
hasLabelOrCheckOption() {
|
|
232
269
|
var _a;
|
|
233
270
|
return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
@@ -236,6 +273,10 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
|
|
|
236
273
|
var _a;
|
|
237
274
|
return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
|
|
238
275
|
}
|
|
276
|
+
controlScrollPage() {
|
|
277
|
+
window.removeEventListener("scroll", this.hideActions.bind(this));
|
|
278
|
+
window.addEventListener("scroll", this.hideActions.bind(this));
|
|
279
|
+
}
|
|
239
280
|
//---------------------------------------------
|
|
240
281
|
// Event handlers
|
|
241
282
|
//---------------------------------------------
|
|
@@ -269,6 +310,7 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
|
|
|
269
310
|
}
|
|
270
311
|
componentDidLoad() {
|
|
271
312
|
CSSVarsUtils.applyVarsButton(this._element, this._button);
|
|
313
|
+
this.controlScrollPage();
|
|
272
314
|
}
|
|
273
315
|
componentDidRender() {
|
|
274
316
|
if (this._floatingID == undefined) {
|
|
@@ -288,7 +330,7 @@ let EzActionsButton$1 = class extends HTMLElement$1 {
|
|
|
288
330
|
return (h(Host, null, h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
|
|
289
331
|
(this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
|
|
290
332
|
h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
|
|
291
|
-
h("div", { class: "ez-actions-button__arrow" +
|
|
333
|
+
h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
|
|
292
334
|
(this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
|
|
293
335
|
(this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
|
|
294
336
|
var _a;
|
|
@@ -5,12 +5,13 @@ import { C as CSSVarsUtils } from './CSSVarsUtils-00f67f32.js';
|
|
|
5
5
|
import './DialogType-4059dc4d.js';
|
|
6
6
|
import './CheckMode-bdb2ec19.js';
|
|
7
7
|
|
|
8
|
-
const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:
|
|
8
|
+
const ezActionsButtonCss = ":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";
|
|
9
9
|
|
|
10
10
|
let EzActionsButton = class {
|
|
11
11
|
constructor(hostRef) {
|
|
12
12
|
registerInstance(this, hostRef);
|
|
13
13
|
this.ezAction = createEvent(this, "ezAction", 7);
|
|
14
|
+
this._arrowOffset = 5;
|
|
14
15
|
/**
|
|
15
16
|
* Se false o usuário não pode interagir com o componente.
|
|
16
17
|
*/
|
|
@@ -67,25 +68,61 @@ let EzActionsButton = class {
|
|
|
67
68
|
return this._floatingID != undefined;
|
|
68
69
|
}
|
|
69
70
|
showActions() {
|
|
70
|
-
var _a
|
|
71
|
+
var _a;
|
|
71
72
|
if (!this.enabled) {
|
|
72
73
|
return;
|
|
73
74
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
let options = {
|
|
76
|
+
autoClose: true,
|
|
77
|
+
innerClickTest: this.innerClickCheck,
|
|
78
|
+
isFixed: true,
|
|
79
|
+
top: this.getPositionTop(),
|
|
80
|
+
left: this.getPositionLeft()
|
|
81
|
+
};
|
|
77
82
|
this._floatingID = FloatingManager.float(this._actionsList, this._listContainer, options);
|
|
78
83
|
const docWidth = document.body.clientWidth;
|
|
79
|
-
const boundingList = (
|
|
84
|
+
const boundingList = (_a = this._actionsList) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
80
85
|
if ((boundingList === null || boundingList === void 0 ? void 0 : boundingList.right) > docWidth) {
|
|
81
|
-
|
|
82
|
-
|
|
86
|
+
options = {
|
|
87
|
+
autoClose: true,
|
|
88
|
+
innerClickTest: this.innerClickCheck,
|
|
89
|
+
isFixed: true,
|
|
90
|
+
top: this.getPositionTop(),
|
|
91
|
+
left: (docWidth - boundingList.width) + "px"
|
|
92
|
+
};
|
|
83
93
|
FloatingManager.updateFloatPosition(this._actionsList, this._listContainer, options);
|
|
84
94
|
}
|
|
85
95
|
window.requestAnimationFrame(() => {
|
|
86
96
|
this._actionsList.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
|
|
87
97
|
});
|
|
88
98
|
}
|
|
99
|
+
getPositionTop() {
|
|
100
|
+
var _a;
|
|
101
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
102
|
+
if (boundingHost == undefined) {
|
|
103
|
+
return null;
|
|
104
|
+
}
|
|
105
|
+
return (boundingHost.y + boundingHost.height) + "px";
|
|
106
|
+
}
|
|
107
|
+
getBoundingLeft() {
|
|
108
|
+
var _a;
|
|
109
|
+
const boundingHost = (_a = this._element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
110
|
+
if (boundingHost == undefined) {
|
|
111
|
+
return null;
|
|
112
|
+
}
|
|
113
|
+
const arrowOffset = this.arrowActive ? this._arrowOffset : 0;
|
|
114
|
+
return (boundingHost.x - arrowOffset) + "px";
|
|
115
|
+
}
|
|
116
|
+
getPositionLeft() {
|
|
117
|
+
const boundingLeft = this.getBoundingLeft();
|
|
118
|
+
if (boundingLeft) {
|
|
119
|
+
return boundingLeft;
|
|
120
|
+
}
|
|
121
|
+
else if (this.arrowActive) {
|
|
122
|
+
return `-${this._arrowOffset}px`;
|
|
123
|
+
}
|
|
124
|
+
return null;
|
|
125
|
+
}
|
|
89
126
|
hasLabelOrCheckOption() {
|
|
90
127
|
var _a;
|
|
91
128
|
return (this.showLabel || this.checkOption) && ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
@@ -94,6 +131,10 @@ let EzActionsButton = class {
|
|
|
94
131
|
var _a;
|
|
95
132
|
return (_a = this.actions) === null || _a === void 0 ? void 0 : _a.some(action => action.iconName != undefined);
|
|
96
133
|
}
|
|
134
|
+
controlScrollPage() {
|
|
135
|
+
window.removeEventListener("scroll", this.hideActions.bind(this));
|
|
136
|
+
window.addEventListener("scroll", this.hideActions.bind(this));
|
|
137
|
+
}
|
|
97
138
|
//---------------------------------------------
|
|
98
139
|
// Event handlers
|
|
99
140
|
//---------------------------------------------
|
|
@@ -127,6 +168,7 @@ let EzActionsButton = class {
|
|
|
127
168
|
}
|
|
128
169
|
componentDidLoad() {
|
|
129
170
|
CSSVarsUtils.applyVarsButton(this._element, this._button);
|
|
171
|
+
this.controlScrollPage();
|
|
130
172
|
}
|
|
131
173
|
componentDidRender() {
|
|
132
174
|
if (this._floatingID == undefined) {
|
|
@@ -146,7 +188,7 @@ let EzActionsButton = class {
|
|
|
146
188
|
return (h(Host, null, h("ez-button", { ref: elem => this._button = elem, class: (this.isTransparent ? "ez-actions-button__btn-transparent" : "") +
|
|
147
189
|
(this.showLabel ? " ez-actions-button__btn-label" : ""), label: this.showLabel && ((_a = this._selectedAction) === null || _a === void 0 ? void 0 : _a.label), enabled: this.enabled, mode: this.showLabel ? undefined : "icon", iconName: this.showLabel ? "" : this.displayIcon || "dots-vertical", size: this.size, onClick: () => this.handlerButtonClick() }, this.showLabel &&
|
|
148
190
|
h("ez-icon", { class: "ez-actions-button__icon-right", slot: "rightIcon", iconName: this.displayIcon || "dots-vertical" })), h("section", { class: "ez-actions-button__list-container", ref: elem => this._listContainer = elem }, this.arrowActive &&
|
|
149
|
-
h("div", { class: "ez-actions-button__arrow" +
|
|
191
|
+
h("div", { class: "ez-actions-button__arrow ez-actions-button__arrow--" + (this.size || "small") +
|
|
150
192
|
(this.isTransparent ? " ez-actions-button__arrow--upped" : "") }), h("div", { ref: elem => this._actionsList = elem, class: "ez-actions-button__actions-list" +
|
|
151
193
|
(this.arrowActive && !this.isTransparent ? " ez-actions-button__actions-list--lowered" : "") }, this.actions.map(action => {
|
|
152
194
|
var _a;
|
package/dist/ezui/ezui.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as o}from"./p-3c7ea91b.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-
|
|
1
|
+
import{p as e,b as o}from"./p-3c7ea91b.js";(()=>{const o=import.meta.url,s={};return""!==o&&(s.resourcesUrl=new URL(".",o).href),e(s)})().then((e=>o([["p-205fc8bc",[[1,"ez-actions-button",{enabled:[516],actions:[1040],size:[513],showLabel:[516,"show-label"],displayIcon:[513,"display-icon"],checkOption:[516,"check-option"],value:[513],isTransparent:[516,"is-transparent"],arrowActive:[516,"arrow-active"],_selectedAction:[32],hideActions:[64],isOpened:[64]}]]],["p-f13f3123",[[1,"ez-dialog",{confirm:[1028],dialogType:[1025,"dialog-type"],message:[1025],opened:[1540],personalizedIconPath:[1025,"personalized-icon-path"],ezTitle:[1025,"ez-title"],show:[64]}]]],["p-ccbe8272",[[1,"ez-filter-input",{label:[1],value:[1537],enabled:[4],errorMessage:[1537,"error-message"],restrict:[1],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-ff5be174",[[6,"ez-grid",{multipleSelection:[4,"multiple-selection"],config:[1040],serverUrl:[1,"server-url"],dataUnit:[16],statusResolver:[16],_paginationInfo:[32],_paginationChangedByKeyboard:[32],setColumnsDef:[64],addColumnMenuItem:[64],setColumnsState:[64],setData:[64],getSelection:[64],getColumnsState:[64],getColumns:[64],quickFilter:[64]},[[0,"ezSelectionChange","onSelectionChange"]]]]],["p-def4cd05",[[6,"ez-modal-container",{modalTitle:[1,"modal-title"],modalSubTitle:[1,"modal-sub-title"],showTitleBar:[4,"show-title-bar"],cancelButtonLabel:[1,"cancel-button-label"],okButtonLabel:[1,"ok-button-label"],cancelButtonStatus:[1,"cancel-button-status"],okButtonStatus:[1,"ok-button-status"]}]]],["p-66ebdf34",[[1,"ez-chip",{label:[513],enabled:[516],removePosition:[513,"remove-position"],mode:[513],value:[1540],setFocus:[64],setBlur:[64]}]]],["p-1cc11468",[[0,"ez-application"]]],["p-3cfefc57",[[1,"ez-card-item",{item:[16]}]]],["p-1214c5ce",[[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],scrollToTop:[64],setSelection:[64],getSelection:[64],getList:[64]}]]],["p-f6111077",[[1,"ez-loading-bar",{_showLoading:[32],hide:[64],show:[64]}]]],["p-7c227b86",[[1,"ez-modal",{modalSize:[1,"modal-size"],align:[1],opened:[1028],closeEsc:[4,"close-esc"],closeOutsideClick:[4,"close-outside-click"]}]]],["p-bffae598",[[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-cfcc23e6",[[1,"ez-popup",{size:[1],opened:[1540],useHeader:[516,"use-header"],heightMode:[513,"height-mode"],ezTitle:[1,"ez-title"]}]]],["p-8964287f",[[1,"ez-radio-button",{value:[1544],options:[1040],enabled:[516],label:[513],direction:[1537]}]]],["p-e165c3ef",[[1,"ez-scroller",{direction:[1],locked:[4],activeShadow:[4,"active-shadow"],isFirefox:[32]},[[2,"click","clickListener"],[1,"mousedown","mouseDownHandler"],[1,"mouseup","mouseUpHandler"],[1,"mousemove","mouseMoveHandler"]]]]],["p-482c3dd8",[[1,"ez-toast",{message:[1025],fadeTime:[1026,"fade-time"],useIcon:[1028,"use-icon"],canClose:[1028,"can-close"],show:[64]}]]],["p-04fab1e9",[[0,"ez-view-stack",{show:[64],getSelectedIndex:[64]}]]],["p-ac15d77e",[[1,"ez-text-input",{label:[513],value:[1537],enabled:[516],errorMessage:[1537,"error-message"],mask:[1],canShowError:[516,"can-show-error"],restrict:[1],mode:[513],noBorder:[516,"no-border"],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-8c874b58",[[1,"ez-collapsible-box",{value:[1540],label:[513],headerSize:[513,"header-size"],iconPlacement:[513,"icon-placement"],stretchTitle:[516,"stretch-title"],removable:[516],editable:[516],conditionalSave:[16],_activeEditText:[32],showHide:[64],applyFocusTextEdit:[64],cancelEdition:[64]}]]],["p-ede1328a",[[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],isInvalid:[64]}]]],["p-c2ebc450",[[1,"ez-date-input",{label:[513],value:[1040],enabled:[516],errorMessage:[1537,"error-message"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-7cf71eb3",[[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],isInvalid:[64]}]]],["p-72d755a8",[[1,"ez-time-input",{label:[513],value:[1026],enabled:[516],errorMessage:[1537,"error-message"],showSeconds:[516,"show-seconds"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-941d9bf9",[[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],isInvalid:[64]}]]],["p-f4d2438e",[[1,"ez-tabselector",{selectedIndex:[1538,"selected-index"],selectedTab:[1537,"selected-tab"],tabs:[1],_processedTabs:[32]}]]],["p-e2337c61",[[1,"ez-check",{label:[513],value:[1540],enabled:[1540],indeterminate:[516],mode:[513],getMode:[64],setFocus:[64]}]]],["p-6bcf35fd",[[1,"ez-text-area",{label:[513],value:[1537],enabled:[516],errorMessage:[1537,"error-message"],rows:[1538],canShowError:[516,"can-show-error"],mode:[513],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-a713a1aa",[[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-81fb0c90",[[1,"ez-text-edit",{value:[1],styled:[16],_newValue:[32],applyFocusSelect:[64]}]]],["p-ca9a0a49",[[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],_startLoading:[32],_showLoading:[32],_criteria:[32],setFocus:[64],setBlur:[64],isInvalid:[64]}]]],["p-9d57e44a",[[1,"ez-calendar",{value:[1040],floating:[516],time:[516],showSeconds:[516,"show-seconds"],show:[64],fitVertical:[64],hide:[64]}]]],["p-ec9decf2",[[1,"ez-icon",{size:[513],href:[513],iconName:[513,"icon-name"]}]]],["p-88d0fc06",[[1,"ez-button",{label:[513],enabled:[516],mode:[513],image:[513],iconName:[513,"icon-name"],size:[513],setFocus:[64],setBlur:[64]}]]],["p-fcee02c6",[[0,"ez-form",{dataUnit:[1040],config:[16],recordsValidator:[16],validate:[64]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,h as o,H as n,g as s}from"./p-3c7ea91b.js";import{FloatingManager as a}from"@sankhyalabs/core";import"./p-0b44cf1c.js";import{C as e}from"./p-4a5e37a7.js";import"./p-e1148f5c.js";import"./p-b853763b.js";let c=class{constructor(o){t(this,o),this.ezAction=i(this,"ezAction",7),this._arrowOffset=5,this.enabled=!0,this.size="medium",this.showLabel=!1,this.checkOption=!1,this.isTransparent=!1,this.arrowActive=!1,this.innerClickCheck=(t,i)=>{var o;if(i&&t){if(i===t)return!0;const n=t.children;for(let t=0;t<n.length;t++)if(null===(o=n[t].shadowRoot)||void 0===o?void 0:o.contains(i))return!0}return!1}}async hideActions(){null!=this._floatingID&&a.close(this._floatingID),this._floatingID=void 0}async isOpened(){return null!=this._floatingID}showActions(){var t;if(!this.enabled)return;let i={autoClose:!0,innerClickTest:this.innerClickCheck,isFixed:!0,top:this.getPositionTop(),left:this.getPositionLeft()};this._floatingID=a.float(this._actionsList,this._listContainer,i);const o=document.body.clientWidth,n=null===(t=this._actionsList)||void 0===t?void 0:t.getBoundingClientRect();(null==n?void 0:n.right)>o&&(i={autoClose:!0,innerClickTest:this.innerClickCheck,isFixed:!0,top:this.getPositionTop(),left:o-n.width+"px"},a.updateFloatPosition(this._actionsList,this._listContainer,i)),window.requestAnimationFrame((()=>{this._actionsList.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}))}getPositionTop(){var t;const i=null===(t=this._element)||void 0===t?void 0:t.getBoundingClientRect();return null==i?null:i.y+i.height+"px"}getBoundingLeft(){var t;const i=null===(t=this._element)||void 0===t?void 0:t.getBoundingClientRect();return null==i?null:i.x-(this.arrowActive?this._arrowOffset:0)+"px"}getPositionLeft(){return this.getBoundingLeft()||(this.arrowActive?`-${this._arrowOffset}px`:null)}hasLabelOrCheckOption(){var t;return(this.showLabel||this.checkOption)&&(null===(t=this.actions)||void 0===t?void 0:t.length)>0}hasIconName(){var t;return null===(t=this.actions)||void 0===t?void 0:t.some((t=>null!=t.iconName))}controlScrollPage(){window.removeEventListener("scroll",this.hideActions.bind(this)),window.addEventListener("scroll",this.hideActions.bind(this))}handlerButtonClick(){this.showActions()}actionClick(t){this._selectedAction=t,this.hideActions(),this.ezAction.emit(t)}componentWillLoad(){if(null==this.actions){this.actions=[];const t=this._element.querySelectorAll("action");t&&t.forEach((t=>{let i=t.innerText,o=t.getAttribute("value");o||(o=i),this.actions.push({label:i,value:o}),t.hidden=!0}))}}componentDidLoad(){e.applyVarsButton(this._element,this._button),this.controlScrollPage()}componentDidRender(){null==this._floatingID&&this._actionsList.remove(),this.hasLabelOrCheckOption()&&(this.value?this._selectedAction=this.actions.find((t=>t.value===this.value)):this._selectedAction||(this._selectedAction=this.actions[0]))}render(){var t;return o(n,null,o("ez-button",{ref:t=>this._button=t,class:(this.isTransparent?"ez-actions-button__btn-transparent":"")+(this.showLabel?" ez-actions-button__btn-label":""),label:this.showLabel&&(null===(t=this._selectedAction)||void 0===t?void 0:t.label),enabled:this.enabled,mode:this.showLabel?void 0:"icon",iconName:this.showLabel?"":this.displayIcon||"dots-vertical",size:this.size,onClick:()=>this.handlerButtonClick()},this.showLabel&&o("ez-icon",{class:"ez-actions-button__icon-right",slot:"rightIcon",iconName:this.displayIcon||"dots-vertical"})),o("section",{class:"ez-actions-button__list-container",ref:t=>this._listContainer=t},this.arrowActive&&o("div",{class:"ez-actions-button__arrow ez-actions-button__arrow--"+(this.size||"small")+(this.isTransparent?" ez-actions-button__arrow--upped":"")}),o("div",{ref:t=>this._actionsList=t,class:"ez-actions-button__actions-list"+(this.arrowActive&&!this.isTransparent?" ez-actions-button__actions-list--lowered":"")},this.actions.map((t=>{var i;return o("ez-button",{size:"small",label:t.label,onClick:()=>this.actionClick(t),class:"ez-actions-button__btn-action"+(this.checkOption||this.hasIconName()?" ez-actions-button__btn-action--spaced":"")},this.checkOption&&(null===(i=this._selectedAction)||void 0===i?void 0:i.value)===t.value&&o("ez-icon",{class:"ez-actions-button__icon-check",slot:"leftIcon",size:"small",iconName:"check"}),!this.checkOption&&t.iconName&&o("ez-icon",{class:"ez-actions-button__icon-item",slot:"leftIcon",size:"small",iconName:t.iconName}))})))))}get _element(){return s(this)}};c.style=":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:absolute;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 2px) * -1)}.ez-actions-button__arrow--small{margin-left:6px}.ez-actions-button__arrow--medium{margin-left:11px}.ez-actions-button__arrow--large{margin-left:13px}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";export{c as ez_actions_button}
|
|
@@ -4,6 +4,7 @@ export declare class EzActionsButton {
|
|
|
4
4
|
private _listContainer;
|
|
5
5
|
private _button;
|
|
6
6
|
private _floatingID;
|
|
7
|
+
private _arrowOffset;
|
|
7
8
|
private _element;
|
|
8
9
|
private _selectedAction;
|
|
9
10
|
/**
|
|
@@ -57,8 +58,12 @@ export declare class EzActionsButton {
|
|
|
57
58
|
isOpened(): Promise<boolean>;
|
|
58
59
|
innerClickCheck: (floatingContainer: HTMLElement, node: HTMLElement) => boolean;
|
|
59
60
|
private showActions;
|
|
61
|
+
private getPositionTop;
|
|
62
|
+
private getBoundingLeft;
|
|
63
|
+
private getPositionLeft;
|
|
60
64
|
private hasLabelOrCheckOption;
|
|
61
65
|
private hasIconName;
|
|
66
|
+
private controlScrollPage;
|
|
62
67
|
private handlerButtonClick;
|
|
63
68
|
private actionClick;
|
|
64
69
|
componentWillLoad(): void;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as o,H as n,g as s}from"./p-3c7ea91b.js";import{FloatingManager as a}from"@sankhyalabs/core";import"./p-0b44cf1c.js";import{C as e}from"./p-4a5e37a7.js";import"./p-e1148f5c.js";import"./p-b853763b.js";let c=class{constructor(o){t(this,o),this.ezAction=i(this,"ezAction",7),this.enabled=!0,this.size="medium",this.showLabel=!1,this.checkOption=!1,this.isTransparent=!1,this.arrowActive=!1,this.innerClickCheck=(t,i)=>{var o;if(i&&t){if(i===t)return!0;const n=t.children;for(let t=0;t<n.length;t++)if(null===(o=n[t].shadowRoot)||void 0===o?void 0:o.contains(i))return!0}return!1}}async hideActions(){null!=this._floatingID&&a.close(this._floatingID),this._floatingID=void 0}async isOpened(){return null!=this._floatingID}showActions(){var t,i;if(!this.enabled)return;const o=null===(t=this._element)||void 0===t?void 0:t.getBoundingClientRect();let n=o?o.x-(this.arrowActive?5:0)+"px":null,s={autoClose:!0,innerClickTest:this.innerClickCheck,isFixed:!0,left:n};this._floatingID=a.float(this._actionsList,this._listContainer,s);const e=document.body.clientWidth,c=null===(i=this._actionsList)||void 0===i?void 0:i.getBoundingClientRect();(null==c?void 0:c.right)>e&&(n=e-c.width+"px",s={autoClose:!0,innerClickTest:this.innerClickCheck,left:n},a.updateFloatPosition(this._actionsList,this._listContainer,s)),window.requestAnimationFrame((()=>{this._actionsList.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"})}))}hasLabelOrCheckOption(){var t;return(this.showLabel||this.checkOption)&&(null===(t=this.actions)||void 0===t?void 0:t.length)>0}hasIconName(){var t;return null===(t=this.actions)||void 0===t?void 0:t.some((t=>null!=t.iconName))}handlerButtonClick(){this.showActions()}actionClick(t){this._selectedAction=t,this.hideActions(),this.ezAction.emit(t)}componentWillLoad(){if(null==this.actions){this.actions=[];const t=this._element.querySelectorAll("action");t&&t.forEach((t=>{let i=t.innerText,o=t.getAttribute("value");o||(o=i),this.actions.push({label:i,value:o}),t.hidden=!0}))}}componentDidLoad(){e.applyVarsButton(this._element,this._button)}componentDidRender(){null==this._floatingID&&this._actionsList.remove(),this.hasLabelOrCheckOption()&&(this.value?this._selectedAction=this.actions.find((t=>t.value===this.value)):this._selectedAction||(this._selectedAction=this.actions[0]))}render(){var t;return o(n,null,o("ez-button",{ref:t=>this._button=t,class:(this.isTransparent?"ez-actions-button__btn-transparent":"")+(this.showLabel?" ez-actions-button__btn-label":""),label:this.showLabel&&(null===(t=this._selectedAction)||void 0===t?void 0:t.label),enabled:this.enabled,mode:this.showLabel?void 0:"icon",iconName:this.showLabel?"":this.displayIcon||"dots-vertical",size:this.size,onClick:()=>this.handlerButtonClick()},this.showLabel&&o("ez-icon",{class:"ez-actions-button__icon-right",slot:"rightIcon",iconName:this.displayIcon||"dots-vertical"})),o("section",{class:"ez-actions-button__list-container",ref:t=>this._listContainer=t},this.arrowActive&&o("div",{class:"ez-actions-button__arrow"+(this.isTransparent?" ez-actions-button__arrow--upped":"")}),o("div",{ref:t=>this._actionsList=t,class:"ez-actions-button__actions-list"+(this.arrowActive&&!this.isTransparent?" ez-actions-button__actions-list--lowered":"")},this.actions.map((t=>{var i;return o("ez-button",{size:"small",label:t.label,onClick:()=>this.actionClick(t),class:"ez-actions-button__btn-action"+(this.checkOption||this.hasIconName()?" ez-actions-button__btn-action--spaced":"")},this.checkOption&&(null===(i=this._selectedAction)||void 0===i?void 0:i.value)===t.value&&o("ez-icon",{class:"ez-actions-button__icon-check",slot:"leftIcon",size:"small",iconName:"check"}),!this.checkOption&&t.iconName&&o("ez-icon",{class:"ez-actions-button__icon-item",slot:"leftIcon",size:"small",iconName:t.iconName}))})))))}get _element(){return s(this)}};c.style=":host{--ez-actions-button__actions-list--border-radius:var(--border--radius-medium, 12px);--ez-actions-button__actions-list--box-shadow:var(--shadow, 0px 0px 16px 0px #000);--ez-actions-button__actions-list--background-color:var(--background--xlight, #fff);--ez-actions-button__actions-list--padding:var(--space--small, 6px);--ez-actions-button__actions-list--top-margin:var(--space-small, 6px);--ez-actions-button__btn-action--min-width:'auto';--ez-actions-button__btn-action--background-color:var(--background--xlight, #fff);display:flex;flex-direction:column;height:fit-content;user-select:none}.ez-actions-button__actions-list{display:flex;flex-direction:column;position:fixed;width:fit-content;height:fit-content;z-index:var(--more-visible, 2);padding:var(--ez-actions-button__actions-list--padding);margin-top:var(--ez-actions-button__actions-list--top-margin);background-color:var(--ez-actions-button__actions-list--background-color);border-radius:var(--ez-actions-button__actions-list--border-radius);box-shadow:var(--ez-actions-button__actions-list--box-shadow)}.ez-actions-button__actions-list--lowered{margin-top:calc(var(--ez-actions-button__actions-list--top-margin) + 6px)}.ez-actions-button__btn-action{--ez-button--justify-content:flex-start;--ez-button--width:100%;--ez-button--min-width:var(--ez-actions-button__btn-action--min-width);--ez-button--background-color:var(--ez-actions-button__btn-action--background-color);--ez-button--font-weight:var(--text-weight--medium, 400);--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__btn-action--spaced{--ez-button--padding-left:calc(var(--space--medium, 12px) + 24px)}.ez-actions-button__icon-right{margin-left:var(--space--small, 6px)}.ez-actions-button__icon-check,.ez-actions-button__icon-item{position:absolute;left:var(--space--medium, 12px)}.ez-actions-button__icon-check{color:var(--ez-button--hover-color)}.ez-actions-button__arrow{position:fixed;border-left:10px solid transparent;border-right:10px solid transparent;width:0;height:0;margin-left:6px;z-index:calc(var(--more-visible, 2) + 1);border-bottom:15px solid var(--ez-actions-button__btn-action--background-color)}.ez-actions-button__arrow--upped{margin-top:calc((var(--ez-actions-button__actions-list--top-margin) + 3px) * -1)}.ez-actions-button__arrow:only-child{display:none}.ez-actions-button__btn-transparent{--ez-button--background-color:transparent;--ez-button--hover--background-color:transparent;--ez-button--active--background-color:transparent;--ez-button--focus--border:none}.ez-actions-button__btn-label{--ez-button--padding-left:var(--space--medium, 12px);--ez-button--padding-right:var(--space--medium, 12px)}.ez-actions-button__list-container{position:relative}";export{c as ez_actions_button}
|