gdx-ui 1.13.15 → 1.14.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.
- package/base.css +1 -1
- package/components/autocomplete/Autocomplete.js +3 -7
- package/components/button/IconButton.js +8 -6
- package/components/button/TextButton.js +10 -1
- package/components/dialog/AlertDialog.js +11 -5
- package/components/dialog/ConfirmationDialog.js +1 -2
- package/components/forms/Input.js +6 -3
- package/components/images/Img.js +4 -6
- package/components/information/Information.js +0 -6
- package/components/list/ScrollableList.js +116 -0
- package/components/list/SortableList.js +25 -6
- package/components/scroller/ListScroller.js +3 -0
- package/components/util/index.js +0 -11
- package/package.json +1 -1
- package/stories/buttons/IconButton.stories.js +54 -1
- package/stories/buttons/TextButton.stories.js +31 -0
- package/stories/dialogs/Dialog.stories.js +85 -0
- package/stories/forms/Input.stories.js +15 -2
- package/stories/images/images.stories.js +23 -0
- package/stories/images/thumb.stories.js +21 -0
- package/stories/information/Information.stories.js +31 -0
- package/stories/list/ScrollableList.stories.js +45 -0
- package/stories/list/SorteableList.stories.js +10 -38
- package/components/util/Alert.js +0 -35
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(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: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,.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}}
|
|
@@ -27,7 +27,7 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
|
|
|
27
27
|
name = _ref.name,
|
|
28
28
|
onSelect = _ref.onSelect,
|
|
29
29
|
onChange = _ref.onChange,
|
|
30
|
-
|
|
30
|
+
renderItem = _ref.renderItem;
|
|
31
31
|
var _useState = (0, _react.useState)(-1),
|
|
32
32
|
_useState2 = _slicedToArray(_useState, 2),
|
|
33
33
|
currentFocus = _useState2[0],
|
|
@@ -103,10 +103,6 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
|
|
|
103
103
|
onSelect(selectedItem);
|
|
104
104
|
ref.current.focus();
|
|
105
105
|
};
|
|
106
|
-
var renderItem = function renderItem(_ref2) {
|
|
107
|
-
var value = _ref2.value;
|
|
108
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value);
|
|
109
|
-
};
|
|
110
106
|
(0, _react.useEffect)(function () {
|
|
111
107
|
if (defaultValue.trim().length >= 3 && data && data.length > 0) {
|
|
112
108
|
setResults(data);
|
|
@@ -147,7 +143,7 @@ var Autocomplete = exports.Autocomplete = function Autocomplete(_ref) {
|
|
|
147
143
|
onClick: function onClick() {
|
|
148
144
|
return onClickActive(i);
|
|
149
145
|
}
|
|
150
|
-
},
|
|
146
|
+
}, renderItem ? renderItem(item) : item.toString());
|
|
151
147
|
})));
|
|
152
148
|
};
|
|
153
149
|
Autocomplete.propTypes = {
|
|
@@ -157,5 +153,5 @@ Autocomplete.propTypes = {
|
|
|
157
153
|
name: _propTypes["default"].string,
|
|
158
154
|
onSelect: _propTypes["default"].func,
|
|
159
155
|
onChange: _propTypes["default"].func,
|
|
160
|
-
|
|
156
|
+
renderItem: _propTypes["default"].func
|
|
161
157
|
};
|
|
@@ -13,9 +13,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
13
13
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
14
14
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
17
|
-
* @param {color} string [default, inverted]
|
|
18
|
-
* @returns
|
|
16
|
+
* Button component that displays an icon inside a circular button.
|
|
19
17
|
*/
|
|
20
18
|
var IconButton = exports.IconButton = function IconButton(_ref) {
|
|
21
19
|
var icon = _ref.icon,
|
|
@@ -39,10 +37,14 @@ var IconButton = exports.IconButton = function IconButton(_ref) {
|
|
|
39
37
|
}));
|
|
40
38
|
};
|
|
41
39
|
IconButton.propTypes = {
|
|
42
|
-
icon
|
|
43
|
-
|
|
40
|
+
/** FontAwesome icon to be displayed */
|
|
41
|
+
icon: _propTypes["default"].object,
|
|
42
|
+
/** Button type */
|
|
43
|
+
type: _propTypes["default"].oneOf(['button', 'submit', 'reset']),
|
|
44
|
+
/** Additional CSS classes */
|
|
44
45
|
className: _propTypes["default"].string,
|
|
46
|
+
/** Background style clear (almost transparent) or solid */
|
|
45
47
|
bg: _propTypes["default"].oneOf(['clear', 'solid']),
|
|
46
|
-
|
|
48
|
+
/** Size of the button */
|
|
47
49
|
size: _propTypes["default"].oneOf(['default', 'small', 'large'])
|
|
48
50
|
};
|
|
@@ -5,16 +5,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.TextButton = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _excluded = ["children", "type", "className"];
|
|
9
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
11
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
11
12
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
12
13
|
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
|
|
13
14
|
var TextButton = exports.TextButton = function TextButton(_ref) {
|
|
14
15
|
var children = _ref.children,
|
|
16
|
+
_ref$type = _ref.type,
|
|
17
|
+
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
15
18
|
className = _ref.className,
|
|
16
19
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
17
20
|
return /*#__PURE__*/_react["default"].createElement("button", _extends({
|
|
21
|
+
type: type,
|
|
18
22
|
className: "anchor ".concat(className ? className : '')
|
|
19
23
|
}, props), children);
|
|
24
|
+
};
|
|
25
|
+
TextButton.propTypes = {
|
|
26
|
+
children: _propTypes["default"].any,
|
|
27
|
+
type: _propTypes["default"].oneOf(['button', 'submit', 'reset']),
|
|
28
|
+
className: _propTypes["default"].string
|
|
20
29
|
};
|
|
@@ -9,6 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
9
9
|
var _Button = require("../button/Button");
|
|
10
10
|
var _Dialog = require("./Dialog");
|
|
11
11
|
var _flex = require("../flex");
|
|
12
|
+
var _fontawesomeSvgCore = require("@fortawesome/fontawesome-svg-core");
|
|
13
|
+
var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
12
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
15
|
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
14
16
|
|
|
@@ -16,23 +18,27 @@ var AlertDialog = exports.AlertDialog = function AlertDialog(_ref) {
|
|
|
16
18
|
var children = _ref.children,
|
|
17
19
|
title = _ref.title,
|
|
18
20
|
color = _ref.color,
|
|
19
|
-
onClose = _ref.onClose
|
|
21
|
+
onClose = _ref.onClose,
|
|
22
|
+
_ref$textClose = _ref.textClose,
|
|
23
|
+
textClose = _ref$textClose === void 0 ? 'Cerrar' : _ref$textClose;
|
|
20
24
|
return /*#__PURE__*/_react["default"].createElement(_Dialog.Dialog, {
|
|
21
25
|
color: color,
|
|
22
26
|
onClose: onClose
|
|
23
|
-
}, /*#__PURE__*/_react["default"].createElement(_Dialog.DialogTitle, null,
|
|
27
|
+
}, /*#__PURE__*/_react["default"].createElement(_Dialog.DialogTitle, null, _fontawesomeSvgCore.icon && /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
|
|
28
|
+
icon: _fontawesomeSvgCore.icon
|
|
29
|
+
}), title), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogContent, null, children), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_flex.Flex, {
|
|
24
30
|
align: "right"
|
|
25
31
|
}, /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
26
32
|
color: color,
|
|
27
33
|
onClick: onClose
|
|
28
|
-
},
|
|
34
|
+
}, textClose)))));
|
|
29
35
|
};
|
|
30
36
|
AlertDialog.propTypes = {
|
|
31
37
|
children: _propTypes["default"].any,
|
|
32
38
|
open: _propTypes["default"].bool,
|
|
33
|
-
icon: _propTypes["default"].
|
|
39
|
+
icon: _propTypes["default"].node,
|
|
34
40
|
title: _propTypes["default"].string,
|
|
35
|
-
color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success']),
|
|
41
|
+
color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success', 'warning']),
|
|
36
42
|
closable: _propTypes["default"].bool,
|
|
37
43
|
width: _propTypes["default"].string,
|
|
38
44
|
onClose: _propTypes["default"].func
|
|
@@ -18,7 +18,6 @@ var ConfirmationDialog = exports.ConfirmationDialog = function ConfirmationDialo
|
|
|
18
18
|
color = _ref.color,
|
|
19
19
|
width = _ref.width,
|
|
20
20
|
height = _ref.height,
|
|
21
|
-
btnSubmit = _ref.btnSubmit,
|
|
22
21
|
onClose = _ref.onClose,
|
|
23
22
|
onConfirm = _ref.onConfirm,
|
|
24
23
|
_ref$textConfirm = _ref.textConfirm,
|
|
@@ -36,7 +35,7 @@ var ConfirmationDialog = exports.ConfirmationDialog = function ConfirmationDialo
|
|
|
36
35
|
align: "right"
|
|
37
36
|
}, /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
38
37
|
onClick: onClose
|
|
39
|
-
}, textCancel)), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null,
|
|
38
|
+
}, textCancel)), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
|
|
40
39
|
type: "submit",
|
|
41
40
|
onClick: onConfirm,
|
|
42
41
|
color: color ? color : 'primary'
|
|
@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _button = require("../button");
|
|
10
10
|
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
11
|
-
var _excluded = ["type", "label", "error", "placeholder", "required", "expanded", "value", "onChange", "onReset", "inputClass", "inputStyle", "showArrows"];
|
|
11
|
+
var _excluded = ["type", "label", "error", "placeholder", "required", "expanded", "value", "onChange", "onReset", "inputClass", "inputStyle", "showArrows", "align"];
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
13
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
14
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
|
|
@@ -30,6 +30,8 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
|
|
|
30
30
|
inputStyle = _ref.inputStyle,
|
|
31
31
|
_ref$showArrows = _ref.showArrows,
|
|
32
32
|
showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
|
|
33
|
+
_ref$align = _ref.align,
|
|
34
|
+
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
33
35
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
34
36
|
// show the button if the component is reseteable and has a value
|
|
35
37
|
var showReset = onReset && value && value !== '';
|
|
@@ -53,7 +55,7 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
|
|
|
53
55
|
type: type,
|
|
54
56
|
value: value,
|
|
55
57
|
onChange: onChange,
|
|
56
|
-
className: "".concat(expanded ? 'expanded' : '', " \n ").concat(type === 'number' ? 'right' : '', "\n ").concat(error ? 'input-alert' : '', " \n ").concat(showArrows ? '' : 'hidden-arrows', "\n ").concat(inputClass ? inputClass : ''),
|
|
58
|
+
className: "".concat(expanded ? 'expanded' : '', " \n ").concat(type === 'number' ? 'right' : '', "\n ").concat(error ? 'input-alert' : '', " \n ").concat(showArrows ? '' : 'hidden-arrows', "\n ").concat(align, "\n ").concat(inputClass ? inputClass : ''),
|
|
57
59
|
style: inputStyle,
|
|
58
60
|
placeholder: placeholder
|
|
59
61
|
}, props)), showReset && /*#__PURE__*/_react["default"].createElement("span", {
|
|
@@ -66,7 +68,8 @@ var Input = exports.Input = /*#__PURE__*/_react["default"].forwardRef(function (
|
|
|
66
68
|
}, error));
|
|
67
69
|
});
|
|
68
70
|
Input.propTypes = {
|
|
69
|
-
type: _propTypes["default"].
|
|
71
|
+
type: _propTypes["default"].oneOf(['text', 'email', 'password', 'number']),
|
|
72
|
+
align: _propTypes["default"].oneOf(['left', 'center', 'right']),
|
|
70
73
|
label: _propTypes["default"].string,
|
|
71
74
|
error: _propTypes["default"].string,
|
|
72
75
|
placeholder: _propTypes["default"].string,
|
package/components/images/Img.js
CHANGED
|
@@ -8,7 +8,7 @@ exports.Img = void 0;
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _util = require("../util");
|
|
11
|
-
var _excluded = ["src", "alt", "align", "className", "
|
|
11
|
+
var _excluded = ["src", "alt", "align", "className", "bordered"];
|
|
12
12
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
13
|
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); }
|
|
14
14
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
@@ -27,8 +27,6 @@ var Img = exports.Img = function Img(_ref) {
|
|
|
27
27
|
align = _ref$align === void 0 ? 'left' : _ref$align,
|
|
28
28
|
_ref$className = _ref.className,
|
|
29
29
|
className = _ref$className === void 0 ? '' : _ref$className,
|
|
30
|
-
_ref$expanded = _ref.expanded,
|
|
31
|
-
expanded = _ref$expanded === void 0 ? false : _ref$expanded,
|
|
32
30
|
_ref$bordered = _ref.bordered,
|
|
33
31
|
bordered = _ref$bordered === void 0 ? false : _ref$bordered,
|
|
34
32
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -46,19 +44,19 @@ var Img = exports.Img = function Img(_ref) {
|
|
|
46
44
|
};
|
|
47
45
|
}, [src]);
|
|
48
46
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
49
|
-
className: "image image-".concat(align, " ").concat(className
|
|
47
|
+
className: "image image-".concat(align, " ").concat(className)
|
|
50
48
|
}, isLoading ? /*#__PURE__*/_react["default"].createElement(_util.Loader, {
|
|
51
49
|
inline: true
|
|
52
50
|
}) : /*#__PURE__*/_react["default"].createElement("img", _extends({
|
|
53
51
|
src: src,
|
|
54
52
|
alt: alt,
|
|
55
|
-
className: "".concat(
|
|
53
|
+
className: "".concat(bordered ? 'bordered' : '')
|
|
56
54
|
}, props)));
|
|
57
55
|
};
|
|
58
56
|
Img.propTypes = {
|
|
59
57
|
src: _propTypes["default"].string.isRequired,
|
|
60
58
|
alt: _propTypes["default"].string,
|
|
61
|
-
align: _propTypes["default"].
|
|
59
|
+
align: _propTypes["default"].oneOf(['left', 'center', 'right']),
|
|
62
60
|
className: _propTypes["default"].string,
|
|
63
61
|
bordered: _propTypes["default"].bool
|
|
64
62
|
};
|
|
@@ -14,12 +14,6 @@ var Information = exports.Information = function Information(_ref) {
|
|
|
14
14
|
color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
15
15
|
_ref$icon = _ref.icon,
|
|
16
16
|
icon = _ref$icon === void 0 ? false : _ref$icon;
|
|
17
|
-
// const faIcon =
|
|
18
|
-
// color === 'primary' ? faInfoCircle
|
|
19
|
-
// : color === 'success' ? faCircleCheck
|
|
20
|
-
// : color === 'alert' ? faCircleExclamation
|
|
21
|
-
// : color === 'warning' ? faTriangleExclamation
|
|
22
|
-
// : faComment;
|
|
23
17
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
24
18
|
className: "information information-".concat(color)
|
|
25
19
|
}, icon && /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ScrollableList = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
11
|
+
var _button = require("../button");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
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); }
|
|
14
|
+
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
15
|
+
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."); }
|
|
16
|
+
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; } }
|
|
17
|
+
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; }
|
|
18
|
+
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; } }
|
|
19
|
+
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
20
|
+
var ScrollableList = exports.ScrollableList = function ScrollableList(_ref) {
|
|
21
|
+
var items = _ref.items,
|
|
22
|
+
renderItem = _ref.renderItem,
|
|
23
|
+
_ref$className = _ref.className,
|
|
24
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
|
25
|
+
_ref$itemWidth = _ref.itemWidth,
|
|
26
|
+
itemWidth = _ref$itemWidth === void 0 ? 120 : _ref$itemWidth,
|
|
27
|
+
_ref$gap = _ref.gap,
|
|
28
|
+
gap = _ref$gap === void 0 ? 15 : _ref$gap;
|
|
29
|
+
var containerRef = (0, _react.useRef)(null);
|
|
30
|
+
var _useState = (0, _react.useState)(false),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
canScrollLeft = _useState2[0],
|
|
33
|
+
setCanScrollLeft = _useState2[1];
|
|
34
|
+
var _useState3 = (0, _react.useState)(false),
|
|
35
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
36
|
+
canScrollRight = _useState4[0],
|
|
37
|
+
setCanScrollRight = _useState4[1];
|
|
38
|
+
|
|
39
|
+
// Actualiza el estado de los botones según el scroll
|
|
40
|
+
var updateScrollButtons = function updateScrollButtons() {
|
|
41
|
+
var el = containerRef.current;
|
|
42
|
+
if (!el) return;
|
|
43
|
+
setCanScrollLeft(el.scrollLeft > 0);
|
|
44
|
+
setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
|
45
|
+
};
|
|
46
|
+
(0, _react.useEffect)(function () {
|
|
47
|
+
updateScrollButtons();
|
|
48
|
+
var el = containerRef.current;
|
|
49
|
+
if (!el) return;
|
|
50
|
+
el.addEventListener('scroll', updateScrollButtons);
|
|
51
|
+
window.addEventListener('resize', updateScrollButtons);
|
|
52
|
+
return function () {
|
|
53
|
+
el.removeEventListener('scroll', updateScrollButtons);
|
|
54
|
+
window.removeEventListener('resize', updateScrollButtons);
|
|
55
|
+
};
|
|
56
|
+
}, [items]);
|
|
57
|
+
|
|
58
|
+
// Scroll a la izquierda/derecha por el ancho de un item
|
|
59
|
+
var scrollBy = function scrollBy(dir) {
|
|
60
|
+
if (containerRef.current) {
|
|
61
|
+
containerRef.current.scrollBy({
|
|
62
|
+
left: dir * (itemWidth + gap),
|
|
63
|
+
behavior: 'smooth'
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
// Touch/swipe para móviles
|
|
69
|
+
var startX = 0;
|
|
70
|
+
var scrollLeft = 0;
|
|
71
|
+
var onTouchStart = function onTouchStart(e) {
|
|
72
|
+
startX = e.touches[0].pageX;
|
|
73
|
+
scrollLeft = containerRef.current.scrollLeft;
|
|
74
|
+
};
|
|
75
|
+
var onTouchMove = function onTouchMove(e) {
|
|
76
|
+
if (!startX) return;
|
|
77
|
+
var x = e.touches[0].pageX;
|
|
78
|
+
containerRef.current.scrollLeft = scrollLeft - (x - startX);
|
|
79
|
+
};
|
|
80
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
81
|
+
className: "list-scroller-wrapper ".concat(className)
|
|
82
|
+
}, canScrollLeft && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
|
|
83
|
+
className: "list-scroller-btn list-scroller-btn-left",
|
|
84
|
+
bg: "solid",
|
|
85
|
+
icon: _freeSolidSvgIcons.faChevronLeft,
|
|
86
|
+
onClick: function onClick() {
|
|
87
|
+
return scrollBy(-1);
|
|
88
|
+
}
|
|
89
|
+
}), /*#__PURE__*/_react["default"].createElement("ul", {
|
|
90
|
+
className: "list-scroller",
|
|
91
|
+
ref: containerRef,
|
|
92
|
+
style: {
|
|
93
|
+
gap: gap
|
|
94
|
+
},
|
|
95
|
+
onTouchStart: onTouchStart,
|
|
96
|
+
onTouchMove: onTouchMove
|
|
97
|
+
}, items.map(function (item, index) {
|
|
98
|
+
return /*#__PURE__*/_react["default"].createElement("li", {
|
|
99
|
+
key: index
|
|
100
|
+
}, renderItem ? renderItem(item, index) : item.toString());
|
|
101
|
+
})), canScrollRight && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
|
|
102
|
+
className: "list-scroller-btn list-scroller-btn-right",
|
|
103
|
+
bg: "solid",
|
|
104
|
+
icon: _freeSolidSvgIcons.faChevronRight,
|
|
105
|
+
onClick: function onClick() {
|
|
106
|
+
return scrollBy(1);
|
|
107
|
+
}
|
|
108
|
+
}));
|
|
109
|
+
};
|
|
110
|
+
ScrollableList.propTypes = {
|
|
111
|
+
children: _propTypes["default"].node.isRequired,
|
|
112
|
+
className: _propTypes["default"].string,
|
|
113
|
+
itemWidth: _propTypes["default"].number,
|
|
114
|
+
renderItem: _propTypes["default"].func.isRequired,
|
|
115
|
+
gap: _propTypes["default"].number
|
|
116
|
+
};
|
|
@@ -27,6 +27,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
|
|
|
27
27
|
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
|
|
28
28
|
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
|
|
29
29
|
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; }
|
|
30
|
+
/**
|
|
31
|
+
* List that allows reordering of items via drag and drop
|
|
32
|
+
*/
|
|
30
33
|
var SortableList = exports.SortableList = function SortableList(_ref) {
|
|
31
34
|
var _ref$items = _ref.items,
|
|
32
35
|
items = _ref$items === void 0 ? [] : _ref$items,
|
|
@@ -34,17 +37,14 @@ var SortableList = exports.SortableList = function SortableList(_ref) {
|
|
|
34
37
|
renderItem = _ref.renderItem,
|
|
35
38
|
_ref$inline = _ref.inline,
|
|
36
39
|
inline = _ref$inline === void 0 ? false : _ref$inline,
|
|
37
|
-
_ref$className = _ref.className,
|
|
38
|
-
className = _ref$className === void 0 ? '' : _ref$className,
|
|
39
40
|
_ref$dragHandle = _ref.dragHandle,
|
|
40
|
-
dragHandle = _ref$dragHandle === void 0 ? false : _ref$dragHandle
|
|
41
|
+
dragHandle = _ref$dragHandle === void 0 ? false : _ref$dragHandle,
|
|
42
|
+
className = _ref.className;
|
|
41
43
|
var handleOnDragEnd = function handleOnDragEnd(result) {
|
|
42
44
|
if (!result.destination || !onReorder) return;
|
|
43
45
|
var startIndex = result.source.index;
|
|
44
46
|
var endIndex = result.destination.index;
|
|
45
47
|
if (startIndex === endIndex) return;
|
|
46
|
-
|
|
47
|
-
// 🔥 HACER EL REORDENAMIENTO AQUÍ
|
|
48
48
|
var newItems = _toConsumableArray(items);
|
|
49
49
|
var _newItems$splice = newItems.splice(startIndex, 1),
|
|
50
50
|
_newItems$splice2 = _slicedToArray(_newItems$splice, 1),
|
|
@@ -61,7 +61,7 @@ var SortableList = exports.SortableList = function SortableList(_ref) {
|
|
|
61
61
|
direction: inline ? 'horizontal' : 'vertical'
|
|
62
62
|
}, function (provided) {
|
|
63
63
|
return /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
64
|
-
className: "clear-list ".concat(inline ? 'inline-list' : '', " ").concat(className)
|
|
64
|
+
className: "clear-list ".concat(inline ? 'inline-list' : '', " ").concat(className ? className : '')
|
|
65
65
|
}, provided.droppableProps, {
|
|
66
66
|
ref: provided.innerRef
|
|
67
67
|
}), /*#__PURE__*/_react["default"].createElement("ul", null, items.map(function (item, index) {
|
|
@@ -99,4 +99,23 @@ var SortableList = exports.SortableList = function SortableList(_ref) {
|
|
|
99
99
|
});
|
|
100
100
|
}), provided.placeholder));
|
|
101
101
|
}));
|
|
102
|
+
};
|
|
103
|
+
SortableList.propTypes = {
|
|
104
|
+
/** Array of items to display in the list */
|
|
105
|
+
items: _propTypes["default"].array.isRequired,
|
|
106
|
+
/** Function that is called when the list is reordered. Receives the reordered array as a parameter */
|
|
107
|
+
onReorder: _propTypes["default"].func.isRequired,
|
|
108
|
+
/**
|
|
109
|
+
* Renderer function for each item in the list
|
|
110
|
+
* @param {any} item - The current item
|
|
111
|
+
* @param {number} index - The index of the item
|
|
112
|
+
* @returns {ReactNode} - JSX to render for the item
|
|
113
|
+
*/
|
|
114
|
+
renderItem: _propTypes["default"].func,
|
|
115
|
+
/** Show inline list if true */
|
|
116
|
+
inline: _propTypes["default"].bool,
|
|
117
|
+
/** Additional CSS classes */
|
|
118
|
+
className: _propTypes["default"].string,
|
|
119
|
+
/** If true, only the handle icon can be dragged */
|
|
120
|
+
dragHandle: _propTypes["default"].bool
|
|
102
121
|
};
|
|
@@ -17,6 +17,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
|
|
|
17
17
|
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; }
|
|
18
18
|
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; } }
|
|
19
19
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
20
|
+
/**
|
|
21
|
+
* @deprecated Use ScrollableList instead
|
|
22
|
+
*/
|
|
20
23
|
var ListScroller = exports.ListScroller = function ListScroller(_ref) {
|
|
21
24
|
var children = _ref.children,
|
|
22
25
|
_ref$className = _ref.className,
|
package/components/util/index.js
CHANGED
|
@@ -3,17 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
var _Alert = require("./Alert");
|
|
7
|
-
Object.keys(_Alert).forEach(function (key) {
|
|
8
|
-
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] === _Alert[key]) return;
|
|
10
|
-
Object.defineProperty(exports, key, {
|
|
11
|
-
enumerable: true,
|
|
12
|
-
get: function get() {
|
|
13
|
-
return _Alert[key];
|
|
14
|
-
}
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
6
|
var _Anchor = require("./Anchor");
|
|
18
7
|
Object.keys(_Anchor).forEach(function (key) {
|
|
19
8
|
if (key === "default" || key === "__esModule") return;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports["default"] = exports.Default = void 0;
|
|
6
|
+
exports["default"] = exports.WithBackground = exports.Default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _Button = require("../../components/button/Button");
|
|
9
9
|
var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
@@ -22,4 +22,57 @@ var Default = exports.Default = {
|
|
|
22
22
|
args: {
|
|
23
23
|
icon: _freeSolidSvgIcons.faSearch
|
|
24
24
|
}
|
|
25
|
+
};
|
|
26
|
+
var WithBackground = exports.WithBackground = {
|
|
27
|
+
args: {
|
|
28
|
+
icon: _freeSolidSvgIcons.faSearch
|
|
29
|
+
},
|
|
30
|
+
parameters: {
|
|
31
|
+
docs: {
|
|
32
|
+
description: {
|
|
33
|
+
story: 'Example of IconButtons with different background colors. \
|
|
34
|
+
The color of the icon adapts based on the background color for better visibility.\
|
|
35
|
+
You must use the backround class to adapt the icon color accordingly. \
|
|
36
|
+
<ul>\
|
|
37
|
+
<li>bg-success => success-color</li>\
|
|
38
|
+
<li>bg-alert => alert-color</li>\
|
|
39
|
+
<li>bg-warning => warning-color</li>\
|
|
40
|
+
<li>bg-default => default-color</li>\
|
|
41
|
+
</ul>'
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
render: function render(args) {
|
|
46
|
+
return /*#__PURE__*/_react["default"].createElement(_components.Flex, null, /*#__PURE__*/_react["default"].createElement(_components.FlexItem, {
|
|
47
|
+
style: {
|
|
48
|
+
background: '#e7e7e7ff',
|
|
49
|
+
textAlign: 'center',
|
|
50
|
+
padding: '30px'
|
|
51
|
+
}
|
|
52
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.IconButton, args)), /*#__PURE__*/_react["default"].createElement(_components.FlexItem, {
|
|
53
|
+
className: "bg-success",
|
|
54
|
+
style: {
|
|
55
|
+
textAlign: 'center',
|
|
56
|
+
padding: '30px'
|
|
57
|
+
}
|
|
58
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.IconButton, args)), /*#__PURE__*/_react["default"].createElement(_components.FlexItem, {
|
|
59
|
+
className: "bg-alert",
|
|
60
|
+
style: {
|
|
61
|
+
textAlign: 'center',
|
|
62
|
+
padding: '30px'
|
|
63
|
+
}
|
|
64
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.IconButton, args)), /*#__PURE__*/_react["default"].createElement(_components.FlexItem, {
|
|
65
|
+
className: "bg-warning",
|
|
66
|
+
style: {
|
|
67
|
+
textAlign: 'center',
|
|
68
|
+
padding: '30px'
|
|
69
|
+
}
|
|
70
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.IconButton, args)), /*#__PURE__*/_react["default"].createElement(_components.FlexItem, {
|
|
71
|
+
className: "bg-default",
|
|
72
|
+
style: {
|
|
73
|
+
textAlign: 'center',
|
|
74
|
+
padding: '30px'
|
|
75
|
+
}
|
|
76
|
+
}, /*#__PURE__*/_react["default"].createElement(_components.IconButton, args)));
|
|
77
|
+
}
|
|
25
78
|
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.WithIcon = exports.Default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
9
|
+
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
10
|
+
var _TextButton = require("../../components/button/TextButton");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
var _default = exports["default"] = {
|
|
13
|
+
title: 'Buttons/TextButton',
|
|
14
|
+
component: _TextButton.TextButton,
|
|
15
|
+
parameters: {
|
|
16
|
+
layout: 'centered'
|
|
17
|
+
},
|
|
18
|
+
tags: ['autodocs']
|
|
19
|
+
};
|
|
20
|
+
var Default = exports.Default = {
|
|
21
|
+
args: {
|
|
22
|
+
children: 'Text Button'
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
var WithIcon = exports.WithIcon = {
|
|
26
|
+
args: {
|
|
27
|
+
children: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
|
|
28
|
+
icon: _freeSolidSvgIcons.faSearch
|
|
29
|
+
}), " Search")
|
|
30
|
+
}
|
|
31
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.DefaultWithActions = exports.Default = exports.ConfirmationDialogStory = exports.AlertDialogStory = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Dialog = require("../../components/dialog/Dialog");
|
|
9
|
+
var _flex = require("../../components/flex");
|
|
10
|
+
var _button = require("../../components/button");
|
|
11
|
+
var _dialog = require("../../components/dialog");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
|
+
var _default = exports["default"] = {
|
|
15
|
+
title: 'Dialogs/Dialog',
|
|
16
|
+
component: _Dialog.Dialog,
|
|
17
|
+
tags: ['autodocs']
|
|
18
|
+
};
|
|
19
|
+
var Default = exports.Default = {
|
|
20
|
+
args: {
|
|
21
|
+
open: true,
|
|
22
|
+
closable: true,
|
|
23
|
+
isLoading: false,
|
|
24
|
+
locked: false,
|
|
25
|
+
color: 'default'
|
|
26
|
+
},
|
|
27
|
+
render: function render(args) {
|
|
28
|
+
// return <div>Dialog story is under construction.</div>;
|
|
29
|
+
return /*#__PURE__*/_react["default"].createElement(_Dialog.Dialog, _extends({}, args, {
|
|
30
|
+
onClose: function onClose() {}
|
|
31
|
+
}), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogTitle, null, "Dialog title"), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogContent, null, "Dialog Content"));
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
var DefaultWithActions = exports.DefaultWithActions = {
|
|
35
|
+
args: {
|
|
36
|
+
open: true,
|
|
37
|
+
closable: true,
|
|
38
|
+
isLoading: false,
|
|
39
|
+
locked: false,
|
|
40
|
+
color: 'primary'
|
|
41
|
+
},
|
|
42
|
+
render: function render(args) {
|
|
43
|
+
// return <div>Dialog story is under construction.</div>;
|
|
44
|
+
return /*#__PURE__*/_react["default"].createElement(_Dialog.Dialog, _extends({}, args, {
|
|
45
|
+
onClose: function onClose() {}
|
|
46
|
+
}), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogTitle, null, "Dialog title"), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogContent, null, "Dialog Content"), /*#__PURE__*/_react["default"].createElement(_Dialog.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_flex.Flex, {
|
|
47
|
+
valign: "center"
|
|
48
|
+
}, /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, null, "Action 1")), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, null, "Action 2")), /*#__PURE__*/_react["default"].createElement(_flex.FlexItem, null, "Use ", /*#__PURE__*/_react["default"].createElement("code", null, "Flex"), " to separete items"))));
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var ConfirmationDialogStory = exports.ConfirmationDialogStory = {
|
|
52
|
+
args: {
|
|
53
|
+
open: true,
|
|
54
|
+
closable: true,
|
|
55
|
+
isLoading: false,
|
|
56
|
+
locked: false,
|
|
57
|
+
color: 'primary',
|
|
58
|
+
title: 'Confirmation dialog title',
|
|
59
|
+
textConfirm: 'Yes',
|
|
60
|
+
textCancel: 'No'
|
|
61
|
+
},
|
|
62
|
+
render: function render(args) {
|
|
63
|
+
// return <div>Dialog story is under construction.</div>;
|
|
64
|
+
return /*#__PURE__*/_react["default"].createElement(_dialog.ConfirmationDialog, _extends({}, args, {
|
|
65
|
+
onClose: function onClose() {}
|
|
66
|
+
}), "The ConfirmationDialog component has ", /*#__PURE__*/_react["default"].createElement("code", null, "submit"), " button on ", /*#__PURE__*/_react["default"].createElement("code", null, "onConfirm"), " action. If you need to customize it, please use a regular Dialog component with actions.");
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
var AlertDialogStory = exports.AlertDialogStory = {
|
|
70
|
+
args: {
|
|
71
|
+
open: true,
|
|
72
|
+
closable: true,
|
|
73
|
+
isLoading: false,
|
|
74
|
+
locked: false,
|
|
75
|
+
color: 'warning',
|
|
76
|
+
title: 'Alert dialog title',
|
|
77
|
+
textClose: 'Close it'
|
|
78
|
+
},
|
|
79
|
+
render: function render(args) {
|
|
80
|
+
// return <div>Dialog story is under construction.</div>;
|
|
81
|
+
return /*#__PURE__*/_react["default"].createElement(_dialog.AlertDialog, _extends({}, args, {
|
|
82
|
+
onClose: function onClose() {}
|
|
83
|
+
}), "Alert dialog content");
|
|
84
|
+
}
|
|
85
|
+
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports["default"] = exports.WithError = exports.Reseteable = exports.Default = void 0;
|
|
6
|
+
exports["default"] = exports.WithError = exports.TypeNumber = exports.Reseteable = exports.Default = void 0;
|
|
7
7
|
var _Input = require("../../components/forms/Input");
|
|
8
8
|
var _default = exports["default"] = {
|
|
9
9
|
title: 'Forms/Input',
|
|
@@ -23,7 +23,8 @@ var Default = exports.Default = {
|
|
|
23
23
|
args: {
|
|
24
24
|
label: 'Nombre',
|
|
25
25
|
placeholder: 'Escribe tu nombre',
|
|
26
|
-
expanded: true
|
|
26
|
+
expanded: true,
|
|
27
|
+
required: false
|
|
27
28
|
}
|
|
28
29
|
};
|
|
29
30
|
var WithError = exports.WithError = {
|
|
@@ -43,4 +44,16 @@ var Reseteable = exports.Reseteable = {
|
|
|
43
44
|
return alert('Campo reseteado');
|
|
44
45
|
}
|
|
45
46
|
}
|
|
47
|
+
};
|
|
48
|
+
var TypeNumber = exports.TypeNumber = {
|
|
49
|
+
args: {
|
|
50
|
+
label: 'Campo numérico',
|
|
51
|
+
type: 'number',
|
|
52
|
+
placeholder: 'Escribe un número',
|
|
53
|
+
expanded: true,
|
|
54
|
+
align: 'right',
|
|
55
|
+
showArrows: true,
|
|
56
|
+
step: 1,
|
|
57
|
+
required: false
|
|
58
|
+
}
|
|
46
59
|
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _components = require("../../components");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var _default = exports["default"] = {
|
|
11
|
+
title: 'Images/Image',
|
|
12
|
+
component: _components.Img,
|
|
13
|
+
tags: ['autodocs']
|
|
14
|
+
};
|
|
15
|
+
var Default = exports.Default = {
|
|
16
|
+
args: {
|
|
17
|
+
src: 'https://www.gadxe.com/files/imgs/i2409/b/5921blue.jpg',
|
|
18
|
+
alt: 'Example Image',
|
|
19
|
+
width: 300,
|
|
20
|
+
align: 'center',
|
|
21
|
+
bordered: false
|
|
22
|
+
}
|
|
23
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.Default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _components = require("../../components");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var _default = exports["default"] = {
|
|
11
|
+
title: 'Images/Thumb',
|
|
12
|
+
component: _components.Thumb,
|
|
13
|
+
tags: ['autodocs']
|
|
14
|
+
};
|
|
15
|
+
var Default = exports.Default = {
|
|
16
|
+
args: {
|
|
17
|
+
src: 'https://www.gadxe.com/files/imgs/i2409/b/5921blue.jpg',
|
|
18
|
+
alt: 'Example Image',
|
|
19
|
+
bordered: false
|
|
20
|
+
}
|
|
21
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.HtmlAndIcon = exports.Default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _Flex = require("../../components/flex/Flex");
|
|
9
|
+
var _components = require("../../components");
|
|
10
|
+
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
12
|
+
var _default = exports["default"] = {
|
|
13
|
+
title: 'Information/Information',
|
|
14
|
+
component: _components.Information,
|
|
15
|
+
tags: ['autodocs']
|
|
16
|
+
};
|
|
17
|
+
var Default = exports.Default = {
|
|
18
|
+
args: {
|
|
19
|
+
color: 'default',
|
|
20
|
+
children: 'Este es un mensaje de información para el usuario.'
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
var HtmlAndIcon = exports.HtmlAndIcon = {
|
|
24
|
+
args: {
|
|
25
|
+
color: 'default',
|
|
26
|
+
icon: _freeSolidSvgIcons.faWarning
|
|
27
|
+
},
|
|
28
|
+
render: function render(args) {
|
|
29
|
+
return /*#__PURE__*/_react["default"].createElement(_components.Information, args, /*#__PURE__*/_react["default"].createElement("h3", null, "Encabezado dentro del mensaje"), /*#__PURE__*/_react["default"].createElement("p", null, "Este es un mensaje de informaci\xF3n para el usuario."));
|
|
30
|
+
}
|
|
31
|
+
};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = exports.ScrollableListDefault = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _ScrollableList = require("../../components/list/ScrollableList");
|
|
9
|
+
var _components = require("../../components");
|
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
11
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
12
|
+
var data = Array.from({
|
|
13
|
+
length: 10
|
|
14
|
+
}, function (_, i) {
|
|
15
|
+
return {
|
|
16
|
+
src: 'https://www.gadxe.com/files/imgs/i2409/b/5921blue.jpg',
|
|
17
|
+
title: "Item ".concat(i + 1)
|
|
18
|
+
};
|
|
19
|
+
});
|
|
20
|
+
var _default = exports["default"] = {
|
|
21
|
+
title: 'Lists/ScrollableList',
|
|
22
|
+
component: _ScrollableList.ScrollableList,
|
|
23
|
+
tags: ['autodocs']
|
|
24
|
+
};
|
|
25
|
+
var ScrollableListDefault = exports.ScrollableListDefault = {
|
|
26
|
+
args: {
|
|
27
|
+
// inline: false,
|
|
28
|
+
items: data,
|
|
29
|
+
itemWidth: 300
|
|
30
|
+
},
|
|
31
|
+
render: function render(args) {
|
|
32
|
+
return /*#__PURE__*/_react["default"].createElement(_ScrollableList.ScrollableList, _extends({}, args, {
|
|
33
|
+
items: data,
|
|
34
|
+
renderItem: function renderItem(item) {
|
|
35
|
+
return /*#__PURE__*/_react["default"].createElement(_components.Thumb, {
|
|
36
|
+
src: item.src,
|
|
37
|
+
size: "large",
|
|
38
|
+
alt: item.title,
|
|
39
|
+
bordered: true,
|
|
40
|
+
onClick: function onClick() {}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
};
|
|
@@ -3,17 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports["default"] = exports.
|
|
6
|
+
exports["default"] = exports.SortableListStory = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _SortableList = require("../../components/list/SortableList");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
10
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
11
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
12
|
-
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."); }
|
|
13
|
-
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; } }
|
|
14
|
-
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; }
|
|
15
|
-
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; } }
|
|
16
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
17
11
|
var data = Array.from({
|
|
18
12
|
length: 5
|
|
19
13
|
}, function (_, i) {
|
|
@@ -27,41 +21,19 @@ var _default = exports["default"] = {
|
|
|
27
21
|
var SortableListStory = exports.SortableListStory = {
|
|
28
22
|
args: {
|
|
29
23
|
inline: false,
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
dragHandle: false,
|
|
25
|
+
items: data
|
|
32
26
|
},
|
|
33
27
|
render: function render(args) {
|
|
34
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
28
|
+
return /*#__PURE__*/_react["default"].createElement(_SortableList.SortableList, _extends({}, args, {
|
|
29
|
+
items: data,
|
|
30
|
+
onReorder: function onReorder() {},
|
|
31
|
+
renderItem: function renderItem(item) {
|
|
32
|
+
return /*#__PURE__*/_react["default"].createElement(Content, null, item);
|
|
33
|
+
}
|
|
34
|
+
}));
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
var SortableWithHandle = exports.SortableWithHandle = {
|
|
38
|
-
args: {
|
|
39
|
-
inline: false,
|
|
40
|
-
bullets: false,
|
|
41
|
-
sortable: true,
|
|
42
|
-
dragHandle: true
|
|
43
|
-
},
|
|
44
|
-
render: function render(args) {
|
|
45
|
-
return /*#__PURE__*/_react["default"].createElement(ListStoryComponent, args);
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
|
-
var ListStoryComponent = function ListStoryComponent(args) {
|
|
49
|
-
var _React$useState = _react["default"].useState(data),
|
|
50
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
51
|
-
items = _React$useState2[0],
|
|
52
|
-
setItems = _React$useState2[1];
|
|
53
|
-
var handleReorder = function handleReorder(newItems) {
|
|
54
|
-
setItems(newItems);
|
|
55
|
-
};
|
|
56
|
-
return /*#__PURE__*/_react["default"].createElement(_SortableList.SortableList, _extends({}, args, {
|
|
57
|
-
// 🔥 USAR LOS ARGS
|
|
58
|
-
items: items,
|
|
59
|
-
onReorder: handleReorder,
|
|
60
|
-
renderItem: function renderItem(item) {
|
|
61
|
-
return /*#__PURE__*/_react["default"].createElement(Content, null, item);
|
|
62
|
-
}
|
|
63
|
-
}));
|
|
64
|
-
};
|
|
65
37
|
var Content = function Content(_ref) {
|
|
66
38
|
var children = _ref.children;
|
|
67
39
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
package/components/util/Alert.js
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Alert = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
var _dialog = require("../dialog");
|
|
10
|
-
var _row = require("../row");
|
|
11
|
-
var _button = require("../button");
|
|
12
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
-
var Alert = exports.Alert = function Alert(_ref) {
|
|
14
|
-
var children = _ref.children,
|
|
15
|
-
_ref$title = _ref.title,
|
|
16
|
-
title = _ref$title === void 0 ? 'Alerta' : _ref$title,
|
|
17
|
-
_ref$color = _ref.color,
|
|
18
|
-
color = _ref$color === void 0 ? 'alert' : _ref$color,
|
|
19
|
-
onClose = _ref.onClose;
|
|
20
|
-
return /*#__PURE__*/_react["default"].createElement(_dialog.Dialog, {
|
|
21
|
-
color: color,
|
|
22
|
-
onClose: onClose
|
|
23
|
-
}, /*#__PURE__*/_react["default"].createElement(_dialog.DialogTitle, null, title), /*#__PURE__*/_react["default"].createElement(_dialog.DialogContent, null, children), /*#__PURE__*/_react["default"].createElement(_dialog.DialogActions, null, /*#__PURE__*/_react["default"].createElement(_row.Row, {
|
|
24
|
-
align: "right"
|
|
25
|
-
}, /*#__PURE__*/_react["default"].createElement(_row.RowItem, null, /*#__PURE__*/_react["default"].createElement(_button.Button, {
|
|
26
|
-
onClick: onClose,
|
|
27
|
-
color: color ? color : 'primary'
|
|
28
|
-
}, "Close")))));
|
|
29
|
-
};
|
|
30
|
-
Alert.propTypes = {
|
|
31
|
-
children: _propTypes["default"].any,
|
|
32
|
-
title: _propTypes["default"].string,
|
|
33
|
-
color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success']),
|
|
34
|
-
onClose: _propTypes["default"].func
|
|
35
|
-
};
|