@sme.up/ketchup 6.5.0 → 6.7.0

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 (209) hide show
  1. package/README.md +7 -1
  2. package/dist/cjs/{f-button-4e2a0bb6.js → f-button-bf76ab95.js} +2 -2
  3. package/dist/cjs/{f-cell-1fc8a8b6.js → f-cell-b7a1524a.js} +25 -23
  4. package/dist/cjs/{f-checkbox-cd977193.js → f-checkbox-1097ca5d.js} +1 -1
  5. package/dist/cjs/{f-chip-7867f17b.js → f-chip-a5e100b1.js} +3 -3
  6. package/dist/cjs/{f-image-6b7a6168.js → f-image-d80a2749.js} +2 -2
  7. package/dist/cjs/{f-paginator-utils-b7712403.js → f-paginator-utils-c70812fe.js} +3 -5
  8. package/dist/cjs/{f-text-field-153e827c.js → f-text-field-48b8bb16.js} +2 -2
  9. package/dist/cjs/{index-31125378.js → index-ffdb46f6.js} +423 -252
  10. package/dist/cjs/ketchup.cjs.js +3 -3
  11. package/dist/cjs/kup-accordion.cjs.entry.js +3 -3
  12. package/dist/cjs/kup-autocomplete_25.cjs.entry.js +433 -163
  13. package/dist/cjs/kup-box.cjs.entry.js +27 -16
  14. package/dist/cjs/kup-calendar.cjs.entry.js +5 -5
  15. package/dist/cjs/kup-cell.cjs.entry.js +7 -7
  16. package/dist/cjs/kup-dash-list.cjs.entry.js +2 -2
  17. package/dist/cjs/kup-dash_2.cjs.entry.js +2 -2
  18. package/dist/cjs/kup-dashboard.cjs.entry.js +6 -6
  19. package/dist/cjs/kup-drawer.cjs.entry.js +2 -2
  20. package/dist/cjs/kup-echart.cjs.entry.js +2 -2
  21. package/dist/cjs/kup-family-tree.cjs.entry.js +19 -7
  22. package/dist/cjs/kup-form.cjs.entry.js +8 -8
  23. package/dist/cjs/kup-iframe.cjs.entry.js +2 -2
  24. package/dist/cjs/kup-image-list.cjs.entry.js +9 -9
  25. package/dist/cjs/kup-lazy.cjs.entry.js +2 -2
  26. package/dist/cjs/kup-magic-box.cjs.entry.js +3 -3
  27. package/dist/cjs/{kup-manager-cfe2f36e.js → kup-manager-0e38bf48.js} +39 -26
  28. package/dist/cjs/kup-nav-bar.cjs.entry.js +2 -2
  29. package/dist/cjs/kup-numeric-picker.cjs.entry.js +3 -3
  30. package/dist/cjs/kup-photo-frame.cjs.entry.js +2 -2
  31. package/dist/cjs/kup-probe.cjs.entry.js +2 -2
  32. package/dist/cjs/kup-qlik.cjs.entry.js +2 -2
  33. package/dist/cjs/kup-snackbar.cjs.entry.js +4 -4
  34. package/dist/cjs/loader.cjs.js +3 -3
  35. package/dist/collection/assets/box.js +9 -6
  36. package/dist/collection/assets/card.js +12 -2
  37. package/dist/collection/collection-manifest.json +3 -3
  38. package/dist/collection/components/kup-accordion/kup-accordion.js +239 -234
  39. package/dist/collection/components/kup-autocomplete/kup-autocomplete.js +545 -530
  40. package/dist/collection/components/kup-badge/kup-badge.js +176 -170
  41. package/dist/collection/components/kup-box/kup-box.js +907 -913
  42. package/dist/collection/components/kup-button/kup-button.css +1 -0
  43. package/dist/collection/components/kup-button/kup-button.js +379 -370
  44. package/dist/collection/components/kup-button-list/kup-button-list.js +251 -240
  45. package/dist/collection/components/kup-calendar/kup-calendar.js +301 -300
  46. package/dist/collection/components/kup-card/box/kup-card-box.js +115 -0
  47. package/dist/collection/components/kup-card/built-in/kup-card-calendar.js +14 -28
  48. package/dist/collection/components/kup-card/built-in/kup-card-clock.js +6 -19
  49. package/dist/collection/components/kup-card/built-in/kup-card-column-drop-menu.js +1 -2
  50. package/dist/collection/components/kup-card/built-in/kup-card-numeric.js +9 -44
  51. package/dist/collection/components/kup-card/collapsible/kup-card-collapsible.js +2 -21
  52. package/dist/collection/components/kup-card/dialog/kup-card-dialog.js +6 -33
  53. package/dist/collection/components/kup-card/kup-card-declarations.js +2 -0
  54. package/dist/collection/components/kup-card/kup-card-helper.js +3 -8
  55. package/dist/collection/components/kup-card/kup-card.css +140 -20
  56. package/dist/collection/components/kup-card/kup-card.js +352 -340
  57. package/dist/collection/components/kup-card/scalable/kup-card-scalable.js +68 -81
  58. package/dist/collection/components/kup-card/standard/kup-card-standard.js +96 -304
  59. package/dist/collection/components/kup-cell/kup-cell.js +221 -216
  60. package/dist/collection/components/kup-chart/kup-chart.js +547 -537
  61. package/dist/collection/components/kup-checkbox/kup-checkbox.js +275 -266
  62. package/dist/collection/components/kup-chip/kup-chip.js +240 -231
  63. package/dist/collection/components/kup-color-picker/kup-color-picker.js +274 -264
  64. package/dist/collection/components/kup-combobox/kup-combobox.js +458 -440
  65. package/dist/collection/components/kup-dash/kup-dash.js +110 -158
  66. package/dist/collection/components/kup-dash-list/kup-dash-list.js +210 -213
  67. package/dist/collection/components/kup-dashboard/kup-dashboard.js +196 -203
  68. package/dist/collection/components/kup-data-table/kup-data-table.js +1932 -1838
  69. package/dist/collection/components/kup-date-picker/kup-date-picker.js +408 -394
  70. package/dist/collection/components/kup-drawer/kup-drawer.js +244 -236
  71. package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js +474 -464
  72. package/dist/collection/components/kup-echart/kup-echart.js +436 -423
  73. package/dist/collection/components/kup-family-tree/kup-family-tree-declarations.js +1 -0
  74. package/dist/collection/components/kup-family-tree/kup-family-tree.js +420 -398
  75. package/dist/collection/components/kup-form/kup-form.js +223 -225
  76. package/dist/collection/components/kup-gauge/kup-gauge.js +445 -445
  77. package/dist/collection/components/kup-grid/kup-grid.js +156 -153
  78. package/dist/collection/components/kup-iframe/kup-iframe.js +181 -173
  79. package/dist/collection/components/kup-image/canvas/kup-image-canvas.js +9 -3
  80. package/dist/collection/components/kup-image/kup-image.js +300 -295
  81. package/dist/collection/components/kup-image-list/kup-image-list.js +292 -285
  82. package/dist/collection/components/kup-lazy/kup-lazy.js +253 -253
  83. package/dist/collection/components/kup-list/kup-list.js +541 -504
  84. package/dist/collection/components/kup-magic-box/kup-magic-box.js +145 -145
  85. package/dist/collection/components/kup-nav-bar/kup-nav-bar.js +190 -184
  86. package/dist/collection/components/kup-numeric-picker/kup-numeric-picker.js +490 -478
  87. package/dist/collection/components/kup-photo-frame/kup-photo-frame.js +254 -242
  88. package/dist/collection/components/kup-probe/kup-probe.js +87 -83
  89. package/dist/collection/components/kup-progress-bar/kup-progress-bar.js +237 -241
  90. package/dist/collection/components/kup-qlik/kup-qlik.js +178 -170
  91. package/dist/collection/components/kup-radio/kup-radio.js +258 -255
  92. package/dist/collection/components/kup-rating/kup-rating.js +208 -197
  93. package/dist/collection/components/kup-snackbar/kup-snackbar.js +249 -246
  94. package/dist/collection/components/kup-spinner/kup-spinner.js +274 -269
  95. package/dist/collection/components/kup-switch/kup-switch.js +255 -246
  96. package/dist/collection/components/kup-tab-bar/kup-tab-bar.js +265 -224
  97. package/dist/collection/components/kup-text-field/kup-text-field.js +814 -805
  98. package/dist/collection/components/kup-time-picker/kup-time-picker.js +464 -450
  99. package/dist/collection/components/kup-tree/kup-tree-declarations.js +0 -2
  100. package/dist/collection/components/kup-tree/kup-tree-faker.js +3 -2
  101. package/dist/collection/components/kup-tree/kup-tree.js +1134 -1133
  102. package/dist/collection/f-components/f-button/f-button.js +11 -20
  103. package/dist/collection/f-components/f-cell/f-cell.js +23 -23
  104. package/dist/collection/f-components/f-checkbox/f-checkbox.js +1 -9
  105. package/dist/collection/f-components/f-chip/f-chip.js +18 -31
  106. package/dist/collection/f-components/f-image/f-image.js +1 -3
  107. package/dist/collection/f-components/f-paginator/f-paginator.js +1 -6
  108. package/dist/collection/f-components/f-switch/f-switch.js +1 -8
  109. package/dist/collection/f-components/f-text-field/f-text-field.js +18 -40
  110. package/dist/collection/managers/kup-debug/kup-debug.js +10 -5
  111. package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js +25 -10
  112. package/dist/collection/managers/kup-theme/kup-theme-declarations.js +1 -0
  113. package/dist/collection/managers/kup-toolbar/kup-toolbar.js +10 -5
  114. package/dist/collection/managers/kup-tooltip/kup-tooltip.js +10 -5
  115. package/dist/collection/utils/kup-column-menu/kup-column-menu.js +0 -21
  116. package/dist/esm/{f-button-a24e43dd.js → f-button-e79f7594.js} +2 -2
  117. package/dist/esm/{f-cell-ebbb0c06.js → f-cell-9400374e.js} +25 -23
  118. package/dist/esm/{f-checkbox-e06cf07b.js → f-checkbox-b721178e.js} +1 -1
  119. package/dist/esm/{f-chip-e2c38ba8.js → f-chip-bf740287.js} +3 -3
  120. package/dist/esm/{f-image-7e02e88f.js → f-image-ab3dc8cb.js} +2 -2
  121. package/dist/esm/{f-paginator-utils-e6d2638f.js → f-paginator-utils-6909e43b.js} +3 -5
  122. package/dist/esm/{f-text-field-8438a278.js → f-text-field-4841dfea.js} +2 -2
  123. package/dist/esm/{index-e41330a5.js → index-a2197376.js} +423 -252
  124. package/dist/esm/ketchup.js +3 -3
  125. package/dist/esm/kup-accordion.entry.js +3 -3
  126. package/dist/esm/kup-autocomplete_25.entry.js +433 -163
  127. package/dist/esm/kup-box.entry.js +27 -16
  128. package/dist/esm/kup-calendar.entry.js +5 -5
  129. package/dist/esm/kup-cell.entry.js +7 -7
  130. package/dist/esm/kup-dash-list.entry.js +2 -2
  131. package/dist/esm/kup-dash_2.entry.js +2 -2
  132. package/dist/esm/kup-dashboard.entry.js +6 -6
  133. package/dist/esm/kup-drawer.entry.js +2 -2
  134. package/dist/esm/kup-echart.entry.js +2 -2
  135. package/dist/esm/kup-family-tree.entry.js +19 -7
  136. package/dist/esm/kup-form.entry.js +8 -8
  137. package/dist/esm/kup-iframe.entry.js +2 -2
  138. package/dist/esm/kup-image-list.entry.js +9 -9
  139. package/dist/esm/kup-lazy.entry.js +2 -2
  140. package/dist/esm/kup-magic-box.entry.js +3 -3
  141. package/dist/esm/{kup-manager-7c27e90e.js → kup-manager-c54e6df5.js} +22 -9
  142. package/dist/esm/kup-nav-bar.entry.js +2 -2
  143. package/dist/esm/kup-numeric-picker.entry.js +3 -3
  144. package/dist/esm/kup-photo-frame.entry.js +2 -2
  145. package/dist/esm/kup-probe.entry.js +2 -2
  146. package/dist/esm/kup-qlik.entry.js +2 -2
  147. package/dist/esm/kup-snackbar.entry.js +4 -4
  148. package/dist/esm/loader.js +3 -3
  149. package/dist/esm/polyfills/css-shim.js +1 -1
  150. package/dist/ketchup/ketchup.esm.js +1 -1
  151. package/dist/ketchup/{p-191096ff.entry.js → p-182b869e.entry.js} +1 -1
  152. package/dist/ketchup/p-1dfd2a51.js +30 -0
  153. package/dist/ketchup/{p-b502b91b.entry.js → p-1f5c7f21.entry.js} +1 -1
  154. package/dist/ketchup/p-22ec1ba0.entry.js +9 -0
  155. package/dist/ketchup/{p-5552f156.js → p-23cd5a68.js} +1 -1
  156. package/dist/ketchup/{p-26acb448.js → p-25bf0cb6.js} +1 -1
  157. package/dist/ketchup/{p-601a50db.entry.js → p-260ff835.entry.js} +1 -1
  158. package/dist/ketchup/{p-5a703573.entry.js → p-2e184b57.entry.js} +1 -1
  159. package/dist/ketchup/{p-45415b72.entry.js → p-30a63b85.entry.js} +1 -1
  160. package/dist/ketchup/{p-cc663bad.entry.js → p-313e376b.entry.js} +1 -1
  161. package/dist/ketchup/{p-e0ed3fd7.entry.js → p-41620707.entry.js} +1 -1
  162. package/dist/ketchup/{p-25875aa1.entry.js → p-4a0ccf18.entry.js} +1 -1
  163. package/dist/ketchup/{p-3decc8e4.js → p-4f0d3062.js} +1 -1
  164. package/dist/ketchup/p-4fdb684f.js +2 -0
  165. package/dist/ketchup/{p-52590a90.entry.js → p-53d3ae80.entry.js} +1 -1
  166. package/dist/ketchup/{p-92595296.js → p-5bea2971.js} +1 -1
  167. package/dist/ketchup/{p-a782ebd1.entry.js → p-60fa0ccf.entry.js} +1 -1
  168. package/dist/ketchup/p-6333388c.js +1 -0
  169. package/dist/ketchup/{p-2003a841.entry.js → p-6bd57787.entry.js} +1 -1
  170. package/dist/ketchup/p-758d03f4.entry.js +1 -0
  171. package/dist/ketchup/{p-2f009c42.entry.js → p-7e7b6127.entry.js} +1 -1
  172. package/dist/ketchup/p-8386e3db.entry.js +1 -0
  173. package/dist/ketchup/{p-23111c8d.entry.js → p-859163c2.entry.js} +1 -1
  174. package/dist/ketchup/{p-97f28bbd.entry.js → p-8e1fa7a8.entry.js} +6 -6
  175. package/dist/ketchup/{p-ca98059c.entry.js → p-90860d9e.entry.js} +1 -1
  176. package/dist/ketchup/{p-b131b257.entry.js → p-b7fdc7aa.entry.js} +1 -1
  177. package/dist/ketchup/{p-3138cabb.entry.js → p-bffaef6e.entry.js} +1 -1
  178. package/dist/ketchup/p-c35c5e05.js +1 -0
  179. package/dist/ketchup/{p-1468bf09.js → p-e1d0ea71.js} +1 -1
  180. package/dist/ketchup/p-f9d5e553.entry.js +1 -0
  181. package/dist/ketchup/{p-69dd11da.entry.js → p-fb4d772a.entry.js} +1 -1
  182. package/dist/loader/package.json +1 -0
  183. package/dist/types/components/kup-box/kup-box-declarations.d.ts +3 -0
  184. package/dist/types/components/kup-card/box/kup-card-box.d.ts +26 -0
  185. package/dist/types/components/kup-card/kup-card-declarations.d.ts +2 -0
  186. package/dist/types/components/kup-card/scalable/kup-card-scalable.d.ts +6 -0
  187. package/dist/types/components/kup-card/standard/kup-card-standard.d.ts +0 -6
  188. package/dist/types/components/kup-combobox/kup-combobox-declarations.d.ts +3 -1
  189. package/dist/types/components/kup-data-table/kup-data-table.d.ts +15 -1
  190. package/dist/types/components/kup-family-tree/kup-family-tree-declarations.d.ts +1 -0
  191. package/dist/types/components/kup-family-tree/kup-family-tree.d.ts +5 -0
  192. package/dist/types/components/kup-list/kup-list.d.ts +5 -0
  193. package/dist/types/components/kup-tab-bar/kup-tab-bar.d.ts +5 -0
  194. package/dist/types/components/kup-tree/kup-tree-declarations.d.ts +0 -4
  195. package/dist/types/components/kup-tree/kup-tree.d.ts +18 -12
  196. package/dist/types/components.d.ts +43 -16
  197. package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations.d.ts +1 -0
  198. package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover.d.ts +2 -1
  199. package/dist/types/stencil-public-runtime.d.ts +15 -4
  200. package/package.json +3 -2
  201. package/CHANGELOG.md +0 -5
  202. package/dist/ketchup/p-753c82d8.js +0 -1
  203. package/dist/ketchup/p-77600efd.entry.js +0 -9
  204. package/dist/ketchup/p-88722265.js +0 -1
  205. package/dist/ketchup/p-9027e5ac.js +0 -30
  206. package/dist/ketchup/p-aa564df8.entry.js +0 -1
  207. package/dist/ketchup/p-b0b3989b.js +0 -2
  208. package/dist/ketchup/p-b238f9ea.entry.js +0 -1
  209. package/dist/ketchup/p-b4f85d34.entry.js +0 -1
@@ -2,19 +2,19 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-31125378.js');
6
- const kupManager = require('./kup-manager-cfe2f36e.js');
7
- const fTextField = require('./f-text-field-153e827c.js');
5
+ const index = require('./index-ffdb46f6.js');
6
+ const kupManager = require('./kup-manager-0e38bf48.js');
7
+ const fTextField = require('./f-text-field-48b8bb16.js');
8
8
  const fTextFieldMdc = require('./f-text-field-mdc-85997738.js');
9
9
  const GenericVariables = require('./GenericVariables-a9ed17ee.js');
10
- const fImage = require('./f-image-6b7a6168.js');
11
- const fButton = require('./f-button-4e2a0bb6.js');
10
+ const fImage = require('./f-image-d80a2749.js');
11
+ const fButton = require('./f-button-bf76ab95.js');
12
12
  const fButtonDeclarations = require('./f-button-declarations-b611587f.js');
13
- const fChip = require('./f-chip-7867f17b.js');
14
- const fCell = require('./f-cell-1fc8a8b6.js');
13
+ const fCell = require('./f-cell-b7a1524a.js');
14
+ const fChip = require('./f-chip-a5e100b1.js');
15
15
  const component = require('./component-72a5b626.js');
16
- const fCheckbox = require('./f-checkbox-cd977193.js');
17
- const fPaginatorUtils = require('./f-paginator-utils-b7712403.js');
16
+ const fCheckbox = require('./f-checkbox-1097ca5d.js');
17
+ const fPaginatorUtils = require('./f-paginator-utils-c70812fe.js');
18
18
  require('./tslib.es6-0ee02c67.js');
19
19
 
20
20
  /**
@@ -515,9 +515,9 @@ const KupAutocomplete = class {
515
515
  render() {
516
516
  const fullHeight = this.rootElement.classList.contains('kup-full-height');
517
517
  const fullWidth = this.rootElement.classList.contains('kup-full-width');
518
- return (index.h(index.Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, index.h("style", null, __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, index.h(fTextField.FTextField, Object.assign({}, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, icon: this.showDropDownIcon
518
+ return (index.h(index.Host, { class: `${fullHeight ? 'kup-full-height' : ''} ${fullWidth ? 'kup-full-width' : ''}`, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, index.h("style", null, __classPrivateFieldGet$2(this, _KupAutocomplete_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, style: __classPrivateFieldGet$2(this, _KupAutocomplete_elStyle, "f") }, index.h(fTextField.FTextField, Object.assign({ icon: this.showDropDownIcon
519
519
  ? kupManager.KupThemeIconValues.DROPDOWN
520
- : null, trailingIcon: true, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
520
+ : null, trailingIcon: true }, this.data['kup-text-field'], { disabled: this.disabled, fullHeight: fullHeight, fullWidth: fullWidth, value: this.displayedValue, onBlur: () => this.onKupBlur(), onClick: () => this.onKupClick(), onChange: (e) => this.onKupChange(e.target.value), onFocus: () => this.onKupFocus(), onInput: () => {
521
521
  window.clearTimeout(__classPrivateFieldGet$2(this, _KupAutocomplete_inputTimeout, "f"));
522
522
  __classPrivateFieldSet$2(this, _KupAutocomplete_inputTimeout, window.setTimeout(() => this.onKupInput(), this.inputDelay), "f");
523
523
  }, onIconClick: () => this.onKupIconClick() }))), __classPrivateFieldGet$2(this, _KupAutocomplete_instances, "m", _KupAutocomplete_prepList).call(this)));
@@ -1265,6 +1265,144 @@ const KupButtonList = class {
1265
1265
  };
1266
1266
  KupButtonList.style = kupButtonListCss;
1267
1267
 
1268
+ const dom$7 = document.documentElement;
1269
+ /**
1270
+ * 1st box card layout, it can be used as a key-value grid list.
1271
+ * @param {KupCard} component - Card component.
1272
+ * @returns {VNode} 1st box layout virtual node.
1273
+ */
1274
+ function create1$6(component) {
1275
+ const rows = [];
1276
+ for (let index$1 = 0; index$1 < component.data.cell.length; index$1++) {
1277
+ const cell = component.data.cell[index$1];
1278
+ const column = component.data.columns[index$1];
1279
+ const props = {
1280
+ cell: cell,
1281
+ column: column,
1282
+ component: component,
1283
+ density: kupManager.FCellPadding.NONE,
1284
+ renderKup: true,
1285
+ row: { cells: { [column.name]: cell } },
1286
+ };
1287
+ rows.push(index.h("tr", null,
1288
+ index.h("td", { class: "label" }, column.title),
1289
+ index.h("td", { class: "value" },
1290
+ index.h(fCell.FCell, Object.assign({}, props)))));
1291
+ }
1292
+ return (index.h("div", { class: `box-layout-${component.layoutNumber}` },
1293
+ index.h("table", null, rows)));
1294
+ }
1295
+ /**
1296
+ * 2nd box card layout, it can be used as a key-value grid list with text occupying the left/right edges of the box.
1297
+ * @param {KupCard} component - Card component.
1298
+ * @returns {VNode} 2nd box layout virtual node.
1299
+ */
1300
+ function create2$6(component) {
1301
+ const rows = [];
1302
+ for (let index$1 = 0; index$1 < component.data.cell.length; index$1++) {
1303
+ const cell = component.data.cell[index$1];
1304
+ const column = component.data.columns[index$1];
1305
+ const props = {
1306
+ cell: cell,
1307
+ column: column,
1308
+ component: component,
1309
+ density: kupManager.FCellPadding.NONE,
1310
+ renderKup: true,
1311
+ row: { cells: { [column.name]: cell } },
1312
+ };
1313
+ rows.push(index.h("div", { class: "flex-container" },
1314
+ index.h("div", { class: "label" }, column.title),
1315
+ index.h("div", { class: "value" },
1316
+ index.h(fCell.FCell, Object.assign({}, props)))));
1317
+ }
1318
+ return (index.h("div", { class: `box-layout-${component.layoutNumber}` },
1319
+ index.h("div", { class: "container" }, rows)));
1320
+ }
1321
+ /**
1322
+ * 3rd box card layout, it can be used as a key-value row list.
1323
+ * @param {KupCard} component - Card component.
1324
+ * @returns {VNode} 3rd box layout virtual node.
1325
+ */
1326
+ function create3$4(component) {
1327
+ const rows = [];
1328
+ for (let index$1 = 0; index$1 < component.data.cell.length; index$1++) {
1329
+ const cell = component.data.cell[index$1];
1330
+ const column = component.data.columns[index$1];
1331
+ const props = {
1332
+ cell: cell,
1333
+ column: column,
1334
+ component: component,
1335
+ density: kupManager.FCellPadding.NONE,
1336
+ renderKup: true,
1337
+ row: { cells: { [column.name]: cell } },
1338
+ };
1339
+ rows.push(index.h("div", { class: "flex-container" },
1340
+ index.h("div", { class: "label" }, column.title),
1341
+ index.h("div", { class: "value" },
1342
+ index.h(fCell.FCell, Object.assign({}, props)))));
1343
+ }
1344
+ return (index.h("div", { class: `box-layout-${component.layoutNumber}` },
1345
+ index.h("div", { class: "container" }, rows)));
1346
+ }
1347
+ /**
1348
+ * 4th box card layout, image and value.
1349
+ * @param {KupCard} component - Card component.
1350
+ * @returns {VNode} 4th box layout virtual node.
1351
+ */
1352
+ function create4$4(component) {
1353
+ const cells = component.data.cell;
1354
+ const columns = component.data.columns;
1355
+ let image = null;
1356
+ let value = null;
1357
+ for (let index = 0; index < cells.length; index++) {
1358
+ const cell = cells[index];
1359
+ if ((!image &&
1360
+ (dom$7.ketchup.objects.isImage(cell.obj) ||
1361
+ dom$7.ketchup.objects.isIcon(cell.obj))) ||
1362
+ cell.shape === kupManager.FCellShapes.IMAGE) {
1363
+ image = index;
1364
+ if (!cell.data) {
1365
+ cell.data = { resource: cell.value };
1366
+ }
1367
+ }
1368
+ if (!value && !dom$7.ketchup.objects.isImage(cell.obj)) {
1369
+ value = index;
1370
+ }
1371
+ }
1372
+ const imageProps = {
1373
+ cell: cells[image],
1374
+ column: columns[image],
1375
+ component: component,
1376
+ density: kupManager.FCellPadding.NONE,
1377
+ renderKup: true,
1378
+ row: { cells: { [columns[image].name]: cells[image] } },
1379
+ wrapperClass: 'c-centered',
1380
+ };
1381
+ const valueProps = {
1382
+ cell: cells[value],
1383
+ column: columns[value],
1384
+ component: component,
1385
+ density: kupManager.FCellPadding.NONE,
1386
+ renderKup: true,
1387
+ row: { cells: { [columns[value].name]: cells[value] } },
1388
+ wrapperClass: 'c-centered',
1389
+ };
1390
+ return (index.h("div", { class: `box-layout-${component.layoutNumber}` },
1391
+ index.h("div", { class: "container" },
1392
+ index.h("div", { class: "image" },
1393
+ index.h(fCell.FCell, Object.assign({}, imageProps))),
1394
+ index.h("div", { class: "value" },
1395
+ index.h(fCell.FCell, Object.assign({}, valueProps))))));
1396
+ }
1397
+
1398
+ const boxLayouts = /*#__PURE__*/Object.freeze({
1399
+ __proto__: null,
1400
+ create1: create1$6,
1401
+ create2: create2$6,
1402
+ create3: create3$4,
1403
+ create4: create4$4
1404
+ });
1405
+
1268
1406
  /**
1269
1407
  * Props of the kup-date-picker component.
1270
1408
  * Used to export every prop in an object.
@@ -3246,6 +3384,60 @@ function create8$1(component) {
3246
3384
  index.h("div", null, textArray[textIndex] ? textArray[textIndex] : '')),
3247
3385
  index.h("div", { class: "descr" },
3248
3386
  index.h("div", null, textArray[++textIndex] ? textArray[textIndex] : '')))));
3387
+ }
3388
+ /**
3389
+ * 9th scalable card layout, tile view.
3390
+ * @param {KupCard} component - Card component.
3391
+ * @returns {VNode} 8th scalable layout virtual node.
3392
+ */
3393
+ function create9$1(component) {
3394
+ // color line
3395
+ const lineBg = component.data.color && component.data.color.length > 0
3396
+ ? component.data.color[0]
3397
+ : `var(${kupManager.KupThemeColorValues.PRIMARY})`;
3398
+ // color component
3399
+ const componentBg = component.data.color && component.data.color.length > 1
3400
+ ? component.data.color[1]
3401
+ : `var(${kupManager.KupThemeColorValues.BACKGROUND})`;
3402
+ // color text
3403
+ const textFg = component.data.color && component.data.color.length > 2
3404
+ ? component.data.color[2]
3405
+ : `var(${kupManager.KupThemeColorValues.TEXT})`;
3406
+ // Main text
3407
+ const mainText = component.data.text && component.data.text.length > 0
3408
+ ? component.data.text[0]
3409
+ : null;
3410
+ // Sub text
3411
+ const subText = component.data.text && component.data.text.length > 1
3412
+ ? component.data.text[1]
3413
+ : null;
3414
+ // Buttons area
3415
+ const buttons = component.data.button && component.data.button.length > 0
3416
+ ? JSON.parse(JSON.stringify(component.data.button))
3417
+ : [];
3418
+ // Only 4 buttons supported
3419
+ if (buttons.length > 4) {
3420
+ buttons.splice(4, buttons.length - 4);
3421
+ }
3422
+ buttons.reverse();
3423
+ //Dynamic CSS variables
3424
+ const CSSVariables = {
3425
+ ['--color-0']: lineBg,
3426
+ ['--color-1']: componentBg,
3427
+ ['--color-2']: textFg,
3428
+ };
3429
+ const CSSVariablesChild = {
3430
+ ['--kup_card_multiplier']: '1',
3431
+ ['box-shadow']: 'none',
3432
+ };
3433
+ return (index.h("div", { class: `scalable-layout-${component.layoutNumber}`, style: CSSVariables },
3434
+ index.h("div", { class: "section-1" }),
3435
+ index.h("div", { class: "section-2" },
3436
+ index.h("div", { class: "scalable-card", style: CSSVariablesChild },
3437
+ index.h("div", { class: "text scalable-element" },
3438
+ index.h("div", { class: "value" }, mainText),
3439
+ index.h("div", { class: "descr" }, subText))),
3440
+ buttons.length > 0 ? (index.h("div", { class: "buttons" }, buttons.map((b) => (index.h(fButton.FButton, { icon: b.icon, title: b.title, styling: b.styling, wrapperClass: b.class, onClick: () => component.onKupClick(component.rootElement.id, b.id) }))))) : undefined)));
3249
3441
  }
3250
3442
 
3251
3443
  const scalableLayouts = /*#__PURE__*/Object.freeze({
@@ -3257,7 +3449,8 @@ const scalableLayouts = /*#__PURE__*/Object.freeze({
3257
3449
  create5: create5$1,
3258
3450
  create6: create6$1,
3259
3451
  create7: create7$1,
3260
- create8: create8$1
3452
+ create8: create8$1,
3453
+ create9: create9$1
3261
3454
  });
3262
3455
 
3263
3456
  const dom$1 = document.documentElement;
@@ -3998,6 +4191,20 @@ function create15(component) {
3998
4191
  genericButtons.push(button);
3999
4192
  }
4000
4193
  }
4194
+ const createDropdown = () => {
4195
+ const props = {
4196
+ data: { 'kup-list': { data: [], showIcons: true } },
4197
+ dropdownOnly: true,
4198
+ icon: 'more_vert',
4199
+ id: 'options',
4200
+ styling: fButtonDeclarations.FButtonStyling.ICON,
4201
+ };
4202
+ for (let index = 5; index < genericButtons.length; index++) {
4203
+ const button = genericButtons[index];
4204
+ props.data['kup-list'].data.push(Object.assign(Object.assign({}, button), { value: button.title }));
4205
+ }
4206
+ return (index.h("kup-dropdown-button", Object.assign({}, props, { title: dom$1.ketchup.language.translate(kupManager.KupLanguageGeneric.OPTIONS) })));
4207
+ };
4001
4208
  return (index.h("div", { class: `standard-layout-${component.layoutNumber}` },
4002
4209
  index.h("div", { class: "section-1" },
4003
4210
  imageArray[0] ? (index.h(fImage.FImage, Object.assign({ id: "image1" }, imageArray[0], { sizeX: "84px", sizeY: "84px" }))) : (index.h("div", { class: "sub-spinner" },
@@ -4023,33 +4230,8 @@ function create15(component) {
4023
4230
  index.h("div", { class: `${kupManager.KupCardCSSClasses.CARD_VIEW} ${kupManager.KupCardCSSClasses.VIEW_PREFIX}${viewIndex + 1}` }, treeArray[0] ? (index.h("kup-tree", Object.assign({ class: "kup-full-width" }, treeArray[0]))) : null)),
4024
4231
  genericButtons.length > 0 ? (index.h("div", { class: "section-3" },
4025
4232
  compList(genericButtons.slice(0, 5), 'button'),
4026
- index.h("kup-button", { title: dom$1.ketchup.language.translate(kupManager.KupLanguageGeneric.SHOW_ROW_OPTIONS), id: "view-selector", icon: "menu" }))) : null));
4027
- }
4028
- /**
4029
- * 16th standard card layout, it can be used as a key-value grid list.
4030
- * @param {KupCard} component - Card component.
4031
- * @returns {VNode} 16th standard layout virtual node.
4032
- */
4033
- function create16(component) {
4034
- const rows = [];
4035
- for (let index$1 = 0; index$1 < component.data.cell.length; index$1++) {
4036
- const cell = component.data.cell[index$1];
4037
- const column = component.data.columns[index$1];
4038
- const props = {
4039
- cell: cell,
4040
- column: column,
4041
- component: component,
4042
- density: kupManager.FCellPadding.NONE,
4043
- renderKup: true,
4044
- row: { cells: { [column.name]: cell } },
4045
- };
4046
- rows.push(index.h("tr", null,
4047
- index.h("td", { class: "label" }, column.title),
4048
- index.h("td", { class: "value" },
4049
- index.h(fCell.FCell, Object.assign({}, props)))));
4050
- }
4051
- return (index.h("div", { class: `standard-layout-${component.layoutNumber}` },
4052
- index.h("table", null, rows)));
4233
+ genericButtons.length > 5 ? createDropdown() : null,
4234
+ treeArray[0] ? (index.h("kup-button", { title: dom$1.ketchup.language.translate(kupManager.KupLanguageGeneric.SHOW_ROW_OPTIONS), id: "view-selector", icon: "menu" })) : null)) : null));
4053
4235
  }
4054
4236
 
4055
4237
  const standardLayouts = /*#__PURE__*/Object.freeze({
@@ -4068,8 +4250,7 @@ const standardLayouts = /*#__PURE__*/Object.freeze({
4068
4250
  create12: create12,
4069
4251
  create13: create13,
4070
4252
  create14: create14,
4071
- create15: create15,
4072
- create16: create16
4253
+ create15: create15
4073
4254
  });
4074
4255
 
4075
4256
  /*!
@@ -5072,7 +5253,7 @@ var Picker = function () {
5072
5253
  Picker.StyleElement = style;
5073
5254
  }
5074
5255
 
5075
- const kupCardCss = ".built-in-layout-1{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto;padding:0.5em}.built-in-layout-1 .section-1{box-sizing:border-box;height:5em;overflow:auto;padding-bottom:1em;width:100%}.built-in-layout-1 .section-1 .sub-1{display:flex;flex-direction:row;justify-content:center}.built-in-layout-1 .section-2{height:calc(100% - 60px);overflow:auto;width:100%}.built-in-layout-1 .prev-page{margin-left:auto}.built-in-layout-1 .change-view-button{margin:auto;width:12em;text-align:center}.built-in-layout-1 #change-view-button button{text-transform:capitalize}.built-in-layout-1 .next-page{margin-right:auto}.built-in-layout-1 .calendar{border-collapse:collapse;width:100%}.built-in-layout-1 thead{border-bottom:1px solid var(--kup-border-color)}.built-in-layout-1 .item-text{color:rgba(var(--kup-text-color-rgb), 0.5)}.built-in-layout-1 .item{text-align:center}.built-in-layout-1 .item:not(.selected) .item-number:hover{background-color:var(--kup-hover-background-color)}.built-in-layout-1 .item.selected .item-number,.built-in-layout-1 .item.selected .item-number:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.175)}.built-in-layout-1 .item-number{border-radius:50%;cursor:pointer;display:flex;justify-content:center;line-height:2.5em;margin:auto;width:2.5em;transition:background-color 0.25s;text-transform:capitalize}.built-in-layout-2{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.built-in-layout-2 .clock{box-shadow:var(--kup-box-shadow);width:300px;height:450px;background-color:var(--kup-background-color);position:relative;font-family:var(--kup-font-family)}.built-in-layout-2 .top{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color);height:100px;line-height:100px;font-size:50px;text-align:center}.built-in-layout-2 .top span{cursor:pointer;opacity:0.75;transition:0.25s ease-in-out}.built-in-layout-2 .top .visible{opacity:1}.built-in-layout-2 .circle{user-select:none;background-color:rgba(var(--kup-text-color-rgb), 0.1);width:250px;height:250px;border-radius:1000px;position:relative;top:25px;left:25px;box-sizing:border-box;display:none}.built-in-layout-2 .circle.visible{display:block}.built-in-layout-2 .mid{position:absolute;left:calc(50% - 0px);top:calc(50% - 0px);width:2px;height:2px;border-radius:10px;background-color:var(--kup-text-color)}.built-in-layout-2 .hour{position:absolute;height:40px;line-height:40px;width:40px;border-radius:40px;text-align:center}.built-in-layout-2 .hour.selected{z-index:2}.built-in-layout-2 .hour.selected::after{content:\"\";z-index:-1;background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.built-in-layout-2 .hour2{z-index:2;position:absolute;height:30px;line-height:30px;width:30px;border-radius:40px;text-align:center;font-size:14px}.built-in-layout-2 .hour2.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:64px;right:50%;z-index:-1}.built-in-layout-2 .unit{position:absolute;height:20px;line-height:20px;width:20px;border-radius:40px;text-align:center;font-size:12px}.built-in-layout-2 .unit.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.built-in-layout-2 .hour,.built-in-layout-2 .hour2,.built-in-layout-2 .unit{cursor:pointer;transition:background-color 0.25s}.built-in-layout-2 .hour:hover,.built-in-layout-2 .hour2:hover,.built-in-layout-2 .unit:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.275)}.built-in-layout-2 .hour.selected,.built-in-layout-2 .hour2.selected,.built-in-layout-2 .unit.selected{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color)}.built-in-layout-2 .actions{color:var(--kup-primary-color);font-weight:bold;font-size:20px;display:flex;justify-content:flex-end;position:absolute;width:100%;box-sizing:border-box;bottom:10px}.built-in-layout-2 .action{display:inline-block;width:100px;text-align:center;height:37.5px;line-height:37.5px;margin-right:10px;cursor:pointer;border-radius:2px}.built-in-layout-2 .clock .actions .action:hover{background-color:rgba(0, 0, 0, 0.1)}.built-in-layout-2 .clock .actions .action:visible{background-color:rgba(0, 0, 0, 0.3)}.built-in-layout-2 .hour:nth-child(12):after{transform:rotate(330deg)}.built-in-layout-2 .hour:nth-child(11):after{transform:rotate(300deg)}.built-in-layout-2 .hour:nth-child(10):after{transform:rotate(270deg)}.built-in-layout-2 .hour:nth-child(9):after{transform:rotate(240deg)}.built-in-layout-2 .hour:nth-child(8):after{transform:rotate(210deg)}.built-in-layout-2 .hour:nth-child(7):after{transform:rotate(180deg)}.built-in-layout-2 .hour:nth-child(6):after{transform:rotate(150deg)}.built-in-layout-2 .hour:nth-child(5):after{transform:rotate(120deg)}.built-in-layout-2 .hour:nth-child(4):after{transform:rotate(90deg)}.built-in-layout-2 .hour:nth-child(3):after{transform:rotate(60deg)}.built-in-layout-2 .hour:nth-child(2):after{transform:rotate(30deg)}.built-in-layout-2 .hour:nth-child(1):after{transform:rotate(0deg)}.built-in-layout-2 .hour2:nth-child(24):after{transform:rotate(690deg)}.built-in-layout-2 .hour2:nth-child(23):after{transform:rotate(660deg)}.built-in-layout-2 .hour2:nth-child(22):after{transform:rotate(630deg)}.built-in-layout-2 .hour2:nth-child(21):after{transform:rotate(600deg)}.built-in-layout-2 .hour2:nth-child(20):after{transform:rotate(570deg)}.built-in-layout-2 .hour2:nth-child(19):after{transform:rotate(540deg)}.built-in-layout-2 .hour2:nth-child(18):after{transform:rotate(510deg)}.built-in-layout-2 .hour2:nth-child(17):after{transform:rotate(480deg)}.built-in-layout-2 .hour2:nth-child(16):after{transform:rotate(450deg)}.built-in-layout-2 .hour2:nth-child(15):after{transform:rotate(420deg)}.built-in-layout-2 .hour2:nth-child(14):after{transform:rotate(390deg)}.built-in-layout-2 .hour2:nth-child(13):after{transform:rotate(360deg)}.built-in-layout-2 .unit:nth-child(60):after{transform:rotate(354deg)}.built-in-layout-2 .unit:nth-child(59):after{transform:rotate(348deg)}.built-in-layout-2 .unit:nth-child(58):after{transform:rotate(342deg)}.built-in-layout-2 .unit:nth-child(57):after{transform:rotate(336deg)}.built-in-layout-2 .unit:nth-child(56):after{transform:rotate(330deg)}.built-in-layout-2 .unit:nth-child(55):after{transform:rotate(324deg)}.built-in-layout-2 .unit:nth-child(54):after{transform:rotate(318deg)}.built-in-layout-2 .unit:nth-child(53):after{transform:rotate(312deg)}.built-in-layout-2 .unit:nth-child(52):after{transform:rotate(306deg)}.built-in-layout-2 .unit:nth-child(51):after{transform:rotate(300deg)}.built-in-layout-2 .unit:nth-child(50):after{transform:rotate(294deg)}.built-in-layout-2 .unit:nth-child(49):after{transform:rotate(288deg)}.built-in-layout-2 .unit:nth-child(48):after{transform:rotate(282deg)}.built-in-layout-2 .unit:nth-child(47):after{transform:rotate(276deg)}.built-in-layout-2 .unit:nth-child(46):after{transform:rotate(270deg)}.built-in-layout-2 .unit:nth-child(45):after{transform:rotate(264deg)}.built-in-layout-2 .unit:nth-child(44):after{transform:rotate(258deg)}.built-in-layout-2 .unit:nth-child(43):after{transform:rotate(252deg)}.built-in-layout-2 .unit:nth-child(42):after{transform:rotate(246deg)}.built-in-layout-2 .unit:nth-child(41):after{transform:rotate(240deg)}.built-in-layout-2 .unit:nth-child(40):after{transform:rotate(234deg)}.built-in-layout-2 .unit:nth-child(39):after{transform:rotate(228deg)}.built-in-layout-2 .unit:nth-child(38):after{transform:rotate(222deg)}.built-in-layout-2 .unit:nth-child(37):after{transform:rotate(216deg)}.built-in-layout-2 .unit:nth-child(36):after{transform:rotate(210deg)}.built-in-layout-2 .unit:nth-child(35):after{transform:rotate(204deg)}.built-in-layout-2 .unit:nth-child(34):after{transform:rotate(198deg)}.built-in-layout-2 .unit:nth-child(33):after{transform:rotate(192deg)}.built-in-layout-2 .unit:nth-child(32):after{transform:rotate(186deg)}.built-in-layout-2 .unit:nth-child(31):after{transform:rotate(180deg)}.built-in-layout-2 .unit:nth-child(30):after{transform:rotate(174deg)}.built-in-layout-2 .unit:nth-child(29):after{transform:rotate(168deg)}.built-in-layout-2 .unit:nth-child(28):after{transform:rotate(162deg)}.built-in-layout-2 .unit:nth-child(27):after{transform:rotate(156deg)}.built-in-layout-2 .unit:nth-child(26):after{transform:rotate(150deg)}.built-in-layout-2 .unit:nth-child(25):after{transform:rotate(144deg)}.built-in-layout-2 .unit:nth-child(24):after{transform:rotate(138deg)}.built-in-layout-2 .unit:nth-child(23):after{transform:rotate(132deg)}.built-in-layout-2 .unit:nth-child(22):after{transform:rotate(126deg)}.built-in-layout-2 .unit:nth-child(21):after{transform:rotate(120deg)}.built-in-layout-2 .unit:nth-child(20):after{transform:rotate(114deg)}.built-in-layout-2 .unit:nth-child(19):after{transform:rotate(108deg)}.built-in-layout-2 .unit:nth-child(18):after{transform:rotate(102deg)}.built-in-layout-2 .unit:nth-child(17):after{transform:rotate(96deg)}.built-in-layout-2 .unit:nth-child(16):after{transform:rotate(90deg)}.built-in-layout-2 .unit:nth-child(15):after{transform:rotate(84deg)}.built-in-layout-2 .unit:nth-child(14):after{transform:rotate(78deg)}.built-in-layout-2 .unit:nth-child(13):after{transform:rotate(72deg)}.built-in-layout-2 .unit:nth-child(12):after{transform:rotate(66deg)}.built-in-layout-2 .unit:nth-child(11):after{transform:rotate(60deg)}.built-in-layout-2 .unit:nth-child(10):after{transform:rotate(54deg)}.built-in-layout-2 .unit:nth-child(9):after{transform:rotate(48deg)}.built-in-layout-2 .unit:nth-child(8):after{transform:rotate(42deg)}.built-in-layout-2 .unit:nth-child(7):after{transform:rotate(36deg)}.built-in-layout-2 .unit:nth-child(6):after{transform:rotate(30deg)}.built-in-layout-2 .unit:nth-child(5):after{transform:rotate(24deg)}.built-in-layout-2 .unit:nth-child(4):after{transform:rotate(18deg)}.built-in-layout-2 .unit:nth-child(3):after{transform:rotate(12deg)}.built-in-layout-2 .unit:nth-child(2):after{transform:rotate(6deg)}.built-in-layout-2 .unit:nth-child(1):after{transform:rotate(0deg)}.built-in-layout-3{background:var(--kup-background-color);box-shadow:rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;box-sizing:border-box;overflow:auto}.built-in-layout-3 kup-button,.built-in-layout-3 kup-combobox{margin:0 auto 0.75em auto}.built-in-layout-3 kup-combobox{width:95%}.built-in-layout-3 .sub-chip{border-top:1px solid var(--kup-border-color);max-height:33vh;overflow:auto;width:100%}.built-in-layout-4{background:var(--kup-background-color);box-shadow:rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;box-sizing:border-box}.built-in-layout-4 .picker_arrow{position:absolute;z-index:-1}.built-in-layout-4 .picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.built-in-layout-4 .picker_wrapper.popup,.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before,.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after{background:var(--kup-background-color);box-shadow:0 0 10px 1px rgba(0, 0, 0, 0.4)}.built-in-layout-4 .picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before,.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after{content:\"\";display:block;position:absolute;top:0;left:0;z-index:-99}.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;transform:skew(45deg);transform-origin:0 100%}.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.built-in-layout-4 .popup.popup_top{bottom:100%;left:0}.built-in-layout-4 .popup.popup_top .picker_arrow{bottom:0;left:0;transform:rotate(-90deg)}.built-in-layout-4 .popup.popup_bottom{top:100%;left:0}.built-in-layout-4 .popup.popup_bottom .picker_arrow{top:0;left:0;transform:rotate(90deg) scale(1, -1)}.built-in-layout-4 .popup.popup_left{top:0;right:100%}.built-in-layout-4 .popup.popup_left .picker_arrow{top:0;right:0;transform:scale(-1, 1)}.built-in-layout-4 .popup.popup_right{top:0;left:100%}.built-in-layout-4 .popup.popup_right .picker_arrow{top:0;left:0}.built-in-layout-4 .picker_wrapper.no_alpha .picker_alpha{display:none}.built-in-layout-4 .picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.built-in-layout-4 .picker_wrapper.no_cancel .picker_cancel{display:none}.built-in-layout-4 .layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:0.5em}.built-in-layout-4 .layout_default.picker_wrapper input,.built-in-layout-4 .layout_default.picker_wrapper button{font-size:1em}.built-in-layout-4 .layout_default.picker_wrapper>*{margin:0.5em}.built-in-layout-4 .layout_default.picker_wrapper::before{content:\"\";display:block;width:100%;height:0;order:1}.built-in-layout-4 .layout_default .picker_slider,.built-in-layout-4 .layout_default .picker_selector{padding:1em}.built-in-layout-4 .layout_default .picker_hue{width:100%}.built-in-layout-4 .layout_default .picker_sl{flex:1 1 auto}.built-in-layout-4 .layout_default .picker_sl::before{content:\"\";display:block;padding-bottom:100%}.built-in-layout-4 .layout_default .picker_editor{order:1;width:6.5em}.built-in-layout-4 .layout_default .picker_editor input{width:100%;height:100%}.built-in-layout-4 .layout_default .picker_sample{order:1;flex:1 1 auto}.built-in-layout-4 .layout_default .picker_done,.built-in-layout-4 .layout_default .picker_cancel{order:1}.built-in-layout-4 .picker_wrapper{box-sizing:border-box;background:var(--kup-background-color);box-shadow:0 0 0 1px var(--kup-border-color);cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.built-in-layout-4 .picker_wrapper:focus{outline:none}.built-in-layout-4 .picker_wrapper button,.built-in-layout-4 .picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px var(--kup-border-color);outline:none}.built-in-layout-4 .picker_wrapper button:focus,.built-in-layout-4 .picker_wrapper button:active,.built-in-layout-4 .picker_wrapper input:focus,.built-in-layout-4 .picker_wrapper input:active{box-shadow:0 0 2px 1px var(--kup-border-color)}.built-in-layout-4 .picker_wrapper button{padding:0.4em 0.6em;cursor:pointer;background-color:whitesmoke;background-image:linear-gradient(0deg, gainsboro, transparent)}.built-in-layout-4 .picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.built-in-layout-4 .picker_selector{position:absolute;z-index:1;display:block;transform:translate(-50%, -50%);border:2px solid white;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.built-in-layout-4 .picker_slider .picker_selector{border-radius:2px}.built-in-layout-4 .picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px var(--kup-border-color)}.built-in-layout-4 .picker_sl{position:relative;box-shadow:0 0 0 1px var(--kup-border-color);background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.built-in-layout-4 .picker_alpha,.built-in-layout-4 .picker_sample{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E\") left top/contain white;box-shadow:0 0 0 1px var(--kup-border-color)}.built-in-layout-4 .picker_alpha .picker_selector,.built-in-layout-4 .picker_sample .picker_selector{background:none}.built-in-layout-4 .picker_editor input{font-family:monospace;padding:0.2em 0.4em}.built-in-layout-4 .picker_sample::before{content:\"\";position:absolute;display:block;width:100%;height:100%;background:currentColor}.built-in-layout-4 .picker_done,.built-in-layout-4 .picker_arrow{display:none}.built-in-layout-4 .layout_default.picker_wrapper{bottom:unset;font-size:var(--kup-font-size);left:unset;padding:0.25em;right:unset;top:unset;width:100%}.built-in-layout-4 .layout_default .picker_editor input{background:none;color:var(--kup-text-color);font-family:var(--kup-font-family);font-size:var(--kup-font-size)}.built-in-layout-4 .picker_wrapper.popup{box-shadow:var(--kup-box-shadow);margin:0;outline:none}.built-in-layout-5{background:var(--kup-background-color);box-shadow:var(--kup-box-shadow);box-sizing:border-box;overflow:auto;padding:0.5em}.built-in-layout-5>table{width:100%}.built-in-layout-5>table>tr>td>div.value{text-align:right;color:var(--kup-primary-color);border-bottom:1px solid var(--kup-border-color);min-height:1.5em}.built-in-layout-5>table>tr>td>.f-button{display:flex;justify-content:center}.built-in-layout-5>table>tr>td>div.number{border-radius:50%;cursor:pointer;display:flex;justify-content:center;line-height:2.5em;margin:auto;width:2.5em;transition:background-color 0.25s;text-transform:capitalize}.built-in-layout-5>table>tr>td>div.number:hover{background-color:var(--kup-hover-background-color)}.collapsible-layout-1{color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-1 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.collapsible-layout-1 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.collapsible-layout-1 .section-2 .sub-1{min-height:1.5em;display:flex;padding:0.6rem 0.8em 0;font-weight:bold;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.collapsible-layout-1 .section-2 .sub-1 div{font-size:1em}.collapsible-layout-1 .section-2 .sub-1 .left{text-align:left;width:80%}.collapsible-layout-1 .section-2 .sub-1 .right{text-align:right;width:20%}.collapsible-layout-1 .section-2 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em}.collapsible-layout-2{color:var(--kup-text-color);box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;border-radius:4px;display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-2 .section-1{box-sizing:border-box;height:100%;display:flex;flex-direction:column;max-width:100%;width:100%}.collapsible-layout-2 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.collapsible-layout-2 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;max-width:75%}.collapsible-layout-2 .section-1 .sub-2 div{font-size:0.875em}.collapsible-layout-2 .section-1 .sub-3{color:var(--color-0);text-align:center;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;overflow:hidden;max-height:calc(24px + 2.25em);padding:0 1em}.collapsible-layout-2 .section-1 .sub-3 kup-image{margin:auto}.collapsible-layout-2 .section-1 .sub-3 div{font-size:1.25em}.collapsible-card .collapsible-trigger{display:none;position:absolute;bottom:0;left:0;height:50px;width:100%}.collapsible-card .collapsible-trigger kup-button{margin:auto;width:48px}.collapsible-card .collapsible-wrapper{overflow:auto}.collapsible-card.collapsible-active{padding-bottom:50px}.collapsible-card.collapsible-active .collapsible-trigger{display:block}.dialog-layout-1{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);color:var(--kup-text-color);display:flex;flex-direction:column;height:100%;width:100%;overflow:auto}.dialog-layout-1 .section-1{display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-1 .section-1 .text{min-width:max-content}.dialog-layout-1 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-2 .section-1{text-align:center;touch-action:none;padding-bottom:1em}.dialog-layout-2 .section-1 .text{padding-top:0.75em}.dialog-layout-2 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2 .section-2{border-top:1px solid var(--kup-border-color);display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-2 .section-2 .text{min-width:max-content}.dialog-layout-2 .section-2 .text:not(.label){font-weight:bold}.dialog-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;overflow:visible;flex-direction:column;height:100%;position:relative;width:100%}.dialog-layout-3 kup-button{margin-left:0}.dialog-layout-3 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right;touch-action:none}.dialog-layout-3 .section-1 kup-button{margin-right:0.25em}.dialog-layout-3 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.dialog-layout-3 ::slotted(.text){color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.dialog-layout-4{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-4 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-4 .section-2{height:100%;overflow:auto;padding:0.25em;touch-action:none}.dialog-layout-5{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-5 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-5 .section-2{height:100%;overflow:auto}.dialog-layout-6{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;max-height:95vh;max-width:95vw;width:100%}.dialog-layout-6 .section-1{display:flex;height:100%;justify-content:space-evenly;overflow:auto}.dialog-layout-6 kup-data-table{width:100%}#drag-handle{-ms-touch-action:none;touch-action:none}#drag-handle:not(.header-bar){display:flex;height:100%}#drag-handle:not(.header-bar) .f-image{margin:auto}#drag-handle.header-bar{background-color:var(--kup-title-background-color);color:var(--kup-title-color);display:flex;flex-direction:row;height:2em;position:relative;width:100%}#drag-handle.header-bar .dialog-title{font-weight:bold;line-height:2em;padding-left:0.5em;padding-right:2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#drag-handle.header-bar #dialog-close{cursor:pointer;margin-right:0;transition:opacity 0.25s;position:absolute;right:0;background:var(--kup-title-background-color)}#drag-handle.header-bar #dialog-close:hover{opacity:0.5}.free-layout-1{background:var(--kup-background-color);box-shadow:var(--kup-box-shadow);box-sizing:border-box;overflow:auto;padding:1em}.free-layout-2{background:var(--kup-background-color);box-shadow:var(--kup-box-shadow);box-sizing:border-box;overflow:auto}.scalable-layout-1 .descr{font-size:70%;width:100%}.scalable-layout-1 .value{font-size:220%}.scalable-layout-2 #image1 img{object-fit:contain}.scalable-layout-2 .scalable-element{display:grid;grid-template-columns:1fr 1fr 0.5fr 0.5fr}.scalable-layout-2 .icon{margin:auto;font-size:150%;margin-right:5%}.scalable-layout-2 .value-int{font-size:250%}.scalable-layout-2 .value-dec,.scalable-layout-2 .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-2 .value-dec{margin-left:2%}.scalable-layout-2 .unit{margin-left:4%}.scalable-layout-3 .descr{font-size:70%;width:100%}.scalable-layout-3 .value{font-size:220%}.scalable-layout-4 #image1 img{object-fit:contain}.scalable-layout-4 .scalable-element{display:grid;grid-template-columns:1fr 5fr}.scalable-layout-4 .icon{font-size:150%;margin:auto 5% auto auto}.scalable-layout-4 .value-and-unit{display:flex;color:var(--color-0)}.scalable-layout-4 .value-and-unit .value-int{font-size:250%}.scalable-layout-4 .value-and-unit .value-dec,.scalable-layout-4 .value-and-unit .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-4 .value-and-unit .value-dec{margin-left:2%}.scalable-layout-4 .value-and-unit .unit{margin-left:4%}.scalable-layout-4 .descr{margin-left:4%;text-align:left;font-size:80%;width:100%;min-width:max-content}.scalable-layout-5 #image1 img{object-fit:contain}.scalable-layout-5 .scalable-element{display:flex}.scalable-layout-5 .text-wrapper{margin-right:10px}.scalable-layout-5 .icon{font-size:150%;margin:auto;margin-bottom:0.35em}.scalable-layout-5 .value{font-size:200%}.scalable-layout-5 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:-10%}.scalable-layout-6 #image1 img{object-fit:contain}.scalable-layout-6 .scalable-element{display:flex;justify-content:space-between}.scalable-layout-6 .text-wrapper{margin-left:1em}.scalable-layout-6 .icon{font-size:150%;margin:auto}.scalable-layout-6 .value{font-size:220%;text-align:right}.scalable-layout-6 .descr{font-size:80%;text-align:right;width:100%;min-width:max-content}.scalable-layout-7 #image1 img{object-fit:contain}.scalable-layout-7 .scalable-element{display:flex}.scalable-layout-7 .text-wrapper{margin-right:0.5em}.scalable-layout-7 .icon{font-size:150%;margin:auto;margin-top:0.35em}.scalable-layout-7 .value{font-size:200%}.scalable-layout-7 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:10%}.scalable-layout-8 #image1 img{object-fit:contain}.scalable-layout-8 .scalable-element{align-items:center;display:grid;grid-template-columns:0.25fr 1.25fr 0.25fr}.scalable-layout-8 .icon{margin-right:4%;font-size:75%}.scalable-layout-8 .value{margin:0 10%;font-size:250%}.scalable-layout-8 .descr{font-size:60%;text-align:left}.scalable-card{align-items:center;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);border-radius:4px;display:flex;font-size:calc(var(--kup-font-size) * var(--kup_card_multiplier));height:100%;justify-content:center;position:relative;text-align:center;word-break:normal;width:100%}.standard-layout-1{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-1 kup-button{margin-right:0}.standard-layout-1 #image1 img{object-fit:cover}.standard-layout-1.has-actions{padding-bottom:52px}.standard-layout-1.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-1 .section-1{height:60%;width:100%}.standard-layout-1 .section-2{height:40%;width:100%;overflow:auto}.standard-layout-1 .section-2 .sub-2.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-1 .section-2 .sub-2.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-1 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-1 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-1 .section-3 kup-button{margin-left:0.25em}.standard-layout-2{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-2 kup-button{margin-right:0}.standard-layout-2 #image1 img{object-fit:cover}.standard-layout-2.has-actions{padding-bottom:52px}.standard-layout-2.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-2 .section-1{width:100%}.standard-layout-2 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-2 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-2 .section-2{height:75%;width:100%}.standard-layout-2 .section-3{width:100%;overflow:auto}.standard-layout-2 .section-3 .sub-3.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-2 .section-3 .sub-3.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-2 .section-4{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-2 .section-4 kup-button{margin-left:0.25em}.standard-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-3 kup-button{margin-right:0}.standard-layout-3 #image1 img{object-fit:cover}.standard-layout-3.has-actions{padding-bottom:52px}.standard-layout-3.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-3 .section-1{height:75%;width:100%}.standard-layout-3 .section-1 .media{position:relative;height:100%;width:100%}.standard-layout-3 .section-1 .text-on-media{position:absolute;bottom:0;left:0}.standard-layout-3 .section-1 .sub-1.title{color:white;padding:0 1em;padding-top:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-3 .section-1 .sub-1.subtitle{color:white;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-3 .section-2{width:100%;overflow:auto}.standard-layout-3 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-3 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-3 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-3 .section-3 kup-button{margin-left:0.25em}.standard-layout-4{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-4 kup-button{margin-right:0}.standard-layout-4 #image1 img{object-fit:cover}.standard-layout-4.has-actions{padding-bottom:52px}.standard-layout-4.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-4 .section-1{display:flex;height:100%;width:100%}.standard-layout-4 .section-1 .sub-1.image{width:33%}.standard-layout-4 .section-1 .sub-1.text{width:77%}.standard-layout-4 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-4 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-4 .section-2{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-4 .section-2 kup-button{margin-left:0.25em}.standard-layout-5{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);height:100%;overflow:hidden;width:100%}.standard-layout-5 .section-1{background-color:var(--color-0);height:3%}.standard-layout-5 .section-2{display:flex;height:53%}.standard-layout-5 .section-3{display:flex;height:24%}.standard-layout-5 .section-4{display:flex;height:20%;background-color:var(--color-1)}.standard-layout-5 .sub-2{box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.standard-layout-5 .sub-2.icon{min-height:20px;flex:0 0 10%;max-width:10%}.standard-layout-5 .sub-2.icon #image1{box-sizing:border-box;margin:auto;padding:0 20%}.standard-layout-5 .sub-2.icon #image1 img{object-fit:contain}.standard-layout-5 .sub-2.text{flex:0 0 70%;max-width:70%;margin:auto;height:100%;flex-wrap:nowrap;padding:1em;text-align:left}.standard-layout-5 .sub-2.image{box-sizing:border-box;flex:0 0 20%;padding:1.5vh 0;max-width:20%}.standard-layout-5 .sub-2.image #image2{box-sizing:border-box;margin:auto;padding:0 10%}.standard-layout-5 .sub-2.image #image2 img{object-fit:contain}.standard-layout-5 .sub-2 .desc-text{overflow:auto}.standard-layout-5 .sub-2 .alt-text{color:var(--kup-primary-color)}.standard-layout-5 .sub-3{box-sizing:border-box}.standard-layout-5 .sub-3.progress-bar{margin:auto;padding:0 5%;vertical-align:2px;width:80%}.standard-layout-5 .sub-3.button{margin:auto;text-align:center;width:20%}.standard-layout-5 .sub-3 kup-button{margin:auto}.standard-layout-5 .sub-4{box-sizing:border-box;margin:auto}.standard-layout-5 .sub-4.text{width:50%;font-size:0.875em}.standard-layout-5 .sub-4 div{padding:0 5%}.standard-layout-5 .sub-4 .alt-text{color:var(--color-0);font-size:1em}.standard-layout-5 .alt-text{font-weight:bold}@media screen and (max-width: 767px){.standard-layout-5 .sub-2.image{display:none}.standard-layout-5 .sub-2.icon{flex-basis:30%;max-width:30%}}.standard-layout-6{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%}.standard-layout-6 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.standard-layout-6 .section-1 .alt-text{color:var(--kup_card_dynamic_color_0);height:100%;text-align:center;writing-mode:vertical-lr;margin:auto;font-size:1.25em}.standard-layout-6 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.standard-layout-6 .section-2 .sub-2{margin:auto;text-align:center}.standard-layout-6 .section-2 .sub-2 kup-progress-bar{margin-bottom:1em}.standard-layout-6 kup-button{position:absolute;bottom:2%;right:2%}.standard-layout-7{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.standard-layout-7 #image1 img{margin:auto;object-fit:contain}.standard-layout-7 .section-1{background-color:var(--color-0);height:5%;width:100%}.standard-layout-7 .section-2{height:80%;width:100%;text-align:center;padding:25px 25%;box-sizing:border-box}.standard-layout-7 .section-2 .sub-2{margin:auto}.standard-layout-7 .section-2 .sub-2.image{box-sizing:border-box;height:65%}.standard-layout-7 .section-2 .sub-2.text{font-size:1.4em;letter-spacing:1.2px;padding-top:1em;height:35%}.standard-layout-7 .section-3{display:flex;height:15%;width:100%}.standard-layout-7 .section-3 .alt-text{margin:auto;opacity:0.75;width:50%}.standard-layout-7 .section-3 .alt-text:nth-child(1){margin-left:1em;text-align:left}.standard-layout-7 .section-3 .alt-text:nth-child(2){margin-right:1em;text-align:right}.standard-layout-8{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-8 .background{background-color:var(--color-0);content:\"\";height:100%;width:100%;opacity:0.1;pointer-events:none;position:absolute;top:0;left:0;z-index:1}.standard-layout-8 .section-1{box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;overflow:auto;height:auto}.standard-layout-8 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.standard-layout-8 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em;max-width:75%}.standard-layout-8 .section-1 .sub-3{color:var(--color-0);font-weight:bold;text-align:center;font-size:1.2em;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;max-height:calc(24px + 2.25em);padding:0 1em;overflow:hidden}.standard-layout-8 .section-1 .sub-3 kup-image{margin:auto}.standard-layout-8 .section-2{display:flex;height:auto;overflow:auto}.standard-layout-9{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-9 #image1 img{object-fit:contain}.standard-layout-9 .section-1{margin-top:auto;margin-right:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-9 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-9 .sub-2{display:flex;flex-direction:row}.standard-layout-9 .text{text-align:left}.standard-layout-9 .text-wrapper{display:flex;flex-direction:column}.standard-layout-9 .icon{margin:auto;padding:0 1.25em}.standard-layout-9 .description{font-size:1.5em;letter-spacing:1px;padding-left:1.25em;padding-top:0.25em}.standard-layout-9 .title{font-size:2.75em;font-weight:bold}.standard-layout-9 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-10{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-10 #image1 img{object-fit:contain}.standard-layout-10 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-10 .section-2{margin-top:auto;margin-left:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-10 .sub-2{display:flex;flex-direction:row-reverse}.standard-layout-10 .text{text-align:right}.standard-layout-10 .text-wrapper{display:flex;flex-direction:column}.standard-layout-10 .icon{margin:auto;padding:0 1.25em}.standard-layout-10 .description{font-size:1.5em;letter-spacing:1px;padding-right:1.25em;padding-top:0.25em}.standard-layout-10 .title{font-size:2.75em;font-weight:bold}.standard-layout-10 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-11{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-11 #image1 img{object-fit:contain}.standard-layout-11 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;min-width:6em;max-width:6em;overflow:hidden;transition:0.25s ease-in}.standard-layout-11 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-11 .sub-1{background-color:var(--color-0);height:100%;text-align:center;writing-mode:vertical-lr;min-width:6em;display:flex;transition:width 0.25s ease-in}.standard-layout-11 .sub-1 div{font-size:1.25em}.standard-layout-11 .sub-2{display:flex;flex-direction:row}.standard-layout-11 .text:not(.description){text-align:left}.standard-layout-11 .text-wrapper{display:flex;flex-direction:column}.standard-layout-11 .icon{margin:auto;padding:0 1.25em}.standard-layout-11 .description{font-size:1.5em;letter-spacing:1px;margin:auto;color:var(--kup_card_dynamic_color_0)}.standard-layout-11 .title{font-size:2.75em;font-weight:bold;margin-top:auto}.standard-layout-11 .subtitle{font-size:1.5em;opacity:0.75;margin-bottom:auto}.standard-layout-12{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-12 .section-1{display:inline-flex;border-bottom:1px solid var(--kup-border-color);width:100%}.standard-layout-12 .section-1 kup-button{margin:0}.standard-layout-12 .section-2{display:flex;flex-direction:column}.standard-layout-12 .section-2.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-12 .section-2 kup-date-picker:first-of-type,.standard-layout-12 .section-2 kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-12 .section-3{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-12 .section-3 kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-13{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;position:relative;width:100%}.standard-layout-13 kup-button{margin-left:0}.standard-layout-13 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right}.standard-layout-13 .section-1 kup-button{margin-right:0.25em}.standard-layout-13 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.standard-layout-13 .text{color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.standard-layout-14{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-14 .section-1{display:flex;padding:1em}.standard-layout-14 .section-1 .sub-1{width:100%}.standard-layout-14 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-14 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-14 .section-1 .title{--kup-button-font-size:0.75em;font-size:1.25em;margin-top:-0.5em;padding:0 0.25em 0.25em}.standard-layout-14 .section-1 .title .label{cursor:pointer;padding-right:0.25em}.standard-layout-14 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-14 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-14 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-14 .section-1 .info .value{width:100%}.standard-layout-14 .sub-button{display:inline-flex;width:100%}.standard-layout-14 .sub-button kup-button{margin:0}.standard-layout-14 .sub-checkbox{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-14 .sub-checkbox kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-14 .sub-formula{padding:0.5em}.standard-layout-14 .sub-chip{max-width:25vw;overflow:auto;box-shadow:0 3px 2px -2px var(--kup-border-color)}.standard-layout-14 .sub-field{display:flex;flex-direction:column}.standard-layout-14 .sub-field.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-14 .sub-field kup-date-picker:first-of-type,.standard-layout-14 .sub-field kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-14 .sub-spinner{height:100px}.standard-layout-14 .sub-autocomplete{padding-top:1em}.standard-layout-14 .sub-autocomplete kup-autocomplete{margin:auto;padding:0.5em 0;width:max-content}.standard-layout-14 .sub-switch{display:flex;justify-content:space-evenly;padding:2em}.standard-layout-14 .sub-tree{max-height:25vh;overflow:auto}.standard-layout-14 #apply{display:none;margin:auto}.standard-layout-14 #apply.visible{display:block}.standard-layout-14 #open-in-new,.standard-layout-14 #search,.standard-layout-14 #new{margin:0;display:inline-flex}.standard-layout-15{background:var(--kup-background-color);border-radius:3px;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);color:var(--kup-text-color);display:block;font-size:var(--kup-font-size);outline:none}.standard-layout-15 .section-1{--kup-button-font-size:0.75em;box-sizing:border-box;display:flex;padding:1em}.standard-layout-15 .section-1 .sub-1{width:100%}.standard-layout-15 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-15 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-15 .section-1 .title{align-items:center;display:flex;font-size:1.25em;font-weight:600;padding:0 0.25em 0.25em;text-align:left}.standard-layout-15 .section-1 .title .label{cursor:pointer;padding-right:0.25em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.standard-layout-15 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-15 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-15 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-15 .section-1 .info .value{font-weight:600;width:100%}.standard-layout-15 .section-2{border-top:1px solid var(--kup-border-color);box-sizing:border-box;height:180px;opacity:1;overflow:auto;transition:height 250ms ease-out, opacity 250ms ease-out}.standard-layout-15 .section-2 .info{box-sizing:border-box;height:100%;overflow:auto;padding:1.25em}.standard-layout-15 .section-2 .detail-row{align-items:center;display:flex;justify-content:space-between}.standard-layout-15 .section-2 .detail-row:not(:last-child){margin-bottom:6px}.standard-layout-15 .section-2 .detail-row__label{color:rgba(var(--kup-text-color-rgb), 0.5);margin-top:0.175em;max-width:320px;padding-right:1.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.standard-layout-15 .section-2 .detail-row__value{color:var(--kup-text-color);font-size:105%;font-weight:600;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.standard-layout-15 .section-2 kup-tree{text-align:left}.standard-layout-15 .section-3{border-top:1px solid var(--kup-border-color);display:flex;justify-content:flex-end;padding:6px;padding-top:2px;padding-bottom:2px}.standard-layout-15 .section-3 kup-button{margin:auto 0}.standard-layout-15 #open-in-new,.standard-layout-15 #search,.standard-layout-15 #new{margin:0 0 0.5em 0}.standard-layout-16{background-color:var(--kup-background-color);border-radius:4px;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);color:var(--kup-text-color);font-size:var(--kup-font-size);padding:0.5em}.standard-layout-16>table{width:100%}.standard-layout-16 .label{padding:0.5em;vertical-align:top}.standard-layout-16 .value{padding:0.5em;font-weight:bold}:host{--kup_card_ripple_color:var(\n --kup-card-ripple-color,\n var(--kup-primary-color)\n );display:block;font-size:var(--kup-font-size);height:var(--kup_card_height);min-height:var(--kup_card_height);min-width:var(--kup_card_width);outline:none;position:relative;width:var(--kup_card_width)}:host([is-menu]){display:none;animation:fade-in 0.25s ease-out}:host([menu-visible]){box-shadow:var(--kup-box-shadow);display:block}#kup-component{height:100%;width:100%}.mdc-ripple-surface{cursor:pointer;flex-direction:column;display:flex;height:100%;position:relative}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_card_ripple_color)}.card-view{animation:fade-in 0.25s ease-out;display:none;height:100%;width:100%}.card-view.visible{display:block}";
5256
+ const kupCardCss = ".box-layout-1{background-color:var(--kup-background-color);color:var(--kup-text-color);font-size:var(--kup-font-size);padding:0.5em}.box-layout-1 table{width:100%}.box-layout-1 .label{overflow:hidden;padding:0.5em;text-overflow:ellipsis;width:50%}.box-layout-1 .value{padding:0.5em;font-weight:bold}.box-layout-2{background-color:var(--kup-background-color);color:var(--kup-text-color);font-size:var(--kup-font-size);padding:0.5em}.box-layout-2 .container{width:100%}.box-layout-2 .flex-container{display:flex;justify-content:space-between}.box-layout-2 .label{overflow:hidden;padding:0.5em;text-overflow:ellipsis;width:50%}.box-layout-2 .value{padding:0.5em;font-weight:bold}.box-layout-3{background-color:var(--kup-background-color);color:var(--kup-text-color);font-size:var(--kup-font-size);padding:0.5em}.box-layout-3 .container{display:flex;width:100%}.box-layout-3 .flex-container{align-items:center;display:flex}.box-layout-3 .label{overflow:hidden;padding:0.5em;text-overflow:ellipsis;white-space:nowrap;width:50%}.box-layout-3 .value{padding:0.5em;font-weight:bold}.box-layout-3 .f-cell .f-cell__text{white-space:nowrap}.box-layout-4{background-color:var(--kup-background-color);color:var(--kup-text-color);display:flex;font-size:var(--kup-font-size);height:100%;padding:0.5em}.box-layout-4 .container{margin:auto;width:100%}.box-layout-4 .image{border-radius:50%;height:64px;margin:auto;width:64px}.box-layout-4 .value{padding:0.5em;font-weight:bold}.box-layout-4 .f-cell.c-centered .f-cell__content img,.box-layout-4 .f-cell.c-centered .f-cell__content .f-image{margin:0}.built-in-layout-1{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto;padding:0.5em}.built-in-layout-1 .section-1{box-sizing:border-box;height:5em;overflow:auto;padding-bottom:1em;width:100%}.built-in-layout-1 .section-1 .sub-1{display:flex;flex-direction:row;justify-content:center}.built-in-layout-1 .section-2{height:calc(100% - 60px);overflow:auto;width:100%}.built-in-layout-1 .prev-page{margin-left:auto}.built-in-layout-1 .change-view-button{margin:auto;width:12em;text-align:center}.built-in-layout-1 #change-view-button button{text-transform:capitalize}.built-in-layout-1 .next-page{margin-right:auto}.built-in-layout-1 .calendar{border-collapse:collapse;width:100%}.built-in-layout-1 thead{border-bottom:1px solid var(--kup-border-color)}.built-in-layout-1 .item-text{color:rgba(var(--kup-text-color-rgb), 0.5)}.built-in-layout-1 .item{text-align:center}.built-in-layout-1 .item:not(.selected) .item-number:hover{background-color:var(--kup-hover-background-color)}.built-in-layout-1 .item.selected .item-number,.built-in-layout-1 .item.selected .item-number:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.175)}.built-in-layout-1 .item-number{border-radius:50%;cursor:pointer;display:flex;justify-content:center;line-height:2.5em;margin:auto;width:2.5em;transition:background-color 0.25s;text-transform:capitalize}.built-in-layout-2{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.built-in-layout-2 .clock{box-shadow:var(--kup-box-shadow);width:300px;height:450px;background-color:var(--kup-background-color);position:relative;font-family:var(--kup-font-family)}.built-in-layout-2 .top{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color);height:100px;line-height:100px;font-size:50px;text-align:center}.built-in-layout-2 .top span{cursor:pointer;opacity:0.75;transition:0.25s ease-in-out}.built-in-layout-2 .top .visible{opacity:1}.built-in-layout-2 .circle{user-select:none;background-color:rgba(var(--kup-text-color-rgb), 0.1);width:250px;height:250px;border-radius:1000px;position:relative;top:25px;left:25px;box-sizing:border-box;display:none}.built-in-layout-2 .circle.visible{display:block}.built-in-layout-2 .mid{position:absolute;left:calc(50% - 0px);top:calc(50% - 0px);width:2px;height:2px;border-radius:10px;background-color:var(--kup-text-color)}.built-in-layout-2 .hour{position:absolute;height:40px;line-height:40px;width:40px;border-radius:40px;text-align:center}.built-in-layout-2 .hour.selected{z-index:2}.built-in-layout-2 .hour.selected::after{content:\"\";z-index:-1;background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.built-in-layout-2 .hour2{z-index:2;position:absolute;height:30px;line-height:30px;width:30px;border-radius:40px;text-align:center;font-size:14px}.built-in-layout-2 .hour2.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:64px;right:50%;z-index:-1}.built-in-layout-2 .unit{position:absolute;height:20px;line-height:20px;width:20px;border-radius:40px;text-align:center;font-size:12px}.built-in-layout-2 .unit.selected::after{content:\"\";background-color:rgba(var(--kup-primary-color-rgb), 0.5);height:1px;width:100%;position:absolute;transform:rotate(-90deg);transform-origin:100% 0%;top:50%;width:101px;right:50%}.built-in-layout-2 .hour,.built-in-layout-2 .hour2,.built-in-layout-2 .unit{cursor:pointer;transition:background-color 0.25s}.built-in-layout-2 .hour:hover,.built-in-layout-2 .hour2:hover,.built-in-layout-2 .unit:hover{background-color:rgba(var(--kup-primary-color-rgb), 0.275)}.built-in-layout-2 .hour.selected,.built-in-layout-2 .hour2.selected,.built-in-layout-2 .unit.selected{background-color:var(--kup-primary-color);color:var(--kup-text-on-primary-color)}.built-in-layout-2 .actions{color:var(--kup-primary-color);font-weight:bold;font-size:20px;display:flex;justify-content:flex-end;position:absolute;width:100%;box-sizing:border-box;bottom:10px}.built-in-layout-2 .action{display:inline-block;width:100px;text-align:center;height:37.5px;line-height:37.5px;margin-right:10px;cursor:pointer;border-radius:2px}.built-in-layout-2 .clock .actions .action:hover{background-color:rgba(0, 0, 0, 0.1)}.built-in-layout-2 .clock .actions .action:visible{background-color:rgba(0, 0, 0, 0.3)}.built-in-layout-2 .hour:nth-child(12):after{transform:rotate(330deg)}.built-in-layout-2 .hour:nth-child(11):after{transform:rotate(300deg)}.built-in-layout-2 .hour:nth-child(10):after{transform:rotate(270deg)}.built-in-layout-2 .hour:nth-child(9):after{transform:rotate(240deg)}.built-in-layout-2 .hour:nth-child(8):after{transform:rotate(210deg)}.built-in-layout-2 .hour:nth-child(7):after{transform:rotate(180deg)}.built-in-layout-2 .hour:nth-child(6):after{transform:rotate(150deg)}.built-in-layout-2 .hour:nth-child(5):after{transform:rotate(120deg)}.built-in-layout-2 .hour:nth-child(4):after{transform:rotate(90deg)}.built-in-layout-2 .hour:nth-child(3):after{transform:rotate(60deg)}.built-in-layout-2 .hour:nth-child(2):after{transform:rotate(30deg)}.built-in-layout-2 .hour:nth-child(1):after{transform:rotate(0deg)}.built-in-layout-2 .hour2:nth-child(24):after{transform:rotate(690deg)}.built-in-layout-2 .hour2:nth-child(23):after{transform:rotate(660deg)}.built-in-layout-2 .hour2:nth-child(22):after{transform:rotate(630deg)}.built-in-layout-2 .hour2:nth-child(21):after{transform:rotate(600deg)}.built-in-layout-2 .hour2:nth-child(20):after{transform:rotate(570deg)}.built-in-layout-2 .hour2:nth-child(19):after{transform:rotate(540deg)}.built-in-layout-2 .hour2:nth-child(18):after{transform:rotate(510deg)}.built-in-layout-2 .hour2:nth-child(17):after{transform:rotate(480deg)}.built-in-layout-2 .hour2:nth-child(16):after{transform:rotate(450deg)}.built-in-layout-2 .hour2:nth-child(15):after{transform:rotate(420deg)}.built-in-layout-2 .hour2:nth-child(14):after{transform:rotate(390deg)}.built-in-layout-2 .hour2:nth-child(13):after{transform:rotate(360deg)}.built-in-layout-2 .unit:nth-child(60):after{transform:rotate(354deg)}.built-in-layout-2 .unit:nth-child(59):after{transform:rotate(348deg)}.built-in-layout-2 .unit:nth-child(58):after{transform:rotate(342deg)}.built-in-layout-2 .unit:nth-child(57):after{transform:rotate(336deg)}.built-in-layout-2 .unit:nth-child(56):after{transform:rotate(330deg)}.built-in-layout-2 .unit:nth-child(55):after{transform:rotate(324deg)}.built-in-layout-2 .unit:nth-child(54):after{transform:rotate(318deg)}.built-in-layout-2 .unit:nth-child(53):after{transform:rotate(312deg)}.built-in-layout-2 .unit:nth-child(52):after{transform:rotate(306deg)}.built-in-layout-2 .unit:nth-child(51):after{transform:rotate(300deg)}.built-in-layout-2 .unit:nth-child(50):after{transform:rotate(294deg)}.built-in-layout-2 .unit:nth-child(49):after{transform:rotate(288deg)}.built-in-layout-2 .unit:nth-child(48):after{transform:rotate(282deg)}.built-in-layout-2 .unit:nth-child(47):after{transform:rotate(276deg)}.built-in-layout-2 .unit:nth-child(46):after{transform:rotate(270deg)}.built-in-layout-2 .unit:nth-child(45):after{transform:rotate(264deg)}.built-in-layout-2 .unit:nth-child(44):after{transform:rotate(258deg)}.built-in-layout-2 .unit:nth-child(43):after{transform:rotate(252deg)}.built-in-layout-2 .unit:nth-child(42):after{transform:rotate(246deg)}.built-in-layout-2 .unit:nth-child(41):after{transform:rotate(240deg)}.built-in-layout-2 .unit:nth-child(40):after{transform:rotate(234deg)}.built-in-layout-2 .unit:nth-child(39):after{transform:rotate(228deg)}.built-in-layout-2 .unit:nth-child(38):after{transform:rotate(222deg)}.built-in-layout-2 .unit:nth-child(37):after{transform:rotate(216deg)}.built-in-layout-2 .unit:nth-child(36):after{transform:rotate(210deg)}.built-in-layout-2 .unit:nth-child(35):after{transform:rotate(204deg)}.built-in-layout-2 .unit:nth-child(34):after{transform:rotate(198deg)}.built-in-layout-2 .unit:nth-child(33):after{transform:rotate(192deg)}.built-in-layout-2 .unit:nth-child(32):after{transform:rotate(186deg)}.built-in-layout-2 .unit:nth-child(31):after{transform:rotate(180deg)}.built-in-layout-2 .unit:nth-child(30):after{transform:rotate(174deg)}.built-in-layout-2 .unit:nth-child(29):after{transform:rotate(168deg)}.built-in-layout-2 .unit:nth-child(28):after{transform:rotate(162deg)}.built-in-layout-2 .unit:nth-child(27):after{transform:rotate(156deg)}.built-in-layout-2 .unit:nth-child(26):after{transform:rotate(150deg)}.built-in-layout-2 .unit:nth-child(25):after{transform:rotate(144deg)}.built-in-layout-2 .unit:nth-child(24):after{transform:rotate(138deg)}.built-in-layout-2 .unit:nth-child(23):after{transform:rotate(132deg)}.built-in-layout-2 .unit:nth-child(22):after{transform:rotate(126deg)}.built-in-layout-2 .unit:nth-child(21):after{transform:rotate(120deg)}.built-in-layout-2 .unit:nth-child(20):after{transform:rotate(114deg)}.built-in-layout-2 .unit:nth-child(19):after{transform:rotate(108deg)}.built-in-layout-2 .unit:nth-child(18):after{transform:rotate(102deg)}.built-in-layout-2 .unit:nth-child(17):after{transform:rotate(96deg)}.built-in-layout-2 .unit:nth-child(16):after{transform:rotate(90deg)}.built-in-layout-2 .unit:nth-child(15):after{transform:rotate(84deg)}.built-in-layout-2 .unit:nth-child(14):after{transform:rotate(78deg)}.built-in-layout-2 .unit:nth-child(13):after{transform:rotate(72deg)}.built-in-layout-2 .unit:nth-child(12):after{transform:rotate(66deg)}.built-in-layout-2 .unit:nth-child(11):after{transform:rotate(60deg)}.built-in-layout-2 .unit:nth-child(10):after{transform:rotate(54deg)}.built-in-layout-2 .unit:nth-child(9):after{transform:rotate(48deg)}.built-in-layout-2 .unit:nth-child(8):after{transform:rotate(42deg)}.built-in-layout-2 .unit:nth-child(7):after{transform:rotate(36deg)}.built-in-layout-2 .unit:nth-child(6):after{transform:rotate(30deg)}.built-in-layout-2 .unit:nth-child(5):after{transform:rotate(24deg)}.built-in-layout-2 .unit:nth-child(4):after{transform:rotate(18deg)}.built-in-layout-2 .unit:nth-child(3):after{transform:rotate(12deg)}.built-in-layout-2 .unit:nth-child(2):after{transform:rotate(6deg)}.built-in-layout-2 .unit:nth-child(1):after{transform:rotate(0deg)}.built-in-layout-3{background:var(--kup-background-color);box-shadow:rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;box-sizing:border-box;overflow:auto}.built-in-layout-3 kup-button,.built-in-layout-3 kup-combobox{margin:0 auto 0.75em auto}.built-in-layout-3 kup-combobox{width:95%}.built-in-layout-3 .sub-chip{border-top:1px solid var(--kup-border-color);max-height:33vh;overflow:auto;width:100%}.built-in-layout-4{background:var(--kup-background-color);box-shadow:rgba(128, 128, 128, 0.1) 0px 2px 1px -1px, rgba(128, 128, 128, 0.1) 0px 1px 1px 0px, rgba(128, 128, 128, 0.6) 0px 1px 3px 0px;box-sizing:border-box}.built-in-layout-4 .picker_arrow{position:absolute;z-index:-1}.built-in-layout-4 .picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.built-in-layout-4 .picker_wrapper.popup,.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before,.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after{background:var(--kup-background-color);box-shadow:0 0 10px 1px rgba(0, 0, 0, 0.4)}.built-in-layout-4 .picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before,.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after{content:\"\";display:block;position:absolute;top:0;left:0;z-index:-99}.built-in-layout-4 .picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;transform:skew(45deg);transform-origin:0 100%}.built-in-layout-4 .picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.built-in-layout-4 .popup.popup_top{bottom:100%;left:0}.built-in-layout-4 .popup.popup_top .picker_arrow{bottom:0;left:0;transform:rotate(-90deg)}.built-in-layout-4 .popup.popup_bottom{top:100%;left:0}.built-in-layout-4 .popup.popup_bottom .picker_arrow{top:0;left:0;transform:rotate(90deg) scale(1, -1)}.built-in-layout-4 .popup.popup_left{top:0;right:100%}.built-in-layout-4 .popup.popup_left .picker_arrow{top:0;right:0;transform:scale(-1, 1)}.built-in-layout-4 .popup.popup_right{top:0;left:100%}.built-in-layout-4 .popup.popup_right .picker_arrow{top:0;left:0}.built-in-layout-4 .picker_wrapper.no_alpha .picker_alpha{display:none}.built-in-layout-4 .picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.built-in-layout-4 .picker_wrapper.no_cancel .picker_cancel{display:none}.built-in-layout-4 .layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:0.5em}.built-in-layout-4 .layout_default.picker_wrapper input,.built-in-layout-4 .layout_default.picker_wrapper button{font-size:1em}.built-in-layout-4 .layout_default.picker_wrapper>*{margin:0.5em}.built-in-layout-4 .layout_default.picker_wrapper::before{content:\"\";display:block;width:100%;height:0;order:1}.built-in-layout-4 .layout_default .picker_slider,.built-in-layout-4 .layout_default .picker_selector{padding:1em}.built-in-layout-4 .layout_default .picker_hue{width:100%}.built-in-layout-4 .layout_default .picker_sl{flex:1 1 auto}.built-in-layout-4 .layout_default .picker_sl::before{content:\"\";display:block;padding-bottom:100%}.built-in-layout-4 .layout_default .picker_editor{order:1;width:6.5em}.built-in-layout-4 .layout_default .picker_editor input{width:100%;height:100%}.built-in-layout-4 .layout_default .picker_sample{order:1;flex:1 1 auto}.built-in-layout-4 .layout_default .picker_done,.built-in-layout-4 .layout_default .picker_cancel{order:1}.built-in-layout-4 .picker_wrapper{box-sizing:border-box;background:var(--kup-background-color);box-shadow:0 0 0 1px var(--kup-border-color);cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.built-in-layout-4 .picker_wrapper:focus{outline:none}.built-in-layout-4 .picker_wrapper button,.built-in-layout-4 .picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px var(--kup-border-color);outline:none}.built-in-layout-4 .picker_wrapper button:focus,.built-in-layout-4 .picker_wrapper button:active,.built-in-layout-4 .picker_wrapper input:focus,.built-in-layout-4 .picker_wrapper input:active{box-shadow:0 0 2px 1px var(--kup-border-color)}.built-in-layout-4 .picker_wrapper button{padding:0.4em 0.6em;cursor:pointer;background-color:whitesmoke;background-image:linear-gradient(0deg, gainsboro, transparent)}.built-in-layout-4 .picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.built-in-layout-4 .picker_selector{position:absolute;z-index:1;display:block;transform:translate(-50%, -50%);border:2px solid white;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.built-in-layout-4 .picker_slider .picker_selector{border-radius:2px}.built-in-layout-4 .picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px var(--kup-border-color)}.built-in-layout-4 .picker_sl{position:relative;box-shadow:0 0 0 1px var(--kup-border-color);background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%), linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%), linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.built-in-layout-4 .picker_alpha,.built-in-layout-4 .picker_sample{position:relative;background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Cpath d='M1,0H0V1H2V2H1' fill='lightgrey'/%3E%3C/svg%3E\") left top/contain white;box-shadow:0 0 0 1px var(--kup-border-color)}.built-in-layout-4 .picker_alpha .picker_selector,.built-in-layout-4 .picker_sample .picker_selector{background:none}.built-in-layout-4 .picker_editor input{font-family:monospace;padding:0.2em 0.4em}.built-in-layout-4 .picker_sample::before{content:\"\";position:absolute;display:block;width:100%;height:100%;background:currentColor}.built-in-layout-4 .picker_done,.built-in-layout-4 .picker_arrow{display:none}.built-in-layout-4 .layout_default.picker_wrapper{bottom:unset;font-size:var(--kup-font-size);left:unset;padding:0.25em;right:unset;top:unset;width:100%}.built-in-layout-4 .layout_default .picker_editor input{background:none;color:var(--kup-text-color);font-family:var(--kup-font-family);font-size:var(--kup-font-size)}.built-in-layout-4 .picker_wrapper.popup{box-shadow:var(--kup-box-shadow);margin:0;outline:none}.built-in-layout-5{background:var(--kup-background-color);box-shadow:var(--kup-box-shadow);box-sizing:border-box;overflow:auto;padding:0.5em}.built-in-layout-5>table{width:100%}.built-in-layout-5>table>tr>td>div.value{text-align:right;color:var(--kup-primary-color);border-bottom:1px solid var(--kup-border-color);min-height:1.5em}.built-in-layout-5>table>tr>td>.f-button{display:flex;justify-content:center}.built-in-layout-5>table>tr>td>div.number{border-radius:50%;cursor:pointer;display:flex;justify-content:center;line-height:2.5em;margin:auto;width:2.5em;transition:background-color 0.25s;text-transform:capitalize}.built-in-layout-5>table>tr>td>div.number:hover{background-color:var(--kup-hover-background-color)}.collapsible-layout-1{color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-1 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.collapsible-layout-1 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.collapsible-layout-1 .section-2 .sub-1{min-height:1.5em;display:flex;padding:0.6rem 0.8em 0;font-weight:bold;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.collapsible-layout-1 .section-2 .sub-1 div{font-size:1em}.collapsible-layout-1 .section-2 .sub-1 .left{text-align:left;width:80%}.collapsible-layout-1 .section-2 .sub-1 .right{text-align:right;width:20%}.collapsible-layout-1 .section-2 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em}.collapsible-layout-2{color:var(--kup-text-color);box-shadow:rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;border-radius:4px;display:flex;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.collapsible-layout-2 .section-1{box-sizing:border-box;height:100%;display:flex;flex-direction:column;max-width:100%;width:100%}.collapsible-layout-2 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.collapsible-layout-2 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;max-width:75%}.collapsible-layout-2 .section-1 .sub-2 div{font-size:0.875em}.collapsible-layout-2 .section-1 .sub-3{color:var(--color-0);text-align:center;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;overflow:hidden;max-height:calc(24px + 2.25em);padding:0 1em}.collapsible-layout-2 .section-1 .sub-3 kup-image{margin:auto}.collapsible-layout-2 .section-1 .sub-3 div{font-size:1.25em}.collapsible-card .collapsible-trigger{display:none;position:absolute;bottom:0;left:0;height:50px;width:100%}.collapsible-card .collapsible-trigger kup-button{margin:auto;width:48px}.collapsible-card .collapsible-wrapper{overflow:auto}.collapsible-card.collapsible-active{padding-bottom:50px}.collapsible-card.collapsible-active .collapsible-trigger{display:block}.dialog-layout-1{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);color:var(--kup-text-color);display:flex;flex-direction:column;height:100%;width:100%;overflow:auto}.dialog-layout-1 .section-1{display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-1 .section-1 .text{min-width:max-content}.dialog-layout-1 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-2 .section-1{text-align:center;touch-action:none;padding-bottom:1em}.dialog-layout-2 .section-1 .text{padding-top:0.75em}.dialog-layout-2 .section-1 .text:not(.label){font-weight:bold}.dialog-layout-2 .section-2{border-top:1px solid var(--kup-border-color);display:grid;grid-gap:0.5em;grid-template-columns:repeat(2, auto);grid-template-rows:repeat(auto-fill, 1.25em);height:100%;padding:0.5em;overflow:auto;touch-action:none}.dialog-layout-2 .section-2 .text{min-width:max-content}.dialog-layout-2 .section-2 .text:not(.label){font-weight:bold}.dialog-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;overflow:visible;flex-direction:column;height:100%;position:relative;width:100%}.dialog-layout-3 kup-button{margin-left:0}.dialog-layout-3 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right;touch-action:none}.dialog-layout-3 .section-1 kup-button{margin-right:0.25em}.dialog-layout-3 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.dialog-layout-3 ::slotted(.text){color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.dialog-layout-4{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-4 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-4 .section-2{height:100%;overflow:auto;padding:0.25em;touch-action:none}.dialog-layout-5{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;width:100%}.dialog-layout-5 .section-1{display:flex;justify-content:space-evenly}.dialog-layout-5 .section-2{height:100%;overflow:auto}.dialog-layout-6{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;max-height:95vh;max-width:95vw;width:100%}.dialog-layout-6 .section-1{display:flex;height:100%;justify-content:space-evenly;overflow:auto}.dialog-layout-6 kup-data-table{width:100%}#drag-handle{-ms-touch-action:none;touch-action:none}#drag-handle:not(.header-bar){display:flex;height:100%}#drag-handle:not(.header-bar) .f-image{margin:auto}#drag-handle.header-bar{background-color:var(--kup-title-background-color);color:var(--kup-title-color);display:flex;flex-direction:row;height:2em;position:relative;width:100%}#drag-handle.header-bar .dialog-title{font-weight:bold;line-height:2em;padding-left:0.5em;padding-right:2em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#drag-handle.header-bar #dialog-close{cursor:pointer;margin-right:0;transition:opacity 0.25s;position:absolute;right:0;background:var(--kup-title-background-color)}#drag-handle.header-bar #dialog-close:hover{opacity:0.5}.free-layout-1{background:var(--kup-background-color);box-shadow:var(--kup-box-shadow);box-sizing:border-box;overflow:auto;padding:1em}.free-layout-2{background:var(--kup-background-color);box-shadow:var(--kup-box-shadow);box-sizing:border-box;overflow:auto}.scalable-layout-1 .descr{font-size:70%;width:100%}.scalable-layout-1 .value{font-size:220%}.scalable-layout-2 #image1 img{object-fit:contain}.scalable-layout-2 .scalable-element{display:grid;grid-template-columns:1fr 1fr 0.5fr 0.5fr}.scalable-layout-2 .icon{margin:auto;font-size:150%;margin-right:5%}.scalable-layout-2 .value-int{font-size:250%}.scalable-layout-2 .value-dec,.scalable-layout-2 .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-2 .value-dec{margin-left:2%}.scalable-layout-2 .unit{margin-left:4%}.scalable-layout-3 .descr{font-size:70%;width:100%}.scalable-layout-3 .value{font-size:220%}.scalable-layout-4 #image1 img{object-fit:contain}.scalable-layout-4 .scalable-element{display:grid;grid-template-columns:1fr 5fr}.scalable-layout-4 .icon{font-size:150%;margin:auto 5% auto auto}.scalable-layout-4 .value-and-unit{display:flex;color:var(--color-0)}.scalable-layout-4 .value-and-unit .value-int{font-size:250%}.scalable-layout-4 .value-and-unit .value-dec,.scalable-layout-4 .value-and-unit .unit{font-size:130%;margin-top:auto;margin-bottom:10%}.scalable-layout-4 .value-and-unit .value-dec{margin-left:2%}.scalable-layout-4 .value-and-unit .unit{margin-left:4%}.scalable-layout-4 .descr{margin-left:4%;text-align:left;font-size:80%;width:100%;min-width:max-content}.scalable-layout-5 #image1 img{object-fit:contain}.scalable-layout-5 .scalable-element{display:flex}.scalable-layout-5 .text-wrapper{margin-right:10px}.scalable-layout-5 .icon{font-size:150%;margin:auto;margin-bottom:0.35em}.scalable-layout-5 .value{font-size:200%}.scalable-layout-5 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:-10%}.scalable-layout-6 #image1 img{object-fit:contain}.scalable-layout-6 .scalable-element{display:flex;justify-content:space-between}.scalable-layout-6 .text-wrapper{margin-left:1em}.scalable-layout-6 .icon{font-size:150%;margin:auto}.scalable-layout-6 .value{font-size:220%;text-align:right}.scalable-layout-6 .descr{font-size:80%;text-align:right;width:100%;min-width:max-content}.scalable-layout-7 #image1 img{object-fit:contain}.scalable-layout-7 .scalable-element{display:flex}.scalable-layout-7 .text-wrapper{margin-right:0.5em}.scalable-layout-7 .icon{font-size:150%;margin:auto;margin-top:0.35em}.scalable-layout-7 .value{font-size:200%}.scalable-layout-7 .descr{text-align:right;font-size:65%;width:100%;min-width:max-content;position:relative;bottom:10%}.scalable-layout-8 #image1 img{object-fit:contain}.scalable-layout-8 .scalable-element{align-items:center;display:grid;grid-template-columns:0.25fr 1.25fr 0.25fr}.scalable-layout-8 .icon{margin-right:4%;font-size:75%}.scalable-layout-8 .value{margin:0 10%;font-size:250%}.scalable-layout-8 .descr{font-size:60%;text-align:left}.scalable-layout-9{background-color:var(--color-1);color:var(--color-2);height:100%;display:flex;justify-content:unset;overflow:auto;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);border-radius:4px}.scalable-layout-9 .section-1{background-color:var(--color-0);width:20%;height:100%}.scalable-layout-9 .section-2{width:100%;height:100%;display:flex;flex-direction:column}.scalable-layout-9 .text{display:flex;justify-content:center;flex-direction:column}.scalable-layout-9 .descr{font-size:80%}.scalable-layout-9 .value{font-size:220%}.scalable-layout-9 .buttons{height:max-content;margin-bottom:2%}.scalable-layout-9 .f-button{float:right}.scalable-card{align-items:center;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);border-radius:4px;display:flex;font-size:calc(var(--kup-font-size) * var(--kup_card_multiplier));height:100%;justify-content:center;position:relative;text-align:center;word-break:normal;width:100%}.standard-layout-1{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-1 kup-button{margin-right:0}.standard-layout-1 #image1 img{object-fit:cover}.standard-layout-1.has-actions{padding-bottom:52px}.standard-layout-1.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-1 .section-1{height:60%;width:100%}.standard-layout-1 .section-2{height:40%;width:100%;overflow:auto}.standard-layout-1 .section-2 .sub-2.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-1 .section-2 .sub-2.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-1 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-1 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-1 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-1 .section-3 kup-button{margin-left:0.25em}.standard-layout-2{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-2 kup-button{margin-right:0}.standard-layout-2 #image1 img{object-fit:cover}.standard-layout-2.has-actions{padding-bottom:52px}.standard-layout-2.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-2 .section-1{width:100%}.standard-layout-2 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-2 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-2 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-2 .section-2{height:75%;width:100%}.standard-layout-2 .section-3{width:100%;overflow:auto}.standard-layout-2 .section-3 .sub-3.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-2 .section-3 .sub-3.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-2 .section-4{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-2 .section-4 kup-button{margin-left:0.25em}.standard-layout-3{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-3 kup-button{margin-right:0}.standard-layout-3 #image1 img{object-fit:cover}.standard-layout-3.has-actions{padding-bottom:52px}.standard-layout-3.has-actions .section-2 .sub-2.description{padding-bottom:0}.standard-layout-3 .section-1{height:75%;width:100%}.standard-layout-3 .section-1 .media{position:relative;height:100%;width:100%}.standard-layout-3 .section-1 .text-on-media{position:absolute;bottom:0;left:0}.standard-layout-3 .section-1 .sub-1.title{color:white;padding:0 1em;padding-top:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-3 .section-1 .sub-1.subtitle{color:white;opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-3 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-3 .section-2{width:100%;overflow:auto}.standard-layout-3 .section-2 .sub-2.description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;opacity:0.6;padding:0 1em 8px;padding-top:1em;text-align:left}.standard-layout-3 .section-2 .sub-2.description div{font-size:0.875em;font-weight:400;letter-spacing:0.0178571429em;line-height:1.25em}.standard-layout-3 .section-3{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-3 .section-3 kup-button{margin-left:0.25em}.standard-layout-4{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);display:flex;flex-direction:column;height:100%;position:relative;width:100%;overflow:auto}.standard-layout-4 kup-button{margin-right:0}.standard-layout-4 #image1 img{object-fit:cover}.standard-layout-4.has-actions{padding-bottom:52px}.standard-layout-4.has-actions .section-3 .sub-3.description{padding-bottom:0}.standard-layout-4 .section-1{display:flex;height:100%;width:100%}.standard-layout-4 .section-1 .sub-1.image{width:33%}.standard-layout-4 .section-1 .sub-1.text{width:77%}.standard-layout-4 .section-1 .sub-1.title{color:var(--kup-text-color);padding:0 1em;padding-top:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.title div{font-size:1.25em;font-weight:500;letter-spacing:0.0125em}.standard-layout-4 .section-1 .sub-1.subtitle{opacity:0.6;padding:0 1em;padding-bottom:1em;text-align:left}.standard-layout-4 .section-1 .sub-1.subtitle div{font-size:0.875em;font-weight:500;letter-spacing:0.0071428571em;line-height:1.375em}.standard-layout-4 .section-2{display:flex;justify-content:flex-end;align-items:center;box-sizing:border-box;position:absolute;left:0;bottom:0;padding:2px 1em;height:52px;width:100%;text-align:right}.standard-layout-4 .section-2 kup-button{margin-left:0.25em}.standard-layout-5{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);height:100%;overflow:hidden;width:100%}.standard-layout-5 .section-1{background-color:var(--color-0);height:3%}.standard-layout-5 .section-2{display:flex;height:53%}.standard-layout-5 .section-3{display:flex;height:24%}.standard-layout-5 .section-4{display:flex;height:20%;background-color:var(--color-1)}.standard-layout-5 .sub-2{box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.standard-layout-5 .sub-2.icon{min-height:20px;flex:0 0 10%;max-width:10%}.standard-layout-5 .sub-2.icon #image1{box-sizing:border-box;margin:auto;padding:0 20%}.standard-layout-5 .sub-2.icon #image1 img{object-fit:contain}.standard-layout-5 .sub-2.text{flex:0 0 70%;max-width:70%;margin:auto;height:100%;flex-wrap:nowrap;padding:1em;text-align:left}.standard-layout-5 .sub-2.image{box-sizing:border-box;flex:0 0 20%;padding:1.5vh 0;max-width:20%}.standard-layout-5 .sub-2.image #image2{box-sizing:border-box;margin:auto;padding:0 10%}.standard-layout-5 .sub-2.image #image2 img{object-fit:contain}.standard-layout-5 .sub-2 .desc-text{overflow:auto}.standard-layout-5 .sub-2 .alt-text{color:var(--kup-primary-color)}.standard-layout-5 .sub-3{box-sizing:border-box}.standard-layout-5 .sub-3.progress-bar{margin:auto;padding:0 5%;vertical-align:2px;width:80%}.standard-layout-5 .sub-3.button{margin:auto;text-align:center;width:20%}.standard-layout-5 .sub-3 kup-button{margin:auto}.standard-layout-5 .sub-4{box-sizing:border-box;margin:auto}.standard-layout-5 .sub-4.text{width:50%;font-size:0.875em}.standard-layout-5 .sub-4 div{padding:0 5%}.standard-layout-5 .sub-4 .alt-text{color:var(--color-0);font-size:1em}.standard-layout-5 .alt-text{font-weight:bold}@media screen and (max-width: 767px){.standard-layout-5 .sub-2.image{display:none}.standard-layout-5 .sub-2.icon{flex-basis:30%;max-width:30%}}.standard-layout-6{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;height:100%;overflow:hidden;width:100%}.standard-layout-6 .section-1{background-color:var(--color-0);display:flex;flex:0 0 10%;max-width:10%}.standard-layout-6 .section-1 .alt-text{color:var(--kup_card_dynamic_color_0);height:100%;text-align:center;writing-mode:vertical-lr;margin:auto;font-size:1.25em}.standard-layout-6 .section-2{box-sizing:border-box;height:100%;display:flex;flex:0 0 90%;flex-direction:column;max-width:90%}.standard-layout-6 .section-2 .sub-2{margin:auto;text-align:center}.standard-layout-6 .section-2 .sub-2 kup-progress-bar{margin-bottom:1em}.standard-layout-6 kup-button{position:absolute;bottom:2%;right:2%}.standard-layout-7{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%}.standard-layout-7 #image1 img{margin:auto;object-fit:contain}.standard-layout-7 .section-1{background-color:var(--color-0);height:5%;width:100%}.standard-layout-7 .section-2{height:80%;width:100%;text-align:center;padding:25px 25%;box-sizing:border-box}.standard-layout-7 .section-2 .sub-2{margin:auto}.standard-layout-7 .section-2 .sub-2.image{box-sizing:border-box;height:65%}.standard-layout-7 .section-2 .sub-2.text{font-size:1.4em;letter-spacing:1.2px;padding-top:1em;height:35%}.standard-layout-7 .section-3{display:flex;height:15%;width:100%}.standard-layout-7 .section-3 .alt-text{margin:auto;opacity:0.75;width:50%}.standard-layout-7 .section-3 .alt-text:nth-child(1){margin-left:1em;text-align:left}.standard-layout-7 .section-3 .alt-text:nth-child(2){margin-right:1em;text-align:right}.standard-layout-8{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:column;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-8 .background{background-color:var(--color-0);content:\"\";height:100%;width:100%;opacity:0.1;pointer-events:none;position:absolute;top:0;left:0;z-index:1}.standard-layout-8 .section-1{box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;overflow:auto;height:auto}.standard-layout-8 .section-1 .sub-1{text-align:left;padding:0.6em 0.8em 0;font-size:1em;font-weight:bold;max-width:75%}.standard-layout-8 .section-1 .sub-2{text-align:left;padding:0.6em 0.8em;font-size:0.875em;max-width:75%}.standard-layout-8 .section-1 .sub-3{color:var(--color-0);font-weight:bold;text-align:center;font-size:1.2em;position:absolute;top:1em;right:1em;max-width:25%;text-overflow:ellipsis;max-height:calc(24px + 2.25em);padding:0 1em;overflow:hidden}.standard-layout-8 .section-1 .sub-3 kup-image{margin:auto}.standard-layout-8 .section-2{display:flex;height:auto;overflow:auto}.standard-layout-9{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-9 #image1 img{object-fit:contain}.standard-layout-9 .section-1{margin-top:auto;margin-right:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-9 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-9 .sub-2{display:flex;flex-direction:row}.standard-layout-9 .text{text-align:left}.standard-layout-9 .text-wrapper{display:flex;flex-direction:column}.standard-layout-9 .icon{margin:auto;padding:0 1.25em}.standard-layout-9 .description{font-size:1.5em;letter-spacing:1px;padding-left:1.25em;padding-top:0.25em}.standard-layout-9 .title{font-size:2.75em;font-weight:bold}.standard-layout-9 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-10{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-10 #image1 img{object-fit:contain}.standard-layout-10 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-10 .section-2{margin-top:auto;margin-left:18px;margin-bottom:auto;white-space:nowrap}.standard-layout-10 .sub-2{display:flex;flex-direction:row-reverse}.standard-layout-10 .text{text-align:right}.standard-layout-10 .text-wrapper{display:flex;flex-direction:column}.standard-layout-10 .icon{margin:auto;padding:0 1.25em}.standard-layout-10 .description{font-size:1.5em;letter-spacing:1px;padding-right:1.25em;padding-top:0.25em}.standard-layout-10 .title{font-size:2.75em;font-weight:bold}.standard-layout-10 .subtitle{font-size:1.5em;opacity:0.75}.standard-layout-11{background-color:var(--kup-background-color);color:var(--kup-text-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%;box-sizing:border-box;position:relative}.standard-layout-11 #image1 img{object-fit:contain}.standard-layout-11 .section-1{display:flex;height:100%;margin-top:auto;margin-bottom:auto;min-width:6em;max-width:6em;overflow:hidden;transition:0.25s ease-in}.standard-layout-11 .section-2{display:flex;height:100%;margin-top:auto;margin-bottom:auto;width:100%;overflow:hidden}.standard-layout-11 .sub-1{background-color:var(--color-0);height:100%;text-align:center;writing-mode:vertical-lr;min-width:6em;display:flex;transition:width 0.25s ease-in}.standard-layout-11 .sub-1 div{font-size:1.25em}.standard-layout-11 .sub-2{display:flex;flex-direction:row}.standard-layout-11 .text:not(.description){text-align:left}.standard-layout-11 .text-wrapper{display:flex;flex-direction:column}.standard-layout-11 .icon{margin:auto;padding:0 1.25em}.standard-layout-11 .description{font-size:1.5em;letter-spacing:1px;margin:auto;color:var(--kup_card_dynamic_color_0)}.standard-layout-11 .title{font-size:2.75em;font-weight:bold;margin-top:auto}.standard-layout-11 .subtitle{font-size:1.5em;opacity:0.75;margin-bottom:auto}.standard-layout-12{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-12 .section-1{display:inline-flex;border-bottom:1px solid var(--kup-border-color);width:100%}.standard-layout-12 .section-1 kup-button{margin:0}.standard-layout-12 .section-2{display:flex;flex-direction:column}.standard-layout-12 .section-2.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-12 .section-2 kup-date-picker:first-of-type,.standard-layout-12 .section-2 kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-12 .section-3{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-12 .section-3 kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-13{background-color:var(--kup-background-color);border-radius:4px;box-sizing:border-box;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);display:flex;flex-direction:column;height:100%;position:relative;width:100%}.standard-layout-13 kup-button{margin-left:0}.standard-layout-13 .section-1{background-color:var(--kup-background-color);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;box-shadow:0px 1px 3px 0px var(--kup-text-color);height:52px;width:100%;text-align:right}.standard-layout-13 .section-1 kup-button{margin-right:0.25em}.standard-layout-13 .section-2{height:100%;width:100%;overflow:auto;max-height:50vh}.standard-layout-13 .text{color:var(--kup-text-color);font-family:var(--kup-font-family-monospace);white-space:nowrap;border-bottom:1px solid var(--kup-border-color);line-height:1.75em}.standard-layout-14{background-color:var(--kup-background-color);box-shadow:0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);color:var(--kup-text-color);min-width:200px;min-width:-moz-max-content;min-width:-webkit-max-content;}.standard-layout-14 .section-1{display:flex;padding:1em}.standard-layout-14 .section-1 .sub-1{width:100%}.standard-layout-14 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-14 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-14 .section-1 .title{--kup-button-font-size:0.75em;font-size:1.25em;margin-top:-0.5em;padding:0 0.25em 0.25em}.standard-layout-14 .section-1 .title .label{cursor:pointer;padding-right:0.25em}.standard-layout-14 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-14 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-14 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-14 .section-1 .info .value{width:100%}.standard-layout-14 .sub-button{display:inline-flex;width:100%}.standard-layout-14 .sub-button kup-button{margin:0}.standard-layout-14 .sub-checkbox{backface-visibility:hidden;display:flex;flex-direction:column;max-height:20vh;overflow:auto}.standard-layout-14 .sub-checkbox kup-checkbox{margin-left:0;margin-right:auto}.standard-layout-14 .sub-formula{padding:0.5em}.standard-layout-14 .sub-chip{max-width:25vw;overflow:auto;box-shadow:0 3px 2px -2px var(--kup-border-color)}.standard-layout-14 .sub-field{display:flex;flex-direction:column}.standard-layout-14 .sub-field.has-content{border-bottom:1px solid var(--kup-border-color);padding:0.5em 0.5em}.standard-layout-14 .sub-field kup-date-picker:first-of-type,.standard-layout-14 .sub-field kup-time-picker:first-of-type{margin-bottom:0.5em}.standard-layout-14 .sub-spinner{height:100px}.standard-layout-14 .sub-autocomplete{padding-top:1em}.standard-layout-14 .sub-autocomplete kup-autocomplete{margin:auto;padding:0.5em 0;width:max-content}.standard-layout-14 .sub-switch{display:flex;justify-content:space-evenly;padding:2em}.standard-layout-14 .sub-tree{max-height:25vh;overflow:auto}.standard-layout-14 #apply{display:none;margin:auto}.standard-layout-14 #apply.visible{display:block}.standard-layout-14 #open-in-new,.standard-layout-14 #search,.standard-layout-14 #new{margin:0;display:inline-flex}.standard-layout-15{background:var(--kup-background-color);border-radius:3px;box-shadow:0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);color:var(--kup-text-color);display:block;font-size:var(--kup-font-size);outline:none}.standard-layout-15 .section-1{--kup-button-font-size:0.75em;box-sizing:border-box;display:flex;padding:1em}.standard-layout-15 .section-1 .sub-1{width:100%}.standard-layout-15 .section-1 .sub-spinner{height:88px;width:88px;margin:0 10px}.standard-layout-15 .section-1 .f-image{margin:0 0.5em 0 0}.standard-layout-15 .section-1 .title{align-items:center;display:flex;font-size:1.25em;font-weight:600;padding:0 0.25em 0.25em;text-align:left}.standard-layout-15 .section-1 .title .label{cursor:pointer;padding-right:0.25em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.standard-layout-15 .section-1 .title .label:hover{text-decoration:underline}.standard-layout-15 .section-1 .info{display:flex;padding:0 0.25em 0.25em;width:100%}.standard-layout-15 .section-1 .info .label{color:rgba(var(--kup-text-color-rgb), 0.75);margin-right:0.75em;min-width:max-content;width:auto}.standard-layout-15 .section-1 .info .value{font-weight:600;width:100%}.standard-layout-15 .section-2{border-top:1px solid var(--kup-border-color);box-sizing:border-box;height:180px;opacity:1;overflow:auto;transition:height 250ms ease-out, opacity 250ms ease-out}.standard-layout-15 .section-2 .info{box-sizing:border-box;height:100%;overflow:auto;padding:1.25em}.standard-layout-15 .section-2 .detail-row{align-items:center;display:flex;justify-content:space-between}.standard-layout-15 .section-2 .detail-row:not(:last-child){margin-bottom:6px}.standard-layout-15 .section-2 .detail-row__label{color:rgba(var(--kup-text-color-rgb), 0.5);margin-top:0.175em;max-width:320px;padding-right:1.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.standard-layout-15 .section-2 .detail-row__value{color:var(--kup-text-color);font-size:105%;font-weight:600;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.standard-layout-15 .section-2 kup-tree{text-align:left}.standard-layout-15 .section-3{border-top:1px solid var(--kup-border-color);display:flex;justify-content:flex-end;padding:6px;padding-top:2px;padding-bottom:2px}.standard-layout-15 .section-3 kup-button{margin:auto 0}.standard-layout-15 #open-in-new,.standard-layout-15 #search,.standard-layout-15 #new{margin:0 0 0.5em 0}:host{--kup_card_ripple_color:var(\n --kup-card-ripple-color,\n var(--kup-primary-color)\n );display:block;font-size:var(--kup-font-size);height:var(--kup_card_height);min-height:var(--kup_card_height);min-width:var(--kup_card_width);outline:none;position:relative;width:var(--kup_card_width)}:host([is-menu]){display:none;animation:fade-in 0.25s ease-out}:host([menu-visible]){box-shadow:var(--kup-box-shadow);display:block}#kup-component{height:100%;width:100%}.mdc-ripple-surface{cursor:pointer;flex-direction:column;display:flex;height:100%;position:relative}.mdc-ripple-surface:before,.mdc-ripple-surface:after{background-color:var(--kup_card_ripple_color)}.card-view{animation:fade-in 0.25s ease-out;display:none;height:100%;width:100%}.card-view.visible{display:block}";
5076
5257
 
5077
5258
  const KupCard = class {
5078
5259
  constructor(hostRef) {
@@ -5260,6 +5441,9 @@ const KupCard = class {
5260
5441
  const method = 'create' + this.layoutNumber;
5261
5442
  try {
5262
5443
  switch (family) {
5444
+ case kupManager.KupCardFamily.BOX: {
5445
+ return boxLayouts[method](this);
5446
+ }
5263
5447
  case kupManager.KupCardFamily.BUILT_IN: {
5264
5448
  return builtInLayouts[method](this);
5265
5449
  }
@@ -7050,6 +7234,7 @@ const KupCombobox = class {
7050
7234
  this.kupItemClick.emit({
7051
7235
  comp: this,
7052
7236
  id: this.rootElement.id,
7237
+ node: e.detail.selected,
7053
7238
  value: this.value,
7054
7239
  inputValue: __classPrivateFieldGet$1(this, _KupCombobox_textfieldEl, "f").value,
7055
7240
  });
@@ -7404,27 +7589,6 @@ class KupColumnMenu {
7404
7589
  : dom.ketchup.language.translate(kupManager.KupLanguageGrouping.ENABLE),
7405
7590
  });
7406
7591
  }
7407
- props.push({
7408
- className: 'printable',
7409
- customStyle: ':host {--kup-font-size: 0.75em;}',
7410
- icon: 'open-in-new',
7411
- id: KupColumnMenuIds.BUTTON_OPEN_IN_NEW,
7412
- title: dom.ketchup.language.translate(kupManager.KupLanguageGeneric.OPEN_IN_NEW_TAB),
7413
- });
7414
- props.push({
7415
- className: 'printable',
7416
- customStyle: ':host {--kup-font-size: 0.75em;}',
7417
- icon: 'search',
7418
- id: KupColumnMenuIds.BUTTON_SEARCH,
7419
- title: dom.ketchup.language.translate(kupManager.KupLanguageGeneric.INFO),
7420
- });
7421
- props.push({
7422
- className: 'printable',
7423
- customStyle: ':host {--kup-font-size: 0.75em;}',
7424
- icon: 'add',
7425
- id: KupColumnMenuIds.BUTTON_NEW,
7426
- title: dom.ketchup.language.translate(kupManager.KupLanguageGeneric.ADD_NEW),
7427
- });
7428
7592
  if (comp.removableColumns) {
7429
7593
  props.push({
7430
7594
  className: 'printable',
@@ -8362,7 +8526,7 @@ const KupDataTable = class {
8362
8526
  'format-color-text',
8363
8527
  'format-font-size-increase',
8364
8528
  ];
8365
- this.DENSITY_DECODES = ['Dense', 'Normal', 'Wide'];
8529
+ this.DENSITY_DECODES = ['Dense', 'Medium', 'Wide'];
8366
8530
  this.DENSITY_ICONS = [
8367
8531
  'format-align-justify',
8368
8532
  'reorder-horizontal',
@@ -8624,6 +8788,30 @@ const KupDataTable = class {
8624
8788
  async collapseAll() {
8625
8789
  this.expandGroups = false;
8626
8790
  }
8791
+ /**
8792
+ * This method will delete rows by id from the data table dataset.
8793
+ * @param {string[]} ids - Array of row ids to delete.
8794
+ * @returns {Promise<Array<KupDataTableRow>>} Deleted rows.
8795
+ */
8796
+ async deleteRows(ids = []) {
8797
+ const deletedRows = [];
8798
+ const newRows = [];
8799
+ for (let index = 0; index < this.data.rows.length; index++) {
8800
+ const row = this.data.rows[index];
8801
+ if (ids.includes(row.id)) {
8802
+ deletedRows.push(row);
8803
+ }
8804
+ else {
8805
+ newRows.push(row);
8806
+ }
8807
+ }
8808
+ if (deletedRows.length > 0) {
8809
+ this.data.rows = newRows;
8810
+ this.recalculateRowsAndUndoSelections();
8811
+ await this.refresh();
8812
+ }
8813
+ return deletedRows;
8814
+ }
8627
8815
  /**
8628
8816
  * Expands all groups.
8629
8817
  */
@@ -8731,6 +8919,49 @@ const KupDataTable = class {
8731
8919
  this.resizeTimeout = window.setTimeout(() => this.refresh(), 300);
8732
8920
  }
8733
8921
  }
8922
+ /**
8923
+ * Sets the cell value in a table cell.
8924
+ * @param {string} columnName - Name of the column.
8925
+ * @param {string} rowId - Id of the row.
8926
+ * @param {string} value - Value to set.
8927
+ */
8928
+ async setCellValue(columnName, rowId, value) {
8929
+ const column = kupManager.getColumnByName(this.data.columns, columnName);
8930
+ if (!column) {
8931
+ return;
8932
+ }
8933
+ const row = this.getRow(rowId);
8934
+ if (!row) {
8935
+ return;
8936
+ }
8937
+ const cell = row.cells[columnName];
8938
+ if (!cell) {
8939
+ return;
8940
+ }
8941
+ cell.value = value;
8942
+ cell.displayedValue = null;
8943
+ if (cell.data) {
8944
+ cell.data.key = new Date().getTime() + column.name;
8945
+ cell.data.initialValue = value;
8946
+ }
8947
+ /*
8948
+ const cells = this.rootElement.shadowRoot.querySelectorAll(
8949
+ 'td[data-column="' + columnName + '"]'
8950
+ );
8951
+ for (let index = 0; cells && index < cells.length; index++) {
8952
+ const cell = cells[index];
8953
+ if (cell['data-row'] && cell['data-row'].id == rowId) {
8954
+ const kupInput = cell.querySelector('.hydrated');
8955
+ if (kupInput) {
8956
+ try {
8957
+ (kupInput as any).setValue(value);
8958
+ } catch (error) {}
8959
+ }
8960
+ break;
8961
+ }
8962
+ }*/
8963
+ this.refresh();
8964
+ }
8734
8965
  /**
8735
8966
  * Sets the focus on an editable table cell.
8736
8967
  * @param {string} column - Name of the column.
@@ -8773,13 +9004,7 @@ const KupDataTable = class {
8773
9004
  this.selectedRows = [];
8774
9005
  for (let index = 0; index < rowsIdentifiers.length; index++) {
8775
9006
  const id = rowsIdentifiers[index];
8776
- if (typeof id === 'number') {
8777
- this.selectedRows.push(this.renderedRows[id]);
8778
- }
8779
- else {
8780
- const row = this.renderedRows.find((row) => row.id === id);
8781
- this.selectedRows.push(row);
8782
- }
9007
+ this.selectedRows.push(this.getRow(id));
8783
9008
  }
8784
9009
  if (emitEvent !== false) {
8785
9010
  this.kupRowSelected.emit({
@@ -8854,6 +9079,20 @@ const KupDataTable = class {
8854
9079
  this.setTransposedData();
8855
9080
  }
8856
9081
  }
9082
+ getRow(id) {
9083
+ if (typeof id === 'number') {
9084
+ return this.data.rows[id];
9085
+ }
9086
+ else {
9087
+ return this.data.rows.find((row) => row.id === id);
9088
+ }
9089
+ }
9090
+ getTransposedData(column) {
9091
+ if (column) {
9092
+ this.filters = {};
9093
+ }
9094
+ return this.kupManager.data.transpose(this.data, column);
9095
+ }
8857
9096
  setTransposedData() {
8858
9097
  // transpose
8859
9098
  this.originalData = Object.assign({}, this.data);
@@ -8989,12 +9228,6 @@ const KupDataTable = class {
8989
9228
  delete column.icon;
8990
9229
  }
8991
9230
  }
8992
- getTransposedData(column) {
8993
- if (column) {
8994
- this.filters = {};
8995
- }
8996
- return this.kupManager.data.transpose(this.data, column);
8997
- }
8998
9231
  updateStickyHeaderSize() {
8999
9232
  const navBar = document.querySelectorAll('.header')[0];
9000
9233
  if (navBar) {
@@ -11044,8 +11277,9 @@ const KupDataTable = class {
11044
11277
  this.kupManager.removeClickCallback(this.clickCbCustomPanel);
11045
11278
  }
11046
11279
  renderPaginator(top) {
11047
- return (index.h("div", { class: "paginator-wrapper" }, index.h("div", { class: "paginator-tabs" }, !this.lazyLoadRows &&
11048
- this.rowsLength > this.rowsPerPage ? (index.h(fPaginatorUtils.FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.rowsLength, perPage: this.currentRowsPerPage
11280
+ return (index.h("div", { class: "paginator-wrapper" }, index.h("div", { class: "paginator-tabs" }, this.showLoadMore ||
11281
+ (!this.lazyLoadRows &&
11282
+ this.rowsLength > this.rowsPerPage) ? (index.h(fPaginatorUtils.FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.rowsLength, perPage: this.currentRowsPerPage
11049
11283
  ? this.currentRowsPerPage
11050
11284
  : this.rowsPerPage, onLoadMore: this.showLoadMore
11051
11285
  ? () => {
@@ -11158,12 +11392,14 @@ const KupDataTable = class {
11158
11392
  value = kupManager.KupLanguageDensity.WIDE;
11159
11393
  break;
11160
11394
  }
11161
- listItems[i] = {
11162
- icon: icons[i],
11163
- id: codes[i],
11164
- selected: selectedCode == codes[i],
11165
- value: this.kupManager.language.translate(value),
11166
- };
11395
+ if (value) {
11396
+ listItems[i] = {
11397
+ icon: icons[i],
11398
+ id: codes[i],
11399
+ selected: selectedCode == codes[i],
11400
+ value: this.kupManager.language.translate(value),
11401
+ };
11402
+ }
11167
11403
  }
11168
11404
  return listItems;
11169
11405
  }
@@ -11194,14 +11430,18 @@ const KupDataTable = class {
11194
11430
  }
11195
11431
  return (index.h("div", { class: "customize-element fontsize-panel" }, index.h("kup-combobox", { isSelect: true, data: data, initialValue: this.kupManager.language.translate(text), "onkup-combobox-itemclick": (e) => {
11196
11432
  e.stopPropagation();
11197
- this.fontsize = this.getFontSizeCodeFromDecode(e.detail.value);
11433
+ this.fontsize = this.getFontSizeCodeFromDecode(e.detail.node.id);
11198
11434
  } })));
11199
11435
  }
11200
11436
  getDensityCodeFromDecode(decode) {
11201
- return this.transcodeItem(decode, this.DENSITY_DECODES, Object.values(kupManager.FCellPadding));
11437
+ return this.transcodeItem(decode, this.DENSITY_DECODES, [
11438
+ 'dense',
11439
+ 'medium',
11440
+ 'wide',
11441
+ ]);
11202
11442
  }
11203
11443
  renderDensityPanel() {
11204
- const listItems = this.createListData(Object.values(kupManager.FCellPadding), this.DENSITY_ICONS, this.density);
11444
+ const listItems = this.createListData(['dense', 'medium', 'wide'], this.DENSITY_ICONS, this.density);
11205
11445
  const listData = { data: listItems, showIcons: true };
11206
11446
  const textfieldData = {
11207
11447
  trailingIcon: true,
@@ -11224,7 +11464,7 @@ const KupDataTable = class {
11224
11464
  }
11225
11465
  return (index.h("div", { class: "customize-element density-panel" }, index.h("kup-combobox", { isSelect: true, initialValue: this.kupManager.language.translate(text), selectMode: ItemsDisplayMode.DESCRIPTION, data: data, "onkup-combobox-itemclick": (e) => {
11226
11466
  e.stopPropagation();
11227
- this.density = this.getDensityCodeFromDecode(e.detail.value);
11467
+ this.density = this.getDensityCodeFromDecode(e.detail.node.id);
11228
11468
  } })));
11229
11469
  }
11230
11470
  getGridCodeFromDecode(decode) {
@@ -13390,17 +13630,23 @@ class imageCanvas {
13390
13630
  return newStartX;
13391
13631
  }
13392
13632
  drawArc(x, radius, color) {
13393
- this.ctx.fillStyle = color.toString();
13633
+ if (color) {
13634
+ this.ctx.fillStyle = color.toString();
13635
+ }
13394
13636
  this.ctx.beginPath();
13395
13637
  this.ctx.arc(x, radius, radius, 0, 2 * Math.PI, true);
13396
13638
  this.ctx.fill();
13397
13639
  }
13398
13640
  drawRect(x, y, width, height, color) {
13399
- this.ctx.fillStyle = color.toString();
13641
+ if (color) {
13642
+ this.ctx.fillStyle = color.toString();
13643
+ }
13400
13644
  this.ctx.fillRect(x, y, width, height);
13401
13645
  }
13402
13646
  drawTri(x1, y1, x2, y2, color) {
13403
- this.ctx.fillStyle = color.toString();
13647
+ if (color) {
13648
+ this.ctx.fillStyle = color.toString();
13649
+ }
13404
13650
  this.ctx.beginPath();
13405
13651
  this.ctx.moveTo(x1, y1);
13406
13652
  this.ctx.lineTo(x2, y2);
@@ -13812,9 +14058,6 @@ const KupList = class {
13812
14058
  }
13813
14059
  }
13814
14060
  /*-------------------------------------------------*/
13815
- /* W a t c h e r s */
13816
- /*-------------------------------------------------*/
13817
- /*-------------------------------------------------*/
13818
14061
  /* P u b l i c M e t h o d s */
13819
14062
  /*-------------------------------------------------*/
13820
14063
  /**
@@ -13871,6 +14114,19 @@ const KupList = class {
13871
14114
  async getProps(descriptions) {
13872
14115
  return kupManager.getProps(this, KupListProps, descriptions);
13873
14116
  }
14117
+ /**
14118
+ * Returns the selected node.
14119
+ * @returns {Promise<KupListNode>} Selected node.
14120
+ */
14121
+ async getSelectedNode() {
14122
+ const nodes = [];
14123
+ this.data.forEach((node) => {
14124
+ if (this.selected.includes(node.id)) {
14125
+ nodes.push(node);
14126
+ }
14127
+ });
14128
+ return nodes;
14129
+ }
13874
14130
  /**
13875
14131
  * This method is used to trigger a new render of the component.
13876
14132
  */
@@ -15132,7 +15388,7 @@ const KupTabBar = class {
15132
15388
  this.data[i].active = false;
15133
15389
  }
15134
15390
  this.data[i].active = true;
15135
- this.value = this.data[i].value;
15391
+ this.value = node.id;
15136
15392
  this.kupClick.emit({
15137
15393
  comp: this,
15138
15394
  id: this.rootElement.id,
@@ -15173,6 +15429,20 @@ const KupTabBar = class {
15173
15429
  async getProps(descriptions) {
15174
15430
  return kupManager.getProps(this, KupTabBarProps, descriptions);
15175
15431
  }
15432
+ /**
15433
+ * Returns the selected node.
15434
+ * @returns {Promise<KupTabBarNode>} Selected node.
15435
+ */
15436
+ async getSelectedNode() {
15437
+ let res = null;
15438
+ this.data.forEach((node) => {
15439
+ console.log(this.value, node);
15440
+ if (node.id === this.value) {
15441
+ res = node;
15442
+ }
15443
+ });
15444
+ return res;
15445
+ }
15176
15446
  /**
15177
15447
  * This method is used to trigger a new render of the component.
15178
15448
  */
@@ -15202,16 +15472,17 @@ const KupTabBar = class {
15202
15472
  }
15203
15473
  if (activeTabs > 1) {
15204
15474
  this.data[lastActiveOccurrence].active = true;
15205
- this.value = this.data[lastActiveOccurrence].value;
15475
+ this.value = this.data[lastActiveOccurrence].id;
15206
15476
  this.kupManager.debug.logMessage(this, 'Too many active tabs, forcing last one.', kupManager.KupDebugCategory.WARNING);
15207
15477
  }
15208
15478
  else if (activeTabs === 0) {
15209
15479
  this.data[0].active = true;
15210
- this.value = this.data[0].value;
15480
+ this.value = this.data[0].id;
15211
15481
  this.kupManager.debug.logMessage(this, 'No active tabs detected, forcing first one.');
15212
15482
  }
15213
15483
  else {
15214
15484
  this.data[lastActiveOccurrence].active = true;
15485
+ this.value = this.data[lastActiveOccurrence].id;
15215
15486
  }
15216
15487
  }
15217
15488
  }
@@ -16290,8 +16561,12 @@ const KupTree = class {
16290
16561
  */
16291
16562
  this.openedTotalMenu = null;
16292
16563
  this.columnMenuAnchor = null;
16293
- this.selectedNodeString = '';
16294
16564
  this.stateSwitcher = false;
16565
+ /**
16566
+ * An array of integers containing the path to a selected child.\
16567
+ * Groups up the properties SelFirst, SelItem, SelName.
16568
+ */
16569
+ this.selectedNode = [];
16295
16570
  /*-------------------------------------------------*/
16296
16571
  /* P r o p s */
16297
16572
  /*-------------------------------------------------*/
@@ -16300,10 +16575,6 @@ const KupTree = class {
16300
16575
  * @default false
16301
16576
  */
16302
16577
  this.asAccordion = false;
16303
- /**
16304
- * Auto select programmatic selectic node
16305
- */
16306
- this.autoSelectionNodeMode = true;
16307
16578
  /**
16308
16579
  * Custom style of the component.
16309
16580
  * @default ""
@@ -16383,11 +16654,6 @@ const KupTree = class {
16383
16654
  * Activates the scroll on hover function.
16384
16655
  */
16385
16656
  this.scrollOnHover = false;
16386
- /**
16387
- * An array of integers containing the path to a selected child.\
16388
- * Groups up the properties SelFirst, SelItem, SelName.
16389
- */
16390
- this.selectedNode = [];
16391
16657
  /**
16392
16658
  * Shows the tree data as a table.
16393
16659
  */
@@ -16432,6 +16698,7 @@ const KupTree = class {
16432
16698
  * Reference to the column menu card.
16433
16699
  */
16434
16700
  this.columnMenuCard = null;
16701
+ this.selectedColumn = '';
16435
16702
  this.clickTimeout = [];
16436
16703
  this.sizedColumns = undefined;
16437
16704
  this.filtersColumnMenuInstance = new fPaginatorUtils.FiltersColumnMenu();
@@ -16497,6 +16764,31 @@ const KupTree = class {
16497
16764
  }
16498
16765
  }
16499
16766
  }
16767
+ /**
16768
+ * This method will get the selected nodes of the component.
16769
+ */
16770
+ async getSelectedNode() {
16771
+ return this.selectedNode;
16772
+ }
16773
+ /**
16774
+ * This method will set the selected rows of the component.
16775
+ * @param {string|number[]} rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows).
16776
+ * @param {boolean} emitEvent - The event will always be emitted unless emitEvent is set to false.
16777
+ */
16778
+ async setSelectedNode(treeNodePath, emitEvent) {
16779
+ this.selectedNode = treeNodePath
16780
+ .split(',')
16781
+ .map((treeNodeIndex) => parseInt(treeNodeIndex));
16782
+ if (emitEvent !== false) {
16783
+ this.kupTreeNodeSelected.emit({
16784
+ comp: this,
16785
+ id: this.rootElement.id,
16786
+ treeNodePath: this.selectedNode,
16787
+ treeNode: this.getTreeNode(this.selectedNode),
16788
+ columnName: this.selectedColumn,
16789
+ });
16790
+ }
16791
+ }
16500
16792
  /*-------------------------------------------------*/
16501
16793
  /* W a t c h e r s */
16502
16794
  /*-------------------------------------------------*/
@@ -16513,11 +16805,6 @@ const KupTree = class {
16513
16805
  this.refreshStructureState();
16514
16806
  }
16515
16807
  }
16516
- selectedNodeToStr(newData) {
16517
- if (Array.isArray(newData)) {
16518
- this.selectedNodeString = newData.toString();
16519
- }
16520
- }
16521
16808
  /*-------------------------------------------------*/
16522
16809
  /* P u b l i c M e t h o d s */
16523
16810
  /*-------------------------------------------------*/
@@ -16789,7 +17076,7 @@ const KupTree = class {
16789
17076
  this.launchNodeEvent(treeNodePath, tn);
16790
17077
  }
16791
17078
  else {
16792
- this.hdlTreeNodeClick(null, tn, this.selectedNodeString, true);
17079
+ this.hdlTreeNodeClick(null, tn, this.selectedNodeToString(this.selectedNode));
16793
17080
  }
16794
17081
  }
16795
17082
  }
@@ -16911,34 +17198,25 @@ const KupTree = class {
16911
17198
  return path;
16912
17199
  }
16913
17200
  // When a TreeNode can be selected
16914
- hdlTreeNodeClick(e, treeNodeData, treeNodePath, auto) {
17201
+ hdlTreeNodeClick(e, treeNodeData, treeNodePath) {
16915
17202
  if (this.expansionMode.toLowerCase() ===
16916
17203
  fPaginatorUtils.KupTreeExpansionMode.DROPDOWN ||
16917
17204
  (this.expansionMode.toLowerCase() === fPaginatorUtils.KupTreeExpansionMode.NODE &&
16918
17205
  !treeNodeData.expandable)) {
16919
- const td = e
16920
- ? this.getEventPath(e.target).find((el) => {
16921
- if (el.tagName === 'TD')
16922
- return el;
16923
- })
16924
- : null;
16925
17206
  // If this TreeNode is not disabled, then it can be selected and an event is emitted
16926
17207
  if (treeNodeData && !treeNodeData.disabled) {
16927
- if (this.autoSelectionNodeMode)
16928
- this.selectedNode = treeNodePath
16929
- .split(',')
16930
- .map((treeNodeIndex) => parseInt(treeNodeIndex));
17208
+ this.selectedNode = treeNodePath
17209
+ .split(',')
17210
+ .map((treeNodeIndex) => parseInt(treeNodeIndex));
16931
17211
  this.kupTreeNodeSelected.emit({
16932
17212
  comp: this,
16933
17213
  id: this.rootElement.id,
16934
- treeNodePath: treeNodePath
16935
- .split(',')
16936
- .map((treeNodeIndex) => parseInt(treeNodeIndex)),
17214
+ treeNodePath: this.selectedNode,
16937
17215
  treeNode: treeNodeData,
16938
- columnName: td ? td.dataset.column : null,
16939
- auto: auto,
17216
+ columnName: this.selectedColumn,
16940
17217
  });
16941
17218
  }
17219
+ this.selectedColumn = '';
16942
17220
  }
16943
17221
  // If KupTreeExpansionMode.NODE then click is a collapse/expand click
16944
17222
  if (this.expansionMode.toLowerCase() === fPaginatorUtils.KupTreeExpansionMode.NODE) {
@@ -17033,9 +17311,9 @@ const KupTree = class {
17033
17311
  hasTotals() {
17034
17312
  return this.totals && Object.keys(this.totals).length > 0;
17035
17313
  }
17036
- handleChildren(TreeNode, expand) {
17037
- for (let index = 0; index < TreeNode.children.length; index++) {
17038
- let node = TreeNode.children[index];
17314
+ handleChildren(treeNode, expand) {
17315
+ for (let index = 0; index < treeNode.children.length; index++) {
17316
+ let node = treeNode.children[index];
17039
17317
  if (!node.disabled) {
17040
17318
  node.isExpanded = expand;
17041
17319
  if (node.children) {
@@ -17053,7 +17331,7 @@ const KupTree = class {
17053
17331
  if (nodePath && nodePath.length) {
17054
17332
  strToRet = nodePath[0].toString();
17055
17333
  for (let i = 1; i < nodePath.length; i++) {
17056
- strToRet += `,${nodePath[0]}`;
17334
+ strToRet += `,${nodePath[i]}`;
17057
17335
  }
17058
17336
  }
17059
17337
  return strToRet;
@@ -17061,6 +17339,21 @@ const KupTree = class {
17061
17339
  getFilterValueForTooltip(column) {
17062
17340
  return this.filtersColumnMenuInstance.getFilterValueForTooltip(this.filters, column);
17063
17341
  }
17342
+ getTreeNode(nodePath) {
17343
+ if (!nodePath || nodePath.length == 0) {
17344
+ return null;
17345
+ }
17346
+ let father = this.data;
17347
+ let node = null;
17348
+ for (let index = 0; index < nodePath.length; index++) {
17349
+ if (node) {
17350
+ father = node.children;
17351
+ }
17352
+ const nodeIndex = nodePath[index];
17353
+ node = father[nodeIndex];
17354
+ }
17355
+ return node;
17356
+ }
17064
17357
  onRemoveFilter(column) {
17065
17358
  const newFilters = Object.assign({}, this.filters);
17066
17359
  this.filtersColumnMenuInstance.removeFilter(newFilters, column.name);
@@ -17110,6 +17403,7 @@ const KupTree = class {
17110
17403
  this.data.forEach((rootNode) => {
17111
17404
  this.expandCollapseAllNodes(rootNode, this.expanded && !this.useDynamicExpansion);
17112
17405
  });
17406
+ this.selectedNode = [];
17113
17407
  }
17114
17408
  }
17115
17409
  createIconElement(CSSClass, icon, iconColor) {
@@ -17273,20 +17567,13 @@ const KupTree = class {
17273
17567
  }
17274
17568
  // When can be expanded OR selected
17275
17569
  if (!treeNodeData.disabled) {
17276
- treeNodeOptions['onClick'] = (e) => {
17277
- // Note: event must be cloned
17278
- // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
17279
- const clone = {};
17280
- for (const key in e) {
17281
- clone[key] = e[key];
17282
- }
17283
- this.clickTimeout.push(setTimeout(() => this.hdlTreeNodeClick(clone, treeNodeData, treeNodePath, false), 300));
17570
+ treeNodeOptions['onClick'] = () => {
17571
+ this.clickTimeout.push(setTimeout((e) => this.hdlTreeNodeClick(e, treeNodeData, treeNodePath), 300));
17284
17572
  };
17285
17573
  }
17286
17574
  // When a tree node is displayed as a table
17287
17575
  let treeNodeCells = null;
17288
17576
  let visibleCols = this.getVisibleColumns();
17289
- !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
17290
17577
  if (this.showColumns && visibleCols && visibleCols.length) {
17291
17578
  treeNodeCells = [];
17292
17579
  // Renders all the cells
@@ -17355,7 +17642,8 @@ const KupTree = class {
17355
17642
  'kup-tree__node--disabled': treeNodeData.disabled,
17356
17643
  'kup-tree__node--first': treeNodeDepth ? false : true,
17357
17644
  'kup-tree__node--selected': !treeNodeData.disabled &&
17358
- treeNodePath === this.selectedNodeString,
17645
+ treeNodePath ===
17646
+ this.selectedNodeToString(this.selectedNode),
17359
17647
  }, "data-row": treeNodeData, "data-tree-path": treeNodePath }, treeNodeOptions), treeNodeCell, treeNodeCells));
17360
17648
  }
17361
17649
  closeTotalMenu() {
@@ -17588,25 +17876,8 @@ const KupTree = class {
17588
17876
  this.kupManager.theme.register(this);
17589
17877
  this.columnMenuInstance = new KupColumnMenu();
17590
17878
  this.refreshStructureState();
17591
- // Initializes the selectedNodeString
17592
- if (Array.isArray(this.selectedNode)) {
17593
- this.selectedNodeString = this.selectedNode.toString();
17594
- }
17595
17879
  }
17596
17880
  componentDidLoad() {
17597
- if (this.selectedNode &&
17598
- this.selectedNode.length > 0 &&
17599
- this.selectedNode[0] >= 0) {
17600
- let path = this.selectedNode;
17601
- let tn = this.data[path[0]];
17602
- if (path.length > 1) {
17603
- path = path.slice(1);
17604
- this.launchNodeEvent(path, tn);
17605
- }
17606
- else {
17607
- this.hdlTreeNodeClick(null, tn, this.selectedNodeString, true);
17608
- }
17609
- }
17610
17881
  this.didLoadInteractables();
17611
17882
  this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
17612
17883
  this.kupManager.resize.observe(this.rootElement);
@@ -17711,8 +17982,7 @@ const KupTree = class {
17711
17982
  get rootElement() { return index.getElement(this); }
17712
17983
  static get watchers() { return {
17713
17984
  "data": ["enrichDataWhenChanged"],
17714
- "expanded": ["enrichStructureStateWhenChanged"],
17715
- "selectedNode": ["selectedNodeToStr"]
17985
+ "expanded": ["enrichStructureStateWhenChanged"]
17716
17986
  }; }
17717
17987
  };
17718
17988
  KupTree.style = kupTreeCss;