@sankhyalabs/ezui 1.1.57 → 1.1.61
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-action-chip.cjs.entry.js +2 -27
- package/dist/cjs/ez-button_16.cjs.entry.js +18 -7
- package/dist/cjs/ez-label-chip.cjs.entry.js +4 -31
- package/dist/cjs/ez-modal.cjs.entry.js +1 -1
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.css +2 -4
- package/dist/collection/components/ez-action-chip/ez-action-chip.js +3 -28
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.css +142 -0
- package/dist/collection/components/ez-collapsible-box/ez-collapsible-box.js +157 -0
- package/dist/collection/components/ez-form/subcomponents/structure/FieldSet.js +1 -1
- package/dist/collection/components/ez-label-chip/ez-label-chip.css +27 -8
- package/dist/collection/components/ez-label-chip/ez-label-chip.js +4 -31
- package/dist/collection/components/ez-modal/ez-modal.css +1 -0
- package/dist/collection/components/ez-text-input/ez-text-input.css +1 -1
- package/dist/custom-elements/index.d.ts +4 -4
- package/dist/custom-elements/index.js +27 -68
- package/dist/esm/ez-action-chip.entry.js +2 -27
- package/dist/esm/ez-button_16.entry.js +18 -7
- package/dist/esm/ez-label-chip.entry.js +4 -31
- package/dist/esm/ez-modal.entry.js +1 -1
- package/dist/esm/ezui.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/ezui/ezui.esm.js +1 -1
- package/dist/ezui/p-7998aed5.entry.js +1 -0
- package/dist/ezui/p-88b9c3d4.entry.js +1 -0
- package/dist/ezui/p-aa94210b.entry.js +1 -0
- package/dist/ezui/p-d185d7e8.entry.js +1 -0
- package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +0 -2
- package/dist/types/components/{ez-collapsable-box/ez-collapsable-box.d.ts → ez-collapsible-box/ez-collapsible-box.d.ts} +9 -1
- package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +0 -2
- package/dist/types/components.d.ts +25 -9
- package/package.json +1 -1
- package/react/components.d.ts +1 -1
- package/react/components.js +1 -1
- package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.css +0 -69
- package/dist/collection/components/ez-collapsable-box/ez-collapsable-box.js +0 -108
- package/dist/ezui/p-10fea2b4.entry.js +0 -1
- package/dist/ezui/p-26af789f.entry.js +0 -1
- package/dist/ezui/p-a508ff3f.entry.js +0 -1
- package/dist/ezui/p-a93e9b81.entry.js +0 -1
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { Component, h, Host, Prop, Event, Watch, Method } from '@stencil/core';
|
|
2
|
+
export class EzCollapsibleBox {
|
|
3
|
+
constructor() {
|
|
4
|
+
/**
|
|
5
|
+
* Valor externalizado que garante a exibição ou não do componente
|
|
6
|
+
*/
|
|
7
|
+
this.value = false;
|
|
8
|
+
/**
|
|
9
|
+
* Define o tamanho do texto e do ícone do componente.
|
|
10
|
+
*/
|
|
11
|
+
this.headersize = "small";
|
|
12
|
+
/**
|
|
13
|
+
* Define o local onde o ícone será renderizado.
|
|
14
|
+
*/
|
|
15
|
+
this.iconplacement = "left";
|
|
16
|
+
}
|
|
17
|
+
observeValue() {
|
|
18
|
+
this.ezChange.emit();
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Esconde ou revela o conteúdo do componente
|
|
22
|
+
*/
|
|
23
|
+
async showHide() {
|
|
24
|
+
this.value = !this.value;
|
|
25
|
+
}
|
|
26
|
+
render() {
|
|
27
|
+
return (h(Host, null,
|
|
28
|
+
this.iconplacement == 'right' ?
|
|
29
|
+
h("div", { class: "collapsible-box__title" },
|
|
30
|
+
h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label),
|
|
31
|
+
h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }))
|
|
32
|
+
:
|
|
33
|
+
h("div", { class: "collapsible-box__title" },
|
|
34
|
+
h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }),
|
|
35
|
+
h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label)),
|
|
36
|
+
!this.value ? h("slot", null) : null));
|
|
37
|
+
}
|
|
38
|
+
static get is() { return "ez-collapsible-box"; }
|
|
39
|
+
static get encapsulation() { return "shadow"; }
|
|
40
|
+
static get originalStyleUrls() { return {
|
|
41
|
+
"$": ["ez-collapsible-box.css"]
|
|
42
|
+
}; }
|
|
43
|
+
static get styleUrls() { return {
|
|
44
|
+
"$": ["ez-collapsible-box.css"]
|
|
45
|
+
}; }
|
|
46
|
+
static get properties() { return {
|
|
47
|
+
"value": {
|
|
48
|
+
"type": "boolean",
|
|
49
|
+
"mutable": true,
|
|
50
|
+
"complexType": {
|
|
51
|
+
"original": "boolean",
|
|
52
|
+
"resolved": "boolean",
|
|
53
|
+
"references": {}
|
|
54
|
+
},
|
|
55
|
+
"required": false,
|
|
56
|
+
"optional": false,
|
|
57
|
+
"docs": {
|
|
58
|
+
"tags": [],
|
|
59
|
+
"text": "Valor externalizado que garante a exibi\u00E7\u00E3o ou n\u00E3o do componente"
|
|
60
|
+
},
|
|
61
|
+
"attribute": "value",
|
|
62
|
+
"reflect": true,
|
|
63
|
+
"defaultValue": "false"
|
|
64
|
+
},
|
|
65
|
+
"label": {
|
|
66
|
+
"type": "string",
|
|
67
|
+
"mutable": false,
|
|
68
|
+
"complexType": {
|
|
69
|
+
"original": "string",
|
|
70
|
+
"resolved": "string",
|
|
71
|
+
"references": {}
|
|
72
|
+
},
|
|
73
|
+
"required": false,
|
|
74
|
+
"optional": false,
|
|
75
|
+
"docs": {
|
|
76
|
+
"tags": [],
|
|
77
|
+
"text": "Label \u00E9 o t\u00EDtulo do campo"
|
|
78
|
+
},
|
|
79
|
+
"attribute": "label",
|
|
80
|
+
"reflect": true
|
|
81
|
+
},
|
|
82
|
+
"headersize": {
|
|
83
|
+
"type": "string",
|
|
84
|
+
"mutable": false,
|
|
85
|
+
"complexType": {
|
|
86
|
+
"original": "string",
|
|
87
|
+
"resolved": "string",
|
|
88
|
+
"references": {}
|
|
89
|
+
},
|
|
90
|
+
"required": false,
|
|
91
|
+
"optional": false,
|
|
92
|
+
"docs": {
|
|
93
|
+
"tags": [],
|
|
94
|
+
"text": "Define o tamanho do texto e do \u00EDcone do componente."
|
|
95
|
+
},
|
|
96
|
+
"attribute": "headersize",
|
|
97
|
+
"reflect": true,
|
|
98
|
+
"defaultValue": "\"small\""
|
|
99
|
+
},
|
|
100
|
+
"iconplacement": {
|
|
101
|
+
"type": "string",
|
|
102
|
+
"mutable": false,
|
|
103
|
+
"complexType": {
|
|
104
|
+
"original": "string",
|
|
105
|
+
"resolved": "string",
|
|
106
|
+
"references": {}
|
|
107
|
+
},
|
|
108
|
+
"required": false,
|
|
109
|
+
"optional": false,
|
|
110
|
+
"docs": {
|
|
111
|
+
"tags": [],
|
|
112
|
+
"text": "Define o local onde o \u00EDcone ser\u00E1 renderizado."
|
|
113
|
+
},
|
|
114
|
+
"attribute": "iconplacement",
|
|
115
|
+
"reflect": true,
|
|
116
|
+
"defaultValue": "\"left\""
|
|
117
|
+
}
|
|
118
|
+
}; }
|
|
119
|
+
static get events() { return [{
|
|
120
|
+
"method": "ezChange",
|
|
121
|
+
"name": "ezChange",
|
|
122
|
+
"bubbles": true,
|
|
123
|
+
"cancelable": true,
|
|
124
|
+
"composed": true,
|
|
125
|
+
"docs": {
|
|
126
|
+
"tags": [],
|
|
127
|
+
"text": ""
|
|
128
|
+
},
|
|
129
|
+
"complexType": {
|
|
130
|
+
"original": "string",
|
|
131
|
+
"resolved": "string",
|
|
132
|
+
"references": {}
|
|
133
|
+
}
|
|
134
|
+
}]; }
|
|
135
|
+
static get methods() { return {
|
|
136
|
+
"showHide": {
|
|
137
|
+
"complexType": {
|
|
138
|
+
"signature": "() => Promise<void>",
|
|
139
|
+
"parameters": [],
|
|
140
|
+
"references": {
|
|
141
|
+
"Promise": {
|
|
142
|
+
"location": "global"
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"return": "Promise<void>"
|
|
146
|
+
},
|
|
147
|
+
"docs": {
|
|
148
|
+
"text": "Esconde ou revela o conte\u00FAdo do componente",
|
|
149
|
+
"tags": []
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}; }
|
|
153
|
+
static get watchers() { return [{
|
|
154
|
+
"propName": "value",
|
|
155
|
+
"methodName": "observeValue"
|
|
156
|
+
}]; }
|
|
157
|
+
}
|
|
@@ -21,7 +21,7 @@ export const FieldSet = ({ store, formName, source, dataUnit, enabled }) => {
|
|
|
21
21
|
return h("div", { class: "col col--sd-12 padding--small" },
|
|
22
22
|
h("div", { class: "row margin-top--large" },
|
|
23
23
|
h("div", { class: "col col--sd-12 align--middle padding-horizontal--medium" },
|
|
24
|
-
h("ez-
|
|
24
|
+
h("ez-collapsible-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(collapseExpandGroup(fieldSetName, !isCollapsed)) }),
|
|
25
25
|
isCollapsed ? null :
|
|
26
26
|
h("div", { class: "col col--sd-12" }, fields.map(field => h(Field, { enabled: enabled, field: field, dataUnit: dataUnit, forceScroll: fieldToScroll === field.name }))))));
|
|
27
27
|
};
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
--lc__message_box--font-size: var(--text--small, 12px);
|
|
25
25
|
--lc__message_box--info--color: var(--color--success, #22085d);
|
|
26
26
|
--lc__message_box--error--color: var(--color--error, #FF0000);
|
|
27
|
+
--lc--close__image: url('data:image/svg+xml;utf8,<svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg"><path d="M 4.7098145,3.9968334 7.8535703,0.85318776 C 7.9473034,0.75946455 8,0.63233985 8,0.49978585 8,0.36723841 7.947304,0.24011361 7.8535703,0.14638378 7.7598354,0.05266059 7.6327257,6.48e-8 7.500152,6.48e-8 7.3676457,6.48e-8 7.2404691,0.0526608 7.1467354,0.14638378 L 4.00298,3.2900293 0.8591984,0.14638378 C 0.76546463,0.05266059 0.63834103,6.48e-8 0.50578123,6.48e-8 0.3732281,6.48e-8 0.24609783,0.05266059 0.15236397,0.14638378 0.05863012,0.24011361 0.00597395,0.36723841 0.00597395,0.49978585 c 0,0.132554 0.05265617,0.2596787 0.14639002,0.35340191 L 3.2961455,3.9968334 0.15236397,7.1411589 C 0.10466427,7.1872561 0.06663114,7.2424161 0.04046961,7.303371 0.01431473,7.3643212 5.6180845e-4,7.429943 1.6859246e-5,7.4962264 -5.2808998e-4,7.5625744 0.01214297,7.6283944 0.03729854,7.6897476 c 0.02514888,0.061416 0.06227604,0.1171794 0.1092096,0.1640783 0.0469402,0.046903 0.10274083,0.083936 0.16415749,0.1090508 0.0614166,0.025114 0.12721688,0.037703 0.19355667,0.037103 0.06634,-5.714e-4 0.13190027,-0.014457 0.19284393,-0.04064 0.0609507,-0.026246 0.11606474,-0.064351 0.16213217,-0.1120492 L 4.00298,4.7036374 7.1467354,7.8472967 c 0.093734,0.09373 0.2209103,0.1463572 0.3534166,0.1463572 0.1325737,0 0.2596834,-0.052623 0.3534183,-0.1463572 C 7.9473034,7.753567 8,7.6264624 8,7.493895 8,7.3613281 7.9473086,7.2342224 7.8535703,7.1404927 Z"/></svg>');
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.padding-right--small {
|
|
@@ -34,6 +35,26 @@
|
|
|
34
35
|
padding-left: var(--lc--space--medium);
|
|
35
36
|
}
|
|
36
37
|
|
|
38
|
+
.btn-close {
|
|
39
|
+
align-items: flex-start;
|
|
40
|
+
display: flex;
|
|
41
|
+
outline: none;
|
|
42
|
+
border: none;
|
|
43
|
+
padding: 0px 0px 0px 6px;
|
|
44
|
+
background-color: unset;
|
|
45
|
+
cursor: pointer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.btn-close::after {
|
|
49
|
+
content: '';
|
|
50
|
+
display: flex;
|
|
51
|
+
background-color: var(--lc__label--color-primary);
|
|
52
|
+
width: 8px;
|
|
53
|
+
height: 8px;
|
|
54
|
+
-webkit-mask-image: var(--lc--close__image);
|
|
55
|
+
mask-image: var(--lc--close__image);
|
|
56
|
+
}
|
|
57
|
+
|
|
37
58
|
.label__container {
|
|
38
59
|
/*private*/
|
|
39
60
|
width: fit-content;
|
|
@@ -48,8 +69,8 @@
|
|
|
48
69
|
border: var(--lc__border);
|
|
49
70
|
border-radius: var(--lc--border-radius);
|
|
50
71
|
border-color: var( --lc__border-color-strokes);
|
|
51
|
-
padding-right: var(--space--
|
|
52
|
-
padding-left: var(--space--
|
|
72
|
+
padding-right: var(--space--medium, 12px);
|
|
73
|
+
padding-left: var(--space--medium, 12px);
|
|
53
74
|
}
|
|
54
75
|
|
|
55
76
|
.label__container:hover {
|
|
@@ -67,8 +88,8 @@
|
|
|
67
88
|
align-self: center;
|
|
68
89
|
border: var(--lc__border);
|
|
69
90
|
border-radius: var(--lc--border-radius);
|
|
70
|
-
padding-right: var(--space--
|
|
71
|
-
padding-left: var(--space--
|
|
91
|
+
padding-right: var(--space--medium, 12px);
|
|
92
|
+
padding-left: var(--space--medium, 12px);
|
|
72
93
|
fill: var(--lc__label--color-primary);
|
|
73
94
|
color: var(--lc__label--color-primary);
|
|
74
95
|
border-color: var(--lc__label--background-color);
|
|
@@ -86,8 +107,8 @@
|
|
|
86
107
|
border: var(--lc__border);
|
|
87
108
|
border-color: var(--lc__label-color--disable-secondary);
|
|
88
109
|
border-radius: var(--lc--border-radius);
|
|
89
|
-
padding-right: var(--space--
|
|
90
|
-
padding-left: var(--space--
|
|
110
|
+
padding-right: var(--space--medium, 12px);
|
|
111
|
+
padding-left: var(--space--medium, 12px);
|
|
91
112
|
fill: var(--lc__label--text--disabled);
|
|
92
113
|
color: var(--lc__label--text--disabled);
|
|
93
114
|
background-color: var(--lc__label-color--disable-secondary);
|
|
@@ -97,8 +118,6 @@ label {
|
|
|
97
118
|
/*private*/
|
|
98
119
|
display: flex;
|
|
99
120
|
align-items: center;
|
|
100
|
-
width: calc(100% - var(--lc__icon--width));
|
|
101
|
-
width: fit-content;
|
|
102
121
|
font-weight: var(--text-weight--large, 600);
|
|
103
122
|
cursor: pointer;
|
|
104
123
|
/*public*/
|
|
@@ -56,33 +56,6 @@ export class EzLabelChip {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
handleSlotChange(ev) {
|
|
60
|
-
const slot = ev.target;
|
|
61
|
-
const content = slot.assignedElements()[0];
|
|
62
|
-
if (content) {
|
|
63
|
-
content.style.position = "absolute";
|
|
64
|
-
content.style.display = "flex";
|
|
65
|
-
content.style.alignItems = "center";
|
|
66
|
-
content.style.justifyContent = "center";
|
|
67
|
-
content.style.overflow = "hidden";
|
|
68
|
-
content.style.top = "0px";
|
|
69
|
-
content.style.width = "var(--lc__icon--width)";
|
|
70
|
-
content.style.height = "var(--lc--height)";
|
|
71
|
-
if (slot.name == "leftIcon") {
|
|
72
|
-
content.style.left = "0px";
|
|
73
|
-
this._labelElem.classList.add('padding-left--small');
|
|
74
|
-
}
|
|
75
|
-
else if (slot.name == "rightIcon") {
|
|
76
|
-
content.style.right = "0px";
|
|
77
|
-
if (this.removable) {
|
|
78
|
-
this._iconElement.classList.add('padding-right--small');
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
this._labelElem.classList.add('padding-right--small');
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
59
|
//---------------------------------------------
|
|
87
60
|
// Lifecycle web component
|
|
88
61
|
//---------------------------------------------
|
|
@@ -108,12 +81,12 @@ export class EzLabelChip {
|
|
|
108
81
|
}
|
|
109
82
|
render() {
|
|
110
83
|
return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el },
|
|
111
|
-
h("slot", { name: "leftIcon"
|
|
112
|
-
h("label", {
|
|
84
|
+
h("slot", { name: "leftIcon" }),
|
|
85
|
+
h("label", { ref: (el) => this._labelElem = el }, this.label),
|
|
113
86
|
this.removable ?
|
|
114
|
-
h("
|
|
87
|
+
h("button", { class: "btn-close", onClick: () => { this.removeChip.emit(); } })
|
|
115
88
|
: null,
|
|
116
|
-
h("slot", { name: "rightIcon"
|
|
89
|
+
h("slot", { name: "rightIcon" })));
|
|
117
90
|
}
|
|
118
91
|
static get is() { return "ez-label-chip"; }
|
|
119
92
|
static get encapsulation() { return "shadow"; }
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
--it__input--border: var(--border--medium, 2px solid);
|
|
17
17
|
--it__input--border-color: var(--it__input--background-color);
|
|
18
18
|
/*no modo normal usamos a borda com a mesma cor do bg*/
|
|
19
|
-
--it__input--focus--border-color: var(--color--
|
|
19
|
+
--it__input--focus--border-color: var(--color--alert-cold-800, #042EFF);
|
|
20
20
|
--it__input--disabled--background-color: var(--color--disable-secondary, #F2F5F8);
|
|
21
21
|
--it__input--disabled--color: var(--text--disable, #AFB6C0);
|
|
22
22
|
--it__input--error--border-color: #CC2936;
|
|
@@ -26,10 +26,10 @@ export const EzCheck: {
|
|
|
26
26
|
new (): EzCheck;
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
interface
|
|
30
|
-
export const
|
|
31
|
-
prototype:
|
|
32
|
-
new ():
|
|
29
|
+
interface EzCollapsibleBox extends Components.EzCollapsibleBox, HTMLElement {}
|
|
30
|
+
export const EzCollapsibleBox: {
|
|
31
|
+
prototype: EzCollapsibleBox;
|
|
32
|
+
new (): EzCollapsibleBox;
|
|
33
33
|
};
|
|
34
34
|
|
|
35
35
|
interface EzComboBox extends Components.EzComboBox, HTMLElement {}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createEvent, h, forceUpdate, Host, proxyCustomElement } from '@stencil/core/internal/client';
|
|
2
2
|
export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
|
|
3
3
|
|
|
4
|
-
const ezActionChipCss = ":host{--ac--height:36px;--ac--width:100%;--ac__icon--width:48px;--ac--border-radius:var(--border--radius-large, 24px);--ac--font-size:var(--text--medium, 14px);--ac--font-family:var(--font-pattern, Arial);--ac--font-weight:var(--text-weight--large, 500);--ac--space--medium:var(--space--medium, 6px);--ac__border:1px solid;--ac__border-color-strokes:var(--color--strokes, #DCE0E8);--ac__label--title--primary:var(--title--primary, #919191);--ac__label--color-primary:var(--color--primary, #008561);--ac__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ac__label--background-color:#0085610F;--ac__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ac__label__default--border-color--hover:var(--color--primary-600, #007a5a);--ac__label--text--disabled:var(--text--disable, #AFB6C0);--ac__label--text--primary:var(--text--primary, #626e82);--ac__message_box--font-size:var(--text--small, 12px);--ac__message_box--info--color:var(--color--success, #22085d);--ac__message_box--error--color:var(--color--error, #FF0000)}.padding-right--small{padding-right:var(--ac--space--medium)}.padding-left--small{padding-left:var(--ac--space--medium)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;color:var(--ac__label--title--primary);fill:var(--ac__label--title--primary);border:var(--ac__border);border-radius:var(--ac--border-radius);border-color:var( --ac__border-color-strokes);padding-right:var(--space--
|
|
4
|
+
const ezActionChipCss = ":host{--ac--height:36px;--ac--width:100%;--ac__icon--width:48px;--ac--border-radius:var(--border--radius-large, 24px);--ac--font-size:var(--text--medium, 14px);--ac--font-family:var(--font-pattern, Arial);--ac--font-weight:var(--text-weight--large, 500);--ac--space--medium:var(--space--medium, 6px);--ac__border:1px solid;--ac__border-color-strokes:var(--color--strokes, #DCE0E8);--ac__label--title--primary:var(--title--primary, #919191);--ac__label--color-primary:var(--color--primary, #008561);--ac__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ac__label--background-color:#0085610F;--ac__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ac__label__default--border-color--hover:var(--color--primary-600, #007a5a);--ac__label--text--disabled:var(--text--disable, #AFB6C0);--ac__label--text--primary:var(--text--primary, #626e82);--ac__message_box--font-size:var(--text--small, 12px);--ac__message_box--info--color:var(--color--success, #22085d);--ac__message_box--error--color:var(--color--error, #FF0000)}.padding-right--small{padding-right:var(--ac--space--medium)}.padding-left--small{padding-left:var(--ac--space--medium)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;color:var(--ac__label--title--primary);fill:var(--ac__label--title--primary);border:var(--ac__border);border-radius:var(--ac--border-radius);border-color:var( --ac__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px);cursor:pointer}.label__container:hover{border-color:var(--ac__label__default--border-color--hover);background-color:var(--ac__label__default--background-color--hover)}.label__container--active:hover{border-color:var(--ac__label__active--background-color--hover);background-color:var(--ac__label__active--background-color--hover)}label{display:flex;align-items:center;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--ac--height);font-family:var(--ac--font-family);font-size:var(--ac--font-size)}";
|
|
5
5
|
|
|
6
6
|
let EzLabelChip$2 = class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -15,35 +15,10 @@ let EzLabelChip$2 = class extends HTMLElement {
|
|
|
15
15
|
this.enabled = true;
|
|
16
16
|
}
|
|
17
17
|
//---------------------------------------------
|
|
18
|
-
// Event handlers
|
|
19
|
-
//---------------------------------------------
|
|
20
|
-
handleSlotChange(ev) {
|
|
21
|
-
const slot = ev.target;
|
|
22
|
-
const content = slot.assignedElements()[0];
|
|
23
|
-
if (content) {
|
|
24
|
-
content.style.position = "absolute";
|
|
25
|
-
content.style.display = "flex";
|
|
26
|
-
content.style.alignItems = "center";
|
|
27
|
-
content.style.justifyContent = "center";
|
|
28
|
-
content.style.overflow = "hidden";
|
|
29
|
-
content.style.top = "0px";
|
|
30
|
-
content.style.width = "var(--ac__icon--width)";
|
|
31
|
-
content.style.height = "var(--ac--height)";
|
|
32
|
-
if (slot.name == "leftIcon") {
|
|
33
|
-
content.style.left = "0px";
|
|
34
|
-
this._labelElem.classList.add('padding-left--small');
|
|
35
|
-
}
|
|
36
|
-
else if (slot.name == "rightIcon") {
|
|
37
|
-
content.style.right = "0px";
|
|
38
|
-
this._labelElem.classList.add('padding-right--small');
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
//---------------------------------------------
|
|
43
18
|
// Lifecycle web component
|
|
44
19
|
//---------------------------------------------
|
|
45
20
|
render() {
|
|
46
|
-
return (h("div", { onClick: () => this.actionClick.emit(), class: "label__container" }, h("slot", { name: "leftIcon"
|
|
21
|
+
return (h("div", { onClick: () => this.actionClick.emit(), class: "label__container" }, h("slot", { name: "leftIcon" }), h("label", null, this.label), h("slot", { name: "rightIcon" })));
|
|
47
22
|
}
|
|
48
23
|
static get style() { return ezActionChipCss; }
|
|
49
24
|
};
|
|
@@ -968,9 +943,9 @@ let EzCheck$1 = class extends HTMLElement {
|
|
|
968
943
|
static get style() { return ezCheckCss; }
|
|
969
944
|
};
|
|
970
945
|
|
|
971
|
-
const
|
|
946
|
+
const ezCollapsibleBoxCss = ":host{--collapsible-box--height:42px;--collapsible-box--font-size:var(--title--medium, 14px);--collapsible-box--font-family:var(--font-pattern, Arial);--collapsible-box--font-weight:var(--text-weight--large, 600);--collapsible-box--color:var(--title--primary);--collapsible-box__btn--image--xsmall:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"12px\" width=\"7.5px\"><path d=\"M 0,10.56 4.5967752,6.0000006 0,1.3800006 1.4516132,0 7.5,6.0000006 1.4516132,12 Z\"/></svg>');--collapsible-box__btn--image--small:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"14px\" width=\"8.68px\"><path d=\"M 0,12.32 5.3200012,7.0000007 0,1.6100007 1.6800004,0 8.68,7.0000007 1.6800004,14 Z\"/></svg>');--collapsible-box__btn--image--medium:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"10px\"><path d=\"M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z\"/></svg>');--collapsible-box__btn--image--large:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"18px\" width=\"11.25px\"><path d=\"M 0,15.84 6.8951628,9.0000009 0,2.0700009 2.1774198,0 11.25,9.0000009 2.1774198,18 Z\"/></svg>');--collapsible-box__btn--image--xlarge:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"20px\" width=\"12.5px\"><path d=\"M 0,17.6 7.661292,10.000001 0,2.300001 2.4193553,0 12.5,10.000001 2.4193553,20 Z\"/></svg>');--collapsible-box__btn--fill:var(--collapsible-box--color);--collapsible-box__btn--width:10px;--collapsible-box__btn--height:16px;display:flex;flex-wrap:wrap;width:100%}.collapsible-box__title{width:100%;align-self:center;display:flex;box-sizing:border-box}.collapsible-box__label{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;width:100%;font-family:var(--collapsible-box--font-family);font-size:var(--collapsible-box--font-size);font-weight:var(--collapsible-box--font-weight);color:var(--collapsible-box--color)}.collapsible-box__label--icon-right{white-space:nowrap;overflow:hidden;cursor:pointer;text-overflow:ellipsis;font-family:var(--collapsible-box--font-family);font-size:var(--collapsible-box--font-size);font-weight:var(--collapsible-box--font-weight);color:var(--collapsible-box--color)}.collapsible-box__btn{outline:none;border:none;background-color:unset;cursor:pointer;padding:1px 6px}.collapsible-box__btn::after{content:'';display:flex;background-color:var(--collapsible-box__btn--fill);width:var(--collapsible-box__btn--width);height:var(--collapsible-box__btn--height);transition:transform var(--transition);transform:rotate(90deg)}.collapsible-box__btn--xsmall::after{width:7.5px;height:12px;-webkit-mask-image:var(--collapsible-box__btn--image--xsmall);mask-image:var(--collapsible-box__btn--image--xsmall)}.collapsible-box__btn--small::after{width:8.68px;height:14px;-webkit-mask-image:var(--collapsible-box__btn--image--small);mask-image:var(--collapsible-box__btn--image--small)}.collapsible-box__btn--medium::after{width:10px;height:16px;-webkit-mask-image:var(--collapsible-box__btn--image--medium);mask-image:var(--collapsible-box__btn--image--medium)}.collapsible-box__btn--large::after{width:11.25px;height:18px;-webkit-mask-image:var(--collapsible-box__btn--image--large);mask-image:var(--collapsible-box__btn--image--large)}.collapsible-box__btn--xlarge::after{width:12.5px;height:20px;-webkit-mask-image:var(--collapsible-box__btn--image--xlarge);mask-image:var(--collapsible-box__btn--image--xlarge)}.collapsible-box__btn--collapsed::after{transform:rotate(0deg)}.font--xsmall{font-size:10px}.font--small{font-size:12px}.font--medium{font-size:14px}.font--large{font-size:16px}.font--xlarge{font-size:20px}";
|
|
972
947
|
|
|
973
|
-
let
|
|
948
|
+
let EzCollapsibleBox$1 = class extends HTMLElement {
|
|
974
949
|
constructor() {
|
|
975
950
|
super();
|
|
976
951
|
this.__registerHost();
|
|
@@ -980,6 +955,14 @@ let EzCollapsableBox$1 = class extends HTMLElement {
|
|
|
980
955
|
* Valor externalizado que garante a exibição ou não do componente
|
|
981
956
|
*/
|
|
982
957
|
this.value = false;
|
|
958
|
+
/**
|
|
959
|
+
* Define o tamanho do texto e do ícone do componente.
|
|
960
|
+
*/
|
|
961
|
+
this.headersize = "small";
|
|
962
|
+
/**
|
|
963
|
+
* Define o local onde o ícone será renderizado.
|
|
964
|
+
*/
|
|
965
|
+
this.iconplacement = "left";
|
|
983
966
|
}
|
|
984
967
|
observeValue() {
|
|
985
968
|
this.ezChange.emit();
|
|
@@ -991,12 +974,15 @@ let EzCollapsableBox$1 = class extends HTMLElement {
|
|
|
991
974
|
this.value = !this.value;
|
|
992
975
|
}
|
|
993
976
|
render() {
|
|
994
|
-
return (h(Host, null,
|
|
977
|
+
return (h(Host, null, this.iconplacement == 'right' ?
|
|
978
|
+
h("div", { class: "collapsible-box__title" }, h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label), h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }))
|
|
979
|
+
:
|
|
980
|
+
h("div", { class: "collapsible-box__title" }, h("button", { class: this.value ? "collapsible-box__btn collapsible-box__btn--collapsed " + "collapsible-box__btn--" + this.headersize : "collapsible-box__btn " + "collapsible-box__btn--" + this.headersize, onClick: () => this.showHide() }), h("label", { class: (this.iconplacement == 'right' ? "collapsible-box__label--icon-right " : "collapsible-box__label ") + (this.headersize ? "font--" + this.headersize : ""), onClick: () => this.showHide(), title: this.label }, this.label)), !this.value ? h("slot", null) : null));
|
|
995
981
|
}
|
|
996
982
|
static get watchers() { return {
|
|
997
983
|
"value": ["observeValue"]
|
|
998
984
|
}; }
|
|
999
|
-
static get style() { return
|
|
985
|
+
static get style() { return ezCollapsibleBoxCss; }
|
|
1000
986
|
};
|
|
1001
987
|
|
|
1002
988
|
const ezComboBoxCss = ":host{--cx--height:42px;--cx--width:100%;--cx__icon--width:48px;--cx--border-radius:var(--border--radius-medium, 12px);--cx--border-radius-small:var(--border--radius-small, 6px);--cx--font-size:var(--text--medium, 14px);--cx--font-family:var(--font-pattern, Arial);--cx--font-weight--large:var(--text-weight--large, 500);--cx--font-weight--medium:var(--text-weight--medium, 400);--cx--space--medium:var(--space--medium, 12px);--cx--space--small:var(--space--small, 6px);--cx--shadow:var(--shadow, 0px 0px 16px 0px rgba(0, 38, 111, .12));--cx--background-color--xlight:var(--background--xlight,#fff);--cx__input--background-color:var(--background--medium, #e0e0e0);--cx__input--border:var(--border--medium, 2px solid);--cx__input--border-color:var(--cx__input--background-color);--cx__input--focus--border-color:var(--color--primary, #008561);--cx__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--cx__input--disabled--color:var(--text--disable, #AFB6C0);--cx__input--error--border-color:#CC2936;--cx__label--color:var(--title--primary, #919191);--cx__message_box--font-size:var(--text--small, 12px);--cx__message_box--info--color:var(--color--success, #22085d);--cx__message_box--error--color:var(--color--error, #FF0000);--cx__list-text--primary:var(--text--primary,#626e82);--cx__list-text--secondary:var(--text--secondary,#a2abb9);--cx__list-height:calc(var(--cx--font-size) + var(--cx--space--medium));--cx--drop-down__image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"16px\" width=\"16px\"><path d=\"M 1.8585859,3.0707069 7.9999998,9.2121212 14.141414,3.0707069 16,5.0101006 7.9999998,12.929293 0,4.9292932 Z\"/></svg>');--cx--search__image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" height=\"22px\" width=\"22px\"><path d=\"m 9.4,2.3 c 4.1,0 7.4,3.2 7.4,7.2 0,1.8 -0.7,3.4 -1.8,4.7 l 0.3,0.3 h 0.9 l 5.7,5.6 -1.7,1.7 -5.7,-5.6 V 15.3 L 14.3,15 C 13,16.1 11.3,16.7 9.5,16.7 5.3,16.7 2,13.5 2,9.5 2,5.5 5.3,2.3 9.4,2.3 m 0,2.2 c -2.9,0 -5.1,2.2 -5.1,5 0,2.8 2.3,5 5.1,5 2.8,0 5.1,-2.2 5.1,-5 0,-2.8 -2.2,-5 -5.1,-5 z\"/></svg>');display:flex;flex-wrap:wrap;position:relative;width:var(--cx--width)}ez-text-input{--it__input--background-color:var(--cx__input--background-color, #FFFFFF);--it__input--border-color:var(--cx__input--border-color, #DCE0E8)}.list-container{position:relative;width:100%}.options-list{box-sizing:border-box;width:100%;z-index:var(--more-visible, 2);display:flex;flex-direction:column;background-color:var(--cx--background-color--xlight);padding:var(--cx--space--small);border-radius:var(--cx--border-radius);box-shadow:var(--shadow, 0px 0px 16px 0px #000);scroll-behavior:smooth;max-height:calc(4*var(--cx__list-height) + 2*var(--cx--space--small));overflow:auto}.item{text-align:left;display:flex;justify-content:space-between;align-items:center;border-radius:var(--cx--border-radius-small);padding:0 var(--cx--space--small);list-style-type:none;min-height:var(--cx__list-height)}.item--label{text-align:left;flex-basis:85%;flex-grow:1;color:var(--cx__list-text--primary);font-weight:var(--cx--font-weight--large);font-family:var(--cx--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item--value{text-align:right;flex-basis:15%;flex-grow:0;color:var(--cx__list-text--primary);font-weight:var(--cx--font-weight--large);font-family:var(--cx--font-family);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}li:hover{background-color:var(--background--medium)}.preselected{background-color:var(--background--medium)}.btn-open-options{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-options:disabled{cursor:unset}.btn-open-options::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:16px;height:16px;-webkit-mask-image:var(--cx--drop-down__image);mask-image:var(--cx--drop-down__image)}.btn-open-options:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-options:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}.btn-open-search{outline:none;border:none;background-color:unset;cursor:pointer}.btn-open-search:disabled{cursor:unset}.btn-open-search::after{content:'';display:flex;background-color:var(--text--primary, #008561);width:22px;height:22px;-webkit-mask-image:var(--cx--search__image);mask-image:var(--cx--search__image)}.btn-open-search:disabled:after{background-color:var(--text--disable, #AFB6C0)}.btn-open-search:enabled:hover::after{background-color:var(--color--primary, #4e4e4e)}";
|
|
@@ -3439,7 +3425,7 @@ const FieldSet = ({ store, formName, source, dataUnit, enabled }) => {
|
|
|
3439
3425
|
return h("div", { class: "col col--sd-12 padding--small" },
|
|
3440
3426
|
h("div", { class: "row margin-top--large" },
|
|
3441
3427
|
h("div", { class: "col col--sd-12 align--middle padding-horizontal--medium" },
|
|
3442
|
-
h("ez-
|
|
3428
|
+
h("ez-collapsible-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(collapseExpandGroup(fieldSetName, !isCollapsed)) }),
|
|
3443
3429
|
isCollapsed ? null :
|
|
3444
3430
|
h("div", { class: "col col--sd-12" }, fields.map(field => h(Field, { enabled: enabled, field: field, dataUnit: dataUnit, forceScroll: fieldToScroll === field.name }))))));
|
|
3445
3431
|
};
|
|
@@ -3756,7 +3742,7 @@ let EzIcon$1 = class extends HTMLElement {
|
|
|
3756
3742
|
static get style() { return ezIconCss; }
|
|
3757
3743
|
};
|
|
3758
3744
|
|
|
3759
|
-
const ezLabelChipCss = ":host{--lc--height:36px;--lc--width:100%;--lc__icon--width:48px;--lc--border-radius:var(--border--radius-large, 24px);--lc--font-size:var(--text--medium, 14px);--lc--font-family:var(--font-pattern, Arial);--lc--font-weight:var(--text-weight--large, 500);--lc--space--medium:var(--space--medium, 6px);--lc__border:1px solid;--lc__border-color-strokes:var(--color--strokes, #DCE0E8);--lc__label--title--primary:var(--title--primary, #919191);--lc__label--color-primary:var(--color--primary, #008561);--lc__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--lc__label--background-color:#0085610F;--lc__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--lc__label__default--border-color--hover:var(--color--primary-600, #007a5a);--lc__label--text--disabled:var(--text--disable, #AFB6C0);--lc__label--text--primary:var(--text--primary, #626e82);--lc__message_box--font-size:var(--text--small, 12px);--lc__message_box--info--color:var(--color--success, #22085d);--lc__message_box--error--color:var(--color--error, #FF0000)}.padding-right--small{padding-right:var(--lc--space--medium)}.padding-left--small{padding-left:var(--lc--space--medium)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;background-color:#FFFFFF;align-self:center;color:var(--lc__label--title--primary);fill:var(--lc__label--title--primary);border:var(--lc__border);border-radius:var(--lc--border-radius);border-color:var( --lc__border-color-strokes);padding-right:var(--space--
|
|
3745
|
+
const ezLabelChipCss = ":host{--lc--height:36px;--lc--width:100%;--lc__icon--width:48px;--lc--border-radius:var(--border--radius-large, 24px);--lc--font-size:var(--text--medium, 14px);--lc--font-family:var(--font-pattern, Arial);--lc--font-weight:var(--text-weight--large, 500);--lc--space--medium:var(--space--medium, 6px);--lc__border:1px solid;--lc__border-color-strokes:var(--color--strokes, #DCE0E8);--lc__label--title--primary:var(--title--primary, #919191);--lc__label--color-primary:var(--color--primary, #008561);--lc__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--lc__label--background-color:#0085610F;--lc__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--lc__label__default--border-color--hover:var(--color--primary-600, #007a5a);--lc__label--text--disabled:var(--text--disable, #AFB6C0);--lc__label--text--primary:var(--text--primary, #626e82);--lc__message_box--font-size:var(--text--small, 12px);--lc__message_box--info--color:var(--color--success, #22085d);--lc__message_box--error--color:var(--color--error, #FF0000);--lc--close__image:url('data:image/svg+xml;utf8,<svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M 4.7098145,3.9968334 7.8535703,0.85318776 C 7.9473034,0.75946455 8,0.63233985 8,0.49978585 8,0.36723841 7.947304,0.24011361 7.8535703,0.14638378 7.7598354,0.05266059 7.6327257,6.48e-8 7.500152,6.48e-8 7.3676457,6.48e-8 7.2404691,0.0526608 7.1467354,0.14638378 L 4.00298,3.2900293 0.8591984,0.14638378 C 0.76546463,0.05266059 0.63834103,6.48e-8 0.50578123,6.48e-8 0.3732281,6.48e-8 0.24609783,0.05266059 0.15236397,0.14638378 0.05863012,0.24011361 0.00597395,0.36723841 0.00597395,0.49978585 c 0,0.132554 0.05265617,0.2596787 0.14639002,0.35340191 L 3.2961455,3.9968334 0.15236397,7.1411589 C 0.10466427,7.1872561 0.06663114,7.2424161 0.04046961,7.303371 0.01431473,7.3643212 5.6180845e-4,7.429943 1.6859246e-5,7.4962264 -5.2808998e-4,7.5625744 0.01214297,7.6283944 0.03729854,7.6897476 c 0.02514888,0.061416 0.06227604,0.1171794 0.1092096,0.1640783 0.0469402,0.046903 0.10274083,0.083936 0.16415749,0.1090508 0.0614166,0.025114 0.12721688,0.037703 0.19355667,0.037103 0.06634,-5.714e-4 0.13190027,-0.014457 0.19284393,-0.04064 0.0609507,-0.026246 0.11606474,-0.064351 0.16213217,-0.1120492 L 4.00298,4.7036374 7.1467354,7.8472967 c 0.093734,0.09373 0.2209103,0.1463572 0.3534166,0.1463572 0.1325737,0 0.2596834,-0.052623 0.3534183,-0.1463572 C 7.9473034,7.753567 8,7.6264624 8,7.493895 8,7.3613281 7.9473086,7.2342224 7.8535703,7.1404927 Z\"/></svg>')}.padding-right--small{padding-right:var(--lc--space--medium)}.padding-left--small{padding-left:var(--lc--space--medium)}.btn-close{align-items:flex-start;display:flex;outline:none;border:none;padding:0px 0px 0px 6px;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:var(--lc__label--color-primary);width:8px;height:8px;-webkit-mask-image:var(--lc--close__image);mask-image:var(--lc--close__image)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;background-color:#FFFFFF;align-self:center;color:var(--lc__label--title--primary);fill:var(--lc__label--title--primary);border:var(--lc__border);border-radius:var(--lc--border-radius);border-color:var( --lc__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)}.label__container:hover{border-color:var(--lc__label__default--border-color--hover);background-color:var(--lc__label__default--background-color--hover)}.label__container--active{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;border:var(--lc__border);border-radius:var(--lc--border-radius);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px);fill:var(--lc__label--color-primary);color:var(--lc__label--color-primary);border-color:var(--lc__label--background-color);background-color:var(--lc__label--background-color)}.label__container--disabled{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;border:var(--lc__border);border-color:var(--lc__label-color--disable-secondary);border-radius:var(--lc--border-radius);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px);fill:var(--lc__label--text--disabled);color:var(--lc__label--text--disabled);background-color:var(--lc__label-color--disable-secondary)}label{display:flex;align-items:center;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--lc--height);font-family:var(--lc--font-family);font-size:var(--lc--font-size)}.label__icon{display:flex;cursor:pointer}";
|
|
3760
3746
|
|
|
3761
3747
|
let EzLabelChip$1 = class extends HTMLElement {
|
|
3762
3748
|
constructor() {
|
|
@@ -3820,33 +3806,6 @@ let EzLabelChip$1 = class extends HTMLElement {
|
|
|
3820
3806
|
}
|
|
3821
3807
|
}
|
|
3822
3808
|
}
|
|
3823
|
-
handleSlotChange(ev) {
|
|
3824
|
-
const slot = ev.target;
|
|
3825
|
-
const content = slot.assignedElements()[0];
|
|
3826
|
-
if (content) {
|
|
3827
|
-
content.style.position = "absolute";
|
|
3828
|
-
content.style.display = "flex";
|
|
3829
|
-
content.style.alignItems = "center";
|
|
3830
|
-
content.style.justifyContent = "center";
|
|
3831
|
-
content.style.overflow = "hidden";
|
|
3832
|
-
content.style.top = "0px";
|
|
3833
|
-
content.style.width = "var(--lc__icon--width)";
|
|
3834
|
-
content.style.height = "var(--lc--height)";
|
|
3835
|
-
if (slot.name == "leftIcon") {
|
|
3836
|
-
content.style.left = "0px";
|
|
3837
|
-
this._labelElem.classList.add('padding-left--small');
|
|
3838
|
-
}
|
|
3839
|
-
else if (slot.name == "rightIcon") {
|
|
3840
|
-
content.style.right = "0px";
|
|
3841
|
-
if (this.removable) {
|
|
3842
|
-
this._iconElement.classList.add('padding-right--small');
|
|
3843
|
-
}
|
|
3844
|
-
else {
|
|
3845
|
-
this._labelElem.classList.add('padding-right--small');
|
|
3846
|
-
}
|
|
3847
|
-
}
|
|
3848
|
-
}
|
|
3849
|
-
}
|
|
3850
3809
|
//---------------------------------------------
|
|
3851
3810
|
// Lifecycle web component
|
|
3852
3811
|
//---------------------------------------------
|
|
@@ -3871,9 +3830,9 @@ let EzLabelChip$1 = class extends HTMLElement {
|
|
|
3871
3830
|
}
|
|
3872
3831
|
}
|
|
3873
3832
|
render() {
|
|
3874
|
-
return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el }, h("slot", { name: "leftIcon"
|
|
3875
|
-
h("
|
|
3876
|
-
: null, h("slot", { name: "rightIcon"
|
|
3833
|
+
return (h("div", { onClick: (ev) => this.handleClick(ev), class: this.value ? "label__container--active" : "label__container", ref: (el) => this._divElem = el }, h("slot", { name: "leftIcon" }), h("label", { ref: (el) => this._labelElem = el }, this.label), this.removable ?
|
|
3834
|
+
h("button", { class: "btn-close", onClick: () => { this.removeChip.emit(); } })
|
|
3835
|
+
: null, h("slot", { name: "rightIcon" })));
|
|
3877
3836
|
}
|
|
3878
3837
|
static get watchers() { return {
|
|
3879
3838
|
"value": ["reflectChange"],
|
|
@@ -3882,7 +3841,7 @@ let EzLabelChip$1 = class extends HTMLElement {
|
|
|
3882
3841
|
static get style() { return ezLabelChipCss; }
|
|
3883
3842
|
};
|
|
3884
3843
|
|
|
3885
|
-
const ezModalCss = ":host{--modal-z-index:var(--most-visible, 3);--modal-vertical-padding:var(--space--large, 24px);display:block}.modal{position:fixed;padding:var(--modal-vertical-padding) 0;display:flex;top:0px;z-index:var(--modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;max-height:calc(100% - 48px);overflow-y:auto;background-color:rgb(255, 255, 255);padding:24px;border-radius:12px 0px 0px 12px;box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
|
|
3844
|
+
const ezModalCss = ":host{--modal-z-index:var(--most-visible, 3);--modal-vertical-padding:var(--space--large, 24px);display:block}.modal{position:fixed;padding:var(--modal-vertical-padding) 0;display:flex;top:0px;z-index:var(--modal-z-index);left:0px;width:100%;box-sizing:border-box;height:100vh;backdrop-filter:blur(4px);background:rgba(0, 4, 12, 0.4)}@keyframes expand-modal--left{from{transform:translate(-100%)}}@keyframes expand-modal--right{from{transform:translate(100%)}}.modal__container{display:flex;flex-wrap:wrap;height:100%;box-sizing:border-box;width:100%;align-items:flex-start}.modal__container--right{animation:expand-modal--right .2s ease-in-out 1;justify-content:flex-end}.modal__container--left{animation:expand-modal--left .2s ease-in-out 1;justify-content:flex-start}.modal__content{display:flex;flex-wrap:wrap;max-height:calc(100% - 48px);height:100%;overflow-y:auto;background-color:rgb(255, 255, 255);padding:24px;border-radius:12px 0px 0px 12px;box-shadow:rgb(0 38 111 / 12%) 0px 0px 16px 0px}.modal__content--right{border-radius:12px 0px 0px 12px}.modal__content--left{border-radius:0px 12px 12px 0px}.modal__box__container{display:flex;flex-wrap:wrap;background-color:#fff;width:100%;border-radius:12px}.row{width:100%;display:flex;flex-wrap:wrap}.col{display:flex;flex-wrap:wrap;align-self:flex-start;box-sizing:border-box}.col--stretch{align-self:stretch}.col--undefined{width:unset}.col--nowrap{flex-wrap:nowrap}@media screen and (min-width: 320px){.col--sd-1{width:8.33333%}.col--sd-2{width:16.66667%}.col--sd-3{width:25%}.col--sd-4{width:33.33333%}.col--sd-5{width:41.66667%}.col--sd-6{width:50%}.col--sd-7{width:58.33333%}.col--sd-8{width:66.66667%}.col--sd-9{width:75%}.col--sd-10{width:83.33333%}.col--sd-11{width:91.66667%}.col--sd-12{width:100%}}@media screen and (min-width: 480px){.col--pn-1{width:8.33333%}.col--pn-2{width:16.66667%}.col--pn-3{width:25%}.col--pn-4{width:33.33333%}.col--pn-5{width:41.66667%}.col--pn-6{width:50%}.col--pn-7{width:58.33333%}.col--pn-8{width:66.66667%}.col--pn-9{width:75%}.col--pn-10{width:83.33333%}.col--pn-11{width:91.66667%}.col--pn-12{width:100%}}@media screen and (min-width: 768px){.col--tb-1{width:8.33333%}.col--tb-2{width:16.66667%}.col--tb-3{width:25%}.col--tb-4{width:33.33333%}.col--tb-5{width:41.66667%}.col--tb-6{width:50%}.col--tb-7{width:58.33333%}.col--tb-8{width:66.66667%}.col--tb-9{width:75%}.col--tb-10{width:83.33333%}.col--tb-11{width:91.66667%}.col--tb-12{width:100%}}@media screen and (min-width: 992px){.col--md-1{width:8.33333%}.col--md-2{width:16.66667%}.col--md-3{width:25%}.col--md-4{width:33.33333%}.col--md-5{width:41.66667%}.col--md-6{width:50%}.col--md-7{width:58.33333%}.col--md-8{width:66.66667%}.col--md-9{width:75%}.col--md-10{width:83.33333%}.col--md-11{width:91.66667%}.col--md-12{width:100%}}@media screen and (min-width: 1200px){.col--ld-1{width:8.33333%}.col--ld-2{width:16.66667%}.col--ld-3{width:25%}.col--ld-4{width:33.33333%}.col--ld-5{width:41.66667%}.col--ld-6{width:50%}.col--ld-7{width:58.33333%}.col--ld-8{width:66.66667%}.col--ld-9{width:75%}.col--ld-10{width:83.33333%}.col--ld-11{width:91.66667%}.col--ld-12{width:100%}}";
|
|
3886
3845
|
|
|
3887
3846
|
let EzModal$1 = class extends HTMLElement {
|
|
3888
3847
|
constructor() {
|
|
@@ -4806,7 +4765,7 @@ function isValidNumber(strValue) {
|
|
|
4806
4765
|
return strValue && /^-?\d*[.,]?\d*$/.test(strValue);
|
|
4807
4766
|
}
|
|
4808
4767
|
|
|
4809
|
-
const ezTextInputCss = ":host{--it--height:42px;--it--width:100%;--it__icon--width:48px;--it--border-radius:var(--border--radius-medium, 12px);--it--font-size:var(--text--medium, 14px);--it--font-family:var(--font-pattern, Arial);--it--font-weight:var(--text-weight--large, 500);--it--color:var(--title--primary, #000);--it__input--background-color:var(--background--medium, #e0e0e0);--it__input--border:var(--border--medium, 2px solid);--it__input--border-color:var(--it__input--background-color);--it__input--focus--border-color:var(--color--
|
|
4768
|
+
const ezTextInputCss = ":host{--it--height:42px;--it--width:100%;--it__icon--width:48px;--it--border-radius:var(--border--radius-medium, 12px);--it--font-size:var(--text--medium, 14px);--it--font-family:var(--font-pattern, Arial);--it--font-weight:var(--text-weight--large, 500);--it--color:var(--title--primary, #000);--it__input--background-color:var(--background--medium, #e0e0e0);--it__input--border:var(--border--medium, 2px solid);--it__input--border-color:var(--it__input--background-color);--it__input--focus--border-color:var(--color--alert-cold-800, #042EFF);--it__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--it__input--disabled--color:var(--text--disable, #AFB6C0);--it__input--error--border-color:#CC2936;--it__message_box--font-size:var(--text--small, 12px);--it__message_box--info--color:var(--color--success, #22085d);--it__message_box--error--color:var(--color--error, #FF0000);--it__label--floating--top:6px;--it__label--padding-top:12px;--it__label--padding-left:14px;--it__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--it--width)}input{width:100%;box-sizing:border-box;padding:var(--space--medium, 6px);font-weight:var(--text-weight--large, 600);height:var(--it--height);border-radius:var(--it--border-radius);font-family:var(--it--font-family);font-size:var(--it--font-size);border:var(--it__input--border);border-color:var(--it__input--border-color);background-color:var(--it__input--background-color);color:var(--it--color)}input:disabled{background-color:var(--it__input--disabled--background-color);color:var(--it__input--disabled--color)}input:focus{outline:none;border-color:var(--it__input--focus--border-color)}input.icon--left{padding-left:var(--it__icon--width)}input.icon--right{padding-right:var(--it__icon--width)}input.hasError{color:var(--it--color);border-color:var(--it__input--error--border-color)}input.text--right{text-align:right}.message-box{display:flex;min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--it--font-family);font-size:var(--it__message_box--font-size);color:var(--it__message_box--info--color)}.hasError{color:var(--it__message_box--error--color)}.input__label{box-sizing:border-box;position:absolute;z-index:var(--visible);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:font-size .05s, top .05s;transition:font-size .05s, top .05s;width:calc(100% - var(--it__label--padding-right));left:var(--it--space--medium);font-family:var(--it--font-family);font-size:var(--it--font-size);font-weight:var(--it--font-weight);color:var(--it--color);top:var(--it__label--padding-top);left:var(--it__label--padding-left);padding-right:var(--it__label--padding-right)}.input__label--floated{font-family:var(--it--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--it__label--floating--top)}.input__label--disabled{color:var(--it__input--disabled--color)}.input__label--left{text-align:left;left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width))}.input__label--right{right:var(--it__icon--width);width:calc(100% - var(--it__icon--width))}.input__label--left.input__label--right{left:calc(var(--it__icon--width) + 2px);width:calc(100% - var(--it__icon--width) * 2)}.input--with--label{padding-bottom:0}";
|
|
4810
4769
|
|
|
4811
4770
|
let EzTextInput$1 = class extends HTMLElement {
|
|
4812
4771
|
constructor() {
|
|
@@ -5683,7 +5642,7 @@ const EzActionChip = /*@__PURE__*/proxyCustomElement(EzLabelChip$2, [1,"ez-actio
|
|
|
5683
5642
|
const EzButton = /*@__PURE__*/proxyCustomElement(EzButton$1, [1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}]);
|
|
5684
5643
|
const EzCalendar = /*@__PURE__*/proxyCustomElement(EzCalendar$1, [1,"ez-calendar",{"value":[1040],"floating":[516]}]);
|
|
5685
5644
|
const EzCheck = /*@__PURE__*/proxyCustomElement(EzCheck$1, [1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513]}]);
|
|
5686
|
-
const
|
|
5645
|
+
const EzCollapsibleBox = /*@__PURE__*/proxyCustomElement(EzCollapsibleBox$1, [1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513]}]);
|
|
5687
5646
|
const EzComboBox = /*@__PURE__*/proxyCustomElement(EzComboBox$1, [1,"ez-combo-box",{"value":[1537],"label":[513],"enabled":[516],"options":[1040],"errormessage":[1537],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}]);
|
|
5688
5647
|
const EzDateInput = /*@__PURE__*/proxyCustomElement(EzDateInput$1, [1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errormessage":[1537]}]);
|
|
5689
5648
|
const EzDialog = /*@__PURE__*/proxyCustomElement(EzDialog$1, [1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"]}]);
|
|
@@ -5711,7 +5670,7 @@ const defineCustomElements = (opts) => {
|
|
|
5711
5670
|
EzButton,
|
|
5712
5671
|
EzCalendar,
|
|
5713
5672
|
EzCheck,
|
|
5714
|
-
|
|
5673
|
+
EzCollapsibleBox,
|
|
5715
5674
|
EzComboBox,
|
|
5716
5675
|
EzDateInput,
|
|
5717
5676
|
EzDialog,
|
|
@@ -5740,4 +5699,4 @@ const defineCustomElements = (opts) => {
|
|
|
5740
5699
|
}
|
|
5741
5700
|
};
|
|
5742
5701
|
|
|
5743
|
-
export { EzActionChip, EzButton, EzCalendar, EzCheck,
|
|
5702
|
+
export { EzActionChip, EzButton, EzCalendar, EzCheck, EzCollapsibleBox, EzComboBox, EzDateInput, EzDialog, EzForm, EzIcon, EzLabelChip, EzModal, EzNumberInput, EzNumericInput, EzPopover, EzPopup, EzSearch, EzTabselector, EzTextArea, EzTextInput, EzTimeInput, EzToast, EzUpload, FormMetadata, PlaceHolder, defineCustomElements };
|