@sankhyalabs/ezui 1.1.73 → 1.1.74
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 +1 -1
- package/dist/cjs/ez-button_16.cjs.entry.js +5 -5
- package/dist/cjs/ez-label-chip.cjs.entry.js +11 -11
- package/dist/cjs/ez-toast.cjs.entry.js +4 -1
- package/dist/cjs/ezui.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/ez-action-chip/ez-action-chip.css +21 -21
- package/dist/collection/components/ez-action-chip/ez-action-chip.js +1 -1
- package/dist/collection/components/ez-form/subcomponents/structure/Field.js +1 -1
- package/dist/collection/components/ez-label-chip/ez-label-chip.css +49 -49
- package/dist/collection/components/ez-label-chip/ez-label-chip.js +11 -11
- package/dist/collection/components/ez-search/ez-search.js +9 -9
- package/dist/collection/components/ez-text-area/ez-text-area.css +48 -48
- package/dist/collection/components/ez-toast/ez-toast.css +9 -9
- package/dist/collection/components/ez-toast/ez-toast.js +4 -1
- package/dist/custom-elements/index.js +22 -19
- package/dist/esm/ez-action-chip.entry.js +1 -1
- package/dist/esm/ez-button_16.entry.js +5 -5
- package/dist/esm/ez-label-chip.entry.js +11 -11
- package/dist/esm/ez-toast.entry.js +4 -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-0d476efb.entry.js +1 -0
- package/dist/ezui/p-34d288d0.entry.js +1 -0
- package/dist/ezui/p-47406a6e.entry.js +1 -0
- package/dist/ezui/{p-74809665.entry.js → p-907de194.entry.js} +1 -1
- package/dist/types/components/ez-action-chip/ez-action-chip.d.ts +2 -2
- package/dist/types/components/ez-label-chip/ez-label-chip.d.ts +2 -2
- package/dist/types/components/ez-search/ez-search.d.ts +5 -5
- package/dist/types/components/ez-toast/ez-toast.d.ts +3 -0
- package/dist/types/components.d.ts +9 -6
- package/package.json +1 -1
- package/dist/ezui/p-0db8d49b.entry.js +0 -1
- package/dist/ezui/p-129b53df.entry.js +0 -1
- package/dist/ezui/p-a99f8d42.entry.js +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4d2896bb.js');
|
|
6
6
|
|
|
7
|
-
const ezActionChipCss = ":host{--
|
|
7
|
+
const ezActionChipCss = ":host{--ez-action-chip--height:36px;--ez-action-chip--border-radius:var(--border--radius-large, 24px);--ez-action-chip__border:1px solid;--ez-action-chip__border-color-strokes:var(--color--strokes, #DCE0E8);--ez-action-chip--font-size:var(--text--medium, 14px);--ez-action-chip--font-family:var(--font-pattern, Arial);--ez-action-chip--font-weight:var(--text-weight--large, 500);--ez-action-chip__label--title--primary:var(--title--primary, #919191);--ez-action-chip__label-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-action-chip__label__default--background-color--hover:var(--color--primary-200, #f2faf8);--ez-action-chip__label__default--border-color--hover:var(--color--primary-600, #007a5a)}.label__container{width:fit-content;display:flex;flex-wrap:wrap;position:relative;background-color:#FFFFFF;align-items:center;align-self:center;cursor:pointer;color:var(--ez-action-chip__label--title--primary);fill:var(--ez-action-chip__label--title--primary);border:var(--ez-action-chip__border);border-radius:var(--ez-action-chip--border-radius);border-color:var(--ez-action-chip__border-color-strokes);padding-right:var(--space--medium, 12px);padding-left:var(--space--medium, 12px)}.label__container:hover{border-color:var(--ez-action-chip__label__default--border-color--hover);background-color:var(--ez-action-chip__label__default--background-color--hover)}label{display:flex;align-items:center;font-weight:var(--text-weight--large, 600);cursor:pointer;height:var(--ez-action-chip--height);font-family:var(--ez-action-chip--font-family);font-size:var(--ez-action-chip--font-size)}";
|
|
8
8
|
|
|
9
9
|
let EzLabelChip = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -2622,7 +2622,7 @@ const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
2622
2622
|
context['CRITERIA'] = criteriaList;
|
|
2623
2623
|
}
|
|
2624
2624
|
return index.h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? index.h("place-holder", null) :
|
|
2625
|
-
index.h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage,
|
|
2625
|
+
index.h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, optionLoader: (argument) => {
|
|
2626
2626
|
if (form) {
|
|
2627
2627
|
return form.loadSearch(argument, context);
|
|
2628
2628
|
}
|
|
@@ -3062,11 +3062,11 @@ let EzSearch = class {
|
|
|
3062
3062
|
/**
|
|
3063
3063
|
* Ajusta a opção de mostrar o "value" ao selecionar uma opção.
|
|
3064
3064
|
*/
|
|
3065
|
-
this.
|
|
3065
|
+
this.showSelectedValue = true;
|
|
3066
3066
|
/**
|
|
3067
3067
|
* Ajusta a opção de mostrar o "value" para cada opção.
|
|
3068
3068
|
*/
|
|
3069
|
-
this.
|
|
3069
|
+
this.showOptionValue = true;
|
|
3070
3070
|
}
|
|
3071
3071
|
updateValue() {
|
|
3072
3072
|
if (this._comboElement) {
|
|
@@ -3079,7 +3079,7 @@ let EzSearch = class {
|
|
|
3079
3079
|
this.ezChange.emit(evt.detail);
|
|
3080
3080
|
}
|
|
3081
3081
|
render() {
|
|
3082
|
-
return (index.h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.
|
|
3082
|
+
return (index.h("ez-combo-box", { ref: elem => this._comboElement = elem, value: this.value, label: this.label, enabled: this.enabled, errorMessage: this.errorMessage, optionLoader: this.optionLoader, searchMode: true, onEzChange: evt => this.onComboChange(evt), showSelectedValue: this.showSelectedValue, showOptionValue: this.showOptionValue }));
|
|
3083
3083
|
}
|
|
3084
3084
|
;
|
|
3085
3085
|
static get watchers() { return {
|
|
@@ -3289,7 +3289,7 @@ class Tab {
|
|
|
3289
3289
|
}
|
|
3290
3290
|
EzTabselector.style = ezTabselectorCss;
|
|
3291
3291
|
|
|
3292
|
-
const ezTextAreaCss = ":host{--
|
|
3292
|
+
const ezTextAreaCss = ":host{--text-area--width:100%;--text-area--border-radius:var(--border--radius-medium, 12px);--text-area--font-size:var(--text--medium, 14px);--text-area--font-family:var(--font-pattern, Arial);--text-area--font-weight:var(--text-weight--large, 500);--text-area--color:var(--title--primary, #000);--text-area__input--background-color:var(--background--medium, #e0e0e0);--text-area__input--border:var(--border--medium, 2px solid);--text-area__input--border-color:var(--text-area__input--background-color);--text-area__input--focus--border-color:var(--color--primary, #008561);--text-area__input--disabled--background-color:var(--color--disable-secondary, #F2F5F8);--text-area__input--disabled--color:var(--text--disable, #AFB6C0);--text-area__input--error--border-color:#CC2936;--text-area__message_box--font-size:var(--text--small, 12px);--text-area__message_box--info--color:var(--color--success, #22085d);--text-area__message_box--error--color:var(--color--error, #FF0000);--text-area__label--floating--top:6px;--text-area__label--padding-top:12px;--text-area__label--padding-left:14px;--text-area__label--padding-right:12px;display:flex;flex-wrap:wrap;position:relative;width:var(--text-area--width)}textarea{box-sizing:border-box;border:none;resize:none;margin-top:calc(var(--space--medium, 12px) + 4px);width:100%;font-weight:var(--text-weight--large, 600);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);color:var(--text-area--color);padding:0;background:none}textarea:focus{outline:none}textarea:disabled{background-color:transparent;color:var(--text-area__input--disabled--color)}.textarea{width:100%;box-sizing:border-box;padding-left:var(--space--medium);padding-right:var(--space--extra-small);border-radius:var(--text-area--border-radius);border:var(--text-area__input--border);border-color:var(--text-area__input--border-color);background-color:var(--text-area__input--background-color)}.textarea--focus{border-color:var(--text-area__input--focus--border-color)}.textarea.hasError{color:var(--text-area--color);border-color:var(--text-area__input--error--border-color)}.message-box{min-height:16px;min-width:100%;margin-top:2px;line-height:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--text-area--font-family);font-size:var(--text-area__message_box--font-size);color:var(--text-area__message_box--info--color)}.hasError{color:var(--text-area__message_box--error--color)}.textarea__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(--text-area__label--padding-right));left:var(--text-area--space--medium);font-family:var(--text-area--font-family);font-size:var(--text-area--font-size);font-weight:var(--text-area--font-weight);color:var(--text-area--color);top:var(--text-area__label--padding-top);left:var(--text-area__label--padding-left);padding-right:var(--text-area__label--padding-right)}.textarea__label--floated{font-family:var(--text-area--font-family);font-size:var(--text--extra-small);color:var(--text--primary);top:var(--text-area__label--floating--top)}.textarea__label--disabled{color:var(--text-area__input--disabled--color)}";
|
|
3293
3293
|
|
|
3294
3294
|
let EzTextArea = class {
|
|
3295
3295
|
constructor(hostRef) {
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4d2896bb.js');
|
|
6
6
|
|
|
7
|
-
const ezLabelChipCss = ":host{--
|
|
7
|
+
const ezLabelChipCss = ":host{--ez-label-chip--height:36px;--ez-label-chip__label--font-size:var(--text--medium, 14px);--ez-label-chip__label--font-family:var(--font-pattern, Arial);--ez-label-chip__label--font-weight:var(--text-weight--large, 600);--ez-label-chip__label--space--medium:var(--space--medium, 12px);--ez-label-chip__label--title--primary:var(--title--primary, #919191);--ez-label-chip__label__container--border-radius:var(--border--radius-large, 24px);--ez-label-chip__label__container--border:1px solid;--ez-label-chip__label__container--border-color-strokes:var(--color--strokes, #DCE0E8);--ez-label-chip__label__container--color-primary:var(--color--primary, #008561);--ez-label-chip__label__container-color--disable-secondary:var(--color--disable-secondary, #F2F5F8);--ez-label-chip__label__container--background-color:#0085610F;--ez-label-chip__label__container--border-color:#0085610F;--ez-label-chip__label__container--default--border-color--hover:var(--color--primary-600, #007a5a);--ez-label-chip__label__container--default--background-color--hover:var(--color--primary-200, #f2faf8);--ez-label-chip__label__container--text--disabled:var(--text--disable, #AFB6C0);--ez-label-chip__btn__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>')}.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(--ez-label-chip__label__container--color-primary);width:8px;height:8px;-webkit-mask-image:var(--ez-label-chip__btn__close--image);mask-image:var(--ez-label-chip__btn__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(--ez-label-chip__label--title--primary);fill:var(--ez-label-chip__label--title--primary);border:var(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);border-color:var(--ez-label-chip__label__container--border-color-strokes);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium)}.label__container:hover{border-color:var(--ez-label-chip__label__container--default--border-color--hover);background-color:var(--ez-label-chip__label__container--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(--ez-label-chip__label__container--border);border-radius:var(--ez-label-chip__label__container--border-radius);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);fill:var(--ez-label-chip__label__container--color-primary);color:var(--ez-label-chip__label__container--color-primary);border-color:var(--ez-label-chip__label__container--border-color);background-color:var(--ez-label-chip__label__container--background-color)}.label__container--disabled{width:fit-content;display:flex;flex-wrap:wrap;position:relative;align-items:center;align-self:center;border:var(--ez-label-chip__label__container--border);border-color:var(--ez-label-chip__label__container-color--disable-secondary);border-radius:var(--ez-label-chip__label__container--border-radius);padding-right:var(--ez-label-chip__label--space--medium);padding-left:var(--ez-label-chip__label--space--medium);fill:var(--ez-label-chip__label__container--text--disabled);color:var(--ez-label-chip__label__container--text--disabled);background-color:var(--ez-label-chip__label__container-color--disable-secondary)}label{display:flex;align-items:center;font-weight:var(--ez-label-chip__label--font-weight);cursor:pointer;height:var(--ez-label-chip--height);font-family:var(--ez-label-chip__label--font-family);font-size:var(--ez-label-chip__label--font-size)}.label__icon{display:flex;cursor:pointer}";
|
|
8
8
|
|
|
9
9
|
let EzLabelChip = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -44,7 +44,7 @@ let EzLabelChip = class {
|
|
|
44
44
|
//---------------------------------------------
|
|
45
45
|
handleClick(ev) {
|
|
46
46
|
const target = ev.target;
|
|
47
|
-
if (target.assignedSlot === null && !target.classList.contains(
|
|
47
|
+
if (target.assignedSlot === null && !target.classList.contains("label__icon")) {
|
|
48
48
|
this.valueChange.emit(this.value);
|
|
49
49
|
this.swichState();
|
|
50
50
|
}
|
|
@@ -56,13 +56,13 @@ let EzLabelChip = class {
|
|
|
56
56
|
}
|
|
57
57
|
reflectChange() {
|
|
58
58
|
if (this._divElem) {
|
|
59
|
-
this._divElem.classList.remove(
|
|
60
|
-
this._divElem.classList.remove(
|
|
59
|
+
this._divElem.classList.remove("label__container--active");
|
|
60
|
+
this._divElem.classList.remove("label__container");
|
|
61
61
|
if (this.value) {
|
|
62
|
-
this._divElem.classList.add(
|
|
62
|
+
this._divElem.classList.add("label__container--active");
|
|
63
63
|
}
|
|
64
64
|
else {
|
|
65
|
-
this._divElem.classList.add(
|
|
65
|
+
this._divElem.classList.add("label__container");
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
}
|
|
@@ -72,7 +72,7 @@ let EzLabelChip = class {
|
|
|
72
72
|
componentDidLoad() {
|
|
73
73
|
if (this._divElem) {
|
|
74
74
|
if (this.value) {
|
|
75
|
-
this._divElem.classList.add(
|
|
75
|
+
this._divElem.classList.add("label__container--active");
|
|
76
76
|
}
|
|
77
77
|
else {
|
|
78
78
|
this.handleEnabledState();
|
|
@@ -80,12 +80,12 @@ let EzLabelChip = class {
|
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
handleEnabledState() {
|
|
83
|
-
this._divElem.classList.remove(
|
|
83
|
+
this._divElem.classList.remove("label__container--disabled");
|
|
84
84
|
if (!this.enabled) {
|
|
85
|
-
this._divElem.classList.remove(
|
|
86
|
-
this._divElem.classList.add(
|
|
85
|
+
this._divElem.classList.remove("label__container");
|
|
86
|
+
this._divElem.classList.add("label__container--disabled");
|
|
87
87
|
if (this._labelElem) {
|
|
88
|
-
this._labelElem.style.cursor =
|
|
88
|
+
this._labelElem.style.cursor = "default";
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
91
|
}
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-4d2896bb.js');
|
|
6
6
|
|
|
7
|
-
const ezToastCss = ":host{--toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--toast__container-z-index:var(--more-visible, 2);--toast__container--background-color:var(--color--secondary, #383c45);--toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;bottom:100px;z-index:var(--toast__container-z-index);left:100px;width:30%;box-sizing:border-box;background-color:var(--toast__container--background-color);border-radius:6px;align-items:center;padding:12px;visibility:hidden}.message__container{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.message__conteiner--icon{padding-left:var(--toast__icon--padding-left);width:80%}.btn-close{display:flex;justify-content:flex-end;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--toast__btn__close__image);mask-image:var(--toast__btn__close__image)}.toast__container--oppened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@-webkit-keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}";
|
|
7
|
+
const ezToastCss = ":host{--ez-toast__btn__close__image:url('data:image/svg+xml;utf8,<svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" xmlns=\"http://www.w3.org/2000/svg%22%3E<path d=\"M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z\"/></svg>');--ez-toast__container-z-index:var(--more-visible, 2);--ez-toast__container--background-color:var(--color--secondary, #383c45);--ez-toast__icon--padding-left:var(--space--small, 6px)}.toast__container{position:fixed;display:flex;bottom:100px;z-index:var(--ez-toast__container-z-index);left:100px;width:30%;box-sizing:border-box;background-color:var(--ez-toast__container--background-color);border-radius:6px;align-items:center;padding:12px;visibility:hidden}.message__container{font-family:\"Sora\", \"Algerian\";text-shadow:0 0 0 #353535, 0 0 1px transparent;color:#FFFFFF;font-size:14px;width:90%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.message__conteiner--icon{padding-left:var(--ez-toast__icon--padding-left);width:80%}.btn-close{display:flex;justify-content:flex-end;padding:0;outline:none;width:10%;border:none;background-color:unset;cursor:pointer}.btn-close::after{content:'';display:flex;background-color:#FFFFFF;width:12px;height:12px;-webkit-mask-image:var(--ez-toast__btn__close__image);mask-image:var(--ez-toast__btn__close__image)}.toast__container--oppened{animation:fadein 0.5s, fadeout 0.5s 3s;visibility:visible}@-webkit-keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@keyframes fadein{from{left:-100px;opacity:0}to{left:100px;opacity:1}}@-webkit-keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}@keyframes fadeout{from{left:100px;opacity:1}to{bottom:0;opacity:0}}";
|
|
8
8
|
|
|
9
9
|
let EzToast = class {
|
|
10
10
|
constructor(hostRef) {
|
|
@@ -18,6 +18,9 @@ let EzToast = class {
|
|
|
18
18
|
*/
|
|
19
19
|
this.useIcon = false;
|
|
20
20
|
}
|
|
21
|
+
/**
|
|
22
|
+
* Exibe o componente na tela.
|
|
23
|
+
*/
|
|
21
24
|
async show() {
|
|
22
25
|
this.container.classList.add("toast__container--oppened");
|
|
23
26
|
this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
|
package/dist/cjs/ezui.cjs.js
CHANGED
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-list.cjs",[[1,"ez-list",{"initialList":[1040],"draggable":[4],"isMultipleSelection":[1540,"is-multiple-selection"],"getState":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"
|
|
18
|
+
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-list.cjs",[[1,"ez-list",{"initialList":[1040],"draggable":[4],"isMultipleSelection":[1540,"is-multiple-selection"],"getState":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[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"]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[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"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
|
|
19
19
|
});
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-list.cjs",[[1,"ez-list",{"initialList":[1040],"draggable":[4],"isMultipleSelection":[1540,"is-multiple-selection"],"getState":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errorMessage":[1537,"error-message"],"
|
|
17
|
+
return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"opened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64],"show":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errorMessage":[1537,"error-message"],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-list.cjs",[[1,"ez-list",{"initialList":[1040],"draggable":[4],"isMultipleSelection":[1540,"is-multiple-selection"],"getState":[64]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalSize":[1,"modal-size"],"align":[1],"opened":[4],"closeEsc":[4,"close-esc"],"closeOutsideClick":[4,"close-outside-click"]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoClose":[516,"auto-close"],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxWidth":[513,"box-width"],"opened":[1540],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"ezTitle":[1,"ez-title"]}]]],["ez-toast.cjs",[[1,"ez-toast",{"message":[1025],"fadeTime":[1026,"fade-time"],"useIcon":[1028,"use-icon"],"show":[64]}]]],["ez-button_16.cjs",[[0,"ez-form",{"metadataexecutor":[1],"loadexecutor":[1],"saveexecutor":[1],"removeexecutor":[1],"fieldsearchexecutor":[1],"ignoresavevalidation":[4],"metadata":[16],"slavemode":[4],"enabled":[4],"loading":[1540],"validate":[64],"getChanges":[64],"changeFieldValue":[64]}],[1,"form-metadata",{"name":[1],"label":[1],"dataunit":[1025],"many":[4],"autoload":[4],"metadata":[1040]}],[1,"ez-date-input",{"label":[513],"value":[1040],"enabled":[516],"errorMessage":[1537,"error-message"]}],[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"]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errorMessage":[1537,"error-message"],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsible-box",{"value":[1540],"label":[513],"headersize":[513],"iconplacement":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedIndex":[1537,"selected-index"],"selectedTab":[1537,"selected-tab"],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"label":[1],"enabled":[4],"maxfilesize":[2],"maxfiles":[2],"requestheaders":[8],"urlupload":[1],"urldelete":[1],"value":[1040],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[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"],"optionLoader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"fitVertical":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errorMessage":[1537,"error-message"],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -2,31 +2,31 @@
|
|
|
2
2
|
/* dimensions */
|
|
3
3
|
|
|
4
4
|
/*@doc Define a altura do componente.*/
|
|
5
|
-
--
|
|
5
|
+
--ez-action-chip--height: 36px;
|
|
6
6
|
|
|
7
7
|
/* general */
|
|
8
8
|
/*@doc Define o raio da borda do componente.*/
|
|
9
|
-
--
|
|
9
|
+
--ez-action-chip--border-radius: var(--border--radius-large, 24px);
|
|
10
10
|
/*@doc Define o estilo de borda do componente.*/
|
|
11
|
-
--
|
|
11
|
+
--ez-action-chip__border: 1px solid;
|
|
12
12
|
/*@doc Define a cor da borda do componente.*/
|
|
13
|
-
--
|
|
13
|
+
--ez-action-chip__border-color-strokes: var(--color--strokes, #DCE0E8);
|
|
14
14
|
|
|
15
15
|
/* label */
|
|
16
16
|
/*@doc Define o tamanho da fonte do label.*/
|
|
17
|
-
--
|
|
17
|
+
--ez-action-chip--font-size: var(--text--medium, 14px);
|
|
18
18
|
/*@doc Define a família da fonte do label.*/
|
|
19
|
-
--
|
|
19
|
+
--ez-action-chip--font-family: var(--font-pattern, Arial);
|
|
20
20
|
/*@doc Define o peso da fonte do label.*/
|
|
21
|
-
--
|
|
21
|
+
--ez-action-chip--font-weight: var(--text-weight--large, 500);
|
|
22
22
|
/*@doc Define a cor do label do componente.*/
|
|
23
|
-
--
|
|
23
|
+
--ez-action-chip__label--title--primary: var(--title--primary, #919191);
|
|
24
24
|
/*@doc Define a cor do label quando desabilitado.*/
|
|
25
|
-
--
|
|
25
|
+
--ez-action-chip__label-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
|
|
26
26
|
/*@doc Define a cor de fundo do componente quando o cursor estiver sobre ele.*/
|
|
27
|
-
--
|
|
27
|
+
--ez-action-chip__label__default--background-color--hover: var(--color--primary-200, #f2faf8);
|
|
28
28
|
/*@doc Define a cor da borda quando o cursor estiver sobre o componente.*/
|
|
29
|
-
--
|
|
29
|
+
--ez-action-chip__label__default--border-color--hover: var(--color--primary-600, #007a5a);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.label__container {
|
|
@@ -40,18 +40,18 @@
|
|
|
40
40
|
align-self: center;
|
|
41
41
|
cursor: pointer;
|
|
42
42
|
/*public*/
|
|
43
|
-
color: var(--
|
|
44
|
-
fill: var(--
|
|
45
|
-
border: var(--
|
|
46
|
-
border-radius: var(--
|
|
47
|
-
border-color: var(--
|
|
43
|
+
color: var(--ez-action-chip__label--title--primary);
|
|
44
|
+
fill: var(--ez-action-chip__label--title--primary);
|
|
45
|
+
border: var(--ez-action-chip__border);
|
|
46
|
+
border-radius: var(--ez-action-chip--border-radius);
|
|
47
|
+
border-color: var(--ez-action-chip__border-color-strokes);
|
|
48
48
|
padding-right: var(--space--medium, 12px);
|
|
49
49
|
padding-left: var(--space--medium, 12px);
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
.label__container:hover {
|
|
53
|
-
border-color: var(--
|
|
54
|
-
background-color: var(--
|
|
53
|
+
border-color: var(--ez-action-chip__label__default--border-color--hover);
|
|
54
|
+
background-color: var(--ez-action-chip__label__default--background-color--hover);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
label {
|
|
@@ -61,7 +61,7 @@ label {
|
|
|
61
61
|
font-weight: var(--text-weight--large, 600);
|
|
62
62
|
cursor: pointer;
|
|
63
63
|
/*public*/
|
|
64
|
-
height: var(--
|
|
65
|
-
font-family: var(--
|
|
66
|
-
font-size: var(--
|
|
64
|
+
height: var(--ez-action-chip--height);
|
|
65
|
+
font-family: var(--ez-action-chip--font-family);
|
|
66
|
+
font-size: var(--ez-action-chip--font-size);
|
|
67
67
|
}
|
|
@@ -58,7 +58,7 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
|
|
|
58
58
|
context['CRITERIA'] = criteriaList;
|
|
59
59
|
}
|
|
60
60
|
return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
|
|
61
|
-
h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage,
|
|
61
|
+
h("ez-search", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errorMessage: errorMessage, optionLoader: (argument) => {
|
|
62
62
|
if (form) {
|
|
63
63
|
return form.loadSearch(argument, context);
|
|
64
64
|
}
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
/* dimensions */
|
|
3
3
|
/*@doc Define a altura do chip.*/
|
|
4
|
-
--
|
|
4
|
+
--ez-label-chip--height: 36px;
|
|
5
5
|
|
|
6
6
|
/* Label */
|
|
7
7
|
/*@doc Define o tamanho do label.*/
|
|
8
|
-
--
|
|
8
|
+
--ez-label-chip__label--font-size: var(--text--medium, 14px);
|
|
9
9
|
/*@doc Define a família da fonte do label.*/
|
|
10
|
-
--
|
|
10
|
+
--ez-label-chip__label--font-family: var(--font-pattern, Arial);
|
|
11
11
|
/*@doc Define o peso da fonte do label.*/
|
|
12
|
-
--
|
|
12
|
+
--ez-label-chip__label--font-weight: var(--text-weight--large, 600);
|
|
13
13
|
/*@doc Define o espaçamento do label.*/
|
|
14
|
-
--
|
|
14
|
+
--ez-label-chip__label--space--medium: var(--space--medium, 12px);
|
|
15
15
|
/*@doc Define a cor do texto e do ícone.*/
|
|
16
|
-
--
|
|
16
|
+
--ez-label-chip__label--title--primary: var(--title--primary, #919191);
|
|
17
17
|
|
|
18
18
|
/* Label Container */
|
|
19
19
|
/*@doc Define o raio da borda do container do chip.*/
|
|
20
|
-
--
|
|
20
|
+
--ez-label-chip__label__container--border-radius: var(--border--radius-large, 24px);
|
|
21
21
|
/*@doc Define o estilo da borda do container.*/
|
|
22
|
-
--
|
|
22
|
+
--ez-label-chip__label__container--border: 1px solid;
|
|
23
23
|
/*@doc Define a cor da borda do container.*/
|
|
24
|
-
--
|
|
24
|
+
--ez-label-chip__label__container--border-color-strokes: var(--color--strokes, #DCE0E8);
|
|
25
25
|
/*@doc Define a cor do texto, do ícone do label e do botão de remoção (quando o chip está ativo).*/
|
|
26
|
-
--
|
|
26
|
+
--ez-label-chip__label__container--color-primary: var(--color--primary, #008561);
|
|
27
27
|
/*@doc Define a cor da borda e do fundo quando o chip está desativado.*/
|
|
28
|
-
--
|
|
28
|
+
--ez-label-chip__label__container-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
|
|
29
29
|
/*@doc Define a cor de fundo do container quando ativo.*/
|
|
30
|
-
--
|
|
30
|
+
--ez-label-chip__label__container--background-color: #0085610F;
|
|
31
31
|
/*@doc Define a cor da borda do container quando ativo.*/
|
|
32
|
-
--
|
|
32
|
+
--ez-label-chip__label__container--border-color: #0085610F;
|
|
33
33
|
/*@doc Define a cor da borda do container quando o cursor está sobre ele.*/
|
|
34
|
-
--
|
|
34
|
+
--ez-label-chip__label__container--default--border-color--hover: var(--color--primary-600, #007a5a);
|
|
35
35
|
/*@doc Define a cor do fundo do container quando o cursor está sobre ele.*/
|
|
36
|
-
--
|
|
36
|
+
--ez-label-chip__label__container--default--background-color--hover: var(--color--primary-200, #f2faf8);
|
|
37
37
|
/*@doc Define a cor do texto e do ícone quando o chip está desabilitado.*/
|
|
38
|
-
--
|
|
38
|
+
--ez-label-chip__label__container--text--disabled: var(--text--disable, #AFB6C0);
|
|
39
39
|
|
|
40
40
|
/* Buttons */
|
|
41
41
|
/* @doc Contém o ícone do botão de fechamento. */
|
|
42
|
-
--
|
|
42
|
+
--ez-label-chip__btn__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>');
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
.btn-close {
|
|
@@ -55,11 +55,11 @@
|
|
|
55
55
|
.btn-close::after {
|
|
56
56
|
content: '';
|
|
57
57
|
display: flex;
|
|
58
|
-
background-color: var(--
|
|
58
|
+
background-color: var(--ez-label-chip__label__container--color-primary);
|
|
59
59
|
width: 8px;
|
|
60
60
|
height: 8px;
|
|
61
|
-
-webkit-mask-image: var(--
|
|
62
|
-
mask-image: var(--
|
|
61
|
+
-webkit-mask-image: var(--ez-label-chip__btn__close--image);
|
|
62
|
+
mask-image: var(--ez-label-chip__btn__close--image);
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
.label__container {
|
|
@@ -71,18 +71,18 @@
|
|
|
71
71
|
align-items: center;
|
|
72
72
|
background-color: #FFFFFF;
|
|
73
73
|
align-self: center;
|
|
74
|
-
color: var(--
|
|
75
|
-
fill: var(--
|
|
76
|
-
border: var(--
|
|
77
|
-
border-radius: var(--
|
|
78
|
-
border-color: var(--
|
|
79
|
-
padding-right: var(--
|
|
80
|
-
padding-left: var(--
|
|
74
|
+
color: var(--ez-label-chip__label--title--primary);
|
|
75
|
+
fill: var(--ez-label-chip__label--title--primary);
|
|
76
|
+
border: var(--ez-label-chip__label__container--border);
|
|
77
|
+
border-radius: var(--ez-label-chip__label__container--border-radius);
|
|
78
|
+
border-color: var(--ez-label-chip__label__container--border-color-strokes);
|
|
79
|
+
padding-right: var(--ez-label-chip__label--space--medium);
|
|
80
|
+
padding-left: var(--ez-label-chip__label--space--medium);
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
.label__container:hover {
|
|
84
|
-
border-color: var(--
|
|
85
|
-
background-color: var(--
|
|
84
|
+
border-color: var(--ez-label-chip__label__container--default--border-color--hover);
|
|
85
|
+
background-color: var(--ez-label-chip__label__container--default--background-color--hover);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
88
|
.label__container--active {
|
|
@@ -93,14 +93,14 @@
|
|
|
93
93
|
position: relative;
|
|
94
94
|
align-items: center;
|
|
95
95
|
align-self: center;
|
|
96
|
-
border: var(--
|
|
97
|
-
border-radius: var(--
|
|
98
|
-
padding-right: var(--
|
|
99
|
-
padding-left: var(--
|
|
100
|
-
fill: var(--
|
|
101
|
-
color: var(--
|
|
102
|
-
border-color: var(--
|
|
103
|
-
background-color: var(--
|
|
96
|
+
border: var(--ez-label-chip__label__container--border);
|
|
97
|
+
border-radius: var(--ez-label-chip__label__container--border-radius);
|
|
98
|
+
padding-right: var(--ez-label-chip__label--space--medium);
|
|
99
|
+
padding-left: var(--ez-label-chip__label--space--medium);
|
|
100
|
+
fill: var(--ez-label-chip__label__container--color-primary);
|
|
101
|
+
color: var(--ez-label-chip__label__container--color-primary);
|
|
102
|
+
border-color: var(--ez-label-chip__label__container--border-color);
|
|
103
|
+
background-color: var(--ez-label-chip__label__container--background-color);
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
|
|
@@ -111,26 +111,26 @@
|
|
|
111
111
|
position: relative;
|
|
112
112
|
align-items: center;
|
|
113
113
|
align-self: center;
|
|
114
|
-
border: var(--
|
|
115
|
-
border-color: var(--
|
|
116
|
-
border-radius: var(--
|
|
117
|
-
padding-right: var(--
|
|
118
|
-
padding-left: var(--
|
|
119
|
-
fill: var(--
|
|
120
|
-
color: var(--
|
|
121
|
-
background-color: var(--
|
|
114
|
+
border: var(--ez-label-chip__label__container--border);
|
|
115
|
+
border-color: var(--ez-label-chip__label__container-color--disable-secondary);
|
|
116
|
+
border-radius: var(--ez-label-chip__label__container--border-radius);
|
|
117
|
+
padding-right: var(--ez-label-chip__label--space--medium);
|
|
118
|
+
padding-left: var(--ez-label-chip__label--space--medium);
|
|
119
|
+
fill: var(--ez-label-chip__label__container--text--disabled);
|
|
120
|
+
color: var(--ez-label-chip__label__container--text--disabled);
|
|
121
|
+
background-color: var(--ez-label-chip__label__container-color--disable-secondary);
|
|
122
122
|
}
|
|
123
123
|
|
|
124
124
|
label {
|
|
125
125
|
/*private*/
|
|
126
126
|
display: flex;
|
|
127
127
|
align-items: center;
|
|
128
|
-
font-weight: var(--
|
|
128
|
+
font-weight: var(--ez-label-chip__label--font-weight);
|
|
129
129
|
cursor: pointer;
|
|
130
130
|
/*public*/
|
|
131
|
-
height: var(--
|
|
132
|
-
font-family: var(--
|
|
133
|
-
font-size: var(--
|
|
131
|
+
height: var(--ez-label-chip--height);
|
|
132
|
+
font-family: var(--ez-label-chip__label--font-family);
|
|
133
|
+
font-size: var(--ez-label-chip__label--font-size);
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
.label__icon {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Prop, h, Method, Watch, Event } from
|
|
1
|
+
import { Component, Prop, h, Method, Watch, Event } from "@stencil/core";
|
|
2
2
|
export class EzLabelChip {
|
|
3
3
|
constructor() {
|
|
4
4
|
/**
|
|
@@ -34,7 +34,7 @@ export class EzLabelChip {
|
|
|
34
34
|
//---------------------------------------------
|
|
35
35
|
handleClick(ev) {
|
|
36
36
|
const target = ev.target;
|
|
37
|
-
if (target.assignedSlot === null && !target.classList.contains(
|
|
37
|
+
if (target.assignedSlot === null && !target.classList.contains("label__icon")) {
|
|
38
38
|
this.valueChange.emit(this.value);
|
|
39
39
|
this.swichState();
|
|
40
40
|
}
|
|
@@ -46,13 +46,13 @@ export class EzLabelChip {
|
|
|
46
46
|
}
|
|
47
47
|
reflectChange() {
|
|
48
48
|
if (this._divElem) {
|
|
49
|
-
this._divElem.classList.remove(
|
|
50
|
-
this._divElem.classList.remove(
|
|
49
|
+
this._divElem.classList.remove("label__container--active");
|
|
50
|
+
this._divElem.classList.remove("label__container");
|
|
51
51
|
if (this.value) {
|
|
52
|
-
this._divElem.classList.add(
|
|
52
|
+
this._divElem.classList.add("label__container--active");
|
|
53
53
|
}
|
|
54
54
|
else {
|
|
55
|
-
this._divElem.classList.add(
|
|
55
|
+
this._divElem.classList.add("label__container");
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
}
|
|
@@ -62,7 +62,7 @@ export class EzLabelChip {
|
|
|
62
62
|
componentDidLoad() {
|
|
63
63
|
if (this._divElem) {
|
|
64
64
|
if (this.value) {
|
|
65
|
-
this._divElem.classList.add(
|
|
65
|
+
this._divElem.classList.add("label__container--active");
|
|
66
66
|
}
|
|
67
67
|
else {
|
|
68
68
|
this.handleEnabledState();
|
|
@@ -70,12 +70,12 @@ export class EzLabelChip {
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
handleEnabledState() {
|
|
73
|
-
this._divElem.classList.remove(
|
|
73
|
+
this._divElem.classList.remove("label__container--disabled");
|
|
74
74
|
if (!this.enabled) {
|
|
75
|
-
this._divElem.classList.remove(
|
|
76
|
-
this._divElem.classList.add(
|
|
75
|
+
this._divElem.classList.remove("label__container");
|
|
76
|
+
this._divElem.classList.add("label__container--disabled");
|
|
77
77
|
if (this._labelElem) {
|
|
78
|
-
this._labelElem.style.cursor =
|
|
78
|
+
this._labelElem.style.cursor = "default";
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
81
|
}
|