gdx-ui 1.15.3 → 2.0.1

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 (56) hide show
  1. package/base.css +1 -1
  2. package/components/autocomplete/Autocomplete.js +64 -53
  3. package/components/badge/Badge.js +2 -2
  4. package/components/box/Box.js +34 -31
  5. package/components/dialog/Dialog.js +15 -26
  6. package/components/editable/Editable.js +105 -95
  7. package/components/editable/EditableArea.js +3 -0
  8. package/components/flex/Flex.js +51 -22
  9. package/components/forms/LabelInput.js +13 -4
  10. package/components/forms/LabelValue.js +13 -4
  11. package/components/images/CarouselImages.js +11 -12
  12. package/components/images/Img.js +14 -26
  13. package/components/images/Thumb.js +16 -40
  14. package/components/images/{ImageZoom.js → ZoomImage.js} +74 -111
  15. package/components/images/{PictureZoomBtns.js → ZoomImageButtons.js} +50 -63
  16. package/components/images/{Picture.js → ZoomImageSquare.js} +3 -3
  17. package/components/images/index.js +33 -11
  18. package/components/images/useImageLoader.js +76 -0
  19. package/components/list/ScrollableList.js +1 -1
  20. package/components/snackbar/Snackbar.js +1 -1
  21. package/components/table/Table.js +14 -1
  22. package/components/util/Note.js +14 -5
  23. package/components/util/Text.js +41 -9
  24. package/components/util/Title.js +35 -8
  25. package/components/util/index.js +0 -11
  26. package/components/widget/Widget.js +16 -5
  27. package/hooks/index.js +11 -0
  28. package/hooks/useAutocomplete.js +103 -0
  29. package/package.json +1 -1
  30. package/stories/box/Box.stories.js +32 -0
  31. package/stories/editable/Editable.stories.js +26 -0
  32. package/stories/editable/Editor.stories.js +33 -0
  33. package/stories/forms/Autocomplete.stories.js +101 -0
  34. package/stories/images/CarouselImages.stories.js +31 -0
  35. package/stories/images/{images.stories.js → Images.stories.js} +1 -1
  36. package/stories/images/ZoomImage.stories.js +24 -0
  37. package/stories/images/ZoomImageButtons.stories.js +23 -0
  38. package/stories/images/ZoomImageSquare.stories.js +23 -0
  39. package/stories/layout/Flex.stories.js +180 -0
  40. package/stories/list/ScrollableList.stories.js +37 -8
  41. package/stories/utils/Badge.stories.js +29 -0
  42. package/stories/utils/Expanded.stories.js +18 -7
  43. package/stories/utils/Loader.stories.js +32 -0
  44. package/stories/utils/Note.stories.js +38 -0
  45. package/stories/utils/Snackbar.stories.js +46 -0
  46. package/stories/utils/Text.stories.js +40 -0
  47. package/stories/utils/Tooltip.stories.js +22 -0
  48. package/stories/widget/Widget.stories.js +59 -0
  49. package/components/images/PictureZoomSquare.js +0 -60
  50. package/components/list/SortableList.js +0 -138
  51. package/components/list/SortableListOLD.js +0 -121
  52. package/components/scroller/ListScroller.js +0 -113
  53. package/components/util/Anchor.js +0 -30
  54. package/stories/flex/Flex.stories.js +0 -35
  55. package/stories/list/SorteableList.stories.js +0 -45
  56. /package/stories/images/{thumb.stories.js → Thumb.stories.js} +0 -0
package/base.css CHANGED
@@ -1 +1 @@
1
- .checkmark:after,.clearfix:after,.clearfix:before,.form-inline:after,.form-inline:before,.input-inside:after,.input-inside:before,.slider:before,.toolbar-group:after,.toolbar-group:before{content:""}.clearfix:after,.form-inline:after,.input-inside:after,.toolbar-group:after{clear:both}.input-inside,body,button,input,select,textarea{font-family:'Open Sans',sans-serif}.app-layout,.btn,.input-inside,.row-item,.snackbar,.thumb,body,html,input,select,textarea{box-sizing:border-box}.btn,.center,.pagination-input{text-align:center}.btn,a,button.anchor{text-decoration:none}.clearfix:after,.clearfix:before{display:table;line-height:0}.widget-hover{box-shadow:0 6px 10px rgba(0,0,0,.2)}.box,.dialog{-moz-box-shadow:0 4px 18px rgba(0,0,0,.1)}body{background:var(--body-bg);color:var(--color);font-size:14px;font-weight:500;line-height:1.5em}.code-editor,code,pre{font-family:monospace}body,html{height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.5em;margin:0 0 15px;padding:0}.btn-link,.strong,h3,h4,h5,h6{font-weight:700}h1{font-size:25px}h2{font-size:20px}h3{font-size:15px}.btn,h4,h5,h6{font-size:14px}a,button.anchor{color:#1D9EFC;background:0 0;border:none;cursor:pointer;padding:0}a:hover,button.anchor:hover{color:#0390f7}p{margin:0 0 15px}code,pre{color:#7b7b7b}pre{background:var(--body-bg);border-radius:4px;border:1px solid var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}.box,.carousel{background:var(--el-bg)}.btn,hr{border:none}hr{border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{min-height:100%;display:flex;flex-direction:column}.btn,.input-inside,input,select,textarea{display:inline-block;vertical-align:middle}.app-body{flex-grow:1}.app-footer,.app-header{flex-grow:0;flex-shrink:0}.carousel-dots,.flex-align-center,.loader-squares{justify-content:center}.wrapper .span-side{width:250px}.wrapper .span-double{width:835px}.wrapper .adds-4 .span-add{width:263.75px}.wrapper .adds-3 .span-add{width:356.67px}.wrapper .span-half{width:542.5px}:root{--base-margin:15px}.theme-light,:root{--color:#272729;--btn-bg:#ECEDEF;--btn-bg-darker:#dee0e3;--el-bg:#FFFFFF;--el-bg-highlight:#f2f5f7;--body-bg:#f1f5f8;--border-color:#DDD;--overlay-color:rgba(0, 0, 0, 0.2);--input-bg:#FFFFFF}@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk5hkaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:500;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:800;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4n.ttf) format('truetype')}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);border-radius:4px;position:relative;margin-bottom:15px}.box .box-footer .row,.box .box-toolbar .form-element,.box .box-toolbar .row,.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.box-header{color:#888}.box .box-top-btn{position:absolute;right:10px;top:10px}.carousel,.carousel-img-wrapper,.input-wrapper{position:relative}.box .box{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:1px solid var(--border-color)}button:focus-visible{outline:#1D9EFC auto 1px}.btn-circle:active,.btn:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle:focus-visible,.btn:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.btn{border-radius:4px;margin:0;cursor:pointer;padding:10px 20px;transition:background .2s cubic-bezier(.4,0,.2,1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:1px solid transparent;background:0 0;color:#1D9EFC}.btn-normal-default{background:var(--btn-bg);border:1px solid var(--btn-bg);color:var(--color)}.btn-outline-default{border:1px solid #a2a2a2;color:var(--color)}.btn-link-default{color:var(--color)}.btn-link-default:hover{background:#ECEDEF}.btn-normal-default:hover,.btn-outline-default:hover{background:var(--btn-bg-darker);border-color:var(--btn-bg-darker)}.btn-normal-primary{background:#1D9EFC;border:1px solid #1D9EFC;color:#FFF}.btn-outline-primary{border:1px solid #1D9EFC;color:#1D9EFC}.btn-link-primary{color:#1D9EFC}.btn-link-primary:hover{background:#e2f1fb}.btn-normal-primary:hover,.btn-outline-primary:hover{color:#FFF;background:#038aed}.btn-normal-alert{background:#ea0835;border:1px solid #ea0835;color:#FFF}.btn-outline-alert{border:1px solid #ea0835;color:#ea0835}.btn-link-alert{color:#ea0835}.btn-link-alert:hover{background:#FCC5C5}.btn-normal-alert:hover,.btn-outline-alert:hover{color:#FFF;background:#c3072c}.btn-normal-success{background:#1bd741;border:1px solid #1bd741;color:#FFF}.btn-outline-success{border:1px solid #1bd741;color:#1bd741}.btn-link-success{color:#1bd741}.btn-link-success:hover{background:#DDFFD4}.btn-normal-success:hover,.btn-outline-success:hover{color:#FFF;background:#16b336}.btn-normal-warning{background:#ffd500;border:1px solid #ffd500}.btn-outline-warning{border:1px solid #ffd500;color:#ca0}.btn-link-warning{color:#ca0}.btn-link-warning:hover{background:#fe9}.btn-normal-warning:hover,.btn-outline-warning:hover{color:#fff;background:#f0c800}.btn-size-large{font-size:20px;padding:15px 30px}.btn-size-small{font-size:12px;font-weight:unset;padding:4px 8px}.btn-circle{border-radius:50%;border:none;height:30px;width:30px;margin:0;padding-top:2px}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-alert:active,.input-alert:focus{outline:rgba(234,8,53,.7) solid 3px!important}.btn-circle-bg-clear{background:rgba(255,255,255,.1)}.btn-circle-bg-solid{background:var(--btn-bg)}.btn-circle:hover{background:#1D9EFC}.btn-circle:hover svg{color:#fff!important}.btn-circle-size-default{font-size:1em}.btn-circle-size-small{width:18px;height:18px;padding-top:0;font-size:10px}.btn-circle-size-small svg{margin-left:-2px;margin-top:3px}.btn-circle-size-large{width:48px;height:48px;padding-top:0;font-size:15px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:focus-visible{outline:#c7072d solid 2px;outline-offset:2px}.btn-success:active{outline:rgba(27,215,65,.7) solid 3px!important}.btn-success:focus-visible{outline:#17b737 solid 2px;outline-offset:2px}.btn-warning:active{outline:rgba(255,213,0,.7) solid 3px!important}.btn-warning:focus-visible{outline:#dbb700 solid 2px;outline-offset:2px}.carousel{width:100%;overflow:hidden;border-radius:4px;user-select:none}.carousel-slide{display:flex;height:100%;will-change:transform}.carousel-img-wrapper{min-width:100%;height:100%;overflow:hidden}.carousel-btn,.carousel-dots,.carousel-title,.dialog,.dialog-close,.dropdown{position:absolute}.carousel-img{width:100%;height:100%;object-fit:cover;display:block}.checkmark,.slider:before{height:15px;border-radius:50%}.carousel-title{left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;padding:15px;font-size:20px;border-radius:0 0 4px 4px}.carousel-btn{top:50%;transform:translateY(-50%);z-index:9}.carousel-btn-left{left:15px}.carousel-btn-right{right:15px}.carousel-dots{left:0;right:0;bottom:15px;display:flex;gap:15px;z-index:9}.carousel-dot-btn{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.dialog-title,.table .underlined td,.table .underlined th,.table thead td,.table thead th,.tabs{border-bottom:solid 1px var(--border-color)}.dialog{background:var(--el-bg);-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);border-radius:4px;left:50%;transform:translateX(-50%);min-width:320px;max-width:90vw;width:auto;margin:0;z-index:999;display:flex;flex-direction:column}.dropdown,.slider{left:0;cursor:pointer}.dialog h1,.dialog h2,.dialog h3{margin:0}.dialog-title{padding:15px;border-radius:4px 4px 0 0}.dialog-content{padding:15px}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-close{top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.dialog-primary>.dialog-title{background:#1D9EFC;color:#fff}.dialog-alert>.dialog-title{background:#ea0835;color:#fff}.dialog-success>.dialog-title{background:#1bd741;color:#fff}.dialog-warning>.dialog-title{background:#ffd500}.dialog .box{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:1px solid var(--border-color)!important}.dialog:focus{outline:0}.dropdown{background:var(--el-bg);-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);border-radius:4px;border:1px solid var(--border-color);padding:5px 0;z-index:99;min-width:400px;max-width:600px;margin:0}.dropdown li{list-style:none;margin:0}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:var(--el-bg-highlight)}.dropdown-active{background-color:#1D9EFC!important;color:#fff}.navbar-menu-item .dropdown a{margin:0!important;padding:0!important;color:var(--color)!important}.flex{display:flex;gap:15px;margin-bottom:15px}.flex-align-right{justify-content:flex-end}.flex-align-left{justify-content:flex-start}.flex-align-justify{justify-content:space-between}.flex-valign-center{align-items:center}.flex-valign-top{align-items:flex-start}.flex-valign-bottom{align-items:flex-end}.flex-valign-stretch{align-items:stretch}input:focus,select:focus,textarea:focus{outline:rgba(29,158,252,.7) solid 3px;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color)}.input-inside,input,select,textarea{padding:10px;font-size:14px;line-height:1.5em;border-radius:4px;border:1px solid var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;margin-bottom:0!important}.form-element,fieldset,fieldset label{margin-bottom:15px}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px}.input-inside:hover,input:hover,select:hover,textarea:hover{-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border-color:#4fb4fd}.inline-elements .form-element,.toolbar .form-element{margin-bottom:0}input[type=color]{border:none;padding:0}.input-alert{-webkit-transition:none!important;transition:none!important;border-color:#ea0835!important}.code-editor:focus,.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-reset-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2}.input-inside{padding:0 4px 0 0;position:relative}.input-btns,.slider,.slider:before{position:absolute}.input-inside select{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0;padding:0 0 0 4px;color:#888;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.badge .btn-circle,.label .btn-circle,.swith-label{margin-left:5px}.input-focus,.input-inside:focus{border-color:#1D9EFC;outline:rgba(29,158,252,.7) solid 3px}.input-inside select:focus{background:#e2f1fb}.input-inside :first-child{border-radius:4px 0 0 4px}.input-inside :last-child{border-radius:0 4px 4px 0}.input-inside .btn-circle{height:24px;width:24px}.input-inside,textarea{height:auto}.input-btns{right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#888;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside:after,.input-inside:before{display:table;line-height:0}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.input-inside input,.input-inside textarea{border:0!important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.input-inside:focus-within{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.input-inside input:focus,.input-inside select:focus{border-color:transparent}input.disabled,input[disabled]{background-color:var(--el-bg-color);border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding:4px 0!important}input:-moz-read-only,input:read-only{color:brown;border:none!important}input[type=checkbox],input[type=radio]{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}select{margin-top:0;color:var(--color)}textarea{resize:none}label{display:block}label input,label select,label textarea,td label{margin-bottom:0}fieldset{border:1px solid var(--border-color);border-radius:4px}legend{color:var(--dark-gray);padding:0 5px}.form-inline:after,.form-inline:before{display:table;line-height:0}.form-inline button,.form-inline input,.form-inline label,.form-inline select,.form-inline textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.toolbar-group:after,.toolbar-group:before{display:table;line-height:0}.toolbar-group button,.toolbar-group input,.toolbar-group label,.toolbar-group select,.toolbar-group textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;margin-right:-5px;border-right:solid 1px #FFF;border-radius:0}.toolbar-group button:first-child,.toolbar-group input:first-child,.toolbar-group label:first-child,.toolbar-group select:first-child,.toolbar-group textarea:first-child{border-radius:4px 0 0 4px}.toolbar-group button:last-child,.toolbar-group input:last-child,.toolbar-group label:last-child,.toolbar-group select:last-child,.toolbar-group textarea:last-child{border-radius:0 4px 4px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#888;opacity:1}:-ms-input-placeholder{color:var(--border-color)}::-ms-input-placeholder{color:var(--border-color)}label.switch{margin-top:-5px}.switch{position:relative;display:inline-block;width:32px;height:19px}.switch input{opacity:0;width:0;height:0;outline:0}.form-switch{display:inline-block}.slider{-webkit-box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;-moz-box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;border-radius:15px;-webkit-transition:background-color .1s;background-color:#ccc;bottom:-1px;right:1px;top:1px;transition:background-color .1s}.slider:before{left:2px;width:15px;-webkit-transition:.1s;background-color:#fff;bottom:2px;transition:.1s}input:checked+.slider{background-color:#1bd741}input:focus+.slider{box-shadow:0 0 1px #1bd741}input:checked+.slider:before{transform:translateX(12px)}.switch input[type=checkbox]:focus+.slider{outline:0}.switch input[type=checkbox]:focus-visible+.slider{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label{color:#888}.input-label-alert{color:#ea0835}.cust-radio{display:block;position:relative;padding-left:18px;padding-right:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cust-radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:4px;left:0;width:15px;background-color:var(--border-color);-webkit-box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;-moz-box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important}.cust-radio input:checked~.checkmark{background-color:#1D9EFC}.checkmark:after{position:absolute;display:none}.cust-radio input:checked~.checkmark:after{display:block}.cust-radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}.hidden-arrows::-webkit-inner-spin-button,.hidden-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.information,.row{margin-bottom:15px}.code-editor{color:#7b7b7b;font-size:12px;border:0;padding:0;width:100%}.information,.label{border-radius:4px}.information{padding:15px;position:relative}.information-icon{position:absolute;top:15px;left:15px;font-size:1.2em;opacity:.75}.information-content-icon{padding-left:30px}.information-large{font-size:25px;padding:30px}.information-default{background:var(--el-bg-highlight)}.information-primary{background:#e2f1fb;color:#1D9EFC}.information-primary hr{border-bottom:solid 1px #1D9EFC}.information-warning{background:#ffd500;color:var(--color)}.information-success{background:#DDFFD4;color:#1bd741}.information-success hr{border-bottom:solid 1px #1bd741}.information-alert{background:#FCC5C5;color:#ea0835}.information-alert hr{border-bottom:solid 1px #ea0835}.badge,.label{cursor:default;display:inline-block;line-height:1.5em;color:#fff;vertical-align:baseline;white-space:nowrap;position:relative}.badge:empty,.label:empty{display:none}.badge-default,.label-default{background-color:var(--btn-bg);color:#7b7b7b}.badge.badge-primary,.badge.label-primary,.label.badge-primary,.label.label-primary{background-color:#1D9EFC}.badge.badge-warning,.badge.label-warning,.label.badge-warning,.label.label-warning{color:var(--color);background-color:#ffd500}.badge.badge-success,.badge.label-success,.label.badge-success,.label.label-success{background-color:#1bd741}.badge.badge-alert,.badge.label-alert,.label.badge-alert,.label.label-alert{background-color:#ea0835}.badge{border-radius:20px;padding:2px 10px}.badge-small{padding:0 10px;font-size:12px}.badge-closable{padding-right:0}.clear-list ul,ul.clear-list{margin:0 0 15px;padding:0}.clear-list ul li,ul.clear-list li{margin:0;padding:0;list-style:none;line-height:1.5em}.inline-list ul,ul.inline-list{display:flex;gap:15px;margin:0 0 15px;padding:0}.inline-list ul li,ul.inline-list li{padding:0;margin:0;list-style:none}.loader-squares{display:flex;gap:8px;align-items:center;height:40px}.loader-square{width:16px;height:16px;border-radius:4px;animation:loader-grow .7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center;background-color:#1895ff}.loader-square:nth-child(1){animation-delay:0s}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}@keyframes loader-grow{0%,100%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.loader-wrapper{position:relative;z-index:9999}.loader-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}header{background:#212121;border-bottom:solid 3px #1D9EFC}.navbar-responsive{-webkit-backdrop-filter:blur(5px);align-items:center;backdrop-filter:blur(5px);color:#fff;display:flex;min-height:60px;padding:0 15px;position:relative;z-index:100}.navbar-logo img{height:40px}.navbar-main{flex:1}.navbar-menu{display:flex;list-style:none;margin:0;padding:0}.navbar-menu .navbar-menu-item{position:relative;cursor:pointer;display:inline-block;z-index:888}.navbar-icon-area,.navbar-menu .navbar-menu-item>.navbar-submenu{-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);position:absolute;top:100%}.navbar-menu .navbar-menu-item a{color:#fff;display:block;padding:19px 30px}.navbar-menu .navbar-menu-item>.navbar-submenu{display:none;left:0;min-width:160px;z-index:999;color:var(--color)!important;padding:4px 0;background:var(--el-bg);-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);border-radius:4px;border:1px solid var(--border-color)}.navbar-menu .navbar-menu-item>.navbar-submenu a{color:var(--color);padding:10px 15px}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover{background-color:#1D9EFC;color:#fff}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover>a{color:#fff}.navbar-icon-area,.navbar-menu,.navbar-menu-item.has-submenu>.navbar-submenu{color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-menu-item.open>.navbar-submenu,.navbar-menu-item:hover>.navbar-submenu{display:block}.navbar-icon-btn:hover,.navbar-menu-item:hover,.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-submenu{list-style:none;margin:0;padding:0}.navbar-icons{display:flex;gap:.5rem}.navbar-icons .navbar-icon-btn{color:#fff;background:0 0;border:none;cursor:pointer;font-size:1.2em;height:40px;width:40px;display:flex;align-items:center;justify-content:center;opacity:.8}.navbar-icons .navbar-icon-btn:hover{opacity:1}.navbar-hamburger{display:none;background:0 0;border:none;font-size:1.5em;margin-left:1rem;cursor:pointer;color:#fff}.navbar-icon-area{background:var(--el-bg);-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);border-radius:4px;display:none;right:1rem;z-index:20}.navbar-icon-area.open{display:block}.pagination{padding-bottom:15px}.pagination-bar{width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0}.pagination-bar-inner{display:flex;align-items:center;gap:15px;min-width:150px;max-width:220px}.pagination-input{width:48px;border-radius:4px;border:1px solid #ccc;padding:4px 0;font-size:1em}.row{display:flex;flex-wrap:wrap;width:100%;gap:15px}.list-scroller-wrapper{width:100%;position:relative}.list-scroller{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:15px;width:100%;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:5px}.clipped,.image-zoom,.skeleton,.thumb{overflow:hidden}.list-scroller::-webkit-scrollbar{display:none}.list-scroller li{margin:0;padding:0;list-style:none}.list-scroller-btn{position:absolute;z-index:9;background:#CCC;top:50%;transform:translateY(-50%)}.skeleton,.snackbar{border-radius:4px;position:relative}.list-scroller-btn-left{left:-15px}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#bbb 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;padding:15px;margin-bottom:15px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#FFF;margin:auto auto 15px;min-width:500px;-webkit-box-shadow:0 3px 10px rgba(0,0,0,.3);-moz-box-shadow:0 3px 10px rgba(0,0,0,.3);box-shadow:0 3px 10px rgba(0,0,0,.3)}.snackbar .snackbar-close{position:absolute;top:10px;right:10px}.snackbar-stack{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;align-items:center}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{cursor:default;border-bottom:solid 1px transparent;margin-bottom:15px;border-collapse:separate;background:var(--el-bg)}.table thead td,.table thead th{background-color:var(--el-bg);color:#888;font-weight:400;position:sticky;top:0;z-index:5}.table thead td a,.table thead td button.anchor,.table thead th a,.table thead th button.anchor{color:#888!important}.table thead td a:hover,.table thead td button.anchor:hover,.table thead th a:hover,.table thead th button.anchor:hover{text-decoration:underline;color:#6f6f6f}.table thead td:first-child,.table thead th:first-child{border-radius:4px 0 0}.table thead td:last-child,.table thead th:last-child{border-radius:0 4px 0 0}.table td,.table th{padding:8px 6px;line-height:1.5em}.content,.tab-content,.tabs .tab{padding:15px}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table td .btn,.table td .row,.table textarea,.table th .btn,.table th .row{margin-bottom:0}.table tbody td,.table tbody th{border-top:solid 1px transparent}.border-top,.table .overlined td,.table .overlined th{border-top:solid 1px var(--border-color)}.table tr.valign-middle td{vertical-align:middle}.table tr.valign-top td{vertical-align:top}.table tr.valign-bottom td{vertical-align:bottom}.table-striped tbody tr:nth-child(odd){background-color:var(--el-bg-highlight)}.table-hover tbody tr:hover>td{background-color:#cce6f8}.table-hover tbody tr:hover>td.highlight-primary{background-color:#b5dbf5}.table-hover tbody tr:hover>td.highlight-success{background-color:#b5ffa1}.table-hover tbody tr:hover>td.highlight-alert{background-color:#f99595}.table-hover tbody tr:hover>td.highlight-warning{background-color:#ffe666}.table td.highlight-primary,.table th.highlight-primary,.table tr.highlight-primary td,.table tr.highlight-primary th{background-color:#e2f1fb}.table td.highlight-alert,.table th.highlight-alert,.table tr.highlight-alert td,.table tr.highlight-alert th{background-color:#FCC5C5}.table td.highlight-success,.table th.highlight-success,.table tr.highlight-success td,.table tr.highlight-success th{background-color:#DDFFD4}.table td.highlight-warning,.table th.highlight-warning,.table tr.highlight-warning td,.table tr.highlight-warning th{background-color:#fe9}.tabs{display:flex}.tabs .tab{margin:0;cursor:pointer;border:1px solid transparent;border-radius:4px 4px 0 0}.tabs .tab.active{border:1px solid var(--border-color);border-bottom:solid 1px #FFF;color:#1D9EFC;position:relative;z-index:9;background:#FFF;bottom:-1px}.tabs .tab.disabled,.tabs .tab[disabled]{color:#a2a2a2;pointer-events:none}.tab-content{border:1px solid var(--border-color);border-top:solid 1px transparent;border-radius:0 0 4px 4px;position:relative;z-index:1;background:#FFF}.thumb,.thumb img{border-radius:4px}.image{display:flex}.image-left{justify-content:flex-start}.image-right{justify-content:flex-end}.image-center{justify-content:center}.thumb{background-color:#FFF!important;background-position:center center!important;background-repeat:no-repeat!important;background-size:100%!important;height:80px;position:relative;width:100%}.thumb.thumb-bordered{border:1px solid var(--border-color)}.thumb-small{width:56px;height:56px}.thumb-smallest{width:32px;height:32px}.thumb-medium{width:80px;height:80px}.thumb-large{width:160px;height:160px}.thumb-largest{width:240px;height:240px}.thumb .center-by-width{height:auto;position:absolute;top:50%;transform:translate(0,-50%);width:100%}.image-zoom-caption,.tooltip{transform:translateX(-50%);border-radius:4px}.thumb .center-by-height{display:block;margin-left:auto;margin-right:auto;width:auto;height:100%}ul.tree li:after,ul.tree li:before{width:15px;color:#fff;content:""}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{position:relative;touch-action:none;background:#fff}.image-zoom img{position:absolute;user-select:none}.image-zoom-caption{position:absolute;bottom:15px;background:rgba(0,0,0,.25);color:#fff;padding:5px 15px;font-size:12px;z-index:9;left:50%;display:block}.image-zoom:hover>.image-zoom-caption{display:none}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;left:50%;background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;white-space:nowrap;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}ul.tree{list-style:none;padding:0;margin:0 0 15px}ul.tree ul.tree{margin-left:-16px;margin-top:4px;margin-bottom:0}ul.tree li{margin:0;padding:0 7px;line-height:2rem;border-left:1px solid #646464;cursor:default;position:relative}ul.tree li .tree-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-content-button{display:inline-block;margin:3px 0 0 40px}ul.tree li .tree-last-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-button{position:absolute;top:3px;left:15px;z-index:5}ul.tree li:last-child{border-left:none;line-height:15px!important}ul.tree li:last-child:before{border-left:1px solid #646464}ul.tree li:before{position:absolute;top:-3px;height:1.6em;border-bottom:1px solid #646464;display:inline-block;left:0}ul.tree li:after{position:relative;top:-.3em;height:1.6em;display:inline-block;left:-7px}small{font-size:12px}.text-size-normal{font-size:14px}.text-size-large{font-size:25px}.note,.text-size-small{font-size:12px}.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.collapesed-bottom{margin-bottom:0}.default-color{color:var(--color)!important}.primary-color{color:#1D9EFC!important}.success-color{color:#1bd741!important}.alert-color{color:#ea0835!important}.active-color{color:#64FA00!important}.gray{color:#888}.light-gray{color:#a2a2a2}.apply-color.gray a{color:#888}.apply-color.gray a:hover{text-decoration:underline}.bg-primary{background-color:#1D9EFC}.bg-success{background-color:#1bd741}.bg-alert{background-color:#ea0835}.bg-warning{background-color:#ffd500;color:#272729}.bg-default{background-color:#7b7b7b}.bg-alert .btn-circle-bg-clear svg,.bg-default .btn-circle-bg-clear svg,.bg-primary .btn-circle-bg-clear svg,.bg-success .btn-circle-bg-clear svg{color:#fff!important}.inline{display:inline-block;vertical-align:middle}.note{color:#888}.clipped{text-wrap:nowrap;display:inline-block}.clipped-dots{position:absolute;margin-left:1px}.relative{position:relative}.absolute,.corner-btn{position:absolute}.corner-btn{right:15px;top:15px}.component-locker,.overlay{background:var(--overlay-color);height:100%;left:0;top:0;transition:.2s;width:100%}.border-bottom{border-bottom:solid 1px var(--border-color)}.right{text-align:right}.left{text-align:left}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.rounded{border-radius:4px}.clickable{cursor:pointer}.clickable:hover{outline:#1D9EFC solid 2px}.bordered{border:1px solid var(--border-color);border-radius:4px}.bordered-primary{border-color:#1D9EFC}.bordered-top{border-top:solid 1px var(--border-color)}.bordered-bottom{border-bottom:solid 1px var(--border-color)}.overlay{position:fixed;z-index:99}.component-locker{border-radius:4px;position:absolute;z-index:9}.outline-primary{outline:#1D9EFC dashed 1px}.outline-success{outline:#1bd741 dashed 1px}.wrapper{position:relative;margin:auto}.wrapper-large{width:1100px}.wrapper-large .role-mainside{width:835px}.wrapper-large .role-sidebar{width:250px}.wrapper-large .role-half{width:550px}.wrapper-large .box .role-mainside,.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.67px}.wrapper-medium{width:550px}@-ms-viewport{width:device-width}@media (max-width:550px){body{font-size:14px}h1,h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.row-item{flex:0 0 100%!important;max-width:100%!important}.btn,.expanded-phone,.snackbar{width:100%}.dialog{width:95%!important}}@media (min-width:551px) and (max-width:1115px){body{font-size:14px}h1{font-size:1.3em}h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.row-item{flex:0 0 calc(50% - (15px / 2))!important;max-width:calc(50% - (15px / 2))!important}.snackbar{width:100%}}@media (max-width:1115px){.navbar-menu{flex-direction:column;display:none;background:#fff;position:absolute;left:0;top:56px;width:100%;box-shadow:0 4px 16px rgba(0,0,0,.08)}.navbar-main.open .navbar-menu{display:flex}.navbar-hamburger{display:block}.navbar-menu-item{width:100%}.navbar-icons{margin-left:auto}}
1
+ .checkmark:after,.clearfix:after,.clearfix:before,.form-inline:after,.form-inline:before,.input-inside:after,.input-inside:before,.slider:before,.toolbar-group:after,.toolbar-group:before{content:""}.clearfix:after,.form-inline:after,.input-inside:after,.toolbar-group:after{clear:both}.input-inside,body,button,input,select,textarea{font-family:'Open Sans',sans-serif}.app-layout,.dialog{flex-direction:column}.box,.dialog{transition:transform .25s ease,box-shadow .25s ease}.app-layout,body,html{box-sizing:border-box}.btn,a,button.anchor{text-decoration:none}.clearfix:after,.clearfix:before{display:table;line-height:0}.widget-hover{box-shadow:0 6px 10px rgba(0,0,0,.2)}body{background:var(--body-bg);color:var(--color);font-size:14px;font-weight:500;line-height:1.5em}.code-editor,code,pre{font-family:monospace}body,html{height:100%;margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.5em;margin:0 0 15px;padding:0}.btn-link,h3,h4,h5,h6{font-weight:700}h1{font-size:25px}h2{font-size:20px}h3{font-size:15px}h4,h5,h6{font-size:14px}a,button.anchor{color:#1D9EFC;background:0 0;border:none;cursor:pointer;padding:0}a:hover,button.anchor:hover{color:#0390f7}p{margin:0 0 15px}code,pre{color:#7b7b7b}pre{background:var(--body-bg);border-radius:15px;border:1px solid var(--border-color);line-height:1.5em;overflow:auto;padding:15px;text-wrap:wrap}.btn,hr{border:none}hr{border-bottom:solid 1px var(--border-color);margin:15px 0}.app-layout{min-height:100%;display:flex}.btn,.editable,.input-inside,input,select,textarea{display:inline-block;vertical-align:middle;box-sizing:border-box}.app-body{flex-grow:1}.app-footer,.app-header{flex-grow:0;flex-shrink:0}.wrapper .span-side{width:250px}.wrapper .span-double{width:835px}.wrapper .adds-4 .span-add{width:263.75px}.wrapper .adds-3 .span-add{width:356.67px}.wrapper .span-half{width:542.5px}:root{--base-margin:15px}.theme-light,:root{--color:#272729;--btn-bg:#ECEDEF;--btn-bg-darker:#dee0e3;--el-bg:#FFFFFF;--el-bg-highlight:#f2f5f7;--body-bg:#f1f5f8;--border-color:#DDD;--overlay-color:rgba(0, 0, 0, 0.2);--input-bg:#FFFFFF}@font-face{font-family:'Open Sans';font-style:italic;font-weight:300;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk5hkaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:400;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk8ZkaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:500;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk_RkaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:600;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkxhjaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:700;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0RkyFjaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:italic;font-weight:800;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memQYaGs126MiZpBA-UFUIcVXSCEkx2cmqvXlWq8tWZ0Pw86hd0Rk0ZjaVc.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:300;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0C4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:500;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjr0C4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsgH1y4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1y4n.ttf) format('truetype')}@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;font-stretch:normal;font-display:swap;src:url(https://fonts.gstatic.com/s/opensans/v44/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgshZ1y4n.ttf) format('truetype')}.blink-soft{animation:blinker 2s linear infinite}@keyframes blinker{50%{opacity:.4}}.box{-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition-delay:0s;position:relative;margin-bottom:15px}.box .box-footer .row,.box .box-toolbar .form-element,.box .box-toolbar .row,.dialog-actions .btn,.dialog-actions .flex,.dialog-actions .row{margin-bottom:0}.box-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.box-header{color:#888;background:#FFF;border-radius:15px 15px 0 0}.box-header-collapsed{border-radius:15px}.box .box-top-btn{position:absolute;right:10px;top:10px}.carousel,.carousel-img-wrapper,.input-wrapper{position:relative}.carousel-btn,.input-reset-btn{top:50%;transform:translateY(-50%)}.box .box{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:1px solid var(--border-color)}button:focus-visible{outline:#1D9EFC auto 1px}.btn-circle:active,.btn:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle:focus-visible,.btn:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.btn{border-radius:15px;font-size:14px;margin:0;text-align:center;cursor:pointer;padding:10px 20px;transition:background .2s cubic-bezier(.4,0,.2,1)}.btn.disabled,.btn[disabled]{opacity:50%;pointer-events:none}.btn-normal{border:none}.btn-outline{background:0 0;color:var(--color)}.btn-link{border:1px solid transparent;background:0 0;color:#1D9EFC}.btn-normal-default{background:var(--btn-bg);border:1px solid var(--btn-bg);color:var(--color)}.btn-outline-default{border:1px solid #a2a2a2;color:var(--color)}.btn-link-default{color:var(--color)}.btn-link-default:hover{background:#ECEDEF}.btn-normal-default:hover,.btn-outline-default:hover{background:var(--btn-bg-darker);border-color:var(--btn-bg-darker)}.btn-normal-primary{background:#1D9EFC;border:1px solid #1D9EFC;color:#FFF}.btn-outline-primary{border:1px solid #1D9EFC;color:#1D9EFC}.btn-link-primary{color:#1D9EFC}.btn-link-primary:hover{background:#e2f1fb}.btn-normal-primary:hover,.btn-outline-primary:hover{color:#FFF;background:#038aed}.btn-normal-alert{background:#ea0835;border:1px solid #ea0835;color:#FFF}.btn-outline-alert{border:1px solid #ea0835;color:#ea0835}.btn-link-alert{color:#ea0835}.btn-link-alert:hover{background:#FCC5C5}.btn-normal-alert:hover,.btn-outline-alert:hover{color:#FFF;background:#c3072c}.btn-normal-success{background:#1bd741;border:1px solid #1bd741;color:#FFF}.btn-outline-success{border:1px solid #1bd741;color:#1bd741}.btn-link-success{color:#1bd741}.btn-link-success:hover{background:#DDFFD4}.btn-normal-success:hover,.btn-outline-success:hover{color:#FFF;background:#16b336}.btn-normal-warning{background:#ffd500;border:1px solid #ffd500}.btn-outline-warning{border:1px solid #ffd500;color:#ca0}.btn-link-warning{color:#ca0}.btn-link-warning:hover{background:#fe9}.btn-normal-warning:hover,.btn-outline-warning:hover{color:#fff;background:#f0c800}.btn-size-large{font-size:20px;padding:15px 30px}.btn-size-small{font-size:12px;font-weight:unset;padding:4px 8px}.btn-circle{border-radius:50%;border:none;height:30px;width:30px;margin:0;padding-top:2px}.btn-circle.disabled,.btn-circle[disabled]{opacity:30%;pointer-events:none;cursor:not-allowed}.btn-circle:active{outline:rgba(29,158,252,.7) solid 3px!important}.btn-circle-bg-clear{background:rgba(0,0,0,.1)}.btn-circle-bg-solid{background:var(--btn-bg)}.btn-circle:hover{background:#1D9EFC}.btn-circle:hover svg{color:#fff!important}.btn-circle-size-default{font-size:1em}.btn-circle-size-small{width:18px;height:18px;padding-top:0;font-size:10px}.btn-circle-size-small svg{margin-left:-2px;margin-top:3px}.btn-circle-size-large{width:48px;height:48px;padding-top:0;font-size:15px}.btn-circle-size-large svg{margin-left:0;margin-top:0}.btn-alert:active{outline:rgba(234,8,53,.7) solid 3px!important}.btn-alert:focus-visible{outline:#c7072d solid 2px;outline-offset:2px}.btn-success:active{outline:rgba(27,215,65,.7) solid 3px!important}.btn-success:focus-visible{outline:#17b737 solid 2px;outline-offset:2px}.btn-warning:active{outline:rgba(255,213,0,.7) solid 3px!important}.btn-warning:focus-visible{outline:#dbb700 solid 2px;outline-offset:2px}.carousel{width:100%;overflow:hidden;background:var(--el-bg);border-radius:15px;user-select:none}.carousel-slide{display:flex;height:100%;will-change:transform}.carousel-img-wrapper{min-width:100%;height:100%;overflow:hidden}.carousel-img{width:100%;height:100%;object-fit:cover;display:block}.checkmark,.slider:before{height:15px;border-radius:50%}.carousel-title{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);color:#fff;padding:15px;font-size:20px;border-radius:0 0 15px 15px}.carousel-btn{position:absolute;z-index:9}.dialog,.dropdown{background:#FFF;transform:translateY(0);position:absolute}.carousel-btn-left{left:15px}.carousel-btn-right{right:15px}.carousel-dots{position:absolute;left:0;right:0;bottom:15px;display:flex;justify-content:center;gap:15px;z-index:9}.carousel-dot-btn{width:15px;height:15px;border-radius:50%;border:none;cursor:pointer;outline:0;transition:backgrund .2s}.dialog-title,.table .underlined td,.table .underlined th,.table thead td,.table thead th,.tabs{border-bottom:solid 1px var(--border-color)}.dialog{-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);border-radius:15px;transition-delay:0s;left:50%;transform:translateX(-50%);min-width:320px;max-width:90vw;width:auto;margin:0;z-index:999;display:flex}.dialog-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dialog h1,.dialog h2,.dialog h3{margin:0}.dialog-title{padding:15px;border-radius:15px 15px 0 0}.dialog-content{padding:15px}.dialog-actions{border-top:solid 1px var(--border-color);padding:15px}.dialog-close{position:absolute;top:10px;right:15px}.dialog-close button:focus,.dialog-close button:focus-visible{outline:#038df2 solid 2px;outline-offset:2px}.dialog .box{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:1px solid var(--border-color)!important}.dropdown,.navbar-menu .navbar-menu-item>.navbar-submenu{-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);transition:transform .25s ease,box-shadow .25s ease}.dialog:focus{outline:0}.dropdown{-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);border-radius:15px;transition-delay:0s;border:1px solid var(--border-color);padding:5px 0;z-index:99;min-width:400px;max-width:600px;left:0;cursor:pointer;margin:0}.dropdown-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.dropdown li{list-style:none;margin:0}.dropdown-item{padding:8px 12px}.dropdown-item:hover{background-color:var(--el-bg-highlight)}.dropdown-active{background-color:#1D9EFC!important;color:#fff}.navbar-menu-item .dropdown a{margin:0!important;padding:0!important;color:var(--color)!important}.flex{display:flex;gap:15px;margin-bottom:15px}.flex-justify-start{justify-content:flex-start}.flex-justify-end{justify-content:flex-end}.flex-justify-center,.loader-squares{justify-content:center}.flex-justify-between{justify-content:space-between}.flex-align-start{align-items:flex-start}.flex-align-end{align-items:flex-end}.flex-align-center{align-items:center}.flex-align-stretch{align-items:stretch}.flex-align-baseline{align-items:baseline}.flex[data-cols]{container-type:inline-size;flex-wrap:wrap;align-items:stretch}.flex[data-cols]>.flex-item{flex:0 0 calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));max-width:calc((100% - (var(--flex-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-cols,1));box-sizing:border-box}@container (max-width:500px){.flex-item{flex:0 0 calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important;max-width:calc((100% - (var(--flex-phone-cols,1) - 1) * var(--flex-gap,15px))/ var(--flex-phone-cols,1))!important}}@container (min-width:501px) and (max-width:900px){.flex-item{flex:0 0 calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important;max-width:calc((100% - (var(--flex-tablet-cols,2) - 1) * var(--flex-gap,15px))/ var(--flex-tablet-cols,2))!important}}input:focus,select:focus,textarea:focus{outline:rgba(29,158,252,.7) solid 3px;border-color:#4fb4fd}.input-inside,button,input,select,textarea{background:var(--input-bg);color:var(--color)}.input-inside,input,select,textarea{padding:10px;font-size:14px;line-height:1.5em;border-radius:15px;border:1px solid var(--border-color);-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;margin-bottom:0!important}.form-element,fieldset,fieldset label{margin-bottom:15px}.input-inside.large,input.large,select.large,textarea.large{font-size:25px;padding:6px}.input-inside:hover,input:hover,select:hover,textarea:hover{-webkit-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s;border-color:#4fb4fd}.editable{width:100%;min-height:1.4em;padding:2px 0;font-size:14px;line-height:1.5em;border-radius:15px;border:1px solid transparent;background:0 0;color:var(--color);white-space:pre-wrap;word-break:break-word;outline:0;margin-bottom:0!important}.editable:focus{background:var(--input-bg);outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.editable[data-empty=true]::before{content:attr(data-placeholder);color:#888;pointer-events:none}.editable:focus::before{content:''}.inline-elements .form-element,.toolbar .form-element{margin-bottom:0}input[type=color]{border:none;padding:0}.input-alert{-webkit-transition:none!important;transition:none!important;border-color:#ea0835!important}.input-alert:focus{outline:rgba(234,8,53,.7) solid 3px!important}.code-editor:focus,.input-inside input:focus,.input-inside select:focus{outline:0!important}.input-reset-btn{position:absolute;right:8px;z-index:2}.input-inside{padding:0 4px 0 0;position:relative}.input-btns,.slider,.slider:before{position:absolute}.input-inside select{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0;padding:0 0 0 4px;color:#888;border-right:solid 1px var(--border-color);background:var(--input-bg);border-radius:0;height:40px}.badge .btn-circle,.label .btn-circle,.swith-label{margin-left:5px}.input-focus,.input-inside:focus{border-color:#1D9EFC;outline:rgba(29,158,252,.7) solid 3px}.input-inside select:focus{background:#e2f1fb}.input-inside :first-child{border-radius:15px 0 0 15px}.input-inside :last-child{border-radius:0 15px 15px 0}.input-inside .btn-circle{height:24px;width:24px}.input-btns{right:5px;top:5px}.label-inline{padding:0!important}.label-inline label{color:#888;padding:4px 8px}.label-inline select{border-right:none!important;border-left:solid 1px var(--border-color);color:var(--color)}.input-inside{height:auto}.input-inside:after,.input-inside:before{display:table;line-height:0}.input-inside button,.input-inside i,.input-inside input,.input-inside span{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.input-inside input,.input-inside textarea{border:0!important;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.input-inside:focus-within{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC}.input-inside input:focus,.input-inside select:focus{border-color:transparent}input.disabled,input[disabled]{background-color:var(--el-bg-color);border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding:4px 0!important}input:-moz-read-only,input:read-only{color:brown;border:none!important}input[type=checkbox],input[type=radio]{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}select{margin-top:0;color:var(--color)}textarea{resize:none;height:auto}label{display:block}label input,label select,label textarea,td label{margin-bottom:0}fieldset{border:1px solid var(--border-color);border-radius:15px}legend{color:var(--dark-gray);padding:0 5px}.form-inline:after,.form-inline:before{display:table;line-height:0}.form-inline button,.form-inline input,.form-inline label,.form-inline select,.form-inline textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}.toolbar-group:after,.toolbar-group:before{display:table;line-height:0}.toolbar-group button,.toolbar-group input,.toolbar-group label,.toolbar-group select,.toolbar-group textarea{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle;margin-right:-5px;border-right:solid 1px #FFF;border-radius:0}.toolbar-group button:first-child,.toolbar-group input:first-child,.toolbar-group label:first-child,.toolbar-group select:first-child,.toolbar-group textarea:first-child{border-radius:15px 0 0 15px}.toolbar-group button:last-child,.toolbar-group input:last-child,.toolbar-group label:last-child,.toolbar-group select:last-child,.toolbar-group textarea:last-child{border-radius:0 15px 15px 0;border-right:solid 1px var(--border-color)}::placeholder{color:#888;opacity:1}:-ms-input-placeholder{color:var(--border-color)}::-ms-input-placeholder{color:var(--border-color)}label.switch{margin-top:-5px}.switch{position:relative;display:inline-block;width:32px;height:19px}.switch input{opacity:0;width:0;height:0;outline:0}.form-switch{display:inline-block}.slider{-webkit-box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;-moz-box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;box-shadow:inset 0 1px 3px rgb(0 0 0 / 10%)!important;border-radius:15px;-webkit-transition:background-color .1s;background-color:#ccc;bottom:-1px;cursor:pointer;left:0;right:1px;top:1px;transition:background-color .1s}.slider:before{left:2px;width:15px;-webkit-transition:.1s;background-color:#fff;bottom:2px;transition:.1s}input:checked+.slider{background-color:#1bd741}input:focus+.slider{box-shadow:0 0 1px #1bd741}input:checked+.slider:before{transform:translateX(12px)}.switch input[type=checkbox]:focus+.slider{outline:0}.switch input[type=checkbox]:focus-visible+.slider{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.cust-radio input[type=radio]:focus+.checkmark{outline:0}.cust-radio input[type=radio]:focus-visible+.checkmark{outline:rgba(29,158,252,.7) solid 3px;border-color:#1D9EFC;outline-offset:2px}.input-label,.input-label-alert{display:block;font-size:12px;margin-bottom:2px}.input-label{color:#888}.input-label-alert{color:#ea0835}.cust-radio{display:block;position:relative;padding-left:18px;padding-right:10px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cust-radio input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:4px;left:0;width:15px;background-color:var(--border-color);-webkit-box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;-moz-box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important;box-shadow:inset 0 1px 3px rgb(0 0 0 / 20%)!important}.cust-radio input:checked~.checkmark{background-color:#1D9EFC}.checkmark:after{position:absolute;display:none}.cust-radio input:checked~.checkmark:after{display:block}.cust-radio .checkmark:after{top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#fff}.hidden-arrows::-webkit-inner-spin-button,.hidden-arrows::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.information,.row{margin-bottom:15px}.code-editor{color:#7b7b7b;font-size:12px;border:0;padding:0;width:100%}.information,.label{border-radius:15px}.information{padding:15px;position:relative}.information-icon{position:absolute;top:15px;left:15px;font-size:1.2em;opacity:.75}.information-content-icon{padding-left:30px}.information-large{font-size:25px;padding:30px}.information-default{background:var(--el-bg-highlight)}.information-primary{background:#e2f1fb;color:#1D9EFC}.information-primary hr{border-bottom:solid 1px #1D9EFC}.information-warning{background:#ffd500;color:var(--color)}.information-success{background:#DDFFD4;color:#18bc39}.information-success hr{border-bottom:solid 1px #1bd741}.information-alert{background:#FCC5C5;color:#ea0835}.information-alert hr{border-bottom:solid 1px #ea0835}.badge,.label{cursor:default;display:inline-block;line-height:1.5em;color:#fff;vertical-align:baseline;white-space:nowrap;position:relative}.badge:empty,.label:empty{display:none}.badge-default,.label-default{background-color:var(--btn-bg);color:#7b7b7b}.badge.badge-primary,.badge.label-primary,.label.badge-primary,.label.label-primary{background-color:#1D9EFC}.badge.badge-warning,.badge.label-warning,.label.badge-warning,.label.label-warning{color:var(--color);background-color:#ffd500}.badge.badge-success,.badge.label-success,.label.badge-success,.label.label-success{background-color:#1bd741}.badge.badge-alert,.badge.label-alert,.label.badge-alert,.label.label-alert{background-color:#ea0835}.badge{border-radius:20px;padding:2px 10px}.badge-small{padding:0 10px;font-size:12px}.badge-closable{padding-right:0}.clear-list ul,ul.clear-list{margin:0 0 15px;padding:0}.clear-list ul li,ul.clear-list li{margin:0;padding:0;list-style:none;line-height:1.5em}.inline-list ul,ul.inline-list{display:flex;gap:15px;margin:0 0 15px;padding:0}.inline-list ul li,ul.inline-list li{padding:0;margin:0;list-style:none}.loader-squares{display:flex;gap:8px;align-items:center;height:40px}.loader-square{width:16px;height:16px;border-radius:15px;animation:loader-grow .7s cubic-bezier(.4,0,.2,1) infinite;transform-origin:center;background-color:#1895ff}.loader-square:nth-child(1){animation-delay:0s}.loader-square:nth-child(2){animation-delay:.15s}.loader-square:nth-child(3){animation-delay:.3s}.loader-square:nth-child(4){animation-delay:.45s}.loader-square:nth-child(5){animation-delay:.6s}@keyframes loader-grow{0%,100%{transform:scale(1);background-color:#1895ff}30%{transform:scale(1.5);background-color:#24d3fc}60%{transform:scale(1);background-color:#1fb5fe}}.loader-lock{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.1);z-index:9990}.loader-wrapper{position:relative;z-index:9999}.loader-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}header{background:#212121;border-bottom:solid 3px #1D9EFC}.navbar-responsive{-webkit-backdrop-filter:blur(5px);align-items:center;backdrop-filter:blur(5px);color:#fff;display:flex;min-height:60px;padding:0 15px;position:relative;z-index:100}.navbar-logo img{height:40px}.navbar-main{flex:1}.navbar-menu{display:flex;list-style:none;margin:0;padding:0}.navbar-menu .navbar-menu-item{position:relative;cursor:pointer;display:inline-block;z-index:888}.navbar-menu .navbar-menu-item a{color:#fff;display:block;padding:19px 30px}.navbar-menu .navbar-menu-item>.navbar-submenu{display:none;position:absolute;left:0;top:100%;min-width:160px;z-index:999;color:var(--color)!important;padding:15px 0;-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition-delay:0s;border:1px solid var(--border-color)}.navbar-menu .navbar-menu-item>.navbar-submenu a{color:var(--color);padding:10px 15px}.navbar-menu .navbar-menu-item>.navbar-submenu-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover{background-color:#1D9EFC;color:#fff}.navbar-menu .navbar-menu-item>.navbar-submenu li:hover>a{color:#fff}.navbar-icon-area,.navbar-menu,.navbar-menu-item.has-submenu>.navbar-submenu{color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.navbar-menu-item.open>.navbar-submenu,.navbar-menu-item:hover>.navbar-submenu{display:block}.navbar-icon-btn:hover,.navbar-menu-item:hover,.navbar-submenu-item:hover{background:rgba(255,255,255,.08)}.navbar-submenu{list-style:none;margin:0;padding:0}.navbar-icons{display:flex;gap:.5rem}.navbar-icons .navbar-icon-btn{color:#fff;background:0 0;border:none;cursor:pointer;font-size:1.2em;height:40px;width:40px;display:flex;align-items:center;justify-content:center;opacity:.8}.navbar-icons .navbar-icon-btn:hover{opacity:1}.navbar-hamburger{display:none;background:0 0;border:none;font-size:1.5em;margin-left:1rem;cursor:pointer;color:#fff}.tab-content,.tabs .tab.active{background:#FFF;position:relative}.navbar-icon-area{-webkit-box-shadow:0 4px 18px rgba(0,0,0,.1);-moz-box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:0 4px 18px rgba(0,0,0,.1);box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s;display:none;position:absolute;right:1rem;top:100%;z-index:20}.navbar-icon-area-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.navbar-icon-area.open{display:block}.pagination{padding-bottom:15px}.pagination-bar{width:100%;display:flex;justify-content:center;align-items:center;padding:15px 0}.pagination-bar-inner{display:flex;align-items:center;gap:15px;min-width:150px;max-width:220px}.pagination-input{width:48px;text-align:center;border-radius:15px;border:1px solid #ccc;padding:4px 0;font-size:1em}.row{display:flex;flex-wrap:wrap;width:100%;gap:15px}.row-item{box-sizing:border-box}.list-scroller-wrapper{width:100%;position:relative}.list-scroller{display:flex;overflow-x:auto;scroll-behavior:smooth;gap:15px;width:100%;scrollbar-width:none;-ms-overflow-style:none;margin:0;padding:5px}.clipped,.image-zoom,.skeleton,.thumb{overflow:hidden}.list-scroller::-webkit-scrollbar{display:none}.list-scroller li{margin:0;padding:0;list-style:none}.list-scroller-btn{position:absolute;z-index:9;background:#CCC;top:50%;transform:translateY(-50%)}.skeleton,.snackbar{border-radius:15px;position:relative}.image-zoom-caption,.snackbar-stack,.tooltip{transform:translateX(-50%)}.list-scroller-btn-left{left:-15px}.list-scroller-btn-right{right:-15px}.skeleton{background:linear-gradient(90deg,var(--btn-bg) 25%,#bbb 50%,var(--btn-bg) 75%);background-size:200% 100%;animation:skeleton-shimmer 2s infinite linear;padding:15px;margin-bottom:15px}@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.snackbar{padding:15px 60px 15px 15px;color:#FFF;margin:auto auto 15px;box-sizing:border-box;min-width:500px;-webkit-box-shadow:0 3px 10px rgba(0,0,0,.3);-moz-box-shadow:0 3px 10px rgba(0,0,0,.3);box-shadow:0 3px 10px rgba(0,0,0,.3)}.snackbar .snackbar-close{position:absolute;top:10px;right:10px}.snackbar-stack{position:fixed;bottom:15px;left:50%;z-index:9999;display:flex;flex-direction:column;align-items:center}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{cursor:default;border-bottom:solid 1px transparent;margin-bottom:15px;border-collapse:separate;background:var(--el-bg)}.table thead td,.table thead th{background-color:var(--el-bg);color:#888;font-weight:400;position:sticky;top:0;z-index:5}.table thead td a,.table thead td button.anchor,.table thead th a,.table thead th button.anchor{color:#888!important}.table thead td a:hover,.table thead td button.anchor:hover,.table thead th a:hover,.table thead th button.anchor:hover{text-decoration:underline;color:#6f6f6f}.table thead td:first-child,.table thead th:first-child{border-radius:15px 0 0}.table thead td:last-child,.table thead th:last-child{border-radius:0 15px 0 0}.table td,.table th{padding:8px 6px;line-height:1.5em}.content,.tab-content,.tabs .tab{padding:15px}.table td .form-element,.table th .form-element{margin-bottom:0!important}.table .input-wrapper,.table .uneditable-input,.table input,.table select,.table td .btn,.table td .row,.table textarea,.table th .btn,.table th .row{margin-bottom:0}.table tbody td,.table tbody th{border-top:solid 1px transparent}.border-top,.table .overlined td,.table .overlined th{border-top:solid 1px var(--border-color)}.table tr.valign-middle td{vertical-align:middle}.table tr.valign-top td{vertical-align:top}.table tr.valign-bottom td{vertical-align:bottom}.table-striped tbody tr:nth-child(odd){background-color:var(--el-bg-highlight)}.table-hover tbody tr:hover>td{background-color:#cce6f8}.table-hover tbody tr:hover>td.highlight-primary{background-color:#b5dbf5}.table-hover tbody tr:hover>td.highlight-success{background-color:#b5ffa1}.table-hover tbody tr:hover>td.highlight-alert{background-color:#f99595}.table-hover tbody tr:hover>td.highlight-warning{background-color:#ffe666}.table td.highlight-primary,.table th.highlight-primary,.table tr.highlight-primary td,.table tr.highlight-primary th{background-color:#e2f1fb}.table td.highlight-alert,.table th.highlight-alert,.table tr.highlight-alert td,.table tr.highlight-alert th{background-color:#FCC5C5}.table td.highlight-success,.table th.highlight-success,.table tr.highlight-success td,.table tr.highlight-success th{background-color:#DDFFD4}.table td.highlight-warning,.table th.highlight-warning,.table tr.highlight-warning td,.table tr.highlight-warning th{background-color:#fe9}.tabs{display:flex}.tabs .tab{margin:0;cursor:pointer;border:1px solid transparent;border-radius:15px 15px 0 0}.tabs .tab.active{border:1px solid var(--border-color);border-bottom:solid 1px #FFF;color:#1D9EFC;z-index:9;bottom:-1px}.tabs .tab.disabled,.tabs .tab[disabled]{color:#a2a2a2;pointer-events:none}.tab-content{border:1px solid var(--border-color);border-top:solid 1px transparent;border-radius:0 0 15px 15px;z-index:1}.thumb,.thumb img{border-radius:15px}.image{display:flex}.image-left{justify-content:flex-start}.image-right{justify-content:flex-end}.image-center{justify-content:center}.thumb{background-color:#FFF!important;background-position:center center!important;background-repeat:no-repeat!important;background-size:100%!important;box-sizing:border-box;height:80px;position:relative;width:100%}.thumb.thumb-bordered{border:1px solid var(--border-color)}.image-zoom-caption,.rounded,.tooltip{border-radius:15px}.thumb-small{width:56px;height:56px}.thumb-smallest{width:32px;height:32px}.thumb-medium{width:80px;height:80px}.thumb-large{width:160px;height:160px}.thumb-largest{width:240px;height:240px}.thumb .center-by-width{height:auto;position:absolute;top:50%;transform:translate(0,-50%);width:100%}.thumb .center-by-height{display:block;margin-left:auto;margin-right:auto;width:auto;height:100%}ul.tree li:after,ul.tree li:before{height:1.6em;content:""}.thumb .thumb-corner{position:absolute;top:-13px;right:-13px}.image-zoom{position:relative;touch-action:none;background:#fff}.image-zoom img{position:absolute;user-select:none}.image-zoom-caption{position:absolute;bottom:15px;background:rgba(0,0,0,.25);color:#fff;padding:5px 15px;font-size:12px;z-index:9;left:50%;display:block}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;bottom:120%;left:50%;background:rgba(0,0,0,.7);color:#fff;padding:6px 12px;white-space:nowrap;z-index:100;font-size:.9em;box-shadow:0 2px 8px rgba(0,0,0,.15)}ul.tree{list-style:none;padding:0;margin:0 0 15px}ul.tree ul.tree{margin-left:-16px;margin-top:4px;margin-bottom:0}ul.tree li{margin:0;padding:0 7px;line-height:2rem;border-left:1px solid #646464;cursor:default;position:relative}ul.tree li .tree-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-content-button{display:inline-block;margin:3px 0 0 40px}ul.tree li .tree-last-content{display:inline-block;margin:3px 0 0 15px}ul.tree li .tree-button{position:absolute;top:3px;left:15px;z-index:5}ul.tree li:last-child{border-left:none;line-height:15px!important}ul.tree li:last-child:before{border-left:1px solid #646464}ul.tree li:before{position:absolute;top:-3px;width:15px;color:#fff;border-bottom:1px solid #646464;display:inline-block;left:0}ul.tree li:after{position:relative;top:-.3em;width:15px;color:#fff;display:inline-block;left:-7px}small{font-size:12px}.strong{font-weight:700}.text-content{line-height:1.5}.text-size-normal{font-size:14px}.text-size-large{font-size:25px}.note,.text-size-small{font-size:12px}.margin-top{margin-top:15px}.margin-bottom{margin-bottom:15px}.collapesed-bottom{margin-bottom:0}.default-color{color:var(--color)!important}.primary-color{color:#1D9EFC!important}.success-color{color:#1bd741!important}.alert-color{color:#ea0835!important}.active-color{color:#64FA00!important}.gray{color:#888}.light-gray{color:#a2a2a2}.apply-color.gray a{color:#888}.apply-color.gray a:hover{text-decoration:underline}.bg-primary{background-color:#1D9EFC;color:#fff}.bg-success{background-color:#1bd741;color:#fff}.bg-alert{background-color:#ea0835;color:#fff}.bg-warning{background-color:#ffd500;color:#272729}.bg-white{background-color:#FFF;color:#272729}.bg-default{background-color:#7b7b7b;color:#fff}.bg-alert .btn-circle-bg-clear svg,.bg-default .btn-circle-bg-clear svg,.bg-primary .btn-circle-bg-clear svg,.bg-success .btn-circle-bg-clear svg{color:#fff!important}.inline{display:inline-block;vertical-align:middle}.note{color:#888}.clipped{text-wrap:nowrap;display:inline-block}.clipped-dots{position:absolute;margin-left:1px}.relative,.wrapper{position:relative}.absolute,.corner-btn{position:absolute}.corner-btn{right:15px;top:15px}.component-locker,.overlay{background:var(--overlay-color);height:100%;left:0;top:0;transition:.2s;width:100%}.border-bottom{border-bottom:solid 1px var(--border-color)}.center{text-align:center}.right{text-align:right}.left{text-align:left}.visible{visibility:visible}.invisible{visibility:hidden}.hidden{display:none}.expanded{width:100%;margin-bottom:15px}.clickable{cursor:pointer}.clickable:hover{outline:#1D9EFC solid 2px}.bordered{border:1px solid var(--border-color);border-radius:15px}.bordered-primary{border-color:#1D9EFC}.bordered-top{border-top:solid 1px var(--border-color)}.bordered-bottom{border-bottom:solid 1px var(--border-color)}.overlay{position:fixed;z-index:99}.component-locker{border-radius:15px;position:absolute;z-index:9}.outline-primary{outline:#1D9EFC dashed 1px}.outline-success{outline:#1bd741 dashed 1px}.widget{box-shadow:2px 4px 12px rgba(0,0,0,.1);background:#FFF;border-radius:15px;transform:translateY(0);transition:transform .25s ease,box-shadow .25s ease;transition-delay:0s}.widget-hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.2)}.wrapper{margin:auto}.wrapper-large{width:1100px}.wrapper-large .role-mainside{width:835px}.wrapper-large .role-sidebar{width:250px}.wrapper-large .role-half{width:550px}.wrapper-large .box .role-mainside,.wrapper-large .box .role-sidebar{width:820px}.wrapper-small{width:366.67px}.wrapper-medium{width:550px}@-ms-viewport{width:device-width}@media (max-width:500px){body{font-size:14px}h1,h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.row-item{flex:0 0 100%!important;max-width:100%!important}.btn,.expanded-phone,.snackbar{width:100%}.dialog{width:95%!important}}@media (min-width:501px) and (max-width:900px){body{font-size:14px}h1{font-size:1.3em}h2,h3{font-size:1.1em}.wrapper-default,.wrapper-large{width:96%;margin:auto}.row-item{flex:0 0 calc(50% - (15px / 2))!important;max-width:calc(50% - (15px / 2))!important}.snackbar{width:100%}}@media (max-width:900px){.navbar-menu{flex-direction:column;display:none;background:#fff;position:absolute;left:0;top:56px;width:100%;box-shadow:0 4px 16px rgba(0,0,0,.08)}.navbar-main.open .navbar-menu{display:flex}.navbar-hamburger{display:block}.navbar-menu-item{width:100%}.navbar-icons{margin-left:auto}}
@@ -16,18 +16,26 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
16
16
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
17
17
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
18
18
  function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } // import { useOutsideClick } from 'gdx-ui/hooks/useOutsideClick';
19
- var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
20
- var label = _ref.label,
21
- _ref$expanded = _ref.expanded,
22
- expanded = _ref$expanded === void 0 ? true : _ref$expanded,
23
- _ref$placeholder = _ref.placeholder,
24
- placeholder = _ref$placeholder === void 0 ? 'Autocomplete' : _ref$placeholder,
25
- _ref$data = _ref.data,
26
- data = _ref$data === void 0 ? [] : _ref$data,
27
- name = _ref.name,
28
- onSelect = _ref.onSelect,
29
- onChange = _ref.onChange,
30
- renderItem = _ref.renderItem;
19
+ var getItemLabel = function getItemLabel(item) {
20
+ var _ref, _ref2, _item$text;
21
+ if (typeof item === 'string') {
22
+ return item;
23
+ }
24
+ return (_ref = (_ref2 = (_item$text = item === null || item === void 0 ? void 0 : item.text) !== null && _item$text !== void 0 ? _item$text : item === null || item === void 0 ? void 0 : item.name) !== null && _ref2 !== void 0 ? _ref2 : item === null || item === void 0 ? void 0 : item.label) !== null && _ref !== void 0 ? _ref : '';
25
+ };
26
+ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref3) {
27
+ var label = _ref3.label,
28
+ _ref3$expanded = _ref3.expanded,
29
+ expanded = _ref3$expanded === void 0 ? true : _ref3$expanded,
30
+ _ref3$placeholder = _ref3.placeholder,
31
+ placeholder = _ref3$placeholder === void 0 ? 'Autocomplete' : _ref3$placeholder,
32
+ _ref3$data = _ref3.data,
33
+ data = _ref3$data === void 0 ? [] : _ref3$data,
34
+ name = _ref3.name,
35
+ value = _ref3.value,
36
+ onSelect = _ref3.onSelect,
37
+ onChange = _ref3.onChange,
38
+ renderItem = _ref3.renderItem;
31
39
  var _useState = (0, _react.useState)(-1),
32
40
  _useState2 = _slicedToArray(_useState, 2),
33
41
  currentFocus = _useState2[0],
@@ -36,19 +44,21 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
36
44
  _useState4 = _slicedToArray(_useState3, 2),
37
45
  lastSelected = _useState4[0],
38
46
  setLastSelected = _useState4[1];
39
- var _useState5 = (0, _react.useState)(),
47
+ var _useState5 = (0, _react.useState)(''),
40
48
  _useState6 = _slicedToArray(_useState5, 2),
41
- results = _useState6[0],
42
- setResults = _useState6[1];
43
- var _useState7 = (0, _react.useState)(''),
49
+ internalValue = _useState6[0],
50
+ setInternalValue = _useState6[1];
51
+ var _useState7 = (0, _react.useState)(false),
44
52
  _useState8 = _slicedToArray(_useState7, 2),
45
- defaultValue = _useState8[0],
46
- setDefaultValue = _useState8[1];
47
- var _useState9 = (0, _react.useState)(false),
48
- _useState0 = _slicedToArray(_useState9, 2),
49
- openListing = _useState0[0],
50
- setOpenListing = _useState0[1];
53
+ openListing = _useState8[0],
54
+ setOpenListing = _useState8[1];
51
55
  var ref = (0, _react.useRef)();
56
+ var normalizedData = (0, _react.useMemo)(function () {
57
+ return Array.isArray(data) ? data : [];
58
+ }, [data]);
59
+ var searchValue = value !== null && value !== void 0 ? value : internalValue;
60
+ var normalizedValue = (searchValue !== null && searchValue !== void 0 ? searchValue : '').toString();
61
+ var results = normalizedData;
52
62
  var onClickOutside = function onClickOutside() {
53
63
  setOpenListing(false);
54
64
  };
@@ -58,37 +68,37 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
58
68
  wrapperRef = _useOutsideClick.wrapperRef;
59
69
  var onChangeAutocomplete = function onChangeAutocomplete(e) {
60
70
  onChange && onChange(e);
61
- var value = e.target.value;
62
- setDefaultValue(value);
71
+ if (value === undefined) {
72
+ setInternalValue(e.target.value);
73
+ }
63
74
  };
64
75
  var onKeyUp = function onKeyUp(e) {
65
- var key = e.key,
66
- target = e.target;
67
- var value = target.value;
68
- if (value.trim() === '') {
69
- setLastSelected(undefined);
70
- setOpenListing(false);
71
- onSelect(undefined);
72
- return;
73
- }
74
- var resultsFiltered = data;
75
- setResults(resultsFiltered);
76
- setOpenListing(resultsFiltered.length > 0);
76
+ var key = e.key;
77
77
  if (key == 'ArrowDown') {
78
78
  setCurrentFocus(function (currentFocus) {
79
- return currentFocus >= resultsFiltered.length - 1 ? 0 : currentFocus + 1;
79
+ return currentFocus >= results.length - 1 ? 0 : currentFocus + 1;
80
80
  });
81
81
  } else if (key == 'ArrowUp') {
82
82
  setCurrentFocus(function (currentFocus) {
83
- return currentFocus <= 0 ? resultsFiltered.length - 1 : currentFocus - 1;
83
+ return currentFocus <= 0 ? results.length - 1 : currentFocus - 1;
84
84
  });
85
85
  } else if (key == 'Enter') {
86
86
  if (currentFocus > -1) {
87
87
  onClickActive(currentFocus);
88
88
  }
89
89
  } else if (key == 'Escape') {
90
- setDefaultValue(lastSelected === null || lastSelected === void 0 ? void 0 : lastSelected.text);
90
+ var selectedText = getItemLabel(lastSelected);
91
+ if (value === undefined) {
92
+ setInternalValue(selectedText);
93
+ }
94
+ onChange && onChange({
95
+ target: {
96
+ name: name,
97
+ value: selectedText
98
+ }
99
+ });
91
100
  setOpenListing(false);
101
+ setCurrentFocus(-1);
92
102
  } else {
93
103
  setCurrentFocus(-1);
94
104
  }
@@ -97,22 +107,21 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
97
107
  var onClickActive = function onClickActive(index) {
98
108
  setCurrentFocus(index);
99
109
  var selectedItem = results[index];
100
- setDefaultValue(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.text);
110
+ var selectedText = getItemLabel(selectedItem);
111
+ if (value === undefined) {
112
+ setInternalValue(selectedText);
113
+ }
101
114
  setOpenListing(false);
102
115
  setLastSelected(selectedItem);
103
- onSelect(selectedItem);
116
+ onSelect && onSelect(selectedItem);
104
117
  ref.current.focus();
105
118
  };
106
119
  (0, _react.useEffect)(function () {
107
- if (defaultValue.trim().length >= 3 && data && data.length > 0) {
108
- setResults(data);
109
- setOpenListing(true);
110
- } else {
111
- setResults(data);
112
- setOpenListing(false);
113
- }
114
- // eslint-disable-next-line react-hooks/exhaustive-deps
115
- }, [data]);
120
+ var hasValue = normalizedValue.trim().length > 0;
121
+ var hasResults = results.length > 0;
122
+ setOpenListing(hasValue && hasResults);
123
+ setCurrentFocus(-1);
124
+ }, [normalizedValue, results.length]);
116
125
  return /*#__PURE__*/_react["default"].createElement("div", {
117
126
  className: "relative",
118
127
  style: {
@@ -126,7 +135,7 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
126
135
  type: "text",
127
136
  name: name,
128
137
  placeholder: placeholder,
129
- value: defaultValue !== null && defaultValue !== void 0 ? defaultValue : '',
138
+ value: normalizedValue,
130
139
  onChange: onChangeAutocomplete,
131
140
  onKeyUp: onKeyUp,
132
141
  ref: ref,
@@ -137,13 +146,14 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
137
146
  })), openListing && /*#__PURE__*/_react["default"].createElement("div", {
138
147
  className: "dropdown"
139
148
  }, results && results.map(function (item, i) {
149
+ var _item$key;
140
150
  return /*#__PURE__*/_react["default"].createElement("div", {
141
- key: item.key,
151
+ key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : i,
142
152
  className: "dropdown-item ".concat(i === currentFocus ? 'dropdown-active' : ''),
143
153
  onClick: function onClick() {
144
154
  return onClickActive(i);
145
155
  }
146
- }, renderItem ? renderItem(item) : item.toString());
156
+ }, renderItem ? renderItem(item) : getItemLabel(item));
147
157
  })));
148
158
  };
149
159
  Autocomplete.propTypes = {
@@ -151,6 +161,7 @@ Autocomplete.propTypes = {
151
161
  placeholder: _propTypes["default"].string,
152
162
  data: _propTypes["default"].array,
153
163
  name: _propTypes["default"].string,
164
+ value: _propTypes["default"].string,
154
165
  onSelect: _propTypes["default"].func,
155
166
  onChange: _propTypes["default"].func,
156
167
  renderItem: _propTypes["default"].func
@@ -16,7 +16,7 @@ var Badge = exports.Badge = function Badge(_ref) {
16
16
  size = _ref.size,
17
17
  onClose = _ref.onClose;
18
18
  return /*#__PURE__*/_react["default"].createElement("span", {
19
- className: "badge badge-".concat(color, " \n ").concat(size ? "badge-".concat(size) : '', " \n ").concat(onClose ? 'badge-closable' : '')
19
+ className: "badge badge-".concat(color, " \n ").concat(size ? "badge-".concat(size) : '', " \n ").concat(onClose && 'badge-closable')
20
20
  }, children, onClose && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
21
21
  background: color === 'default' ? 'black' : 'white',
22
22
  onClick: onClose,
@@ -27,7 +27,7 @@ var Badge = exports.Badge = function Badge(_ref) {
27
27
  Badge.propTypes = {
28
28
  children: _propTypes["default"].any,
29
29
  color: _propTypes["default"].oneOf(['default', 'alert', 'success', 'primary']),
30
- size: _propTypes["default"].oneOf(['small']),
30
+ size: _propTypes["default"].oneOf(['default', 'small']),
31
31
  closable: _propTypes["default"].bool,
32
32
  onClose: _propTypes["default"].func
33
33
  };
@@ -13,11 +13,6 @@ var _Locker = require("../util/Locker");
13
13
  var _Loader = require("../util/Loader");
14
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
15
15
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
16
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
17
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
18
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
19
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
20
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
21
16
  function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
22
17
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
23
18
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -41,41 +36,52 @@ var Box = exports.Box = function Box(_ref) {
41
36
  color = _ref.color,
42
37
  _ref$isLoading = _ref.isLoading,
43
38
  isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
44
- var _useState = (0, _react.useState)({
45
- open: open,
46
- collapsible: collapsible,
47
- isLoading: isLoading
48
- }),
39
+ var _useState = (0, _react.useState)(open),
49
40
  _useState2 = _slicedToArray(_useState, 2),
50
- settings = _useState2[0],
51
- setSettings = _useState2[1];
41
+ isOpen = _useState2[0],
42
+ setIsOpen = _useState2[1];
43
+ (0, _react.useEffect)(function () {
44
+ setIsOpen(open);
45
+ }, [open]);
46
+ var toggleOpen = function toggleOpen() {
47
+ setIsOpen(function (currentOpen) {
48
+ return !currentOpen;
49
+ });
50
+ };
52
51
  return /*#__PURE__*/_react["default"].createElement(BoxContext.Provider, {
53
52
  value: {
54
- settings: settings,
55
- setSettings: setSettings
53
+ open: isOpen,
54
+ color: color,
55
+ collapsible: collapsible,
56
+ isLoading: isLoading,
57
+ toggleOpen: toggleOpen
56
58
  }
57
59
  }, /*#__PURE__*/_react["default"].createElement("div", {
58
- className: "box ".concat(color ? "box-".concat(color) : '')
60
+ className: "box"
59
61
  }, isLoading && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Locker.Locker, null), /*#__PURE__*/_react["default"].createElement(_Loader.Loader, null)), children));
60
62
  };
61
63
  var BoxHeader = exports.BoxHeader = function BoxHeader(_ref2) {
62
64
  var children = _ref2.children;
63
65
  var _useContext = (0, _react.useContext)(BoxContext),
64
- settings = _useContext.settings,
65
- setSettings = _useContext.setSettings;
66
- var open = settings.open,
67
- collapsible = settings.collapsible;
66
+ open = _useContext.open,
67
+ collapsible = _useContext.collapsible,
68
+ toggleOpen = _useContext.toggleOpen,
69
+ color = _useContext.color;
68
70
  return /*#__PURE__*/_react["default"].createElement("div", {
69
- className: "box-header border-bottom content"
71
+ className: "box-header content \n ".concat(open ? 'border-bottom' : 'box-header-collapsed', " \n ").concat(color !== 'default' ? "bg-".concat(color) : '')
70
72
  }, collapsible && /*#__PURE__*/_react["default"].createElement("div", {
71
73
  className: "box-top-btn"
72
74
  }, /*#__PURE__*/_react["default"].createElement(_IconButton.IconButton, {
73
- onClick: function onClick() {
74
- return setSettings(_objectSpread(_objectSpread({}, settings), {}, {
75
- open: !open
76
- }));
77
- },
78
- icon: open ? _freeSolidSvgIcons.faChevronUp : _freeSolidSvgIcons.faChevronDown
75
+ onClick: toggleOpen,
76
+ icon: _freeSolidSvgIcons.faChevronDown,
77
+ "aria-expanded": open,
78
+ "aria-label": open ? 'Collapse box' : 'Expand box',
79
+ style: {
80
+ transition: 'transform 0.3s ease',
81
+ // if open=true → rotate(180deg) = chevron towards down
82
+ // if open=false → rotate(0deg) = chevron towards up
83
+ transform: open ? 'rotate(180deg)' : 'rotate(0deg)'
84
+ }
79
85
  })), children);
80
86
  };
81
87
  var BoxContent = exports.BoxContent = function BoxContent(_ref3) {
@@ -87,9 +93,7 @@ var BoxContent = exports.BoxContent = function BoxContent(_ref3) {
87
93
  _ref3$borderBottom = _ref3.borderBottom,
88
94
  borderBottom = _ref3$borderBottom === void 0 ? false : _ref3$borderBottom;
89
95
  var _useContext2 = (0, _react.useContext)(BoxContext),
90
- settings = _useContext2.settings;
91
- var open = settings.open; //isLoading
92
-
96
+ open = _useContext2.open;
93
97
  return /*#__PURE__*/_react["default"].createElement("div", {
94
98
  className: "box-content relative \n ".concat(spacing ? 'content' : '', "\n ").concat(open ? '' : 'hidden', "\n ").concat(borderTop ? 'border-top' : '', "\n ").concat(borderBottom ? 'border-bottom' : '', "\n ")
95
99
  }, children);
@@ -103,8 +107,7 @@ var BoxToolbar = exports.BoxToolbar = function BoxToolbar(_ref4) {
103
107
  _ref4$borderBottom = _ref4.borderBottom,
104
108
  borderBottom = _ref4$borderBottom === void 0 ? false : _ref4$borderBottom;
105
109
  var _useContext3 = (0, _react.useContext)(BoxContext),
106
- settings = _useContext3.settings;
107
- var open = settings.open;
110
+ open = _useContext3.open;
108
111
  return /*#__PURE__*/_react["default"].createElement("div", {
109
112
  className: "box-toolbar \n ".concat(spacing ? 'content' : '', "\n ").concat(open ? '' : 'hidden', "\n ").concat(borderTop ? 'border-top' : '', "\n ").concat(borderBottom ? 'border-bottom' : '', "\n ")
110
113
  }, children);
@@ -12,12 +12,6 @@ var _util = require("../util");
12
12
  var _button = require("../button");
13
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
14
14
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
15
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
16
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
17
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
18
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
19
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
20
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
21
15
  var DialogContext = /*#__PURE__*/(0, _react.createContext)(null);
22
16
  var Dialog = exports.Dialog = function Dialog(_ref) {
23
17
  var children = _ref.children,
@@ -38,13 +32,6 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
38
32
  locked = _ref$locked === void 0 ? false : _ref$locked,
39
33
  _ref$closeOnEscape = _ref.closeOnEscape,
40
34
  closeOnEscape = _ref$closeOnEscape === void 0 ? true : _ref$closeOnEscape;
41
- var _useState = (0, _react.useState)({
42
- open: open,
43
- isLoading: isLoading
44
- }),
45
- _useState2 = _slicedToArray(_useState, 2),
46
- settings = _useState2[0],
47
- setSettings = _useState2[1];
48
35
  var dialogRef = (0, _react.useRef)(null);
49
36
  (0, _react.useEffect)(function () {
50
37
  var handleKeyDown = function handleKeyDown(event) {
@@ -67,7 +54,7 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
67
54
  var _dialogRef$current, _dialogRef$current2, _dialogRef$current3;
68
55
  if (!open) return;
69
56
 
70
- // Busca el primer input, select o textarea
57
+ // finding the first focusable element inside the dialog
71
58
  var firstField = (_dialogRef$current = dialogRef.current) === null || _dialogRef$current === void 0 ? void 0 : _dialogRef$current.querySelector('input, select, textarea');
72
59
  if (firstField) {
73
60
  firstField.focus({
@@ -76,7 +63,7 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
76
63
  return;
77
64
  }
78
65
 
79
- // Si no hay campos, busca el botón de cerrar
66
+ // If there are no fields, look for the close button
80
67
  var closeBtn = (_dialogRef$current2 = dialogRef.current) === null || _dialogRef$current2 === void 0 ? void 0 : _dialogRef$current2.querySelector('.dialog-close button, .dialog-close [tabindex="0"]');
81
68
  if (closeBtn) {
82
69
  closeBtn.focus({
@@ -85,7 +72,7 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
85
72
  return;
86
73
  }
87
74
 
88
- // Si no hay nada, enfoca el propio diálogo
75
+ // If there is nothing, focus the dialog itself
89
76
  (_dialogRef$current3 = dialogRef.current) === null || _dialogRef$current3 === void 0 || _dialogRef$current3.focus({
90
77
  preventScroll: true
91
78
  });
@@ -97,10 +84,10 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
97
84
  var scrollY = window.scrollY;
98
85
  var top;
99
86
  if (dialogHeight < viewportHeight) {
100
- // Centrado vertical respecto al viewport actual
87
+ // Center vertically relative to the current viewport
101
88
  top = scrollY + (viewportHeight - dialogHeight) / 2;
102
89
  } else {
103
- // Si el diálogo es más grande, empieza en la posición actual
90
+ // If the dialog is larger, start at the current position
104
91
  top = scrollY;
105
92
  }
106
93
  dialogRef.current.style.top = "".concat(top, "px");
@@ -111,13 +98,13 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
111
98
  }, [open]);
112
99
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, open && /*#__PURE__*/_react["default"].createElement(DialogContext.Provider, {
113
100
  value: {
114
- settings: settings,
115
- setSettings: setSettings
101
+ color: color,
102
+ isLoading: isLoading
116
103
  }
117
104
  }, /*#__PURE__*/_react["default"].createElement("div", {
118
105
  className: "overlay"
119
106
  }), /*#__PURE__*/_react["default"].createElement("div", {
120
- className: "dialog dialog-".concat(color),
107
+ className: "dialog",
121
108
  tabIndex: -1,
122
109
  ref: dialogRef,
123
110
  style: {
@@ -132,14 +119,17 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
132
119
  }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
133
120
  icon: _freeSolidSvgIcons.faTimes,
134
121
  onClick: onClose,
135
- background: color === 'default' ? 'black' : 'white'
122
+ "aria-expanded": open,
123
+ "aria-label": open ? 'Close dialog' : 'Open dialog'
136
124
  })), children)));
137
125
  };
138
126
  var DialogTitle = exports.DialogTitle = function DialogTitle(_ref2) {
139
127
  var children = _ref2.children,
140
128
  className = _ref2.className;
129
+ var _useContext = (0, _react.useContext)(DialogContext),
130
+ color = _useContext.color;
141
131
  return /*#__PURE__*/_react["default"].createElement("div", {
142
- className: "dialog-title ".concat(className ? className : ''),
132
+ className: "dialog-title \n ".concat(className ? className : '', "\n ").concat(color !== 'default' ? "bg-".concat(color) : '', "\n "),
143
133
  "aria-labelledby": "dialog-title"
144
134
  }, /*#__PURE__*/_react["default"].createElement("h2", null, children));
145
135
  };
@@ -149,9 +139,8 @@ var DialogContent = exports.DialogContent = function DialogContent(_ref3) {
149
139
  className = _ref3$className === void 0 ? '' : _ref3$className,
150
140
  _ref3$spacing = _ref3.spacing,
151
141
  spacing = _ref3$spacing === void 0 ? true : _ref3$spacing;
152
- var _useContext = (0, _react.useContext)(DialogContext),
153
- settings = _useContext.settings;
154
- var isLoading = settings.isLoading;
142
+ var _useContext2 = (0, _react.useContext)(DialogContext),
143
+ isLoading = _useContext2.isLoading;
155
144
  return /*#__PURE__*/_react["default"].createElement("div", {
156
145
  className: "dialog-content ".concat(spacing ? 'content' : '', " ").concat(isLoading ? 'blurred' : '', " ").concat(className ? className : '')
157
146
  }, children);