@sankhyalabs/ezui 1.1.37 → 1.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/cjs/ez-button_16.cjs.entry.js +318 -207
  2. package/dist/cjs/ez-dialog.cjs.entry.js +4 -4
  3. package/dist/cjs/ez-popup.cjs.entry.js +3 -3
  4. package/dist/cjs/ez-toast.cjs.entry.js +37 -0
  5. package/dist/cjs/ezui.cjs.js +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/collection-manifest.json +2 -1
  8. package/dist/collection/components/ez-combo-box/ez-combo-box.js +18 -8
  9. package/dist/collection/components/ez-dialog/ez-dialog.js +16 -12
  10. package/dist/collection/components/ez-form/assets/trash-can-outline.svg +3 -0
  11. package/dist/collection/components/ez-form/ez-form.js +9 -0
  12. package/dist/collection/components/ez-form/subcomponents/DataUnit.js +2 -1
  13. package/dist/collection/components/ez-form/subcomponents/form-metadata.js +1 -5
  14. package/dist/collection/components/ez-form/subcomponents/structure/Field.js +2 -3
  15. package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js +6 -3
  16. package/dist/collection/components/ez-popup/ez-popup.js +5 -5
  17. package/dist/collection/components/ez-search/ez-search.js +9 -7
  18. package/dist/collection/components/ez-toast/ez-toast.css +108 -0
  19. package/dist/collection/components/ez-toast/ez-toast.js +113 -0
  20. package/dist/collection/components/ez-upload/RemoteFile.js +89 -0
  21. package/dist/collection/components/ez-upload/ez-upload.css +16 -1
  22. package/dist/collection/components/ez-upload/ez-upload.js +246 -296
  23. package/dist/collection/utils/Application.js +34 -0
  24. package/dist/custom-elements/index.d.ts +6 -0
  25. package/dist/custom-elements/index.js +364 -219
  26. package/dist/esm/ez-button_16.entry.js +318 -207
  27. package/dist/esm/ez-dialog.entry.js +4 -4
  28. package/dist/esm/ez-popup.entry.js +3 -3
  29. package/dist/esm/ez-toast.entry.js +33 -0
  30. package/dist/esm/ezui.js +1 -1
  31. package/dist/esm/loader.js +1 -1
  32. package/dist/ezui/assets/trash-can-outline.svg +3 -0
  33. package/dist/ezui/ezui.esm.js +1 -1
  34. package/dist/ezui/p-1ff02df6.entry.js +1 -0
  35. package/dist/ezui/p-4a87d740.entry.js +1 -0
  36. package/dist/ezui/p-c3b18332.entry.js +1 -0
  37. package/dist/ezui/p-e9784201.entry.js +1 -0
  38. package/dist/types/components/ez-combo-box/ez-combo-box.d.ts +2 -1
  39. package/dist/types/components/ez-dialog/ez-dialog.d.ts +3 -3
  40. package/dist/types/components/ez-form/ez-form.d.ts +2 -0
  41. package/dist/types/components/ez-popup/ez-popup.d.ts +1 -1
  42. package/dist/types/components/ez-search/ez-search.d.ts +1 -1
  43. package/dist/types/components/ez-toast/ez-toast.d.ts +17 -0
  44. package/dist/types/components/ez-upload/RemoteFile.d.ts +14 -0
  45. package/dist/types/components/ez-upload/ez-upload.d.ts +49 -58
  46. package/dist/types/components.d.ts +95 -61
  47. package/dist/types/utils/Application.d.ts +6 -0
  48. package/package.json +1 -1
  49. package/react/components.d.ts +1 -0
  50. package/react/components.js +1 -0
  51. package/react/components.js.map +1 -1
  52. package/dist/ezui/p-40fe4f51.entry.js +0 -1
  53. package/dist/ezui/p-964a1871.entry.js +0 -1
  54. package/dist/ezui/p-caa50ec5.entry.js +0 -1
@@ -23,7 +23,7 @@ let EzDialog = class {
23
23
  */
24
24
  this.oppened = false;
25
25
  }
26
- handleButtonClick(selectedOption) {
26
+ async handleButtonClick(selectedOption) {
27
27
  this.oppened = false;
28
28
  this.ezChange.emit(selectedOption);
29
29
  }
@@ -32,10 +32,10 @@ let EzDialog = class {
32
32
  return (index.h("div", { class: "overlay" }, index.h("div", { class: "dialog" }, index.h("div", { class: this.critical === true ? "dialog__critical--indicator" : "dialog__warning--indicator" }), index.h("div", { class: "dialog__container" }, index.h("div", { class: "title__container" }, index.h("div", { class: "title__box" }, this.personalizedIconPath ?
33
33
  index.h("svg", { class: "iconePersonalizado", role: "img" }, index.h("use", { xlinkHref: this.personalizedIconPath }))
34
34
  :
35
- index.h("div", { class: this.critical ? "title-icon title-icon--critical" : "title-icon" }), index.h("div", { class: "title title--label" }, index.h("h2", null, this.title))), index.h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit("CANCEL"); } })), index.h("div", { class: "text text--primary text--medium message" }, this.message), this.confirm ?
36
- index.h("div", { class: "button-yes-no__container" }, index.h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick("N") }), index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
35
+ index.h("div", { class: this.critical ? "title-icon title-icon--critical" : "title-icon" }), index.h("div", { class: "title title--label" }, index.h("h2", null, this.ezTitle))), index.h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit(false); } })), index.h("div", { class: "text text--primary text--medium message" }, this.message), this.confirm ?
36
+ index.h("div", { class: "button-yes-no__container" }, index.h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(false) }), index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
37
37
  : undefined, !this.confirm ?
38
- index.h("div", { class: "button__ok--container" }, index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
38
+ index.h("div", { class: "button__ok--container" }, index.h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
39
39
  : undefined))));
40
40
  }
41
41
  return null;
@@ -25,9 +25,9 @@ let EzPopup = class {
25
25
  }
26
26
  render() {
27
27
  if (this.opened) {
28
- return (index.h(index.Host, null, index.h("div", { class: "overlay" }, index.h("div", { class: "popup col " + this.size }, index.h("div", { class: "popup__container" }, index.h("div", { class: "popup__content" }, index.h("div", { class: "popup__header" }, this.title ?
29
- index.h("div", { class: "title popup__title" }, this.title)
30
- : undefined, index.h("button", { class: this.title ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })), index.h("div", { class: "popup__expandable-content" }, index.h("slot", null))))))));
28
+ return (index.h(index.Host, null, index.h("div", { class: "overlay" }, index.h("div", { class: "popup col " + this.size }, index.h("div", { class: "popup__container" }, index.h("div", { class: "popup__content" }, index.h("div", { class: "popup__header" }, this.ezTitle ?
29
+ index.h("div", { class: "title popup__title" }, this.ezTitle)
30
+ : undefined, index.h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })), index.h("div", { class: "popup__expandable-content" }, index.h("slot", null))))))));
31
31
  }
32
32
  return null;
33
33
  }
@@ -0,0 +1,37 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-0f668cc5.js');
6
+
7
+ const ezToastCss = ":host{--toast-z-index:var(--more-visible, 2);--toast-color--secondary:var(--color--secondary, #383c45);--toast-title--primary:var(--title--primary, #2b3a54);--toast-space--small:var(--space--small, 6px);--toast--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{position:fixed;display:flex;bottom:100px;z-index:var(--toast-z-index);left:100px;width:30%;box-sizing:border-box;background-color:var(--toast-color--secondary);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-space--small);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--close__image);mask-image:var(--toast--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
+
9
+ let EzToast = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ /**
13
+ * Controla o tempo de exibição do componente em milissegundos.
14
+ */
15
+ this.fadeTime = 5000;
16
+ /**
17
+ * Adiciona ícone de check no componente.
18
+ */
19
+ this.useIcon = false;
20
+ }
21
+ async show() {
22
+ this.container.classList.add("toast__container--oppened");
23
+ this.container.style.animation = `fadein 0.5s, fadeout 0.5s ${this.fadeTime / 1000}s`;
24
+ setTimeout(() => {
25
+ this.container.classList.remove("toast__container--oppened");
26
+ this.container.style.animation = `none`;
27
+ }, this.fadeTime + 400);
28
+ }
29
+ render() {
30
+ return (index.h("div", { ref: (el) => this.container = el, class: "toast__container" }, this.useIcon ?
31
+ index.h("slot", { name: "icon" })
32
+ : undefined, index.h("div", { class: this.useIcon ? "message__container message__conteiner--icon" : "message__container", title: this.message }, " ", this.message, " "), index.h("button", { class: "btn-close", onClick: () => { this.container.classList.remove("toast__container--oppened"); this.container.style.animation = `none`; } })));
33
+ }
34
+ };
35
+ EzToast.style = ezToastCss;
36
+
37
+ exports.ez_toast = EzToast;
@@ -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],"oppened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"title":[1025],"handleButtonClick":[64]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errormessage":[1537],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errormessage":[1537],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"title":[1]}]]],["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],"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]}],[1,"ez-search",{"value":[1040],"label":[1537],"enabled":[1540],"errormessage":[1537],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errormessage":[1537],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsable-box",{"value":[1540],"label":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"maxFileSize":[514,"max-file-size"],"headers":[520],"timeout":[514],"withCredentials":[516,"with-credentials"],"formDataName":[513,"form-data-name"],"target":[513],"value":[16],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1040],"label":[513],"enabled":[516],"options":[1040],"errormessage":[1537],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"onlynumber":[516],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
18
+ return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"oppened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errormessage":[1537],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errormessage":[1537],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"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],"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]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errormessage":[1537],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errormessage":[1537],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsable-box",{"value":[1540],"label":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"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],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"onlynumber":[516],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
19
19
  });
@@ -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],"oppened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"title":[1025],"handleButtonClick":[64]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errormessage":[1537],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errormessage":[1537],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"updatePosition":[64],"show":[64],"hide":[64]}]]],["ez-popup.cjs",[[1,"ez-popup",{"size":[1],"opened":[1540],"useHeader":[1540,"use-header"],"title":[1]}]]],["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],"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]}],[1,"ez-search",{"value":[1040],"label":[1537],"enabled":[1540],"errormessage":[1537],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errormessage":[1537],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsable-box",{"value":[1540],"label":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"rows":[1538],"setFocus":[64],"setBlur":[64]}],[1,"ez-upload",{"maxFileSize":[514,"max-file-size"],"headers":[520],"timeout":[514],"withCredentials":[516,"with-credentials"],"formDataName":[513,"form-data-name"],"target":[513],"value":[16],"addFiles":[64]}],[1,"place-holder"],[1,"ez-button",{"label":[513],"enabled":[516],"mode":[513],"image":[513]}],[1,"ez-combo-box",{"value":[1040],"label":[513],"enabled":[516],"options":[1040],"errormessage":[1537],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"onlynumber":[516],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
17
+ return index.bootstrapLazy([["ez-dialog.cjs",[[1,"ez-dialog",{"confirm":[1028],"critical":[1028],"message":[1025],"oppened":[1540],"personalizedIconPath":[1025,"personalized-icon-path"],"ezTitle":[1025,"ez-title"],"handleButtonClick":[64]}]]],["ez-label-chip.cjs",[[1,"ez-label-chip",{"label":[513],"enabled":[516],"removable":[516],"value":[1540],"setFocus":[64],"setBlur":[64]}]]],["ez-time-input.cjs",[[1,"ez-time-input",{"label":[513],"viewValue":[1537,"view-value"],"value":[1026],"enabled":[516],"errormessage":[1537],"showSeconds":[516,"show-seconds"],"setFocus":[64],"setBlur":[64]}]]],["ez-action-chip.cjs",[[1,"ez-action-chip",{"label":[513],"enabled":[516]}]]],["ez-modal.cjs",[[1,"ez-modal",{"modalsize":[1],"align":[1],"oppened":[4],"closeesc":[4],"closeoutsideclick":[4]}]]],["ez-number-input.cjs",[[1,"ez-number-input",{"strvalue":[1025],"value":[1026],"label":[513],"enabled":[516],"errormessage":[1537],"precision":[1538],"prettyprecision":[1538],"textleft":[516],"formatnumber":[513],"setFocus":[64],"setBlur":[64],"handleFocusout":[64]}]]],["ez-popover.cjs",[[1,"ez-popover",{"autoclose":[516],"top":[1537],"left":[1537],"bottom":[1537],"right":[1537],"boxwidth":[513],"isOpened":[1540,"is-opened"],"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],"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]}],[1,"ez-search",{"value":[1537],"label":[1537],"enabled":[1540],"errormessage":[1537],"optionloader":[16],"showselectedvalue":[4],"showoptionvalue":[4]}],[1,"ez-numeric-input",{"label":[513],"value":[1538],"enabled":[516],"errormessage":[1537],"precision":[8],"prettyprecision":[8]}],[1,"ez-check",{"label":[513],"value":[1540],"enabled":[516],"mode":[513],"getMode":[64],"setFocus":[64]}],[1,"ez-collapsable-box",{"value":[1540],"label":[513],"showHide":[64]}],[1,"ez-tabselector",{"selectedindex":[1537],"selectedtab":[1537],"tabs":[1]}],[1,"ez-text-area",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"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],"searchmode":[4],"showselectedvalue":[4],"showoptionvalue":[4],"optionloader":[16],"_preSelection":[32],"_visibleOptions":[32]}],[1,"ez-calendar",{"value":[1040],"floating":[516],"show":[64],"hide":[64]}],[1,"ez-icon",{"size":[513],"href":[513]}],[1,"ez-text-input",{"label":[513],"value":[1537],"enabled":[516],"loading":[516],"errormessage":[1537],"onlynumber":[516],"mask":[1],"restrict":[1],"setFocus":[64],"setBlur":[64]}]]]], options);
18
18
  });
19
19
  };
20
20
 
@@ -23,7 +23,8 @@
23
23
  "./components/ez-tabselector/ez-tabselector.js",
24
24
  "./components/ez-text-area/ez-text-area.js",
25
25
  "./components/ez-text-input/ez-text-input.js",
26
- "./components/ez-time-input/ez-time-input.js"
26
+ "./components/ez-time-input/ez-time-input.js",
27
+ "./components/ez-toast/ez-toast.js"
27
28
  ],
28
29
  "compiler": {
29
30
  "name": "@stencil/core",
@@ -26,12 +26,18 @@ export class EzComboBox {
26
26
  }
27
27
  getText() {
28
28
  let text = '';
29
- const selected = this.value;
29
+ const selected = this.getSelectedOption();
30
30
  if (selected) {
31
31
  text = this.showselectedvalue ? `${selected.value} - ${selected.label}` : selected.label;
32
32
  }
33
33
  return text;
34
34
  }
35
+ getSelectedOption() {
36
+ if (typeof this.value === 'string' || this.value instanceof String) {
37
+ return this._visibleOptions.find(o => o.value === this.value);
38
+ }
39
+ return this.value;
40
+ }
35
41
  updateVisibleOptions() {
36
42
  let opts = this._source || [];
37
43
  if (!this.searchmode && this._criteria) {
@@ -102,9 +108,11 @@ export class EzComboBox {
102
108
  }
103
109
  }
104
110
  selectOption(opt) {
105
- if (this.value !== opt) {
106
- this.value = !(opt === null || opt === void 0 ? void 0 : opt.value) ? null : opt;
107
- this.ezChange.emit(this.value);
111
+ const currentOpt = this.getSelectedOption();
112
+ if (currentOpt !== opt) {
113
+ const adjustedOpt = !(opt === null || opt === void 0 ? void 0 : opt.value) ? null : opt;
114
+ this.value = adjustedOpt;
115
+ this.ezChange.emit(adjustedOpt);
108
116
  }
109
117
  else {
110
118
  this.internalUpdate();
@@ -237,11 +245,11 @@ export class EzComboBox {
237
245
  }; }
238
246
  static get properties() { return {
239
247
  "value": {
240
- "type": "unknown",
248
+ "type": "string",
241
249
  "mutable": true,
242
250
  "complexType": {
243
- "original": "Option",
244
- "resolved": "Option",
251
+ "original": "Option|string",
252
+ "resolved": "Option | string",
245
253
  "references": {
246
254
  "Option": {
247
255
  "location": "local"
@@ -253,7 +261,9 @@ export class EzComboBox {
253
261
  "docs": {
254
262
  "tags": [],
255
263
  "text": "Valor selecionado no campo"
256
- }
264
+ },
265
+ "attribute": "value",
266
+ "reflect": true
257
267
  },
258
268
  "label": {
259
269
  "type": "string",
@@ -14,7 +14,7 @@ export class EzDialog {
14
14
  */
15
15
  this.oppened = false;
16
16
  }
17
- handleButtonClick(selectedOption) {
17
+ async handleButtonClick(selectedOption) {
18
18
  this.oppened = false;
19
19
  this.ezChange.emit(selectedOption);
20
20
  }
@@ -32,17 +32,17 @@ export class EzDialog {
32
32
  :
33
33
  h("div", { class: this.critical ? "title-icon title-icon--critical" : "title-icon" }),
34
34
  h("div", { class: "title title--label" },
35
- h("h2", null, this.title))),
36
- h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit("CANCEL"); } })),
35
+ h("h2", null, this.ezTitle))),
36
+ h("button", { class: "btn-close", onClick: () => { this.oppened = false; this.ezChange.emit(false); } })),
37
37
  h("div", { class: "text text--primary text--medium message" }, this.message),
38
38
  this.confirm ?
39
39
  h("div", { class: "button-yes-no__container" },
40
- h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick("N") }),
41
- h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
40
+ h("ez-button", { class: "button__no", mode: "link", label: "N\u00E3o", onClick: () => this.handleButtonClick(false) }),
41
+ h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
42
42
  : undefined,
43
43
  !this.confirm ?
44
44
  h("div", { class: "button__ok--container" },
45
- h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick("S") }))
45
+ h("ez-button", { label: "Ok", onClick: () => this.handleButtonClick(true) }))
46
46
  : undefined))));
47
47
  }
48
48
  return null;
@@ -144,7 +144,7 @@ export class EzDialog {
144
144
  "attribute": "personalized-icon-path",
145
145
  "reflect": false
146
146
  },
147
- "title": {
147
+ "ezTitle": {
148
148
  "type": "string",
149
149
  "mutable": true,
150
150
  "complexType": {
@@ -158,7 +158,7 @@ export class EzDialog {
158
158
  "tags": [],
159
159
  "text": "Define o t\u00EDtulo do componente."
160
160
  },
161
- "attribute": "title",
161
+ "attribute": "ez-title",
162
162
  "reflect": false
163
163
  }
164
164
  }; }
@@ -173,20 +173,24 @@ export class EzDialog {
173
173
  "text": "Evento disparado ao clicar em algum dos bot\u00F5es de confirma\u00E7\u00E3o."
174
174
  },
175
175
  "complexType": {
176
- "original": "string",
177
- "resolved": "string",
176
+ "original": "boolean",
177
+ "resolved": "boolean",
178
178
  "references": {}
179
179
  }
180
180
  }]; }
181
181
  static get methods() { return {
182
182
  "handleButtonClick": {
183
183
  "complexType": {
184
- "signature": "(selectedOption: any) => Promise<void>",
184
+ "signature": "(selectedOption: boolean) => Promise<void>",
185
185
  "parameters": [{
186
186
  "tags": [],
187
187
  "text": ""
188
188
  }],
189
- "references": {},
189
+ "references": {
190
+ "Promise": {
191
+ "location": "global"
192
+ }
193
+ },
190
194
  "return": "Promise<void>"
191
195
  },
192
196
  "docs": {
@@ -0,0 +1,3 @@
1
+ <svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M3.333 0V0.667H0V2H0.667V10.667C0.667 11.0205 0.80744 11.3596 1.05743 11.6096C1.30741 11.8596 1.64647 12 2 12H8.667C9.02053 12 9.35959 11.8596 9.60957 11.6096C9.85956 11.3596 10 11.0205 10 10.667V2H10.667V0.667H7.333V0H3.333ZM2 2H8.667V10.667H2V2ZM3.333 3.333V9.333H4.667V3.333H3.333ZM6 3.333V9.333H7.333V3.333H6Z" fill="white"/>
3
+ </svg>
@@ -12,6 +12,7 @@ export class EzForm {
12
12
  this._dataUnits = new Map();
13
13
  this._duSources = new Map();
14
14
  this._tabPositionByField = new Map();
15
+ this._duToLoad = [];
15
16
  }
16
17
  cleanPreparedMetadata() {
17
18
  this._preparedMetadata = undefined;
@@ -151,6 +152,9 @@ export class EzForm {
151
152
  };
152
153
  this._preparedMetadata = metadata.map((form, index) => {
153
154
  const du = form.dataUnit;
155
+ if (form.autoLoad) {
156
+ this._duToLoad.push(du);
157
+ }
154
158
  this.decorateDU(du);
155
159
  const duName = du.name;
156
160
  this._duSources.set(duName, du);
@@ -192,6 +196,10 @@ export class EzForm {
192
196
  }
193
197
  }
194
198
  }
199
+ componentDidRender() {
200
+ this._duToLoad.forEach(du => du.load());
201
+ this._duToLoad = [];
202
+ }
195
203
  loadSearch(argument, context) {
196
204
  const fieldSearchExecutor = this.parseExecutor(this.fieldsearchexecutor);
197
205
  if (fieldSearchExecutor) {
@@ -240,6 +248,7 @@ export class EzForm {
240
248
  static get styleUrls() { return {
241
249
  "$": ["ez-form.css"]
242
250
  }; }
251
+ static get assetsDirs() { return ["assets"]; }
243
252
  static get properties() { return {
244
253
  "metadataexecutor": {
245
254
  "type": "string",
@@ -1,5 +1,6 @@
1
1
  import { changeFieldValue, changesSaved, clearEdition, dataLoaded, dataLoading, insertRecord, nextRecord, previousRecord, recordRemoved, removingRecord, savingChanges } from '../store/Form.actions';
2
2
  import { selectRecordChanges, selectCurrentRecordIndex, selectLoadingData, selectNewRecordIndex, selectDataUnitChanges, selectErrorMessage } from '../store/Form.selectors';
3
+ import Application from '../../../utils/Application';
3
4
  export default class DataUnit {
4
5
  constructor(name, unitLabel, cardinality = '1', parentDU = null) {
5
6
  this.name = name;
@@ -276,7 +277,7 @@ export default class DataUnit {
276
277
  });
277
278
  const result = this.recordsValidator.validateRecords(this, recordsToValidate, triggedBy);
278
279
  if (result.message) {
279
- alert(result.message);
280
+ Application.info(result.message);
280
281
  }
281
282
  return result.isValid;
282
283
  }
@@ -19,11 +19,6 @@ export class FormMetadata {
19
19
  properties.push({ name: "options", value: JSON.stringify(objOpts) });
20
20
  }
21
21
  else if (userInterface === "FILE") {
22
- /*<URL>http://localhost:8080/2a3skw-graphql/uploadFiles</URL>
23
- <HEADERS>
24
- <HEADER NAME="Authorization">dsfs</HEADER>
25
- </HEADER>
26
- </field> */
27
22
  const urlElement = element.querySelector('URL');
28
23
  const headersElement = element.querySelectorAll('HEADERS>HEADER');
29
24
  if (urlElement) {
@@ -36,6 +31,7 @@ export class FormMetadata {
36
31
  });
37
32
  properties.push({ name: "HEADERS", value: JSON.stringify(headers) });
38
33
  }
34
+ this.addPropertyIfExists(properties, element, "maxfiles");
39
35
  }
40
36
  else {
41
37
  if (!label) {
@@ -67,10 +67,9 @@ export const Field = ({ dataUnit, field, forceScroll, enabled }) => {
67
67
  const target = getProp(properties, 'URL');
68
68
  const strHeaders = getProp(properties, 'HEADERS');
69
69
  const headers = strHeaders ? JSON.parse(strHeaders) : {};
70
+ const maxfiles = Number(getProp(properties, "maxfiles") || 0);
70
71
  return (h("div", { class: "col col--sd-12 padding--small" },
71
- h("ez-upload", { onEzChange: (event) => {
72
- changeFieldHandler(event.target['value']);
73
- }, target: target, headers: headers, value: value })));
72
+ h("ez-upload", { value: value, label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.detail), urlupload: target, requestheaders: headers, maxfiles: maxfiles })));
74
73
  case 'DATE':
75
74
  return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData ? h("place-holder", null) :
76
75
  h("ez-date-input", { value: !value ? null : DateUtils.clearTime(value), label: formattedLabel, enabled: isEnabled, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem), key: key }));
@@ -1,8 +1,11 @@
1
1
  import { h } from "@stencil/core";
2
+ import Application from "../../../../utils/Application";
2
3
  function removeHandler(dataUnit) {
3
- if (confirm("Tem certeza que deseja Remover?")) {
4
- dataUnit.remove();
5
- }
4
+ Application.confirm("Exclusão de registro", "Tem certeza que deseja Remover?", null, true).then(ok => {
5
+ if (ok) {
6
+ dataUnit.remove();
7
+ }
8
+ });
6
9
  }
7
10
  export const NavigationBar = ({ dataUnit: du, buttonProps, enabled }) => {
8
11
  if (buttonProps.previousVisible
@@ -22,10 +22,10 @@ export class EzPopup {
22
22
  h("div", { class: "popup__container" },
23
23
  h("div", { class: "popup__content" },
24
24
  h("div", { class: "popup__header" },
25
- this.title ?
26
- h("div", { class: "title popup__title" }, this.title)
25
+ this.ezTitle ?
26
+ h("div", { class: "title popup__title" }, this.ezTitle)
27
27
  : undefined,
28
- h("button", { class: this.title ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })),
28
+ h("button", { class: this.ezTitle ? "btn-close" : "btn-close btn-close--solo", onClick: () => { this.opened = false; this.ezChange.emit("CANCEL"); } })),
29
29
  h("div", { class: "popup__expandable-content" },
30
30
  h("slot", null))))))));
31
31
  }
@@ -94,7 +94,7 @@ export class EzPopup {
94
94
  "reflect": true,
95
95
  "defaultValue": "false"
96
96
  },
97
- "title": {
97
+ "ezTitle": {
98
98
  "type": "string",
99
99
  "mutable": false,
100
100
  "complexType": {
@@ -108,7 +108,7 @@ export class EzPopup {
108
108
  "tags": [],
109
109
  "text": "Define se o t\u00EDtulo do componente."
110
110
  },
111
- "attribute": "title",
111
+ "attribute": "ez-title",
112
112
  "reflect": false
113
113
  }
114
114
  }; }
@@ -20,9 +20,9 @@ export class EzSearch {
20
20
  }
21
21
  }
22
22
  onComboChange(evt) {
23
- evt.stopPropagation;
24
- this.value = this._comboElement.value;
25
- this.ezChange.emit(this.value);
23
+ evt.stopPropagation();
24
+ this.value = evt.detail;
25
+ this.ezChange.emit(evt.detail);
26
26
  }
27
27
  render() {
28
28
  return (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 }));
@@ -38,11 +38,11 @@ export class EzSearch {
38
38
  }; }
39
39
  static get properties() { return {
40
40
  "value": {
41
- "type": "unknown",
41
+ "type": "string",
42
42
  "mutable": true,
43
43
  "complexType": {
44
- "original": "Option",
45
- "resolved": "Option",
44
+ "original": "Option|string",
45
+ "resolved": "Option | string",
46
46
  "references": {
47
47
  "Option": {
48
48
  "location": "import",
@@ -55,7 +55,9 @@ export class EzSearch {
55
55
  "docs": {
56
56
  "tags": [],
57
57
  "text": "C\u00F3digo do registro selecionado"
58
- }
58
+ },
59
+ "attribute": "value",
60
+ "reflect": true
59
61
  },
60
62
  "label": {
61
63
  "type": "string",
@@ -0,0 +1,108 @@
1
+ :host {
2
+ --toast-z-index: var(--more-visible, 2);
3
+ --toast-color--secondary: var(--color--secondary, #383c45);
4
+ --toast-title--primary: var(--title--primary, #2b3a54);
5
+ --toast-space--small: var(--space--small, 6px);
6
+ --toast--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>');
7
+ }
8
+
9
+ .toast__container {
10
+ position: fixed;
11
+ display: flex;
12
+ bottom: 100px;
13
+ z-index: var(--toast-z-index);
14
+ left: 100px;
15
+ width: 30%;
16
+ box-sizing: border-box;
17
+ background-color: var(--toast-color--secondary);
18
+ border-radius: 6px;
19
+ align-items: center;
20
+ padding: 12px;
21
+ visibility: hidden;
22
+ }
23
+
24
+ .message__container {
25
+ font-family: "Sora", "Algerian";
26
+ text-shadow: 0 0 0 #353535, 0 0 1px transparent;
27
+ color: #FFFFFF;
28
+ font-size: 14px;
29
+ width: 90%;
30
+ overflow: hidden;
31
+ white-space: nowrap;
32
+ text-overflow: ellipsis;
33
+ }
34
+
35
+ .message__conteiner--icon {
36
+ padding-left: var(--toast-space--small);
37
+ width: 80%;
38
+ }
39
+
40
+ .btn-close {
41
+ display: flex;
42
+ justify-content: flex-end;
43
+ padding: 0;
44
+ outline: none;
45
+ width: 10%;
46
+ border: none;
47
+ background-color: unset;
48
+ cursor: pointer;
49
+ }
50
+
51
+ .btn-close::after {
52
+ content: '';
53
+ display: flex;
54
+ background-color: #FFFFFF;
55
+ width: 12px;
56
+ height: 12px;
57
+ -webkit-mask-image: var(--toast--close__image);
58
+ mask-image: var(--toast--close__image);
59
+ }
60
+
61
+ .toast__container--oppened {
62
+ animation: fadein 0.5s, fadeout 0.5s 3s;
63
+ visibility: visible;
64
+ }
65
+
66
+ @-webkit-keyframes fadein {
67
+ from {
68
+ left: -100px;
69
+ opacity: 0;
70
+ }
71
+ to {
72
+ left: 100px;
73
+ opacity: 1;
74
+ }
75
+ }
76
+
77
+ @keyframes fadein {
78
+ from {
79
+ left: -100px;
80
+ opacity: 0;
81
+ }
82
+ to {
83
+ left: 100px;
84
+ opacity: 1;
85
+ }
86
+ }
87
+
88
+ @-webkit-keyframes fadeout {
89
+ from {
90
+ left: 100px;
91
+ opacity: 1;
92
+ }
93
+ to {
94
+ bottom: 0;
95
+ opacity: 0;
96
+ }
97
+ }
98
+
99
+ @keyframes fadeout {
100
+ from {
101
+ left: 100px;
102
+ opacity: 1;
103
+ }
104
+ to {
105
+ bottom: 0;
106
+ opacity: 0;
107
+ }
108
+ }