x4js 2.0.20 → 2.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/lib/cjs/x4.css +1 -1
  2. package/lib/cjs/x4.js +2 -2
  3. package/lib/esm/x4.css +1 -1
  4. package/lib/esm/x4.mjs +2 -2
  5. package/lib/styles/x4.css +1 -1
  6. package/lib/types/x4js.d.ts +93 -77
  7. package/package.json +1 -1
  8. package/src/components/boxes/boxes.ts +33 -1
  9. package/src/components/canvas/canvas.ts +9 -3
  10. package/src/components/combobox/combobox.module.scss +13 -0
  11. package/src/components/combobox/combobox.ts +7 -0
  12. package/src/components/form/form.ts +4 -4
  13. package/src/components/gridview/gridview.ts +12 -9
  14. package/src/components/header/header.module.scss +2 -1
  15. package/src/components/header/header.ts +17 -5
  16. package/src/components/icon/icon.module.scss +1 -0
  17. package/src/components/label/label.module.scss +6 -1
  18. package/src/components/listbox/listbox.module.scss +35 -31
  19. package/src/components/listbox/listbox.ts +50 -12
  20. package/src/components/messages/messages.ts +14 -0
  21. package/src/components/notification/notification.ts +1 -1
  22. package/src/components/popup/popup.ts +13 -2
  23. package/src/components/propgrid/propgrid.ts +4 -2
  24. package/src/components/sizers/sizer.ts +4 -4
  25. package/src/components/tabs/tabs.module.scss +2 -2
  26. package/src/components/tabs/tabs.ts +28 -4
  27. package/src/components/textedit/textedit.ts +1 -1
  28. package/src/components/treeview/treeview.module.scss +9 -1
  29. package/src/components/treeview/treeview.ts +52 -13
  30. package/src/core/component.ts +46 -9
  31. package/src/core/core_data.ts +8 -8
  32. package/src/core/core_state.ts +1 -1
  33. package/src/core/core_tools.ts +2 -0
  34. package/lib/src/components/base.scss +0 -25
  35. package/lib/src/components/boxes/boxes.module.scss +0 -54
  36. package/lib/src/components/boxes/boxes.ts +0 -370
  37. package/lib/src/components/breadcrumb/breadcrumb.scss +0 -56
  38. package/lib/src/components/breadcrumb/breadcrumb.ts +0 -93
  39. package/lib/src/components/breadcrumb/chevron-right.svg +0 -1
  40. package/lib/src/components/btngroup/btngroup.module.scss +0 -41
  41. package/lib/src/components/btngroup/btngroup.ts +0 -153
  42. package/lib/src/components/button/button.module.scss +0 -173
  43. package/lib/src/components/button/button.ts +0 -185
  44. package/lib/src/components/calendar/calendar-check-sharp-light.svg +0 -1
  45. package/lib/src/components/calendar/calendar.module.scss +0 -163
  46. package/lib/src/components/calendar/calendar.ts +0 -327
  47. package/lib/src/components/calendar/chevron-left-sharp-light.svg +0 -1
  48. package/lib/src/components/calendar/chevron-right-sharp-light.svg +0 -1
  49. package/lib/src/components/canvas/canvas.module.scss +0 -25
  50. package/lib/src/components/canvas/canvas.ts +0 -189
  51. package/lib/src/components/canvas/canvas_ex.ts +0 -276
  52. package/lib/src/components/checkbox/check.svg +0 -4
  53. package/lib/src/components/checkbox/checkbox.module.scss +0 -142
  54. package/lib/src/components/checkbox/checkbox.ts +0 -140
  55. package/lib/src/components/colorinput/colorinput.module.scss +0 -65
  56. package/lib/src/components/colorinput/colorinput.ts +0 -91
  57. package/lib/src/components/colorinput/crosshairs-simple-sharp-light.svg +0 -1
  58. package/lib/src/components/colorpicker/colorpicker.module.scss +0 -133
  59. package/lib/src/components/colorpicker/colorpicker.ts +0 -482
  60. package/lib/src/components/combobox/combobox.module.scss +0 -133
  61. package/lib/src/components/combobox/combobox.ts +0 -275
  62. package/lib/src/components/combobox/updown.svg +0 -4
  63. package/lib/src/components/components.ts +0 -42
  64. package/lib/src/components/dialog/dialog.module.scss +0 -104
  65. package/lib/src/components/dialog/dialog.ts +0 -229
  66. package/lib/src/components/dialog/xmark-sharp-light.svg +0 -1
  67. package/lib/src/components/filedrop/cloud-arrow-up.svg +0 -1
  68. package/lib/src/components/filedrop/filedrop.module.scss +0 -70
  69. package/lib/src/components/filedrop/filedrop.ts +0 -131
  70. package/lib/src/components/form/form.module.scss +0 -38
  71. package/lib/src/components/form/form.ts +0 -172
  72. package/lib/src/components/gridview/arrow-down-light.svg +0 -1
  73. package/lib/src/components/gridview/arrow-up-light.svg +0 -1
  74. package/lib/src/components/gridview/gridview.module.scss +0 -324
  75. package/lib/src/components/gridview/gridview.ts +0 -1175
  76. package/lib/src/components/header/header.module.scss +0 -40
  77. package/lib/src/components/header/header.ts +0 -130
  78. package/lib/src/components/icon/icon.module.scss +0 -31
  79. package/lib/src/components/icon/icon.ts +0 -137
  80. package/lib/src/components/image/image.module.scss +0 -28
  81. package/lib/src/components/image/image.ts +0 -168
  82. package/lib/src/components/input/input.module.scss +0 -74
  83. package/lib/src/components/input/input.ts +0 -422
  84. package/lib/src/components/keyboard/arrow-up.svg +0 -1
  85. package/lib/src/components/keyboard/delete-left.svg +0 -1
  86. package/lib/src/components/keyboard/eye-slash.svg +0 -1
  87. package/lib/src/components/keyboard/keyboard.module.scss +0 -134
  88. package/lib/src/components/keyboard/keyboard.ts +0 -526
  89. package/lib/src/components/label/label.module.scss +0 -76
  90. package/lib/src/components/label/label.ts +0 -97
  91. package/lib/src/components/link/link.ts +0 -81
  92. package/lib/src/components/listbox/listbox.module.scss +0 -161
  93. package/lib/src/components/listbox/listbox.ts +0 -539
  94. package/lib/src/components/menu/caret-right-solid.svg +0 -1
  95. package/lib/src/components/menu/menu.module.scss +0 -117
  96. package/lib/src/components/menu/menu.ts +0 -174
  97. package/lib/src/components/messages/circle-exclamation.svg +0 -1
  98. package/lib/src/components/messages/messages.module.scss +0 -92
  99. package/lib/src/components/messages/messages.ts +0 -215
  100. package/lib/src/components/messages/pen-field.svg +0 -1
  101. package/lib/src/components/normalize.scss +0 -391
  102. package/lib/src/components/notification/circle-check-solid.svg +0 -1
  103. package/lib/src/components/notification/circle-exclamation-solid.svg +0 -1
  104. package/lib/src/components/notification/circle-notch-light.svg +0 -1
  105. package/lib/src/components/notification/notification.module.scss +0 -84
  106. package/lib/src/components/notification/notification.ts +0 -107
  107. package/lib/src/components/notification/xmark-sharp-light.svg +0 -1
  108. package/lib/src/components/panel/panel.module.scss +0 -60
  109. package/lib/src/components/panel/panel.ts +0 -58
  110. package/lib/src/components/popup/popup.module.scss +0 -51
  111. package/lib/src/components/popup/popup.ts +0 -442
  112. package/lib/src/components/progress/progress.module.scss +0 -57
  113. package/lib/src/components/progress/progress.ts +0 -44
  114. package/lib/src/components/propgrid/folder-closed.svg +0 -1
  115. package/lib/src/components/propgrid/folder-open.svg +0 -1
  116. package/lib/src/components/propgrid/progrid.module.scss +0 -112
  117. package/lib/src/components/propgrid/propgrid.ts +0 -288
  118. package/lib/src/components/propgrid/updown.svg +0 -4
  119. package/lib/src/components/radio/radio.module.scss +0 -147
  120. package/lib/src/components/radio/radio.svg +0 -4
  121. package/lib/src/components/radio/radio.ts +0 -142
  122. package/lib/src/components/rating/rating.module.scss +0 -23
  123. package/lib/src/components/rating/rating.ts +0 -131
  124. package/lib/src/components/rating/star-sharp-light.svg +0 -1
  125. package/lib/src/components/rating/star-sharp-solid.svg +0 -1
  126. package/lib/src/components/select/select.module.scss +0 -9
  127. package/lib/src/components/select/select.ts +0 -134
  128. package/lib/src/components/shared.scss +0 -137
  129. package/lib/src/components/sizers/sizer.module.scss +0 -90
  130. package/lib/src/components/sizers/sizer.ts +0 -132
  131. package/lib/src/components/slider/slider.module.scss +0 -118
  132. package/lib/src/components/slider/slider.ts +0 -198
  133. package/lib/src/components/switch/switch.module.scss +0 -127
  134. package/lib/src/components/switch/switch.ts +0 -62
  135. package/lib/src/components/tabs/tabs.module.scss +0 -45
  136. package/lib/src/components/tabs/tabs.ts +0 -205
  137. package/lib/src/components/textarea/textarea.module.scss +0 -63
  138. package/lib/src/components/textarea/textarea.ts +0 -125
  139. package/lib/src/components/textedit/textedit.module.scss +0 -116
  140. package/lib/src/components/textedit/textedit.ts +0 -115
  141. package/lib/src/components/themes.scss +0 -88
  142. package/lib/src/components/tickline/tickline.module.scss +0 -26
  143. package/lib/src/components/tickline/tickline.ts +0 -82
  144. package/lib/src/components/tooltips/circle-info-sharp-light.svg +0 -1
  145. package/lib/src/components/tooltips/comments-question.svg +0 -1
  146. package/lib/src/components/tooltips/tooltips.scss +0 -72
  147. package/lib/src/components/tooltips/tooltips.ts +0 -109
  148. package/lib/src/components/treeview/chevron-down-light.svg +0 -1
  149. package/lib/src/components/treeview/treeview.module.scss +0 -185
  150. package/lib/src/components/treeview/treeview.ts +0 -445
  151. package/lib/src/components/viewport/viewport.module.scss +0 -32
  152. package/lib/src/components/viewport/viewport.ts +0 -41
  153. package/lib/src/core/component.ts +0 -1066
  154. package/lib/src/core/core_application.ts +0 -265
  155. package/lib/src/core/core_colors.ts +0 -250
  156. package/lib/src/core/core_data.ts +0 -1310
  157. package/lib/src/core/core_dom.ts +0 -471
  158. package/lib/src/core/core_dragdrop.ts +0 -201
  159. package/lib/src/core/core_element.ts +0 -115
  160. package/lib/src/core/core_events.ts +0 -177
  161. package/lib/src/core/core_i18n.ts +0 -393
  162. package/lib/src/core/core_react.ts +0 -79
  163. package/lib/src/core/core_router.ts +0 -237
  164. package/lib/src/core/core_state.ts +0 -62
  165. package/lib/src/core/core_styles.ts +0 -214
  166. package/lib/src/core/core_svg.ts +0 -712
  167. package/lib/src/core/core_tools.ts +0 -906
  168. package/lib/src/types/scss.d.ts +0 -4
  169. package/lib/src/types/svg.d.ts +0 -1
  170. package/lib/src/types/x4react.d.ts +0 -9
  171. package/lib/src/x4.scss +0 -19
  172. package/lib/src/x4.ts +0 -35
  173. package/lib/src/x4tsx.d.ts +0 -25
package/lib/styles/x4.css CHANGED
@@ -1 +1 @@
1
- .box,.vbox,.x4vbox,.hbox,.x4hbox{position:relative}.hbox,.x4hbox{display:flex;flex-direction:row;align-items:center}.vbox,.x4vbox{display:flex;flex-direction:column}.fit,.x4stackbox>*{position:absolute;inset:0}.x4hbox.align-start{align-items:start}.x4stackbox{display:flex}.x4stackbox>*{position:relative!important}.x4stackbox>*:not(.selected){display:none}.x4gridbox{display:grid}.x4masonrybox{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:10px;overflow:hidden}:root{--breadcrumbs-background: var( --background-primary );--breadcrumbs-icon-color: var( --text-ternary );--breadcrumbs-link-color: var( --text-ternary );--breadcrumbs-active-color: var( --accent-background )}.x4breadcrumbs{background-color:var(--breadcrumbs-background);border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:2em}.x4breadcrumbs>.x4button{border:none;background-color:transparent;color:var(--breadcrumbs-link-color);padding:6px 0 6px 8px;min-width:60px}.x4breadcrumbs>.x4button #icon{fill:var(--breadcrumbs-icon-color)}.x4breadcrumbs>.x4button:not(:last-child):after{content:">"}.x4breadcrumbs>.x4button:hover:not(:last-child){background-color:transparent;color:var(--accent-background);fill:var(--accent-background);border-bottom-color:var(--breadcrumbs-link-color)}.x4breadcrumbs>.x4button:hover:not(:last-child) #text{text-decoration:underline}.x4breadcrumbs>.x4button:last-child{font-weight:700;color:var(--breadcrumbs-active-color);cursor:auto}.x4breadcrumbs>.x4button:last-child #icon{fill:var(--breadcrumbs-active-color)}.x4breadcrumbs>.x4button:last-child:hover{background-color:transparent;color:var(--breadcrumbs-link-color)}.box,.vbox,.hbox,.x4icon{position:relative}.hbox,.x4icon{display:flex;flex-direction:row;align-items:center}.x4icon{min-width:10px;height:10px;overflow:hidden;aspect-ratio:1/1}.x4icon svg{width:100%;height:100%}.box,.vbox,.hbox,.x4button{position:relative}.hbox,.x4button{display:flex;flex-direction:row;align-items:center}:root{--button-background: var( --accent-background );--button-color: var( --accent-color );--button-background-hover: var( --accent-background-hover );--button-color-hover: var( --accent-color-hover );--button-background-active: var( --accent-background-active );--button-color-active: var( --accent-color-active );--button-background-focus: var( --accent-background-focus );--button-color-focus: var( --accent-color-focus );--button-background-disabled: var( --disabled-background );--button-color-disabled: var( --disabled-color );--button-icon-color: rgb(255 255 255 / 64%);--ol-button-background: var( --background-primary );--ol-button-background-active: #ccc;--ol-button-color-active: var( --text-primary );--ol-button-background-hover: #eee;--ol-button-color-hover: var( --text-primary );--ol-button-color-disabled: #ccc;--ol-button-color: var( --text-primary );--ol-button-border: var( --border );--ol-button-icon-color: var( --text-primary );--ol-button-border-focus: var( --accent-background-focus );--ol-button-color-focus: var( --accent-background )}.x4button{gap:4px;font-size:inherit;font-family:inherit;padding:8px;margin:2px;transition:background-color .3s,color .3s;border:none;outline:none;cursor:pointer;background-color:var(--button-background);color:var(--button-color);gap:.4em}.x4button>#icon{transition:color .3s,fill .3s;fill:var(--button-color);width:1em;height:1em}.x4button>#icon.empty{display:none}.x4button>#label{flex-grow:1;padding:0;color:inherit}.x4button>#label.empty{display:none}.x4button:focus{background-color:var(--button-background-focus);color:var(--button-color-focus)}.x4button:focus #icon{color:var(--button-color-focus)}.x4button:focus #label{text-decoration:underline}.x4button:hover{background-color:var(--button-background-hover);color:var(--button-color-hover)}.x4button:active{background-color:var(--button-background-active);color:var(--button-color-active)}.x4button[disabled]{cursor:not-allowed;background-color:var(--button-background-disabled);color:var(--button-color-disabled)}.x4button.outline{background-color:var(--ol-button-background);border:1px solid var(--ol-button-border);color:var(--ol-button-color)}.x4button.outline #icon{color:var(--ol-button-icon-color);fill:var(--ol-button-icon-color)}.x4button.outline:focus{border-color:var(--ol-button-border-focus);color:var(--ol-button-color-focus);fill:var(--ol-button-color-focus)}.x4button.outline:focus #icon{color:var(--ol-button-color-focus);fill:var(--ol-button-color-focus)}.x4button.outline:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover);fill:var(--ol-button-color-hover)}.x4button.outline:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active);fill:var(--ol-button-color-active)}.x4button.outline:active #icon{color:var(--button-icon-color);fill:var(--button-icon-color)}.x4button.danger:not([disabled]){background-color:var(--alert-background);color:var(--alert-color)}.x4button.danger:not([disabled]):active{background-color:var(--alert-background-active)}:root{--btngroup-background: white}.x4btngroup{align-content:start;margin:5px;gap:4px;background:var(--btngroup-background)}.x4btngroup.align-right{justify-content:end}.x4btngroup.align-center{justify-content:center}.x4btngroup .x4button:disabled .fa-primary{fill:var(--border)}.box,.vbox,.x4label.vertical,.hbox,.x4label{position:relative}.hbox,.x4label{display:flex;flex-direction:row;align-items:center}.vbox,.x4label.vertical{display:flex;flex-direction:column}:root{--label-background: transparent;--label-color: var( --text-ternary );--label-icon-color: rgb(0 0 0 / 44%)}.x4label{color:var(--label-color);background-color:var(--label-background);gap:.2em}.x4label.right{text-align:right;justify-content:end}.x4label.center{text-align:center;justify-content:center}.x4label #text:empty{display:none}.x4label #icon{height:1em;margin:0 .1em;color:var(--label-icon-color)}.x4label #icon.empty{display:none}.x4label.rotate #icon{animation:rotating 2s linear infinite}.x4simpletext{text-align:left}.x4simpletext.al-center{text-align:center}.x4simpletext.al-right{text-align:right}.x4csizer{position:absolute}.x4csizer.top{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;top:0}.x4csizer.bottom{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;bottom:0}.x4csizer.left{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;left:0}.x4csizer.right{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;right:0}.x4csizer.top-left{width:8px;height:8px;z-index:11;left:0;top:0;cursor:nw-resize}.x4csizer.top-right{width:8px;height:8px;z-index:11;right:0;top:0;cursor:ne-resize}.x4csizer.bottom-left{width:8px;height:8px;z-index:11;left:0;bottom:0;cursor:ne-resize}.x4csizer.bottom-right{width:8px;height:8px;z-index:11;right:0;bottom:0;cursor:nw-resize}:root{--modal-mask-background: rgb(0 0 0 / 60% )}.x4popup{position:absolute!important;background-color:var(--fill-color);border:1px solid var(--border-color);overflow:hidden;z-index:1000;border-radius:var(--bradius)}.x4popup.popup-caption,.x4popup .popup-caption{cursor:move}.x4popup.center{left:50%;top:50%;transform:translate(-50%,-50%)}::backdrop,.x4modal-mask{background-color:var(--modal-mask-background);backdrop-filter:blur(8px);position:absolute;inset:0;z-index:1000}.box,.vbox,.hbox,.x4menu .x4cmenuitem{position:relative}.hbox,.x4menu .x4cmenuitem{display:flex;flex-direction:row;align-items:center}.flex,.x4menu .x4cmenuitem #text{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-lg,.x4menu{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:root{--menu-background: var( --background-primary );--menu-border: var( --border-hover );--menuitem-color: var( --text-ternary );--menuitem-background-active: var( --accent-background-active );--menuitem-color-active: var( --accent-color-active );--menuitem-background-hover: var( --accent-background-hover );--menuitem-color-hover: var( --accent-color-hover )}.x4menu{position:absolute;overflow-y:auto;border-radius:var(--bradius);padding:8px 0;min-width:150px;background-color:var(--menu-background);border:1px solid var(--menu-border);max-height:calc(100vh - 32px)}.x4menu .x4cmenuitem{transition:background-color .3s,color .3s;align-items:center;color:var(--menuitem-color);padding:6px;gap:10px;cursor:pointer;transition:background-color .1s}.x4menu .x4cmenuitem #icon{width:16px;height:16px}.x4menu .x4cmenuitem #icon .fa-primary{fill:var(--color-primary-a50)}.x4menu .x4cmenuitem #icon .fa-secondary{fill:var(--color-primary-a30);opacity:1}.x4menu .x4cmenuitem.title{color:var(--text-primary);cursor:auto;margin-left:-16px;margin-top:-6px;font-weight:600}.x4menu .x4cmenuitem.popup:after{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="var(--color-gray-8)"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');width:6px}.x4menu .x4cmenuitem:hover:not(.title),.x4menu .x4cmenuitem.opened{background-color:var(--menuitem-background-hover);color:var(--menuitem-color-hover)}.x4menu .x4cmenuitem:active:not(.title){background-color:var(--menuitem-background-active);color:var(--menuitem-color-active)}.x4menu .x4cmenuitem[disabled]{color:var(--disabled-color-dark)!important}.x4menu .x4cmenuitem[disabled]:hover{background-color:var(--disabled-background)!important}.x4menu .x4cmenusep{padding-top:4px;border-bottom:1px solid var(--border);margin-bottom:4px}.box,.vbox,.hbox,.x4calendar .week .cell .text{position:relative}.hbox,.x4calendar .week .cell .text{display:flex;flex-direction:row;align-items:center}.flex,.x4calendar .week,.x4calendar .week .cell{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--calendar-btn-background: inherit;--calendar-btn-color: var( --text-secondary );--calendar-btn-color-hover: var( --text-primary );--calendar-week-color: var( --accent-background );--calendar-week-color-hover: var( --accent-background-hover );--calendard-day-background-hover: var( --accent-background-hover );--calendard-day-color-hover: var( --accent-color-hover );--calendar-sel-background: var( --accent-background );--calendar-sel-color: var( --accent-color );--calendar-today-background: var( --alert-background );--calendar-today-color: var( --alert-color );--calendar-today-border: var( --accent-background );--calendar-header-color: var( --text-primary );--calendar-out-color: var( --disabled-color-dark )}.x4calendar{border:1px solid var(--border);padding:4px}.x4calendar .month-sel{height:2em;align-items:center;padding-left:2em;margin-bottom:8px}.x4calendar .month-sel .month{padding-right:4px}.x4calendar .month-sel .year,.x4calendar .month-sel .month{cursor:pointer}.x4calendar .month-sel .month:hover,.x4calendar .month-sel .year:hover{text-decoration:underline}.x4calendar .month-sel .x4label{font-weight:700}.x4calendar .month-sel .x4button{height:auto;background-color:var(--calendar-btn-background);color:var(--calendar-btn-color)}.x4calendar .month-sel .x4button:hover{color:var(--calendar-btn-color-hover)}.x4calendar .week{align-items:center;padding:2px}.x4calendar .week .cell{min-width:28px;min-height:28px;color:var(--gray-900);text-align:center}.x4calendar .week .cell .text{transition:background-color .3s,color .3s;justify-content:center;border:1px solid transparent;margin:auto;border-radius:14px;width:28px;height:28px}.x4calendar .week .today .text{font-weight:700;background-color:var(--calendar-today-background);color:var(--calendar-today-color)}.x4calendar .week .selection .text{background-color:var(--calendar-sel-background);color:var(--calendar-sel-color)}.x4calendar .week .weeknum{width:2em;color:var(--calendar-week-color);font-size:70%}.x4calendar .week:hover .weeknum{font-weight:700}.x4calendar .week .day{cursor:pointer}.x4calendar .week .out{color:var(--calendar-out-color);font-size:80%}.x4calendar .week .day:hover .text{background-color:var(--calendard-day-background-hover);color:var(--calendard-day-color-hover)}.x4calendar .header .cell{color:var(--calendar-header-color);height:1.5em;justify-content:center}.x4calendar .header:hover{background-color:inherit}.x4canvas{overflow:hidden}.x4canvas>canvas{position:absolute;left:0;top:0}:root{--input-sel-background: var( --accent-background );--input-sel-color: var( --accent-color );--input-placeholder: var( --disabled-background );--input-error: var( --alert-background );--input-checkbox-color: var( --accent-background )}input.x4input{font:inherit;outline:none;border:none}input.x4input::selection{background-color:var(--input-sel-background);color:var(--input-sel-color)}input.x4input[type=text],input.x4input[type=password],input.x4input[type=date],input.x4input[type=number],input.x4input[type=email]{padding:4px}input.x4input[type=checkbox]:checked,input.x4input[type=radio]:checked{accent-color:var(--input-checkbox-color);padding:2px}input.x4input[type=range]{accent-color:var(--input-checkbox-color)}input.x4input::placeholder{color:var(--input-placeholder);font-style:italic;font-weight:90%}input.x4input[type=password]{font-weight:700}input.x4input:disabled{background-color:transparent}input.x4input:invalid{color:var(--input-error)}.box,.vbox,.hbox,.x4checkbox{position:relative}.hbox,.x4checkbox{display:flex;flex-direction:row;align-items:center}:root{--checkbox-background-check: var( --accent-background );--checkbox-background-check-hover: var( --accent-background-hover );--checkbox-background-disabled: var( --disabled-color );--checkbox-background-disabled-check: var( --disabled-background );--checkbox-color-disabled: var( --disabled-background );--checkbox-check-border: var( --border );--checkbox-check-border-hover: var( --border-hover )}.x4checkbox{display:flex;flex-direction:row;align-items:center;margin:5px;padding:4px;gap:4px;cursor:pointer}.x4checkbox .inner{height:1rem;width:1rem;color:#fff;position:relative;order:1}.x4checkbox .inner input{appearance:none;outline:none;cursor:pointer;display:block;margin:0;padding:0;left:0;top:0;width:100%;height:100%;transition:opacity .1s ease}.x4checkbox .inner input:checked{background-color:var(--checkbox-background-check)}.x4checkbox .inner input:checked:hover{background-color:var(--checkbox-background-check-hover)}.x4checkbox .inner input:not(:checked){border:1px solid var(--checkbox-check-border)}.x4checkbox .inner input:not(:checked):hover{border:1px solid var(--checkbox-check-border-hover)}.x4checkbox .inner svg{margin:auto;pointer-events:none;position:absolute;opacity:0;inset:0;width:100%;height:50%}.x4checkbox .inner:has(input:checked) input{opacity:1}.x4checkbox .inner:has(input:checked) svg{opacity:1}.x4checkbox:focus-within label #text{text-decoration:underline}.x4checkbox[disabled],.x4checkbox[disabled] *{cursor:not-allowed}.x4checkbox[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4checkbox[disabled] .inner{pointer-events:none}.x4checkbox[disabled] .inner input{background-color:var(--checkbox-background-disabled)}.x4checkbox[disabled] .inner input:checked{background-color:var(--checkbox-background-disabled-check)}.x4checkbox label{text-align:right;cursor:inherit;order:2}.x4checkbox.left #label{order:0;text-align:left}:root{--colorinput-btn-background: inherit;--colorinput-btn-color: var( --text-secondary );--colorinput-btn-color-hover: var( --text-primary )}.x4colorinput{margin:5px;border-bottom:1px solid var(--border);outline:none}.x4colorinput:focus-within{border-bottom-color:var(--border-focus)}.x4colorinput .swatch{margin:4px;width:1rem;height:1rem}.x4colorinput input{outline:none;margin:0;height:100%;flex-grow:1}.x4colorinput .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--colorinput-btn-color)}.x4colorinput .x4button #icon{color:var(--colorinput-btn-color)}.x4colorinput .x4button:hover,.x4colorinput .x4button:hover #icon{color:var(--colorinput-btn-color-hover)}.x4colorpicker{width:240px;gap:4px;touch-action:none;outline:none;margin:8px}.x4colorpicker .overlay{position:absolute;inset:0}.x4colorpicker .x4saturation{width:100%;height:140px;position:relative}.x4colorpicker .x4saturation .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,50%)}.x4colorpicker .body{gap:4px}.x4colorpicker .body>.x4vbox{gap:4px}.x4colorpicker .body .x4hueslider{position:relative;height:16px;overflow:hidden;background-image:linear-gradient(to right,red,#ff0,#0f0,#00ffd4,#00f,#f0f,red);border:1px solid var(--color-gray-3)}.x4colorpicker .body .x4hueslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .x4alphaslider{position:relative;height:16px;overflow:hidden}.x4colorpicker .body .x4alphaslider .checkers{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .x4alphaslider .color{background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.x4colorpicker .body .x4alphaslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .swatch{width:36px;height:36px}.x4colorpicker .body .swatch .checkers{border-radius:8px;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .swatch .color{border-radius:8px;background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.flex,.x4scrollview{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.x4scrollview{position:absolute;height:100%;width:100%;left:0;top:0;overflow:auto}.x4viewport{width:100%}.box,.vbox,.x4listbox,.hbox{position:relative}.vbox,.x4listbox{display:flex;flex-direction:column}.flex,.x4listbox>.body>.x4viewport .x4item{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--listbox-item-background-sel: var( --accent-background );--listbox-item-color-sel: var( --accent-color );--listbox-item-color-sel-disabled: var( --disabled-background );--listbox-item-color: var( --text-primary );--listbox-item-color-disabled: var( --disabled-color-dark );--listbox-item-background-hover: var( --background-secondary );--listbox-icon-color: var( --text-ternary );--listbox-background: white;--listbox-border: var( --border );--listbox-border-focus: var( --accent-background-focus )}.x4listbox{margin:5px;border:1px solid var(--listbox-border);background-color:var(--listbox-background);outline:none}.x4listbox:focus-within{border-color:var(--listbox-border-focus)}.x4listbox>.x4header{border-bottom:1px solid var(--color-gray-3)}.x4listbox>.body{width:100%;flex-basis:0;overflow-y:auto;overflow-x:auto;outline:none;position:relative}.x4listbox>.body>.x4viewport{display:table}.x4listbox>.body>.x4viewport .x4item{padding:4px;background-color:transparent;color:var(--color-gray-9)}.x4listbox>.body>.x4viewport .x4item>.x4label{color:inherit;padding:2px 6px}.x4listbox>.body>.x4viewport .x4item>.x4label #icon{color:var(--listbox-icon-color);fill:var(--listbox-icon-color)}.x4listbox>.body>.x4viewport .x4item:hover{background-color:var(--listbox-item-background-hover)}.x4listbox>.body>.x4viewport .x4item.selected{background-color:var(--listbox-item-background-sel);color:var(--listbox-item-color-sel)}.x4listbox>.body>.x4viewport .x4item.selected>.x4label #icon{color:var(--listbox-item-color-sel);fill:var(--listbox-item-color-sel)}.x4listbox>#footer{border-top:1px solid var(--border);margin:0}.x4listbox>#footer.x4btngroup{gap:0px}.x4listbox>#footer.x4btngroup .x4button{background-color:var(--ol-button-background);margin:0;color:var(--ol-button-color)}.x4listbox>#footer.x4btngroup .x4button:disabled{color:var(--ol-button-color-disabled)}.x4listbox>#footer.x4btngroup .x4button .x4icon{height:1.5em;width:1.5em}.x4listbox>#footer.x4btngroup .x4button:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover)}.x4listbox>#footer.x4btngroup .x4button:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active)}.x4listbox>#footer.x4btngroup .x4button:active #icon{color:var(--button-icon-color)}.x4listbox>#footer.x4btngroup .x4button:focus{background-color:var(--ol-button-background-hover)}.x4listbox[disabled]{cursor:not-allowed;border-color:var(--border);color:var(--listbox-item-color-disabled)}.x4listbox[disabled]>.body .x4viewport{pointer-events:none}.x4listbox[disabled]>.body .x4viewport .x4item.selected{background-color:var(--listbox-item-color-sel-disabled)}.box,.vbox,.hbox,.x4dropdownlist,.x4combobox{position:relative}.hbox,.x4dropdownlist,.x4combobox{display:flex;flex-direction:row;align-items:center}.flex,.x4dropdownlist .x4listbox,.x4combobox>#edit,.x4combobox>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dropdownlist{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--dropdown-border: var( --border-hover );--dropdown-background: var( --background-primary );--combobox-border: var( --border );--combobox-border-focus: var( --border-focus );--combobox-btn-background: inherit;--combobox-btn-color: var( --text-secondary );--combobox-btn-color-hover: var( --text-primary )}.x4dropdownlist{max-height:250px;position:absolute;background-color:var(--dropdown-background);border:1px solid var(--dropdown-border)}.x4dropdownlist .x4listbox{border:none;margin:0;width:100%;height:200px}.x4dropdownlist .x4listbox .x4item{white-space:nowrap}.x4combobox{margin:5px;gap:6px}.x4combobox>#label>.x4label{padding:0 6px 0 0;border-bottom:1px solid transparent;height:100%;font-weight:500;gap:0px}.x4combobox>#label>.x4label #text:not(.empty):after{content:":"}.x4combobox>#edit{border-bottom:1px solid var(--combobox-border)}.x4combobox>#edit:focus-within{border-bottom-color:var(--combobox-border-focus)}.x4combobox>#edit .x4input[readonly]{cursor:pointer}.x4combobox>#edit .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--combobox-btn-color)}.x4combobox>#edit .x4button #icon{color:var(--combobox-btn-color)}.x4combobox>#edit .x4button:hover,.x4combobox>#edit .x4button:hover #icon{color:var(--combobox-btn-color-hover)}.x4combobox[disabled],.x4combobox[disabled] *{cursor:not-allowed}.x4combobox[disabled] #label .x4label{color:var(--disabled-color-dark);pointer-events:none}.x4combobox[required]>#label>.x4label:before{content:"*";font-weight:700;color:var(--textedit-required);margin-right:2px}.box,.vbox,.x4form,.hbox{position:relative}.vbox,.x4form{display:flex;flex-direction:column}.flex,.x4form{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--form--background: var( --background-primary )}.x4form{padding:16px;background-color:var(--color-form)}.x4form.no-flex{flex-grow:0}.box,.vbox,.x4dialog,.hbox{position:relative}.vbox,.x4dialog{display:flex;flex-direction:column}.flex,.x4dialog>.caption>#title{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dialog{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--color-dialog-caption: var( --color-primary-a80 );--color-dialog-caption-text: var( --color-primary-a0 )}.x4dialog{position:absolute!important;background-color:#fff;border:1px solid var(--border-dark)}.x4dialog>.caption{padding:8px;background-color:var(--color-dialog-caption)}.x4dialog>.caption>#title{color:var(--color-dialog-caption-text);font-weight:700;font-size:120%}.x4dialog>.caption>#title #icon{color:var(--color-dialog-caption-text);fill:var(--color-dialog-caption-text)}.x4dialog>.caption>#closebox{margin:0;padding:4px}.x4dialog>.x4form{min-height:128px;min-width:450px;flex:1}.x4dialog>#btnbar{border-top:1px solid var(--border);padding:6px 20px;margin:0;justify-content:end;gap:8px}.x4dialog>#btnbar>.x4button{min-width:80px}.x4dialog>#btnbar>.x4button .x-simple-label{text-align:center}.x4dialog.danger>.caption{background-color:var(--alert-background);color:var(--alert-color)}.x4dialog.danger>.caption #closebox{background-color:transparent;color:var(--alert-color)}.x4dialog.danger>#btnbar>.x4button:not(.outline):not(:disabled){background-color:var(--alert-background);color:var(--alert-color)}.x4dialogex{padding:0;margin:0}:root{--filedrop-border: var( --border );--filedrop-icon-color: var( --accent-background );--filedrop-border-drop-hover: var( --accent-background );--filedrop-icon-color-hover: var( --alert-background )}.x4filedrop{border:1px solid var(--filedrop-border);border-radius:4px;cursor:pointer;width:fit-content;padding:8px;margin:5px;align-items:center}.x4filedrop .x4icon{width:2em;height:2em;color:var(--filedrop-icon-color);fill:var(--filedrop-icon-color)}.x4filedrop.hit{border-color:var(--filedrop-border-drop-hover)}.x4filedrop.hit .x4icon{color:var(--filedrop-icon-color-hover);fill:var(--filedrop-icon-color-hover)}.x4filedrop:focus{border-color:var(--ol-button-border-focus);color:var(--ol-button-color-focus)}.x4filedrop:focus #icon{color:var(--ol-button-color-focus)}.x4filedrop:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover)}.x4filedrop:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active)}.x4filedrop:active #icon{color:var(--button-icon-color)}:root{--image-border-drop-hover: var( --accent-background )}.x4image{position:relative;background:none}.x4image.hit{border-color:var(--image-border-drop-hover)!important}:root{--gridview-background: white;--gridview-border: var( --border );--gridview-header-cell-background: white;--gridview-header-cell-color: black;--gridview-header-cell-vline: #f0f0f0;--gridview-header-cell-border: #cccccc;--grid-check-background: var( --accent-background );--grid-check-color: white;--grid-check-background-hover: white;--grid-check-color-hover: var( --accent-background );--grid-perc-background: var( --accent-background );--grid-perc-color: white;--grid-perc-background-hover: white;--grid-perc-color-hover: var( --accent-background );--gridview-cell-color: black;--gridview-cell-color-sel: white;--gridview-cell-vline: var( --border );--gridview-row-background: white;--gridview-row-odd-background: white;--gridview-row-border: var( --border );--gridview-row-background-hover: var( --background-secondary );--gridview-row-background-hover-sel: var(--color-primary-a50);--gridview-row-background-sel: var( --accent-background );--gridview-row-color-sel: var( --accent-color );--gridview-fix-border: var( --accent-background )}.x4gridview{--left: 0px;--top: 0px;--fixed-width: 0;--fixed-height: 30px;--footer-height: 24px;--row-height: 30px;position:relative;overflow:hidden;margin:5px;outline:none;background-color:var(--gridview-background);border:1px solid var(--gridview-border)}.x4gridview .cell{padding:4px;display:flex;align-items:center;transition:border-bottom-color .3s ease,background-color .3s ease;min-width:16px}.x4gridview .cell .cell-check{width:16px;height:16px;background-color:var(--grid-check-background);color:var(--grid-check-color);padding:4px;border-radius:8px;margin:0 auto}.x4gridview .x4viewport{position:absolute;overflow:auto;right:0;bottom:var(--footer-height);left:var(--fixed-width);top:var(--fixed-height);width:unset}.x4gridview .body{position:absolute;overflow:hidden;right:var(--scrollbar-size);bottom:var(--scrollbar-size);left:0;top:0}.x4gridview .row{position:absolute;left:0;top:0;display:flex;overflow:hidden;height:var(--row-height);border-bottom:1px solid var(--gridview-row-border)}.x4gridview .row .cell{height:100%;overflow:hidden;white-space:nowrap;border-right:1px solid var(--gridview-cell-vline)}.x4gridview .row .cell>.x4icon:not(.cell-check){height:100%}.x4gridview .row .cell>.x4image{width:100%;height:100%}.x4gridview .row .cell .percent{width:100%;border:1px solid var(--border);height:8px;background-color:#fff;overflow:hidden}.x4gridview .row .cell .percent div{background-color:var(--grid-perc-background);height:100%}.x4gridview .row.selected{background-color:var(--gridview-row-background-sel);color:var(--gridview-cell-color-sel)}.x4gridview .row.selected .cell .cell-check{background-color:var(--grid-check-background-hover);color:var(--grid-check-color-hover)}.x4gridview .row:hover:not(.selected),.x4gridview .row.hover:not(.selected){background-color:var(--gridview-row-background-hover)}.x4gridview .row:hover:not(.selected) .cell .cell-check,.x4gridview .row.hover:not(.selected) .cell .cell-check{background-color:var(--grid-check-background-hover);color:var(--grid-check-color-hover)}.x4gridview .row:hover.selected,.x4gridview .row.hover.selected{background-color:var(--gridview-row-background-hover-sel)}.x4gridview .col-header,.x4gridview .col-footer{position:absolute;background-color:var(--gridview-header-cell-background);touch-action:none;left:calc(var(--fixed-width) + var(--left));z-index:1;display:inline-flex;align-items:center;color:#000;font-weight:500;justify-content:center}.x4gridview .col-header.fixed,.x4gridview .col-footer.fixed{left:0;z-index:2}.x4gridview .col-header .cell,.x4gridview .col-footer .cell{position:relative;height:100%;display:flex;justify-content:center;border-right:1px solid var(--gridview-header-cell-vline)}.x4gridview .col-header .cell>.x4simpletext,.x4gridview .col-footer .cell>.x4simpletext{flex-grow:1;text-overflow:ellipsis;overflow:hidden}.x4gridview .col-header .cell .sorter,.x4gridview .col-footer .cell .sorter{display:none;flex-shrink:0;width:1em}.x4gridview .col-header .cell.sorted .sorter,.x4gridview .col-footer .cell.sorted .sorter{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M180.7 475.3c6.2 6.2 16.4 6.2 22.6 0l176-176c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L208 425.4 208 48c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 377.4L27.3 276.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l176 176z"/></svg>');display:block;width:20px;height:.7em;background-repeat:no-repeat;background-position:50% 50%}.x4gridview .col-header .cell.sorted.desc .sorter,.x4gridview .col-footer .cell.sorted.desc .sorter{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M203.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-176 176c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 86.6V464c0 8.8 7.2 16 16 16s16-7.2 16-16V86.6L356.7 235.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-176-176z"/></svg>')}.x4gridview .col-header .cell .x-c-sizer:hover,.x4gridview .col-footer .cell .x-c-sizer:hover{width:8px}.x4gridview .col-header.fixed .cell:last-child,.x4gridview .col-footer.fixed .cell:last-child{border-right-color:var(--gridview-fix-border)}.x4gridview .col-header:hover .cell,.x4gridview .col-footer:hover .cell{border-right-color:var(--border-hover)}.x4gridview .col-header{top:0;height:var(--fixed-height);border-bottom:1px solid var(--gridview-header-cell-border)}.x4gridview .col-header .cell{overflow:hidden;border-bottom:1px solid transparent}.x4gridview .col-header .cell:hover{border-bottom-color:var(--gridview-row-background-hover)}.x4gridview .col-footer{border-top:1px solid var(--gridview-header-cell-border);height:var(--footer-height);bottom:0}.x4gridview .col-footer .cell{border-top:1px solid transparent}.x4gridview .col-footer .cell:hover{background-color:var(--gridview-row-background-hover)}.x4gridview .row-header{position:absolute;left:0;top:calc(var(--fixed-height) + var(--top));width:var(--fixed-width);bottom:0;background-color:#fff;z-index:1}.x4gridview .row-header .row{position:absolute;display:inline-flex}.x4gridview .row-header .cell{border-right:1px solid var(--gridview-cell-vline);border-bottom:1px solid var(--gridview-row-border);height:var(--row-height)}.x4gridview .row-header .cell>.x4simpletext{margin:0 auto}.x4gridview .row-header .cell:last-child{border-right:1px solid var(--gridview-fix-border)}.x4gridview .row-header .cell-out{position:absolute;background-color:var(--color-gray-0);width:100%;height:var(--row-height)}.flex,.x4header{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--header-background-hover: rgba(100,100,100,.1);--header-sizer-hover: var( --border-hover )}.x4header{width:100%;overflow:hidden;min-height:2em;border-bottom:1px solid var(--border)}.x4header .cell{border-bottom:1px solid transparent;overflow:hidden;min-width:3rem;transition:border-color .5s ease;padding:4px}.x4header .cell span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.x4header .cell:hover{background-color:var(--header-background-hover)}.x4header .cell .x4csizer:hover{border-right:1px solid var(--header-sizer-hover)}:root{--keyboard-key-background: #33302d;--keyboard-hilite-color: #5ba921}.x4keyboard{z-index:2000;position:absolute!important;width:100vw;height:14rem;bottom:0;background-color:#000000e6;box-sizing:border-box;padding:4px}.x4keyboard #kb{width:100vw;max-width:800px}.x4keyboard .line{flex-grow:10;position:relative}.x4keyboard .mi{font-family:Material Icons;font-size:22px;text-align:center}.x4keyboard .tch{cursor:pointer;flex-grow:10;flex-basis:44px;display:flex;align-items:center;color:#fff;text-align:center;background-color:var(--keyboard-key-background);border:1px solid var(--keyboard-key-background);border-radius:4px;margin:2px 4px;box-sizing:border-box}.x4keyboard .tch div{width:100%}.x4keyboard .tch:hover{border:1px solid var(--keyboard-hilite-color)}.x4keyboard .tch:active{background-color:var(--keyboard-hilite-color);color:var(--keyboard-key-background)}.x4keyboard .cplace{visibility:hidden}.x4keyboard .kbicon div{width:0}.x4keyboard .cret{color:var(--keyboard-hilite-color);font-weight:700}.x4keyboard .cdel .x4icon,.x4keyboard .cshift .x4icon,.x4keyboard .chide .x4icon{margin:auto;color:var(--keyboard-hilite-color)}.x4keyboard .lower .cspace,.x4keyboard .upper .cspace{flex-basis:689px}.x4keyboard .lower .cret,.x4keyboard .upper .cret{flex-basis:84px}.x4keyboard .lower .cshift,.x4keyboard .upper .cshift{flex-basis:60px}.x4keyboard .lower .chide,.x4keyboard .upper .chide,.x4keyboard .lower .cnum,.x4keyboard .upper .cnum{flex-basis:88px}:root{--msgbox-caption-background: var( --alert-background );--msgbox-caption-color: var( --alert-color );--msgbox-icon-color: var( --alert-background )}.x4messagebox{max-width:60vw}.x4messagebox>.caption{background-color:var(--msgbox-caption-background)}.x4messagebox>.caption>#title{color:var(--msgbox-caption-color)}.x4messagebox .x4form{min-width:400px}.x4messagebox .x4form .x4icon{color:var(--msgbox-icon-color);height:96px}.x4messagebox .x4form .x4label{padding:16px;line-height:1.8em}.x4inputbox,.x4promptbox{max-width:60vw}.x4inputbox>.caption,.x4promptbox>.caption{background-color:var(--msgbox-caption-background)}.x4inputbox>.caption>#title,.x4promptbox>.caption>#title{color:var(--msgbox-caption-color)}.x4inputbox .x4form,.x4promptbox .x4form{min-width:400px}.x4inputbox .x4form .x4icon,.x4promptbox .x4form .x4icon{color:var(--msgbox-icon-color);height:64px}.x4inputbox .x4form .x4vbox,.x4promptbox .x4form .x4vbox{padding:16px;gap:16px;justify-content:center}.x4inputbox .x4form .x4vbox .x4label,.x4promptbox .x4form .x4vbox .x4label{line-height:1.8em}.x4inputbox input,.x4promptbox input{padding:8px;border:1px solid var(--border)}.x4inputbox input:invalid,.x4promptbox input:invalid{border-color:var(--input-error)}.shadow-xl,.x4notification{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--notification-border: var( --border );--notification-background: white;--notification-icon-default: var( --accent-background );--notification-icon-success: var( --success-background );--notification-icon-danger: var( --alert-background )}.x4notification{padding:8px;border:1px solid var(--notification-border);border-left:3px solid var(--accent-background);background-color:var(--notification-background)}.x4notification>.x4hbox{gap:8px}.x4notification .x4icon{width:2em;height:2em;color:var(--notification-icon-default)}.x4notification .body .title{font-weight:700;padding:6px 6px 3px}.x4notification .body .text{padding:3px 6px 6px;color:var(--color-gray-7)}.x4notification.success{border-left-color:var(--notification-icon-success)}.x4notification.success .x4icon{color:var(--notification-icon-success)}.x4notification.danger{border-left-color:var(--notification-icon-danger)}.x4notification.danger .x4icon{color:var(--notification-icon-danger)}.x4notification .x4button{height:24px;color:var(--color-gray-7);border:none}.rel-fit,.x4panel>.body{position:relative;inset:0}:root{--panel-border: var( --border );--panel-title-color: var( --border )}.x4panel{border:1px solid var(--panel-border);border-radius:4px;margin:5px;padding:8px;position:relative}.x4panel>legend{padding:0 5px;position:absolute;left:4px;top:-.7em;background-color:#fff;font-weight:700;color:var(--color-gray-9)}.x4panel>.body{overflow:hidden;justify-content:start;padding:8px}.x4panel.inline{border:none;border-top:1px solid var(--border);margin-top:1.5em}.x4panel.inline legend{background:none;top:-1.4em;left:0}:root{--progress-background: var( --border );--progress-color: var( --accent-background )}.x4progress{background-color:var(--progress-background);position:relative;height:6px;margin:0 5px;border-radius:3px}.x4progress .bar{position:absolute;left:0;top:0;bottom:0;width:0;background-color:var(--progress-color);border-radius:3px;transition:width ease .2s}.x4progress.indeterm .bar{background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:20px 20px;animation:slide 1s linear infinite}@keyframes slide{0%{background-position:0 0}to{background-position:2.5rem 0}}.x4select{padding:4px;outline:none;border:1px solid var(--border);background-color:#fff}:root{--propertygrid-background: white}.x4propertygrid{background:var(--propertygrid-background);border:1px solid var(--color-primary-a50);overflow-y:auto;flex-basis:0}.x4propertygrid .root{display:grid;grid-template-columns:1fr;grid-template-rows:auto}.x4propertygrid .group{min-height:2em;font-weight:700;background-color:#fff;color:var(--color-primary-a50);display:flex;align-items:center;padding:6px 4px 4px 8px;gap:8px}.x4propertygrid .group .x4box>.desc{font-style:italic;font-weight:400;font-size:90%;color:var(--text-ternary)}.x4propertygrid .group:not(:first-child){border-top:1px solid var(--color-primary-a50)}.x4propertygrid .group:not(:last-child){border-bottom:1px solid var(--color-primary-a50);box-shadow:4px 4px 8px #0003}.x4propertygrid .group>.x4box{flex-grow:1}.x4propertygrid .group>.x4icon{width:1em;height:1em}.x4propertygrid .group>.x4icon .fa-secondary,.x4propertygrid .group>.x4icon .fa-primary{fill:var(--color-primary-a50)}.x4propertygrid .group>.x4button{background-color:transparent;color:var(--color-primary-a50)}.x4propertygrid .row{border-bottom:1px solid var(--border-light)}.x4propertygrid .row:has(:focus){background-color:var(--color-primary-a20)}.x4propertygrid .row:hover{background-color:var(--color-primary-a10)}.x4propertygrid .row .cell{flex-grow:1;flex-basis:10px;padding:4px}.x4propertygrid .row .cell>*{width:100%}.x4propertygrid .row .cell input{background:#fff9}.x4propertygrid .row .cell:first-child{border-right:1px solid var(--border)}.x4propertygrid .row .hdr{padding:8px 8px 8px 34px}.x4propertygrid .row .cell:has(.x4button){padding:4px 40px}.x4radio{display:flex;flex-direction:row;align-items:center;margin-left:5px;gap:4px;cursor:pointer}.x4radio .inner{position:relative;height:1rem;width:1rem;border-radius:50%;order:1}.x4radio .inner input{appearance:none;background-color:#fff;cursor:pointer;display:block;margin:0;padding:0;width:100%;height:100%;transition:opacity .1s ease;border-radius:50%;border:1px solid var(--border)}.x4radio .inner svg{margin:auto;pointer-events:none;position:absolute;inset:0;width:100%;height:100%}.x4radio .inner svg .fa-primary{fill:var(--accent-background)}.x4radio .inner svg .fa-secondary{fill:#fff}.x4radio .inner:has(input:not(:checked)) input{opacity:1}.x4radio .inner:has(input:not(:checked)) svg{opacity:0}.x4radio label{order:2;cursor:pointer}.x4radio.left label{order:0}.x4radio.button{--size: 24px;border:1px solid transparent;padding:8px;margin:0}.x4radio.button.outline{border-radius:22px}.x4radio.button .inner{display:none}.x4radio.button label{display:flex;flex-grow:1}.x4radio.button label #text{flex-grow:1;text-align:center;color:var(--text-ternary)}.x4radio.button label #icon{fill:var(--text-ternary);width:var(--size);height:var(--size)}.x4radio.button:has(input:checked){background-color:var(--background-secondary);border-color:var(--accent-background)}.x4radio.button:has(input:checked) .x4label #text{color:var(--accent-background-active);font-weight:700}.x4radio.button:has(input:checked) .x4label #icon{fill:var(--accent-background-active)}.x4radio.button:has(input:checked) .x4label .fa-primary{fill:var(--accent-background-active)}:root{--rating: var( --border );--rating-hover: var( --border-hover );--rating-checked: var( --accent-background )}.x4rating{gap:2px}.x4rating .item{width:16px;height:16px;color:var(--rating)}.x4rating .item:hover{color:var(--rating-hover)}.x4rating .item.checked{color:var(--rating-checked)}:root{--slider-track: var( --border );--slider-thumb-background: var( --accent-background );--slider-thumb-border: var( --accent-background );--slider-thumb-border-focus: var( --border-focus )}.x4slider{outline:none;touch-action:none;overflow:hidden}.x4slider:not(.vertical){padding:10px 12px;margin:5px 0;height:28px}.x4slider:not(.vertical) .track{background-color:var(--slider-track);width:100%;position:relative;top:50%;height:3px}.x4slider:not(.vertical) .bar{position:absolute;width:61%;height:3px}.x4slider:not(.vertical) .thumb{position:absolute;left:61%;outline:none;background-color:var(--slider-thumb-background);border:3px solid var(--slider-thumb-border);border-radius:8px;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);cursor:pointer}.x4slider.vertical{padding:12px 10px;margin:0 5px;width:28px}.x4slider.vertical .track{background-color:var(--slider-track);height:100%;position:relative;left:50%;width:3px}.x4slider.vertical .bar{position:absolute;width:3px;height:61%}.x4slider.vertical .thumb{position:absolute;left:50%;outline:none;background-color:var(--slider-thumb-background);border:3px solid var(--slider-thumb-border);border-radius:8px;top:61%;width:16px;height:16px;transform:translate(-50%,-50%);cursor:pointer}.x4slider:focus .thumb{outline-offset:3px;outline-color:var(--slider-thumb-border-focus);outline-style:solid;outline-width:1px}:root{--switch-border: var( --border );--switch-background: #eee;--switch-background-disabled: var( --disabled-background );--switch-checked: var( --accent-background )}.x4switch{display:flex;flex-direction:row;align-items:center;position:relative;gap:4px;margin-left:5px;padding:4px;cursor:pointer}.x4switch label{cursor:pointer}.x4switch:focus-within .x4label span{text-decoration:underline}.x4switch .switch{width:2.2rem;height:18px;position:relative}.x4switch .switch input{position:absolute;width:100%;height:100%;appearance:none;padding:0;margin:0;left:0;top:0;cursor:pointer}.x4switch .switch .track{position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;border:1px solid var(--switch-border);background-color:var(--switch-background);border-radius:9px;transition:background-color ease .2s}.x4switch .switch .thumb{position:absolute;pointer-events:none;left:.05rem;top:1px;width:1rem;height:1rem;border-radius:8px;background-color:#fff;box-shadow:0 0 2px #00000080;transition:left ease .2s}.x4switch:has(input:checked) .switch .thumb{left:1.15rem}.x4switch:has(input:checked) .switch .track{background-color:var(--switch-checked)}.x4switch[disabled],.x4switch[disabled] *{cursor:not-allowed}.x4switch[disabled] input{pointer-events:none}.x4switch[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4switch[disabled] .switch .track,.x4switch[disabled].x4switch:has(input:checked) .switch .track{background-color:var(--switch-background-disabled)}:root{--tab-border-selected: var( --accent-background );--tab-border-hover: var( --accent-background-hover )}.x4tabs .x4ctablist{gap:4px;padding:5px 5px 0}.x4tabs .x4ctablist .x4button{border:none;border-bottom:2px solid transparent;color:var(--color-gray-7);margin:0;outline:none;transition:border-color .2s ease}.x4tabs .x4ctablist .x4button.selected{border-bottom-color:var(--tab-border-selected);font-weight:700;color:var(--color-gray-9)}.x4tabs .x4ctablist .x4button:hover{background-color:unset;color:#000;border-bottom-color:var(--tab-border-hover)}.x4tabs>.body{padding:8px;border:1px solid var(--border)}.flex,.x4textarea textarea{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--textarea-border: var( --border );--textarea-border-focus: var( --border-focus );--textarea-selection: var( --accent-background )}.x4textarea{margin:5px}.x4textarea .x4label{gap:0;padding:4px 0}.x4textarea .x4label:after{content:":"}.x4textarea .x4label:has(.empty){display:none}.x4textarea textarea{padding:4px;outline:none;font:inherit;border:1px solid var(--textarea-border)}.x4textarea textarea:focus{border:1px solid var(--textarea-border-focus)}.x4textarea textarea::selection{background-color:var(--textarea-selection);color:#fff}.x4textarea textarea[resize=false]{resize:none}.box,.vbox,.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{position:relative}.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{display:flex;flex-direction:row;align-items:center}.flex,.x4textedit>#edit,.x4textedit>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--textedit-border: var( --border );--textedit-border-focus: var( --border-focus );--textedit-required: var( --alert-background );--textedit-btn-background: inherit;--textedit-btn-color: var( --text-secondary );--textedit-btn-color-hover: var( --text-primary );--textedit-color-disabled: var( --disabled-background )}.x4textedit{margin:5px;gap:6px}.x4textedit>#label{border-bottom:1px solid transparent;justify-content:end}.x4textedit>#label>.x4label{height:100%;padding:0;font-weight:500;gap:0}.x4textedit>#label:after{content:":"}.x4textedit>#edit{border-bottom:1px solid var(--textedit-border)}.x4textedit>#edit .x4input{outline:none;margin:0}.x4textedit>#edit .x4button{margin:0;padding:0;background-color:var(--textedit-btn-background);color:var(--textedit-btn-color)}.x4textedit>#edit .x4button #icon{color:var(--textedit-btn-color)}.x4textedit>#edit .x4button:hover,.x4textedit>#edit .x4button:hover #icon{color:var(--textedit-btn-color-hover)}.x4textedit>#edit .x4button:focus{border-bottom-color:var(--textedit-border-focus)}.x4textedit:focus-within #edit{border-bottom-color:var(--textedit-border-focus)}.x4textedit[required]>#label>.x4label:before{content:"*";font-weight:700;color:var(--textedit-required);margin-right:2px}.x4textedit[disabled],.x4textedit[disabled] *{cursor:not-allowed}.x4textedit[disabled] #label>.x4label #text,.x4textedit[disabled] #label>.x4label:before,.x4textedit[disabled] #label:after{color:var(--textedit-color-disabled)}.x4textedit[disabled] #edit input{color:var(--textedit-color-disabled);background-color:unset}:root{--tickline-axis-color: var( --border );--tickline-color: var( --accent-color );--tickline-background: white}.x-tick-line{position:relative;background-color:var(--tickline-background)}.box,.vbox,.hbox{position:relative}.shadow-xl,.x4tooltip{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--tooltip-caption-background: var( --color-primary-a70 );--tooltip-caption-color: white;--tooltip-icon-background: white;--tooltip-icon-color: var( --color-primary-a70 );--tooltip-background: var( --color-primary-a10 );--tooltip-color: var( --color-primary-a90 );--tooltip-border: var( --color-primary-a20 )}.x4tooltip{display:flex;flex-direction:row;border:none;font-size:90%;position:absolute;border:1px solid var(--tooltip-border);background-color:var(--tooltip-background)}.x4tooltip .x4icon{padding:2px 4px;color:var(--tooltip-icon-color);width:2em;height:2em}.x4tooltip .x4icon svg{max-height:100%}.x4tooltip .x4icon .fa-primary,.x4tooltip .x4icon .fa-secondary{fill:var(--tooltip-icon-color)}.x4tooltip #text{background-color:var(--tooltip-background);color:var(--tooltip-color);padding:4px}.x4tooltip img{max-width:100px;max-height:50px;background-color:#fff;margin:4px}.box,.vbox,.x4treeview,.hbox{position:relative}.vbox,.x4treeview{display:flex;flex-direction:column}.flex{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--treeview-background: white;--treeitem-backgound-hover: var( --background-secondary );--treeitem-color-hover: var( );--treeitem-background-sel: var( --accent-background );--treeitem-color-sel: var( --accent-color );--treeview-item-color-sel-disabled: var( --disabled-background );--treeview-item-color-disabled: var( --disabled-color-dark );--treeitem-backgound-active: var( --accent-background-active);--treeitem-color-active: var( --accent-color-active )}.x4treeview{overflow-y:auto;height:100%;margin:5px;outline:none;border:1px solid var(--border);background:var(--treeview-background)}.x4treeview:focus{border:1px solid var(--border-focus)}.x4treeview>.body{width:100%;flex-basis:0;overflow-y:auto;overflow-x:auto;outline:none;position:relative}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label{gap:4px;padding:4px}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label .x4label,.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label .x4icon{color:inherit}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label .x4icon{width:16px}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label:hover{background-color:var(--treeitem-backgound-hover)}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label.selected{background-color:var(--treeitem-background-sel);color:var(--treeitem-color-sel)}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label:active{background-color:var(--accent-background-active);color:var(--accent-color-active)}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.body:not(:first-child){padding-left:24px}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.body{transition:opacity .5s ease}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder>.label{display:flex;flex-direction:row;align-items:center}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder>.label>.x-icon{transform:rotate(0);transition:transform .2s ease;width:16px;height:16px;cursor:pointer}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder>.body{overflow:hidden}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder:not(.open)>.body{height:0;opacity:0}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder:not(.open)>.label>.x4icon{transform:rotate(-90deg)}.x4treeview>#footer{border-top:1px solid var(--border);margin:0}.x4treeview>#footer.x4btngroup{gap:0px}.x4treeview>#footer.x4btngroup .x4button{background-color:var(--ol-button-background);color:var(--ol-button-color);margin:0}.x4treeview>#footer.x4btngroup .x4button .x4icon{height:1.5em;width:1.5em}.x4treeview>#footer.x4btngroup .x4button:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover)}.x4treeview>#footer.x4btngroup .x4button:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active)}.x4treeview>#footer.x4btngroup .x4button:active #icon{color:var(--button-icon-color)}.x4treeview[disabled]{cursor:not-allowed;border-color:var(--border);color:var(--treeview-item-color-disabled)}.x4treeview[disabled]>.body .x4viewport{pointer-events:none}.x4treeview[disabled]>.body .x4viewport .x4item.selected{background-color:var(--treeview-item-color-sel-disabled)}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--font-name: "montserrat";--font-size: 14px}*{user-select:none;box-sizing:border-box}body{font-family:var(--font-name);font-size:var(--font-size)}dialog{margin:0;padding:0}.x4hidden{display:none!important}:root{--color-primary-a0: #ffffff;--color-primary-a5: rgb(229.65, 240.15, 248.85);--color-primary-a10: rgb(223.904, 236.784, 247.456);--color-primary-a20: rgb(189.428, 216.588, 239.092);--color-primary-a30: rgb(154.952, 196.392, 230.728);--color-primary-a40: rgb(120.476, 176.196, 222.364);--color-primary-a50: #569cd6;--color-primary-a55: rgb(65.4785714286, 143.9785714286, 209.0214285714);--color-primary-a60: rgb(51.524, 135.804, 205.636);--color-primary-a70: rgb(41.8434285714, 113.2834285714, 172.4765714286);--color-primary-a80: rgb(33.4794285714, 90.6394285714, 138.0005714286);--color-primary-a90: rgb(25.1154285714, 67.9954285714, 103.5245714286);--color-primary-a100: #000000;--color-danger-a50: #c01010;--color-danger-a60: rgb(144.9230769231, 12.0769230769, 12.0769230769);--color-warning-a50: #b67b0d;--color-success-a50: #10c01f;--color-success-a60: rgb(12.0769230769, 144.9230769231, 23.3990384615)}:root{--background-primary: var(--color-primary-a0);--background-secondary: var(--color-primary-a10);--text-primary: var(--color-primary-a100);--text-secondary: #999;--text-ternary: #666;--disabled-background: #ccc;--disabled-color: white;--disabled-color-dark: #aaa;--accent-background: var(--color-primary-a60);--accent-background-hover: var(--color-primary-a55);--accent-background-focus: var(--color-primary-a70);--accent-background-active: var(--color-primary-a80);--accent-color: var(--color-primary-a0);--accent-color-hover: var(--color-primary-a0);--accent-color-focus: var(--color-primary-a0);--accent-color-active: var(--color-primary-a0);--border: #e1e1e1;--border-light: #eaeaea;--border-hover: #c2c2c2;--border-focus: var( --accent-background );--alert-background: var( --color-danger-a50 );--alert-background-active: var( --color-danger-a60 );--alert-color: var( --color-primary-a0 );--warning-background: var( --color-warning-a50 );--warning-color: var( --color-primary-a0 );--success-background: var( --color-success-a50 );--success-background-active: var( --color-success-a60 );--success-color: var( --color-success-a0 )}.box,.x4box,.vbox,.hbox{position:relative}.hbox{display:flex;flex-direction:row;align-items:center}.vbox{display:flex;flex-direction:column}.fit{position:absolute;inset:0}.rel-fit{position:relative;inset:0}.flex,.x4flex{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shaking{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%{transform:rotate(0)}}.x4rotate{animation:rotating 2s linear infinite}.x4shake{animation-name:shaking;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-direction:reverse}
1
+ .box,.vbox,.x4vbox,.hbox,.x4hbox{position:relative}.hbox,.x4hbox{display:flex;flex-direction:row;align-items:center}.vbox,.x4vbox{display:flex;flex-direction:column}.fit,.x4stackbox>*{position:absolute;inset:0}.x4hbox.align-start{align-items:start}.x4stackbox{display:flex}.x4stackbox>*{position:relative!important}.x4stackbox>*:not(.selected){display:none}.x4gridbox{display:grid}.x4masonrybox{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:10px;overflow:hidden}:root{--breadcrumbs-background: var( --background-primary );--breadcrumbs-icon-color: var( --text-ternary );--breadcrumbs-link-color: var( --text-ternary );--breadcrumbs-active-color: var( --accent-background )}.x4breadcrumbs{background-color:var(--breadcrumbs-background);border-bottom:1px solid var(--border);padding:8px 0;margin-bottom:2em}.x4breadcrumbs>.x4button{border:none;background-color:transparent;color:var(--breadcrumbs-link-color);padding:6px 0 6px 8px;min-width:60px}.x4breadcrumbs>.x4button #icon{fill:var(--breadcrumbs-icon-color)}.x4breadcrumbs>.x4button:not(:last-child):after{content:">"}.x4breadcrumbs>.x4button:hover:not(:last-child){background-color:transparent;color:var(--accent-background);fill:var(--accent-background);border-bottom-color:var(--breadcrumbs-link-color)}.x4breadcrumbs>.x4button:hover:not(:last-child) #text{text-decoration:underline}.x4breadcrumbs>.x4button:last-child{font-weight:700;color:var(--breadcrumbs-active-color);cursor:auto}.x4breadcrumbs>.x4button:last-child #icon{fill:var(--breadcrumbs-active-color)}.x4breadcrumbs>.x4button:last-child:hover{background-color:transparent;color:var(--breadcrumbs-link-color)}.box,.vbox,.hbox,.x4icon{position:relative}.hbox,.x4icon{display:flex;flex-direction:row;align-items:center}.x4icon{flex-shrink:0;min-width:10px;height:10px;overflow:hidden;aspect-ratio:1/1}.x4icon svg{width:100%;height:100%}.box,.vbox,.hbox,.x4button{position:relative}.hbox,.x4button{display:flex;flex-direction:row;align-items:center}:root{--button-background: var( --accent-background );--button-color: var( --accent-color );--button-background-hover: var( --accent-background-hover );--button-color-hover: var( --accent-color-hover );--button-background-active: var( --accent-background-active );--button-color-active: var( --accent-color-active );--button-background-focus: var( --accent-background-focus );--button-color-focus: var( --accent-color-focus );--button-background-disabled: var( --disabled-background );--button-color-disabled: var( --disabled-color );--button-icon-color: rgb(255 255 255 / 64%);--ol-button-background: var( --background-primary );--ol-button-background-active: #ccc;--ol-button-color-active: var( --text-primary );--ol-button-background-hover: #eee;--ol-button-color-hover: var( --text-primary );--ol-button-color-disabled: #ccc;--ol-button-color: var( --text-primary );--ol-button-border: var( --border );--ol-button-icon-color: var( --text-primary );--ol-button-border-focus: var( --accent-background-focus );--ol-button-color-focus: var( --accent-background )}.x4button{gap:4px;font-size:inherit;font-family:inherit;padding:8px;margin:2px;transition:background-color .3s,color .3s;border:none;outline:none;cursor:pointer;background-color:var(--button-background);color:var(--button-color);gap:.4em}.x4button>#icon{transition:color .3s,fill .3s;fill:var(--button-color);width:1em;height:1em}.x4button>#icon.empty{display:none}.x4button>#label{flex-grow:1;padding:0;color:inherit}.x4button>#label.empty{display:none}.x4button:focus{background-color:var(--button-background-focus);color:var(--button-color-focus)}.x4button:focus #icon{color:var(--button-color-focus)}.x4button:focus #label{text-decoration:underline}.x4button:hover{background-color:var(--button-background-hover);color:var(--button-color-hover)}.x4button:active{background-color:var(--button-background-active);color:var(--button-color-active)}.x4button[disabled]{cursor:not-allowed;background-color:var(--button-background-disabled);color:var(--button-color-disabled)}.x4button.outline{background-color:var(--ol-button-background);border:1px solid var(--ol-button-border);color:var(--ol-button-color)}.x4button.outline #icon{color:var(--ol-button-icon-color);fill:var(--ol-button-icon-color)}.x4button.outline:focus{border-color:var(--ol-button-border-focus);color:var(--ol-button-color-focus);fill:var(--ol-button-color-focus)}.x4button.outline:focus #icon{color:var(--ol-button-color-focus);fill:var(--ol-button-color-focus)}.x4button.outline:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover);fill:var(--ol-button-color-hover)}.x4button.outline:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active);fill:var(--ol-button-color-active)}.x4button.outline:active #icon{color:var(--button-icon-color);fill:var(--button-icon-color)}.x4button.danger:not([disabled]){background-color:var(--alert-background);color:var(--alert-color)}.x4button.danger:not([disabled]):active{background-color:var(--alert-background-active)}:root{--btngroup-background: white}.x4btngroup{align-content:start;margin:5px;gap:4px;background:var(--btngroup-background)}.x4btngroup.align-right{justify-content:end}.x4btngroup.align-center{justify-content:center}.x4btngroup .x4button:disabled .fa-primary{fill:var(--border)}.box,.vbox,.x4label.vertical,.hbox,.x4label{position:relative}.hbox,.x4label{display:flex;flex-direction:row;align-items:center}.vbox,.x4label.vertical{display:flex;flex-direction:column}:root{--label-background: transparent;--label-color: var( --text-ternary );--label-icon-color: rgb(0 0 0 / 44%);--label-color-disa: var( --disabled-color-dark )}.x4label{color:var(--label-color);background-color:var(--label-background);gap:.2em}.x4label.right{text-align:right;justify-content:end}.x4label.center{text-align:center;justify-content:center}.x4label #text:empty{display:none}.x4label #icon{height:1em;margin:0 .1em;color:var(--label-icon-color)}.x4label #icon.empty{display:none}.x4label.rotate #icon{animation:rotating 2s linear infinite}.x4simpletext{text-align:left}.x4simpletext.al-center{text-align:center}.x4simpletext.al-right{text-align:right}[disabled] .x4label,[disabled] .x4simpletext{color:var(--label-color-disa)}.x4csizer{position:absolute}.x4csizer.top{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;top:0}.x4csizer.bottom{left:0;right:0;height:8px;z-index:10;cursor:ns-resize;bottom:0}.x4csizer.left{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;left:0}.x4csizer.right{top:0;bottom:0;width:8px;z-index:10;cursor:ew-resize;right:0}.x4csizer.top-left{width:8px;height:8px;z-index:11;left:0;top:0;cursor:nw-resize}.x4csizer.top-right{width:8px;height:8px;z-index:11;right:0;top:0;cursor:ne-resize}.x4csizer.bottom-left{width:8px;height:8px;z-index:11;left:0;bottom:0;cursor:ne-resize}.x4csizer.bottom-right{width:8px;height:8px;z-index:11;right:0;bottom:0;cursor:nw-resize}:root{--modal-mask-background: rgb(0 0 0 / 60% )}.x4popup{position:absolute!important;background-color:var(--fill-color);border:1px solid var(--border-color);overflow:hidden;z-index:1000;border-radius:var(--bradius)}.x4popup.popup-caption,.x4popup .popup-caption{cursor:move}.x4popup.center{left:50%;top:50%;transform:translate(-50%,-50%)}::backdrop,.x4modal-mask{background-color:var(--modal-mask-background);backdrop-filter:blur(8px);position:absolute;inset:0;z-index:1000}.box,.vbox,.hbox,.x4menu .x4cmenuitem{position:relative}.hbox,.x4menu .x4cmenuitem{display:flex;flex-direction:row;align-items:center}.flex,.x4menu .x4cmenuitem #text{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-lg,.x4menu{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}:root{--menu-background: var( --background-primary );--menu-border: var( --border-hover );--menuitem-color: var( --text-ternary );--menuitem-background-active: var( --accent-background-active );--menuitem-color-active: var( --accent-color-active );--menuitem-background-hover: var( --accent-background-hover );--menuitem-color-hover: var( --accent-color-hover )}.x4menu{position:absolute;overflow-y:auto;border-radius:var(--bradius);padding:8px 0;min-width:150px;background-color:var(--menu-background);border:1px solid var(--menu-border);max-height:calc(100vh - 32px)}.x4menu .x4cmenuitem{transition:background-color .3s,color .3s;align-items:center;color:var(--menuitem-color);padding:6px;gap:10px;cursor:pointer;transition:background-color .1s}.x4menu .x4cmenuitem #icon{width:16px;height:16px}.x4menu .x4cmenuitem #icon .fa-primary{fill:var(--color-primary-a50)}.x4menu .x4cmenuitem #icon .fa-secondary{fill:var(--color-primary-a30);opacity:1}.x4menu .x4cmenuitem.title{color:var(--text-primary);cursor:auto;margin-left:-16px;margin-top:-6px;font-weight:600}.x4menu .x4cmenuitem.popup:after{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" fill="var(--color-gray-8)"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');width:6px}.x4menu .x4cmenuitem:hover:not(.title),.x4menu .x4cmenuitem.opened{background-color:var(--menuitem-background-hover);color:var(--menuitem-color-hover)}.x4menu .x4cmenuitem:active:not(.title){background-color:var(--menuitem-background-active);color:var(--menuitem-color-active)}.x4menu .x4cmenuitem[disabled]{color:var(--disabled-color-dark)!important}.x4menu .x4cmenuitem[disabled]:hover{background-color:var(--disabled-background)!important}.x4menu .x4cmenusep{padding-top:4px;border-bottom:1px solid var(--border);margin-bottom:4px}.box,.vbox,.hbox,.x4calendar .week .cell .text{position:relative}.hbox,.x4calendar .week .cell .text{display:flex;flex-direction:row;align-items:center}.flex,.x4calendar .week,.x4calendar .week .cell{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--calendar-btn-background: inherit;--calendar-btn-color: var( --text-secondary );--calendar-btn-color-hover: var( --text-primary );--calendar-week-color: var( --accent-background );--calendar-week-color-hover: var( --accent-background-hover );--calendard-day-background-hover: var( --accent-background-hover );--calendard-day-color-hover: var( --accent-color-hover );--calendar-sel-background: var( --accent-background );--calendar-sel-color: var( --accent-color );--calendar-today-background: var( --alert-background );--calendar-today-color: var( --alert-color );--calendar-today-border: var( --accent-background );--calendar-header-color: var( --text-primary );--calendar-out-color: var( --disabled-color-dark )}.x4calendar{border:1px solid var(--border);padding:4px}.x4calendar .month-sel{height:2em;align-items:center;padding-left:2em;margin-bottom:8px}.x4calendar .month-sel .month{padding-right:4px}.x4calendar .month-sel .year,.x4calendar .month-sel .month{cursor:pointer}.x4calendar .month-sel .month:hover,.x4calendar .month-sel .year:hover{text-decoration:underline}.x4calendar .month-sel .x4label{font-weight:700}.x4calendar .month-sel .x4button{height:auto;background-color:var(--calendar-btn-background);color:var(--calendar-btn-color)}.x4calendar .month-sel .x4button:hover{color:var(--calendar-btn-color-hover)}.x4calendar .week{align-items:center;padding:2px}.x4calendar .week .cell{min-width:28px;min-height:28px;color:var(--gray-900);text-align:center}.x4calendar .week .cell .text{transition:background-color .3s,color .3s;justify-content:center;border:1px solid transparent;margin:auto;border-radius:14px;width:28px;height:28px}.x4calendar .week .today .text{font-weight:700;background-color:var(--calendar-today-background);color:var(--calendar-today-color)}.x4calendar .week .selection .text{background-color:var(--calendar-sel-background);color:var(--calendar-sel-color)}.x4calendar .week .weeknum{width:2em;color:var(--calendar-week-color);font-size:70%}.x4calendar .week:hover .weeknum{font-weight:700}.x4calendar .week .day{cursor:pointer}.x4calendar .week .out{color:var(--calendar-out-color);font-size:80%}.x4calendar .week .day:hover .text{background-color:var(--calendard-day-background-hover);color:var(--calendard-day-color-hover)}.x4calendar .header .cell{color:var(--calendar-header-color);height:1.5em;justify-content:center}.x4calendar .header:hover{background-color:inherit}.x4canvas{overflow:hidden}.x4canvas>canvas{position:absolute;left:0;top:0}:root{--input-sel-background: var( --accent-background );--input-sel-color: var( --accent-color );--input-placeholder: var( --disabled-background );--input-error: var( --alert-background );--input-checkbox-color: var( --accent-background )}input.x4input{font:inherit;outline:none;border:none}input.x4input::selection{background-color:var(--input-sel-background);color:var(--input-sel-color)}input.x4input[type=text],input.x4input[type=password],input.x4input[type=date],input.x4input[type=number],input.x4input[type=email]{padding:4px}input.x4input[type=checkbox]:checked,input.x4input[type=radio]:checked{accent-color:var(--input-checkbox-color);padding:2px}input.x4input[type=range]{accent-color:var(--input-checkbox-color)}input.x4input::placeholder{color:var(--input-placeholder);font-style:italic;font-weight:90%}input.x4input[type=password]{font-weight:700}input.x4input:disabled{background-color:transparent}input.x4input:invalid{color:var(--input-error)}.box,.vbox,.hbox,.x4checkbox{position:relative}.hbox,.x4checkbox{display:flex;flex-direction:row;align-items:center}:root{--checkbox-background-check: var( --accent-background );--checkbox-background-check-hover: var( --accent-background-hover );--checkbox-background-disabled: var( --disabled-color );--checkbox-background-disabled-check: var( --disabled-background );--checkbox-color-disabled: var( --disabled-background );--checkbox-check-border: var( --border );--checkbox-check-border-hover: var( --border-hover )}.x4checkbox{display:flex;flex-direction:row;align-items:center;margin:5px;padding:4px;gap:4px;cursor:pointer}.x4checkbox .inner{height:1rem;width:1rem;color:#fff;position:relative;order:1}.x4checkbox .inner input{appearance:none;outline:none;cursor:pointer;display:block;margin:0;padding:0;left:0;top:0;width:100%;height:100%;transition:opacity .1s ease}.x4checkbox .inner input:checked{background-color:var(--checkbox-background-check)}.x4checkbox .inner input:checked:hover{background-color:var(--checkbox-background-check-hover)}.x4checkbox .inner input:not(:checked){border:1px solid var(--checkbox-check-border)}.x4checkbox .inner input:not(:checked):hover{border:1px solid var(--checkbox-check-border-hover)}.x4checkbox .inner svg{margin:auto;pointer-events:none;position:absolute;opacity:0;inset:0;width:100%;height:50%}.x4checkbox .inner:has(input:checked) input{opacity:1}.x4checkbox .inner:has(input:checked) svg{opacity:1}.x4checkbox:focus-within label #text{text-decoration:underline}.x4checkbox[disabled],.x4checkbox[disabled] *{cursor:not-allowed}.x4checkbox[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4checkbox[disabled] .inner{pointer-events:none}.x4checkbox[disabled] .inner input{background-color:var(--checkbox-background-disabled)}.x4checkbox[disabled] .inner input:checked{background-color:var(--checkbox-background-disabled-check)}.x4checkbox label{text-align:right;cursor:inherit;order:2}.x4checkbox.left #label{order:0;text-align:left}:root{--colorinput-btn-background: inherit;--colorinput-btn-color: var( --text-secondary );--colorinput-btn-color-hover: var( --text-primary )}.x4colorinput{margin:5px;border-bottom:1px solid var(--border);outline:none}.x4colorinput:focus-within{border-bottom-color:var(--border-focus)}.x4colorinput .swatch{margin:4px;width:1rem;height:1rem}.x4colorinput input{outline:none;margin:0;height:100%;flex-grow:1}.x4colorinput .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--colorinput-btn-color)}.x4colorinput .x4button #icon{color:var(--colorinput-btn-color)}.x4colorinput .x4button:hover,.x4colorinput .x4button:hover #icon{color:var(--colorinput-btn-color-hover)}.x4colorpicker{width:240px;gap:4px;touch-action:none;outline:none;margin:8px}.x4colorpicker .overlay{position:absolute;inset:0}.x4colorpicker .x4saturation{width:100%;height:140px;position:relative}.x4colorpicker .x4saturation .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,50%)}.x4colorpicker .body{gap:4px}.x4colorpicker .body>.x4vbox{gap:4px}.x4colorpicker .body .x4hueslider{position:relative;height:16px;overflow:hidden;background-image:linear-gradient(to right,red,#ff0,#0f0,#00ffd4,#00f,#f0f,red);border:1px solid var(--color-gray-3)}.x4colorpicker .body .x4hueslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .x4alphaslider{position:relative;height:16px;overflow:hidden}.x4colorpicker .body .x4alphaslider .checkers{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .x4alphaslider .color{background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.x4colorpicker .body .x4alphaslider .thumb{width:12px;height:12px;border:2px solid white;border-radius:8px;box-shadow:0 0 5px #00000080;position:absolute;transform:translate(-50%,-50%);top:50%}.x4colorpicker .body .swatch{width:36px;height:36px}.x4colorpicker .body .swatch .checkers{border-radius:8px;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 20px,20px -20px,-20px 0}.x4colorpicker .body .swatch .color{border-radius:8px;background-image:linear-gradient(90deg,transparent,rgb(0,178,255))}.flex,.x4scrollview{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.x4scrollview{position:absolute;height:100%;width:100%;left:0;top:0;overflow:auto}.x4viewport{width:100%}.box,.vbox,.x4listbox,.hbox{position:relative}.vbox,.x4listbox{display:flex;flex-direction:column}.flex,.x4listbox>.body .x4item{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--listbox-item-background-sel: var( --accent-background );--listbox-item-color-sel: var( --accent-color );--listbox-item-color-sel-disabled: var( --disabled-background );--listbox-item-color: var( --text-primary );--listbox-item-color-disabled: var( --disabled-color-dark );--listbox-item-background-hover: var( --background-secondary );--listbox-icon-color: var( --text-ternary );--listbox-background: white;--listbox-border: var( --border );--listbox-border-focus: var( --accent-background-focus )}.x4listbox{margin:5px;border:1px solid var(--listbox-border);background-color:var(--listbox-background);outline:none}.x4listbox:focus-within{border-color:var(--listbox-border-focus)}.x4listbox>.x4header{border-bottom:1px solid var(--border)}.x4listbox>.body{width:100%;flex-basis:0;overflow-y:auto;overflow-x:auto;outline:none;position:relative}.x4listbox>.body>.x4viewport{display:table}.x4listbox>.body .x4item{padding:4px;background-color:transparent;color:var(--text-primary)}.x4listbox>.body .x4item>.x4label{color:inherit;padding:2px 6px}.x4listbox>.body .x4item>.x4label #icon{color:var(--listbox-icon-color);fill:var(--listbox-icon-color)}.x4listbox>.body .x4item:hover{background-color:var(--listbox-item-background-hover)}.x4listbox>.body .x4item.selected{background-color:var(--listbox-item-background-sel);color:var(--listbox-item-color-sel)}.x4listbox>.body .x4item.selected>.x4label #icon{color:var(--listbox-item-color-sel);fill:var(--listbox-item-color-sel)}.x4listbox>#footer{border-top:1px solid var(--border);margin:0}.x4listbox>#footer.x4btngroup{gap:0px}.x4listbox>#footer.x4btngroup .x4button{background-color:var(--ol-button-background);margin:0;color:var(--ol-button-color)}.x4listbox>#footer.x4btngroup .x4button:disabled{color:var(--ol-button-color-disabled)}.x4listbox>#footer.x4btngroup .x4button .x4icon{height:1.5em;width:1.5em}.x4listbox>#footer.x4btngroup .x4button:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover)}.x4listbox>#footer.x4btngroup .x4button:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active)}.x4listbox>#footer.x4btngroup .x4button:active #icon{color:var(--button-icon-color)}.x4listbox>#footer.x4btngroup .x4button:focus{background-color:var(--ol-button-background-hover)}.x4listbox>#footer.x4btngroup .x4button:disabled{color:var(--disabled-color-dark)}.x4listbox[disabled]{cursor:not-allowed;border-color:var(--border);color:var(--listbox-item-color-disabled)}.x4listbox[disabled]>.body .x4viewport{pointer-events:none}.x4listbox[disabled]>.body .x4viewport .x4item.selected{background-color:var(--listbox-item-color-sel-disabled)}.box,.vbox,.hbox,.x4dropdownlist,.x4combobox{position:relative}.hbox,.x4dropdownlist,.x4combobox{display:flex;flex-direction:row;align-items:center}.flex,.x4dropdownlist .x4listbox,.x4combobox>#edit,.x4combobox>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dropdownlist{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--dropdown-border: var( --border-hover );--dropdown-background: var( --background-primary );--combobox-border: var( --border );--combobox-border-focus: var( --border-focus );--combobox-btn-background: inherit;--combobox-btn-color: var( --text-secondary );--combobox-btn-color-hover: var( --text-primary );--combo-tree-indent: 1em}.x4dropdownlist{max-height:250px;max-width:50vw;position:absolute;background-color:var(--dropdown-background);border:1px solid var(--dropdown-border)}.x4dropdownlist .x4listbox{border:none;margin:0;width:100%;height:200px}.x4dropdownlist .x4listbox .x4item{white-space:nowrap}.x4dropdownlist .x4listbox .x4item.level-1{padding-left:calc(var(--combo-tree-indent) * 1)}.x4dropdownlist .x4listbox .x4item.level-2{padding-left:calc(var(--combo-tree-indent) * 2)}.x4dropdownlist .x4listbox .x4item.level-3{padding-left:calc(var(--combo-tree-indent) * 3)}.x4dropdownlist .x4listbox .x4item.level-4{padding-left:calc(var(--combo-tree-indent) * 4)}.x4dropdownlist .x4listbox .x4item.level-5{padding-left:calc(var(--combo-tree-indent) * 5)}.x4dropdownlist .x4listbox .x4item.level-6{padding-left:calc(var(--combo-tree-indent) * 6)}.x4dropdownlist .x4listbox .x4item.level-7{padding-left:calc(var(--combo-tree-indent) * 7)}.x4dropdownlist .x4listbox .x4item.level-8{padding-left:calc(var(--combo-tree-indent) * 8)}.x4combobox{margin:5px;gap:6px}.x4combobox>#label>.x4label{padding:0 6px 0 0;border-bottom:1px solid transparent;height:100%;font-weight:500;gap:0px}.x4combobox>#label>.x4label #text:not(.empty):after{content:":"}.x4combobox>#edit{border-bottom:1px solid var(--combobox-border)}.x4combobox>#edit:focus-within{border-bottom-color:var(--combobox-border-focus)}.x4combobox>#edit .x4input[readonly]{cursor:pointer}.x4combobox>#edit .x4button{margin:0;padding:0;outline:none;background-color:var(--combobox-btn-background);color:var(--combobox-btn-color)}.x4combobox>#edit .x4button #icon{color:var(--combobox-btn-color)}.x4combobox>#edit .x4button:hover,.x4combobox>#edit .x4button:hover #icon{color:var(--combobox-btn-color-hover)}.x4combobox[disabled],.x4combobox[disabled] *{cursor:not-allowed}.x4combobox[disabled] #label .x4label{color:var(--disabled-color-dark);pointer-events:none}.x4combobox[required]>#label>.x4label:before{content:"*";font-weight:700;color:var(--textedit-required);margin-right:2px}.box,.vbox,.x4form,.hbox{position:relative}.vbox,.x4form{display:flex;flex-direction:column}.flex,.x4form{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--form--background: var( --background-primary )}.x4form{padding:16px;background-color:var(--color-form)}.x4form.no-flex{flex-grow:0}.box,.vbox,.x4dialog,.hbox{position:relative}.vbox,.x4dialog{display:flex;flex-direction:column}.flex,.x4dialog>.caption>#title{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-xl,.x4dialog{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--color-dialog-caption: var( --color-primary-a80 );--color-dialog-caption-text: var( --color-primary-a0 )}.x4dialog{position:absolute!important;background-color:#fff;border:1px solid var(--border-dark)}.x4dialog>.caption{padding:8px;background-color:var(--color-dialog-caption)}.x4dialog>.caption>#title{color:var(--color-dialog-caption-text);font-weight:700;font-size:120%}.x4dialog>.caption>#title #icon{color:var(--color-dialog-caption-text);fill:var(--color-dialog-caption-text)}.x4dialog>.caption>#closebox{margin:0;padding:4px}.x4dialog>.x4form{min-height:128px;min-width:450px;flex:1}.x4dialog>#btnbar{border-top:1px solid var(--border);padding:6px 20px;margin:0;justify-content:end;gap:8px}.x4dialog>#btnbar>.x4button{min-width:80px}.x4dialog>#btnbar>.x4button .x-simple-label{text-align:center}.x4dialog.danger>.caption{background-color:var(--alert-background);color:var(--alert-color)}.x4dialog.danger>.caption #closebox{background-color:transparent;color:var(--alert-color)}.x4dialog.danger>#btnbar>.x4button:not(.outline):not(:disabled){background-color:var(--alert-background);color:var(--alert-color)}.x4dialogex{padding:0;margin:0}:root{--filedrop-border: var( --border );--filedrop-icon-color: var( --accent-background );--filedrop-border-drop-hover: var( --accent-background );--filedrop-icon-color-hover: var( --alert-background )}.x4filedrop{border:1px solid var(--filedrop-border);border-radius:4px;cursor:pointer;width:fit-content;padding:8px;margin:5px;align-items:center}.x4filedrop .x4icon{width:2em;height:2em;color:var(--filedrop-icon-color);fill:var(--filedrop-icon-color)}.x4filedrop.hit{border-color:var(--filedrop-border-drop-hover)}.x4filedrop.hit .x4icon{color:var(--filedrop-icon-color-hover);fill:var(--filedrop-icon-color-hover)}.x4filedrop:focus{border-color:var(--ol-button-border-focus);color:var(--ol-button-color-focus)}.x4filedrop:focus #icon{color:var(--ol-button-color-focus)}.x4filedrop:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover)}.x4filedrop:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active)}.x4filedrop:active #icon{color:var(--button-icon-color)}:root{--image-border-drop-hover: var( --accent-background )}.x4image{position:relative;background:none}.x4image.hit{border-color:var(--image-border-drop-hover)!important}:root{--gridview-background: white;--gridview-border: var( --border );--gridview-header-cell-background: white;--gridview-header-cell-color: black;--gridview-header-cell-vline: #f0f0f0;--gridview-header-cell-border: #cccccc;--grid-check-background: var( --accent-background );--grid-check-color: white;--grid-check-background-hover: white;--grid-check-color-hover: var( --accent-background );--grid-perc-background: var( --accent-background );--grid-perc-color: white;--grid-perc-background-hover: white;--grid-perc-color-hover: var( --accent-background );--gridview-cell-color: black;--gridview-cell-color-sel: white;--gridview-cell-vline: var( --border );--gridview-row-background: white;--gridview-row-odd-background: white;--gridview-row-border: var( --border );--gridview-row-background-hover: var( --background-secondary );--gridview-row-background-hover-sel: var(--color-primary-a50);--gridview-row-background-sel: var( --accent-background );--gridview-row-color-sel: var( --accent-color );--gridview-fix-border: var( --accent-background )}.x4gridview{--left: 0px;--top: 0px;--fixed-width: 0;--fixed-height: 30px;--footer-height: 24px;--row-height: 30px;position:relative;overflow:hidden;margin:5px;outline:none;background-color:var(--gridview-background);border:1px solid var(--gridview-border)}.x4gridview .cell{padding:4px;display:flex;align-items:center;transition:border-bottom-color .3s ease,background-color .3s ease;min-width:16px}.x4gridview .cell .cell-check{width:16px;height:16px;background-color:var(--grid-check-background);color:var(--grid-check-color);padding:4px;border-radius:8px;margin:0 auto}.x4gridview .x4viewport{position:absolute;overflow:auto;right:0;bottom:var(--footer-height);left:var(--fixed-width);top:var(--fixed-height);width:unset}.x4gridview .body{position:absolute;overflow:hidden;right:var(--scrollbar-size);bottom:var(--scrollbar-size);left:0;top:0}.x4gridview .row{position:absolute;left:0;top:0;display:flex;overflow:hidden;height:var(--row-height);border-bottom:1px solid var(--gridview-row-border)}.x4gridview .row .cell{height:100%;overflow:hidden;white-space:nowrap;border-right:1px solid var(--gridview-cell-vline)}.x4gridview .row .cell>.x4icon:not(.cell-check){height:100%}.x4gridview .row .cell>.x4image{width:100%;height:100%}.x4gridview .row .cell .percent{width:100%;border:1px solid var(--border);height:8px;background-color:#fff;overflow:hidden}.x4gridview .row .cell .percent div{background-color:var(--grid-perc-background);height:100%}.x4gridview .row.selected{background-color:var(--gridview-row-background-sel);color:var(--gridview-cell-color-sel)}.x4gridview .row.selected .cell .cell-check{background-color:var(--grid-check-background-hover);color:var(--grid-check-color-hover)}.x4gridview .row:hover:not(.selected),.x4gridview .row.hover:not(.selected){background-color:var(--gridview-row-background-hover)}.x4gridview .row:hover:not(.selected) .cell .cell-check,.x4gridview .row.hover:not(.selected) .cell .cell-check{background-color:var(--grid-check-background-hover);color:var(--grid-check-color-hover)}.x4gridview .row:hover.selected,.x4gridview .row.hover.selected{background-color:var(--gridview-row-background-hover-sel)}.x4gridview .col-header,.x4gridview .col-footer{position:absolute;background-color:var(--gridview-header-cell-background);touch-action:none;left:calc(var(--fixed-width) + var(--left));z-index:1;display:inline-flex;align-items:center;color:#000;font-weight:500;justify-content:center}.x4gridview .col-header.fixed,.x4gridview .col-footer.fixed{left:0;z-index:2}.x4gridview .col-header .cell,.x4gridview .col-footer .cell{position:relative;height:100%;display:flex;justify-content:center;border-right:1px solid var(--gridview-header-cell-vline)}.x4gridview .col-header .cell>.x4simpletext,.x4gridview .col-footer .cell>.x4simpletext{flex-grow:1;text-overflow:ellipsis;overflow:hidden}.x4gridview .col-header .cell .sorter,.x4gridview .col-footer .cell .sorter{display:none;flex-shrink:0;width:1em}.x4gridview .col-header .cell.sorted .sorter,.x4gridview .col-footer .cell.sorted .sorter{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M180.7 475.3c6.2 6.2 16.4 6.2 22.6 0l176-176c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L208 425.4 208 48c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 377.4L27.3 276.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l176 176z"/></svg>');display:block;width:20px;height:.7em;background-repeat:no-repeat;background-position:50% 50%}.x4gridview .col-header .cell.sorted.desc .sorter,.x4gridview .col-footer .cell.sorted.desc .sorter{background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="rgba(0,0,0,0.7)"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M203.3 36.7c-6.2-6.2-16.4-6.2-22.6 0l-176 176c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L176 86.6V464c0 8.8 7.2 16 16 16s16-7.2 16-16V86.6L356.7 235.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6l-176-176z"/></svg>')}.x4gridview .col-header .cell .x-c-sizer:hover,.x4gridview .col-footer .cell .x-c-sizer:hover{width:8px}.x4gridview .col-header.fixed .cell:last-child,.x4gridview .col-footer.fixed .cell:last-child{border-right-color:var(--gridview-fix-border)}.x4gridview .col-header:hover .cell,.x4gridview .col-footer:hover .cell{border-right-color:var(--border-hover)}.x4gridview .col-header{top:0;height:var(--fixed-height);border-bottom:1px solid var(--gridview-header-cell-border)}.x4gridview .col-header .cell{overflow:hidden;border-bottom:1px solid transparent}.x4gridview .col-header .cell:hover{border-bottom-color:var(--gridview-row-background-hover)}.x4gridview .col-footer{border-top:1px solid var(--gridview-header-cell-border);height:var(--footer-height);bottom:0}.x4gridview .col-footer .cell{border-top:1px solid transparent}.x4gridview .col-footer .cell:hover{background-color:var(--gridview-row-background-hover)}.x4gridview .row-header{position:absolute;left:0;top:calc(var(--fixed-height) + var(--top));width:var(--fixed-width);bottom:0;background-color:#fff;z-index:1}.x4gridview .row-header .row{position:absolute;display:inline-flex}.x4gridview .row-header .cell{border-right:1px solid var(--gridview-cell-vline);border-bottom:1px solid var(--gridview-row-border);height:var(--row-height)}.x4gridview .row-header .cell>.x4simpletext{margin:0 auto}.x4gridview .row-header .cell:last-child{border-right:1px solid var(--gridview-fix-border)}.x4gridview .row-header .cell-out{position:absolute;background-color:var(--color-gray-0);width:100%;height:var(--row-height)}:root{--header-background-hover: rgba(100,100,100,.1);--header-sizer-hover: var( --border-hover );--header-color: var( --text-primary )}.x4header{width:100%;overflow:hidden;min-height:2em;border-bottom:1px solid var(--border)}.x4header .cell{border-bottom:1px solid transparent;overflow:hidden;min-width:3rem;transition:border-color .5s ease;padding:4px}.x4header .cell span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:var(--header-color)}.x4header .cell:hover{background-color:var(--header-background-hover)}.x4header .cell .x4csizer:hover{border-right:1px solid var(--header-sizer-hover)}:root{--keyboard-key-background: #33302d;--keyboard-hilite-color: #5ba921}.x4keyboard{z-index:2000;position:absolute!important;width:100vw;height:14rem;bottom:0;background-color:#000000e6;box-sizing:border-box;padding:4px}.x4keyboard #kb{width:100vw;max-width:800px}.x4keyboard .line{flex-grow:10;position:relative}.x4keyboard .mi{font-family:Material Icons;font-size:22px;text-align:center}.x4keyboard .tch{cursor:pointer;flex-grow:10;flex-basis:44px;display:flex;align-items:center;color:#fff;text-align:center;background-color:var(--keyboard-key-background);border:1px solid var(--keyboard-key-background);border-radius:4px;margin:2px 4px;box-sizing:border-box}.x4keyboard .tch div{width:100%}.x4keyboard .tch:hover{border:1px solid var(--keyboard-hilite-color)}.x4keyboard .tch:active{background-color:var(--keyboard-hilite-color);color:var(--keyboard-key-background)}.x4keyboard .cplace{visibility:hidden}.x4keyboard .kbicon div{width:0}.x4keyboard .cret{color:var(--keyboard-hilite-color);font-weight:700}.x4keyboard .cdel .x4icon,.x4keyboard .cshift .x4icon,.x4keyboard .chide .x4icon{margin:auto;color:var(--keyboard-hilite-color)}.x4keyboard .lower .cspace,.x4keyboard .upper .cspace{flex-basis:689px}.x4keyboard .lower .cret,.x4keyboard .upper .cret{flex-basis:84px}.x4keyboard .lower .cshift,.x4keyboard .upper .cshift{flex-basis:60px}.x4keyboard .lower .chide,.x4keyboard .upper .chide,.x4keyboard .lower .cnum,.x4keyboard .upper .cnum{flex-basis:88px}:root{--msgbox-caption-background: var( --alert-background );--msgbox-caption-color: var( --alert-color );--msgbox-icon-color: var( --alert-background )}.x4messagebox{max-width:60vw}.x4messagebox>.caption{background-color:var(--msgbox-caption-background)}.x4messagebox>.caption>#title{color:var(--msgbox-caption-color)}.x4messagebox .x4form{min-width:400px}.x4messagebox .x4form .x4icon{color:var(--msgbox-icon-color);height:96px}.x4messagebox .x4form .x4label{padding:16px;line-height:1.8em}.x4inputbox,.x4promptbox{max-width:60vw}.x4inputbox>.caption,.x4promptbox>.caption{background-color:var(--msgbox-caption-background)}.x4inputbox>.caption>#title,.x4promptbox>.caption>#title{color:var(--msgbox-caption-color)}.x4inputbox .x4form,.x4promptbox .x4form{min-width:400px}.x4inputbox .x4form .x4icon,.x4promptbox .x4form .x4icon{color:var(--msgbox-icon-color);height:64px}.x4inputbox .x4form .x4vbox,.x4promptbox .x4form .x4vbox{padding:16px;gap:16px;justify-content:center}.x4inputbox .x4form .x4vbox .x4label,.x4promptbox .x4form .x4vbox .x4label{line-height:1.8em}.x4inputbox input,.x4promptbox input{padding:8px;border:1px solid var(--border)}.x4inputbox input:invalid,.x4promptbox input:invalid{border-color:var(--input-error)}.shadow-xl,.x4notification{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--notification-border: var( --border );--notification-background: white;--notification-icon-default: var( --accent-background );--notification-icon-success: var( --success-background );--notification-icon-danger: var( --alert-background )}.x4notification{padding:8px;border:1px solid var(--notification-border);border-left:3px solid var(--accent-background);background-color:var(--notification-background)}.x4notification>.x4hbox{gap:8px}.x4notification .x4icon{width:2em;height:2em;color:var(--notification-icon-default)}.x4notification .body .title{font-weight:700;padding:6px 6px 3px}.x4notification .body .text{padding:3px 6px 6px;color:var(--color-gray-7)}.x4notification.success{border-left-color:var(--notification-icon-success)}.x4notification.success .x4icon{color:var(--notification-icon-success)}.x4notification.danger{border-left-color:var(--notification-icon-danger)}.x4notification.danger .x4icon{color:var(--notification-icon-danger)}.x4notification .x4button{height:24px;color:var(--color-gray-7);border:none}.rel-fit,.x4panel>.body{position:relative;inset:0}:root{--panel-border: var( --border );--panel-title-color: var( --border )}.x4panel{border:1px solid var(--panel-border);border-radius:4px;margin:5px;padding:8px;position:relative}.x4panel>legend{padding:0 5px;position:absolute;left:4px;top:-.7em;background-color:#fff;font-weight:700;color:var(--color-gray-9)}.x4panel>.body{overflow:hidden;justify-content:start;padding:8px}.x4panel.inline{border:none;border-top:1px solid var(--border);margin-top:1.5em}.x4panel.inline legend{background:none;top:-1.4em;left:0}:root{--progress-background: var( --border );--progress-color: var( --accent-background )}.x4progress{background-color:var(--progress-background);position:relative;height:6px;margin:0 5px;border-radius:3px}.x4progress .bar{position:absolute;left:0;top:0;bottom:0;width:0;background-color:var(--progress-color);border-radius:3px;transition:width ease .2s}.x4progress.indeterm .bar{background-image:linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:20px 20px;animation:slide 1s linear infinite}@keyframes slide{0%{background-position:0 0}to{background-position:2.5rem 0}}.x4select{padding:4px;outline:none;border:1px solid var(--border);background-color:#fff}:root{--propertygrid-background: white}.x4propertygrid{background:var(--propertygrid-background);border:1px solid var(--color-primary-a50);overflow-y:auto;flex-basis:0}.x4propertygrid .root{display:grid;grid-template-columns:1fr;grid-template-rows:auto}.x4propertygrid .group{min-height:2em;font-weight:700;background-color:#fff;color:var(--color-primary-a50);display:flex;align-items:center;padding:6px 4px 4px 8px;gap:8px}.x4propertygrid .group .x4box>.desc{font-style:italic;font-weight:400;font-size:90%;color:var(--text-ternary)}.x4propertygrid .group:not(:first-child){border-top:1px solid var(--color-primary-a50)}.x4propertygrid .group:not(:last-child){border-bottom:1px solid var(--color-primary-a50);box-shadow:4px 4px 8px #0003}.x4propertygrid .group>.x4box{flex-grow:1}.x4propertygrid .group>.x4icon{width:1em;height:1em}.x4propertygrid .group>.x4icon .fa-secondary,.x4propertygrid .group>.x4icon .fa-primary{fill:var(--color-primary-a50)}.x4propertygrid .group>.x4button{background-color:transparent;color:var(--color-primary-a50)}.x4propertygrid .row{border-bottom:1px solid var(--border-light)}.x4propertygrid .row:has(:focus){background-color:var(--color-primary-a20)}.x4propertygrid .row:hover{background-color:var(--color-primary-a10)}.x4propertygrid .row .cell{flex-grow:1;flex-basis:10px;padding:4px}.x4propertygrid .row .cell>*{width:100%}.x4propertygrid .row .cell input{background:#fff9}.x4propertygrid .row .cell:first-child{border-right:1px solid var(--border)}.x4propertygrid .row .hdr{padding:8px 8px 8px 34px}.x4propertygrid .row .cell:has(.x4button){padding:4px 40px}.x4radio{display:flex;flex-direction:row;align-items:center;margin-left:5px;gap:4px;cursor:pointer}.x4radio .inner{position:relative;height:1rem;width:1rem;border-radius:50%;order:1}.x4radio .inner input{appearance:none;background-color:#fff;cursor:pointer;display:block;margin:0;padding:0;width:100%;height:100%;transition:opacity .1s ease;border-radius:50%;border:1px solid var(--border)}.x4radio .inner svg{margin:auto;pointer-events:none;position:absolute;inset:0;width:100%;height:100%}.x4radio .inner svg .fa-primary{fill:var(--accent-background)}.x4radio .inner svg .fa-secondary{fill:#fff}.x4radio .inner:has(input:not(:checked)) input{opacity:1}.x4radio .inner:has(input:not(:checked)) svg{opacity:0}.x4radio label{order:2;cursor:pointer}.x4radio.left label{order:0}.x4radio.button{--size: 24px;border:1px solid transparent;padding:8px;margin:0}.x4radio.button.outline{border-radius:22px}.x4radio.button .inner{display:none}.x4radio.button label{display:flex;flex-grow:1}.x4radio.button label #text{flex-grow:1;text-align:center;color:var(--text-ternary)}.x4radio.button label #icon{fill:var(--text-ternary);width:var(--size);height:var(--size)}.x4radio.button:has(input:checked){background-color:var(--background-secondary);border-color:var(--accent-background)}.x4radio.button:has(input:checked) .x4label #text{color:var(--accent-background-active);font-weight:700}.x4radio.button:has(input:checked) .x4label #icon{fill:var(--accent-background-active)}.x4radio.button:has(input:checked) .x4label .fa-primary{fill:var(--accent-background-active)}:root{--rating: var( --border );--rating-hover: var( --border-hover );--rating-checked: var( --accent-background )}.x4rating{gap:2px}.x4rating .item{width:16px;height:16px;color:var(--rating)}.x4rating .item:hover{color:var(--rating-hover)}.x4rating .item.checked{color:var(--rating-checked)}:root{--slider-track: var( --border );--slider-thumb-background: var( --accent-background );--slider-thumb-border: var( --accent-background );--slider-thumb-border-focus: var( --border-focus )}.x4slider{outline:none;touch-action:none;overflow:hidden}.x4slider:not(.vertical){padding:10px 12px;margin:5px 0;height:28px}.x4slider:not(.vertical) .track{background-color:var(--slider-track);width:100%;position:relative;top:50%;height:3px}.x4slider:not(.vertical) .bar{position:absolute;width:61%;height:3px}.x4slider:not(.vertical) .thumb{position:absolute;left:61%;outline:none;background-color:var(--slider-thumb-background);border:3px solid var(--slider-thumb-border);border-radius:8px;top:50%;width:16px;height:16px;transform:translate(-50%,-50%);cursor:pointer}.x4slider.vertical{padding:12px 10px;margin:0 5px;width:28px}.x4slider.vertical .track{background-color:var(--slider-track);height:100%;position:relative;left:50%;width:3px}.x4slider.vertical .bar{position:absolute;width:3px;height:61%}.x4slider.vertical .thumb{position:absolute;left:50%;outline:none;background-color:var(--slider-thumb-background);border:3px solid var(--slider-thumb-border);border-radius:8px;top:61%;width:16px;height:16px;transform:translate(-50%,-50%);cursor:pointer}.x4slider:focus .thumb{outline-offset:3px;outline-color:var(--slider-thumb-border-focus);outline-style:solid;outline-width:1px}:root{--switch-border: var( --border );--switch-background: #eee;--switch-background-disabled: var( --disabled-background );--switch-checked: var( --accent-background )}.x4switch{display:flex;flex-direction:row;align-items:center;position:relative;gap:4px;margin-left:5px;padding:4px;cursor:pointer}.x4switch label{cursor:pointer}.x4switch:focus-within .x4label span{text-decoration:underline}.x4switch .switch{width:2.2rem;height:18px;position:relative}.x4switch .switch input{position:absolute;width:100%;height:100%;appearance:none;padding:0;margin:0;left:0;top:0;cursor:pointer}.x4switch .switch .track{position:absolute;pointer-events:none;left:0;top:0;width:100%;height:100%;border:1px solid var(--switch-border);background-color:var(--switch-background);border-radius:9px;transition:background-color ease .2s}.x4switch .switch .thumb{position:absolute;pointer-events:none;left:.05rem;top:1px;width:1rem;height:1rem;border-radius:8px;background-color:#fff;box-shadow:0 0 2px #00000080;transition:left ease .2s}.x4switch:has(input:checked) .switch .thumb{left:1.15rem}.x4switch:has(input:checked) .switch .track{background-color:var(--switch-checked)}.x4switch[disabled],.x4switch[disabled] *{cursor:not-allowed}.x4switch[disabled] input{pointer-events:none}.x4switch[disabled] label{pointer-events:none;color:var(--checkbox-color-disabled)}.x4switch[disabled] .switch .track,.x4switch[disabled].x4switch:has(input:checked) .switch .track{background-color:var(--switch-background-disabled)}:root{--tab-border-selected: var( --accent-background );--tab-border-hover: var( --accent-background-hover )}.x4tabs .x4ctablist{gap:4px;padding:5px 5px 0}.x4tabs .x4ctablist .x4button{border:none;border-bottom:2px solid transparent;color:var(--color-gray-7);margin:0;outline:none;transition:border-color .2s ease}.x4tabs .x4ctablist .x4button.selected{border-bottom-color:var(--tab-border-selected);font-weight:700;color:var(--color-gray-9)}.x4tabs .x4ctablist .x4button:hover{background-color:unset;color:#000;border-bottom-color:var(--tab-border-hover)}.x4tabs>.body{padding:8px;border:1px solid var(--border)}.flex,.x4textarea textarea{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--textarea-border: var( --border );--textarea-border-focus: var( --border-focus );--textarea-selection: var( --accent-background )}.x4textarea{margin:5px}.x4textarea .x4label{gap:0;padding:4px 0}.x4textarea .x4label:after{content:":"}.x4textarea .x4label:has(.empty){display:none}.x4textarea textarea{padding:4px;outline:none;font:inherit;border:1px solid var(--textarea-border)}.x4textarea textarea:focus{border:1px solid var(--textarea-border-focus)}.x4textarea textarea::selection{background-color:var(--textarea-selection);color:#fff}.x4textarea textarea[resize=false]{resize:none}.box,.vbox,.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{position:relative}.hbox,.x4textedit,.x4textedit>#label>.x4label,.x4textedit>#edit{display:flex;flex-direction:row;align-items:center}.flex,.x4textedit>#edit,.x4textedit>#edit .x4input{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--textedit-border: var( --border );--textedit-border-focus: var( --border-focus );--textedit-required: var( --alert-background );--textedit-btn-background: inherit;--textedit-btn-color: var( --text-secondary );--textedit-btn-color-hover: var( --text-primary );--textedit-color-disabled: var( --disabled-background )}.x4textedit{margin:5px;gap:6px}.x4textedit>#label{border-bottom:1px solid transparent;justify-content:end}.x4textedit>#label>.x4label{height:100%;padding:0;font-weight:500;gap:0}.x4textedit>#label:after{content:":"}.x4textedit>#edit{border-bottom:1px solid var(--textedit-border)}.x4textedit>#edit .x4input{outline:none;margin:0}.x4textedit>#edit .x4button{margin:0;padding:0;background-color:var(--textedit-btn-background);color:var(--textedit-btn-color)}.x4textedit>#edit .x4button #icon{color:var(--textedit-btn-color)}.x4textedit>#edit .x4button:hover,.x4textedit>#edit .x4button:hover #icon{color:var(--textedit-btn-color-hover)}.x4textedit>#edit .x4button:focus{border-bottom-color:var(--textedit-border-focus)}.x4textedit:focus-within #edit{border-bottom-color:var(--textedit-border-focus)}.x4textedit[required]>#label>.x4label:before{content:"*";font-weight:700;color:var(--textedit-required);margin-right:2px}.x4textedit[disabled],.x4textedit[disabled] *{cursor:not-allowed}.x4textedit[disabled] #label>.x4label #text,.x4textedit[disabled] #label>.x4label:before,.x4textedit[disabled] #label:after{color:var(--textedit-color-disabled)}.x4textedit[disabled] #edit input{color:var(--textedit-color-disabled);background-color:unset}:root{--tickline-axis-color: var( --border );--tickline-color: var( --accent-color );--tickline-background: white}.x-tick-line{position:relative;background-color:var(--tickline-background)}.box,.vbox,.hbox{position:relative}.shadow-xl,.x4tooltip{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}:root{--tooltip-caption-background: var( --color-primary-a70 );--tooltip-caption-color: white;--tooltip-icon-background: white;--tooltip-icon-color: var( --color-primary-a70 );--tooltip-background: var( --color-primary-a10 );--tooltip-color: var( --color-primary-a90 );--tooltip-border: var( --color-primary-a20 )}.x4tooltip{display:flex;flex-direction:row;border:none;font-size:90%;position:absolute;border:1px solid var(--tooltip-border);background-color:var(--tooltip-background)}.x4tooltip .x4icon{padding:2px 4px;color:var(--tooltip-icon-color);width:2em;height:2em}.x4tooltip .x4icon svg{max-height:100%}.x4tooltip .x4icon .fa-primary,.x4tooltip .x4icon .fa-secondary{fill:var(--tooltip-icon-color)}.x4tooltip #text{background-color:var(--tooltip-background);color:var(--tooltip-color);padding:4px}.x4tooltip img{max-width:100px;max-height:50px;background-color:#fff;margin:4px}.box,.vbox,.x4treeview,.hbox{position:relative}.vbox,.x4treeview{display:flex;flex-direction:column}.flex{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}:root{--treeview-background: white;--treeitem-backgound-hover: var( --background-secondary );--treeitem-color-hover: var( );--treeitem-background-sel: var( --accent-background );--treeitem-color-sel: var( --accent-color );--treeview-item-color-sel-disabled: var( --disabled-background );--treeview-item-color-disabled: var( --disabled-color-dark );--treeitem-backgound-active: var( --accent-background-active);--treeitem-color-active: var( --accent-color-active )}.x4treeview{overflow-y:auto;height:100%;margin:5px;outline:none;border:1px solid var(--border);background:var(--treeview-background)}.x4treeview:focus{border:1px solid var(--border-focus)}.x4treeview>.body{width:100%;flex-basis:0;overflow-y:auto;overflow-x:auto;outline:none;position:relative}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label{gap:4px;padding:4px}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label .x4label,.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label .x4icon{color:inherit}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label .x4icon{width:16px}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label:hover{background-color:var(--treeitem-backgound-hover)}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label.selected{background-color:var(--treeitem-background-sel);color:var(--treeitem-color-sel)}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.label:active{background-color:var(--accent-background-active);color:var(--accent-color-active)}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.body:not(:first-child){padding-left:24px}.x4treeview>.body>.x4viewport .x4ctreeviewitem>.body{transition:opacity .5s ease}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder>.label{display:flex;flex-direction:row;align-items:center}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder>.label>.x-icon{transform:rotate(0);transition:transform .2s ease;width:16px;height:16px;cursor:pointer}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder>.body{overflow:hidden}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder:not(.open)>.body{height:0;opacity:0}.x4treeview>.body>.x4viewport .x4ctreeviewitem.folder:not(.open)>.label>.x4icon{transform:rotate(-90deg)}.x4treeview>#footer{border-top:1px solid var(--border);margin:0}.x4treeview>#footer.x4btngroup{gap:0px}.x4treeview>#footer.x4btngroup .x4button{background-color:var(--ol-button-background);color:var(--ol-button-color);margin:0}.x4treeview>#footer.x4btngroup .x4button .x4icon{height:1.5em;width:1.5em}.x4treeview>#footer.x4btngroup .x4button:hover{background-color:var(--ol-button-background-hover);color:var(--ol-button-color-hover)}.x4treeview>#footer.x4btngroup .x4button:active{background-color:var(--ol-button-background-active);color:var(--ol-button-color-active)}.x4treeview>#footer.x4btngroup .x4button:active #icon{color:var(--button-icon-color)}.x4treeview>#footer.x4btngroup .x4button:focus{background-color:var(--ol-button-background-hover)}.x4treeview>#footer.x4btngroup .x4button:disabled{color:var(--disabled-color-dark)}.x4treeview[disabled]{cursor:not-allowed;border-color:var(--border);color:var(--treeview-item-color-disabled)}.x4treeview[disabled]>.body .x4viewport{pointer-events:none}.x4treeview[disabled]>.body .x4viewport .x4item.selected{background-color:var(--treeview-item-color-sel-disabled)}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--font-name: "montserrat";--font-size: 14px}*{user-select:none;box-sizing:border-box}body{font-family:var(--font-name);font-size:var(--font-size)}dialog{margin:0;padding:0}.x4hidden{display:none!important}:root{--color-primary-a0: #ffffff;--color-primary-a5: rgb(229.65, 240.15, 248.85);--color-primary-a10: rgb(223.904, 236.784, 247.456);--color-primary-a20: rgb(189.428, 216.588, 239.092);--color-primary-a30: rgb(154.952, 196.392, 230.728);--color-primary-a40: rgb(120.476, 176.196, 222.364);--color-primary-a50: #569cd6;--color-primary-a55: rgb(65.4785714286, 143.9785714286, 209.0214285714);--color-primary-a60: rgb(51.524, 135.804, 205.636);--color-primary-a70: rgb(41.8434285714, 113.2834285714, 172.4765714286);--color-primary-a80: rgb(33.4794285714, 90.6394285714, 138.0005714286);--color-primary-a90: rgb(25.1154285714, 67.9954285714, 103.5245714286);--color-primary-a100: #000000;--color-danger-a50: #c01010;--color-danger-a60: rgb(144.9230769231, 12.0769230769, 12.0769230769);--color-warning-a50: #b67b0d;--color-success-a50: #10c01f;--color-success-a60: rgb(12.0769230769, 144.9230769231, 23.3990384615)}:root{--background-primary: var(--color-primary-a0);--background-secondary: var(--color-primary-a10);--text-primary: var(--color-primary-a100);--text-secondary: #999;--text-ternary: #666;--disabled-background: #ccc;--disabled-color: white;--disabled-color-dark: #aaa;--accent-background: var(--color-primary-a60);--accent-background-hover: var(--color-primary-a55);--accent-background-focus: var(--color-primary-a70);--accent-background-active: var(--color-primary-a80);--accent-color: var(--color-primary-a0);--accent-color-hover: var(--color-primary-a0);--accent-color-focus: var(--color-primary-a0);--accent-color-active: var(--color-primary-a0);--border: #e1e1e1;--border-light: #eaeaea;--border-hover: #c2c2c2;--border-focus: var( --accent-background );--alert-background: var( --color-danger-a50 );--alert-background-active: var( --color-danger-a60 );--alert-color: var( --color-primary-a0 );--warning-background: var( --color-warning-a50 );--warning-color: var( --color-primary-a0 );--success-background: var( --color-success-a50 );--success-background-active: var( --color-success-a60 );--success-color: var( --color-success-a0 )}.box,.x4box,.vbox,.hbox{position:relative}.hbox{display:flex;flex-direction:row;align-items:center}.vbox{display:flex;flex-direction:column}.fit{position:absolute;inset:0}.rel-fit{position:relative;inset:0}.flex,.x4flex{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}.shadow-sm{box-shadow:0 1px 2px #0000000d}.shadow-md{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shaking{0%{transform:rotate(-15deg)}4%{transform:rotate(15deg)}8%,24%{transform:rotate(-18deg)}12%,28%{transform:rotate(18deg)}16%{transform:rotate(-22deg)}20%{transform:rotate(22deg)}32%{transform:rotate(-12deg)}36%{transform:rotate(12deg)}40%{transform:rotate(0)}}.x4rotate{animation:rotating 2s linear infinite}.x4shake{animation-name:shaking;animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-direction:reverse}
package/lib/types/x4js.d.ts CHANGED
@@ -12,7 +12,7 @@
12
12
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
13
13
  *
14
14
  * AUTOGENERATED CODE, DO NOT MODIFY
15
- * generated on Tue Jul 22 2025
15
+ * generated on Thu Sep 11 2025
16
16
  */
17
17
 
18
18
 
@@ -114,6 +114,8 @@ declare module 'x4js' {
114
114
  pgup,
115
115
  next,
116
116
  last,
117
+ left,
118
+ right,
117
119
  }
118
120
 
119
121
  // ---------------------------------------
@@ -285,6 +287,43 @@ declare module 'x4js' {
285
287
  removed?: ( ev: Event ) => void;
286
288
  }
287
289
 
290
+ // ---------------------------------------
291
+ // from /src/core/core_application.ts
292
+
293
+ export interface EvMessage extends CoreEvent {
294
+ msg: string;
295
+ params: any;
296
+ }
297
+
298
+ export interface ApplicationEvents extends EventMap {
299
+ global: EvMessage;
300
+ message: EvMessage;
301
+ }
302
+
303
+ class Process {
304
+ getMaxTouchPoints( ): void;
305
+ }
306
+
307
+ export class Application<E extends ApplicationEvents = ApplicationEvents> extends CoreElement<E> {
308
+ env: any;
309
+ mainview: Component;
310
+ process: any;
311
+ constructor( );
312
+ setMainView( view: Component ): void;
313
+ instance<P extends Application = Application>( ): P;
314
+ getMainView( ): void;
315
+ setEnv( name: string, value: any ): void;
316
+ getEnv( name: string, def_value: any ): void;
317
+ fireGlobal( msg: string, params: any ): void;
318
+ _setupKeyboard( ): void;
319
+ focusNext( next: boolean ): void;
320
+ setupSocketMessaging( path: string, looseCallback: ( ) => void ): void;
321
+ getStorage( name: string ): string;
322
+ getStorageJSON( name: string ): any;
323
+ setStorage( name: string, value: string | number ): void;
324
+ setStorageJSON( name: string, value: any ): void;
325
+ }
326
+
288
327
  // ---------------------------------------
289
328
  // from /src/core/component.ts
290
329
 
@@ -310,8 +349,8 @@ declare module 'x4js' {
310
349
  ref?: RefType<any>;
311
350
  width?: string | number;
312
351
  height?: string | number;
313
- disabled?: true;
314
- hidden?: true;
352
+ disabled?: boolean;
353
+ hidden?: boolean;
315
354
  flex?: boolean | number;
316
355
  tooltip?: string;
317
356
  existingDOM?: HTMLElement;
@@ -329,6 +368,7 @@ declare module 'x4js' {
329
368
  clsprefix: string;
330
369
  #store: Map<string|symbol,any>;
331
370
  constructor( props: P );
371
+ onGlobalEvent( cb: ( ev: EvMessage ) => void ): void;
332
372
  hasClass( cls: string ): void;
333
373
  addClass( cls: string ): void;
334
374
  removeClass( cls: string ): void;
@@ -342,7 +382,7 @@ declare module 'x4js' {
342
382
  getIntData( name: string ): number;
343
383
  setData( name: string, value: string ): void;
344
384
  setInternalData( name: string|symbol, value: any ): this;
345
- getInternalData( name: string|symbol ): any;
385
+ getInternalData<T = any>( name: string|symbol ): T;
346
386
  addDOMEvent<K extends keyof GlobalDOMEvents>( name: K, listener: GlobalDOMEvents[K], prepend: any ): void;
347
387
  setDOMEvents( events: GlobalDOMEvents ): void;
348
388
  mapPropEvents<N extends keyof E>( props: P, elements: N[] ): void;
@@ -382,6 +422,7 @@ declare module 'x4js' {
382
422
  lastChild<T extends Component = Component>( ): T;
383
423
  enumChildComponents( recursive: boolean ): void;
384
424
  enumChildNodes( recursive: boolean ): void;
425
+ visitChildren( cb: ( el: Component ) => boolean ): void;
385
426
  animate( keyframes: Keyframe[], duration: number ): void;
386
427
  createElement( clsOrTag: string | ComponentConstructor | symbol | CreateComponentCallBack, attrs: any, children: Component[] ): Component | Component[];
387
428
  createFragment( ): Component[];
@@ -411,11 +452,10 @@ declare module 'x4js' {
411
452
  focus_out: boolean;
412
453
  }
413
454
 
414
- interface ISelection {
415
- }
455
+ type ISelection = number | string | any;
416
456
 
417
457
  export interface EvSelectionChange extends ComponentEvent {
418
- selection: ISelection;
458
+ selection: ISelection[];
419
459
  empty: boolean;
420
460
  }
421
461
 
@@ -436,43 +476,6 @@ declare module 'x4js' {
436
476
  export interface EvDblClick extends ComponentEvent {
437
477
  }
438
478
 
439
- // ---------------------------------------
440
- // from /src/core/core_application.ts
441
-
442
- export interface EvMessage extends CoreEvent {
443
- msg: string;
444
- params: any;
445
- }
446
-
447
- export interface ApplicationEvents extends EventMap {
448
- global: EvMessage;
449
- message: EvMessage;
450
- }
451
-
452
- class Process {
453
- getMaxTouchPoints( ): void;
454
- }
455
-
456
- export class Application<E extends ApplicationEvents = ApplicationEvents> extends CoreElement<E> {
457
- env: any;
458
- mainview: Component;
459
- process: any;
460
- constructor( );
461
- setMainView( view: Component ): void;
462
- instance<P extends Application = Application>( ): P;
463
- getMainView( ): void;
464
- setEnv( name: string, value: any ): void;
465
- getEnv( name: string, def_value: any ): void;
466
- fireGlobal( msg: string, params: any ): void;
467
- _setupKeyboard( ): void;
468
- focusNext( next: boolean ): void;
469
- setupSocketMessaging( path: string, looseCallback: ( ) => void ): void;
470
- getStorage( name: string ): string;
471
- getStorageJSON( name: string ): any;
472
- setStorage( name: string, value: string | number ): void;
473
- setStorageJSON( name: string, value: any ): void;
474
- }
475
-
476
479
  // ---------------------------------------
477
480
  // from /src/core/core_colors.ts
478
481
 
@@ -906,9 +909,12 @@ declare module 'x4js' {
906
909
  _cur: number;
907
910
  constructor( props: StackBoxProps );
908
911
  addItem( item: StackItem ): void;
912
+ removeItem( name: string ): void;
909
913
  select( name: string ): void;
910
914
  _createPage( page: StackItemEx ): void;
911
915
  getPage( name: string ): void;
916
+ getPageCount( ): void;
917
+ enumPageNames( ): void;
912
918
  getItem( name: string ): void;
913
919
  getCurPage( ): void;
914
920
  }
@@ -1053,7 +1059,7 @@ declare module 'x4js' {
1053
1059
  // ---------------------------------------
1054
1060
  // from /src/components/form/form.ts
1055
1061
 
1056
- type FormValues = Record<string,string>;
1062
+ type FormValues = Record<string,any>;
1057
1063
 
1058
1064
  export interface FormProps extends BoxProps {
1059
1065
  autoComplete?: boolean;
@@ -1066,7 +1072,7 @@ declare module 'x4js' {
1066
1072
  constructor( props: P );
1067
1073
  _get_inputs( ): void;
1068
1074
  setValues( values: FormValues ): void;
1069
- getValues( ): FormValues;
1075
+ getValues<T extends FormValues = FormValues>( ): T;
1070
1076
  setAutoComplete( on: any ): void;
1071
1077
  setValidator( validator: ValidationFn ): void;
1072
1078
  validate( ): FormValues;
@@ -1075,7 +1081,7 @@ declare module 'x4js' {
1075
1081
  // ---------------------------------------
1076
1082
  // from /src/components/sizers/sizer.ts
1077
1083
 
1078
- interface EvSizeChange extends ComponentEvent {
1084
+ export interface EvSizeChange extends ComponentEvent {
1079
1085
  size: number;
1080
1086
  }
1081
1087
 
@@ -1287,6 +1293,7 @@ declare module 'x4js' {
1287
1293
  }
1288
1294
 
1289
1295
  export interface CanvasProps extends ComponentProps {
1296
+ paint_cb: (ctx: CanvasEx ) => void;
1290
1297
  paint: EventCallback<EvPaint>;
1291
1298
  clear?: boolean;
1292
1299
  }
@@ -1540,6 +1547,29 @@ declare module 'x4js' {
1540
1547
  getViewport( ): void;
1541
1548
  }
1542
1549
 
1550
+ // ---------------------------------------
1551
+ // from /src/components/header/header.ts
1552
+
1553
+ interface HeaderItem {
1554
+ name: string;
1555
+ title: string;
1556
+ iconId?: string;
1557
+ width?: number;
1558
+ }
1559
+
1560
+ interface HeaderProps extends Omit<ComponentProps,"content"> {
1561
+ items: HeaderItem[];
1562
+ target?: Component;
1563
+ }
1564
+
1565
+ @class_ns( "x4" ) export class Header extends HBox<HeaderProps> {
1566
+ _els: Component[];
1567
+ _vwp: Component;
1568
+ constructor( props: HeaderProps );
1569
+ _calc_sizes( ): void;
1570
+ _on_resize( ): void;
1571
+ }
1572
+
1543
1573
  // ---------------------------------------
1544
1574
  // from /src/components/listbox/listbox.ts
1545
1575
 
@@ -1564,6 +1594,7 @@ declare module 'x4js' {
1564
1594
  interface ListboxProps extends Omit<ComponentProps,'content'> {
1565
1595
  items?: ListItem[];
1566
1596
  renderer?: ( item: ListItem ) => Component;
1597
+ header?: Header;
1567
1598
  footer?: Component;
1568
1599
  checkable?: true;
1569
1600
  multisel?: true;
@@ -1593,7 +1624,7 @@ declare module 'x4js' {
1593
1624
  setItems( items: ListItem[], keepSel: any ): void;
1594
1625
  renderItem( item: ListItem ): void;
1595
1626
  defaultRenderer( item: ListItem ): Component;
1596
- filter( filter: string ): void;
1627
+ filter( filter: string | RegExp ): void;
1597
1628
  appendItem( item: ListItem, prepend: any, select: any ): void;
1598
1629
  updateItem( id: any, item: ListItem ): void;
1599
1630
  getSelection( ): void;
@@ -1650,6 +1681,7 @@ declare module 'x4js' {
1650
1681
  getSelection( ): void;
1651
1682
  _getList( ): void;
1652
1683
  queryInterface<T extends IComponentInterface>( name: string ): T;
1684
+ getInput( ): void;
1653
1685
  }
1654
1686
 
1655
1687
  // ---------------------------------------
@@ -1726,7 +1758,7 @@ declare module 'x4js' {
1726
1758
 
1727
1759
  type ColType = "number" | "money" | "checkbox" | "date" | "string" | "image" | "percent" | "icon";
1728
1760
 
1729
- interface GridColumn {
1761
+ export interface GridColumn {
1730
1762
  id: any;
1731
1763
  title: string;
1732
1764
  width: number;
@@ -1817,28 +1849,6 @@ declare module 'x4js' {
1817
1849
  selectItem( id: any ): void;
1818
1850
  }
1819
1851
 
1820
- // ---------------------------------------
1821
- // from /src/components/header/header.ts
1822
-
1823
- interface HeaderItem {
1824
- name: string;
1825
- title: string;
1826
- iconId?: string;
1827
- width?: number;
1828
- }
1829
-
1830
- interface HeaderProps extends Omit<ComponentProps,"content"> {
1831
- items: HeaderItem[];
1832
- }
1833
-
1834
- @class_ns( "x4" ) export class Header extends HBox<HeaderProps> {
1835
- _els: Component[];
1836
- _vwp: Component;
1837
- constructor( props: HeaderProps );
1838
- _calc_sizes( ): void;
1839
- _on_resize( ): void;
1840
- }
1841
-
1842
1852
  // ---------------------------------------
1843
1853
  // from /src/components/keyboard/keyboard.ts
1844
1854
 
@@ -1914,6 +1924,7 @@ declare module 'x4js' {
1914
1924
  constructor( props: DialogProps );
1915
1925
  _create( msg: string | UnsafeHtml, editor: Component, title: string ): void;
1916
1926
  showAsync( msg: string | UnsafeHtml, editor: Component, title: string ): Promise<string>;
1927
+ show( msg: string | UnsafeHtml, editor: Component, title: string, callback: ( btn: string ) => boolean | Promise<boolean> | Promise<void> ): void;
1917
1928
  }
1918
1929
 
1919
1930
  // ---------------------------------------
@@ -2145,6 +2156,7 @@ declare module 'x4js' {
2145
2156
  title: string;
2146
2157
  icon?: string;
2147
2158
  content: Component;
2159
+ cls?: string;
2148
2160
  }
2149
2161
 
2150
2162
  @class_ns( "x4" ) class CTab extends Button {
@@ -2170,7 +2182,7 @@ declare module 'x4js' {
2170
2182
  select( name: string ): void;
2171
2183
  setItems( items: TabItem[ ] ): void;
2172
2184
  addItem( tab: TabItem ): void;
2173
- getTabCount( ): void;
2185
+ removeItem( name: string ): void;
2174
2186
  }
2175
2187
 
2176
2188
  interface TabsProps extends Omit<ComponentProps,"content"> {
@@ -2188,6 +2200,8 @@ declare module 'x4js' {
2188
2200
  getTab( name: string ): void;
2189
2201
  getCurTab( ): void;
2190
2202
  addTab( item: TabItem ): void;
2203
+ removeTab( name: string ): void;
2204
+ enumTabs( ): string[];
2191
2205
  }
2192
2206
 
2193
2207
  // ---------------------------------------
@@ -2287,14 +2301,15 @@ declare module 'x4js' {
2287
2301
  interface TreeviewProps extends Omit<ComponentProps,"content"> {
2288
2302
  items: TreeItem[];
2289
2303
  footer?: Component;
2290
- }
2291
-
2292
- interface ChangeEvent extends ComponentEvent {
2293
- selection: TreeItem;
2304
+ selectionChange?: EventCallback<EvSelectionChange>;
2305
+ dblClick?: EventCallback<EvDblClick>;
2306
+ click?: EventCallback<EvClick>;
2294
2307
  }
2295
2308
 
2296
2309
  interface TreeviewEvents extends ComponentEvents {
2297
2310
  selectionChange?: EvSelectionChange;
2311
+ dblClick?: EvDblClick;
2312
+ click?: EvClick;
2298
2313
  }
2299
2314
 
2300
2315
  @class_ns( "x4" ) class CTreeViewItem extends Box {
@@ -2315,7 +2330,7 @@ declare module 'x4js' {
2315
2330
  _items: TreeItem[];
2316
2331
  constructor( props: TreeviewProps );
2317
2332
  setItems( items: TreeItem[ ] ): void;
2318
- _onclick( ev: UIEvent ): void;
2333
+ _on_click( ev: UIEvent ): void;
2319
2334
  _onkey( ev: KeyboardEvent ): void;
2320
2335
  navigate( sens: kbTreeNav ): void;
2321
2336
  _flattenOpenItems( ): void;
@@ -2324,6 +2339,7 @@ declare module 'x4js' {
2324
2339
  _findItem( id: ListboxID ): void;
2325
2340
  clearSelection( ): void;
2326
2341
  getSelection( ): void;
2342
+ selectItem( id: ListboxID ): void;
2327
2343
  }
2328
2344
 
2329
2345
  // ---------------------------------------
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "x4js",
3
- "version": "2.0.20",
3
+ "version": "2.0.22",
4
4
  "description": "X4 framework",
5
5
  "author": "etienne cochard",
6
6
  "license": "MIT",