@sme.up/ketchup 6.6.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 (192) hide show
  1. package/README.md +7 -1
  2. package/dist/cjs/{f-button-a531feb2.js → f-button-bf76ab95.js} +2 -2
  3. package/dist/cjs/{f-cell-75cb7933.js → f-cell-b7a1524a.js} +21 -21
  4. package/dist/cjs/{f-checkbox-cd977193.js → f-checkbox-1097ca5d.js} +1 -1
  5. package/dist/cjs/{f-chip-9508a2e4.js → f-chip-a5e100b1.js} +3 -3
  6. package/dist/cjs/{f-image-c21cc616.js → f-image-d80a2749.js} +2 -2
  7. package/dist/cjs/{f-paginator-utils-2b72d7e8.js → f-paginator-utils-c70812fe.js} +3 -3
  8. package/dist/cjs/{f-text-field-a5b2bd0e.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 +206 -57
  13. package/dist/cjs/kup-box.cjs.entry.js +11 -10
  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 +4 -4
  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 +8 -8
  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-8e67afec.js → kup-manager-0e38bf48.js} +16 -6
  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/collection-manifest.json +3 -3
  37. package/dist/collection/components/kup-accordion/kup-accordion.js +239 -234
  38. package/dist/collection/components/kup-autocomplete/kup-autocomplete.js +545 -530
  39. package/dist/collection/components/kup-badge/kup-badge.js +176 -170
  40. package/dist/collection/components/kup-box/kup-box.js +889 -907
  41. package/dist/collection/components/kup-button/kup-button.js +379 -370
  42. package/dist/collection/components/kup-button-list/kup-button-list.js +251 -240
  43. package/dist/collection/components/kup-calendar/kup-calendar.js +301 -300
  44. package/dist/collection/components/kup-card/box/kup-card-box.js +7 -24
  45. package/dist/collection/components/kup-card/built-in/kup-card-calendar.js +14 -28
  46. package/dist/collection/components/kup-card/built-in/kup-card-clock.js +6 -19
  47. package/dist/collection/components/kup-card/built-in/kup-card-column-drop-menu.js +1 -2
  48. package/dist/collection/components/kup-card/built-in/kup-card-numeric.js +9 -44
  49. package/dist/collection/components/kup-card/collapsible/kup-card-collapsible.js +2 -21
  50. package/dist/collection/components/kup-card/dialog/kup-card-dialog.js +6 -33
  51. package/dist/collection/components/kup-card/kup-card-helper.js +3 -8
  52. package/dist/collection/components/kup-card/kup-card.css +40 -0
  53. package/dist/collection/components/kup-card/kup-card.js +348 -340
  54. package/dist/collection/components/kup-card/scalable/kup-card-scalable.js +68 -81
  55. package/dist/collection/components/kup-card/standard/kup-card-standard.js +98 -278
  56. package/dist/collection/components/kup-cell/kup-cell.js +221 -216
  57. package/dist/collection/components/kup-chart/kup-chart.js +547 -537
  58. package/dist/collection/components/kup-checkbox/kup-checkbox.js +275 -266
  59. package/dist/collection/components/kup-chip/kup-chip.js +240 -231
  60. package/dist/collection/components/kup-color-picker/kup-color-picker.js +274 -264
  61. package/dist/collection/components/kup-combobox/kup-combobox.js +457 -440
  62. package/dist/collection/components/kup-dash/kup-dash.js +110 -158
  63. package/dist/collection/components/kup-dash-list/kup-dash-list.js +210 -213
  64. package/dist/collection/components/kup-dashboard/kup-dashboard.js +196 -203
  65. package/dist/collection/components/kup-data-table/kup-data-table.js +1917 -1830
  66. package/dist/collection/components/kup-date-picker/kup-date-picker.js +408 -394
  67. package/dist/collection/components/kup-drawer/kup-drawer.js +244 -236
  68. package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js +474 -464
  69. package/dist/collection/components/kup-echart/kup-echart.js +436 -423
  70. package/dist/collection/components/kup-family-tree/kup-family-tree.js +408 -421
  71. package/dist/collection/components/kup-form/kup-form.js +223 -225
  72. package/dist/collection/components/kup-gauge/kup-gauge.js +445 -445
  73. package/dist/collection/components/kup-grid/kup-grid.js +156 -153
  74. package/dist/collection/components/kup-iframe/kup-iframe.js +181 -173
  75. package/dist/collection/components/kup-image/canvas/kup-image-canvas.js +9 -3
  76. package/dist/collection/components/kup-image/kup-image.js +300 -295
  77. package/dist/collection/components/kup-image-list/kup-image-list.js +292 -285
  78. package/dist/collection/components/kup-lazy/kup-lazy.js +253 -253
  79. package/dist/collection/components/kup-list/kup-list.js +541 -504
  80. package/dist/collection/components/kup-magic-box/kup-magic-box.js +145 -145
  81. package/dist/collection/components/kup-nav-bar/kup-nav-bar.js +190 -184
  82. package/dist/collection/components/kup-numeric-picker/kup-numeric-picker.js +490 -478
  83. package/dist/collection/components/kup-photo-frame/kup-photo-frame.js +254 -242
  84. package/dist/collection/components/kup-probe/kup-probe.js +87 -83
  85. package/dist/collection/components/kup-progress-bar/kup-progress-bar.js +237 -241
  86. package/dist/collection/components/kup-qlik/kup-qlik.js +178 -170
  87. package/dist/collection/components/kup-radio/kup-radio.js +258 -255
  88. package/dist/collection/components/kup-rating/kup-rating.js +208 -197
  89. package/dist/collection/components/kup-snackbar/kup-snackbar.js +249 -246
  90. package/dist/collection/components/kup-spinner/kup-spinner.js +274 -269
  91. package/dist/collection/components/kup-switch/kup-switch.js +255 -246
  92. package/dist/collection/components/kup-tab-bar/kup-tab-bar.js +265 -224
  93. package/dist/collection/components/kup-text-field/kup-text-field.js +814 -805
  94. package/dist/collection/components/kup-time-picker/kup-time-picker.js +464 -450
  95. package/dist/collection/components/kup-tree/kup-tree-faker.js +3 -2
  96. package/dist/collection/components/kup-tree/kup-tree.js +1068 -1076
  97. package/dist/collection/f-components/f-button/f-button.js +11 -20
  98. package/dist/collection/f-components/f-cell/f-cell.js +19 -21
  99. package/dist/collection/f-components/f-checkbox/f-checkbox.js +1 -9
  100. package/dist/collection/f-components/f-chip/f-chip.js +18 -31
  101. package/dist/collection/f-components/f-image/f-image.js +1 -3
  102. package/dist/collection/f-components/f-paginator/f-paginator.js +1 -6
  103. package/dist/collection/f-components/f-switch/f-switch.js +1 -8
  104. package/dist/collection/f-components/f-text-field/f-text-field.js +18 -40
  105. package/dist/collection/managers/kup-debug/kup-debug.js +10 -5
  106. package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js +25 -10
  107. package/dist/collection/managers/kup-toolbar/kup-toolbar.js +10 -5
  108. package/dist/collection/managers/kup-tooltip/kup-tooltip.js +10 -5
  109. package/dist/collection/utils/kup-column-menu/kup-column-menu.js +0 -21
  110. package/dist/esm/{f-button-15719ec1.js → f-button-e79f7594.js} +2 -2
  111. package/dist/esm/{f-cell-692c37bf.js → f-cell-9400374e.js} +21 -21
  112. package/dist/esm/{f-checkbox-e06cf07b.js → f-checkbox-b721178e.js} +1 -1
  113. package/dist/esm/{f-chip-abab04bf.js → f-chip-bf740287.js} +3 -3
  114. package/dist/esm/{f-image-98783644.js → f-image-ab3dc8cb.js} +2 -2
  115. package/dist/esm/{f-paginator-utils-d12ee737.js → f-paginator-utils-6909e43b.js} +3 -3
  116. package/dist/esm/{f-text-field-282025dd.js → f-text-field-4841dfea.js} +2 -2
  117. package/dist/esm/{index-e41330a5.js → index-a2197376.js} +423 -252
  118. package/dist/esm/ketchup.js +3 -3
  119. package/dist/esm/kup-accordion.entry.js +3 -3
  120. package/dist/esm/kup-autocomplete_25.entry.js +206 -57
  121. package/dist/esm/kup-box.entry.js +11 -10
  122. package/dist/esm/kup-calendar.entry.js +5 -5
  123. package/dist/esm/kup-cell.entry.js +7 -7
  124. package/dist/esm/kup-dash-list.entry.js +2 -2
  125. package/dist/esm/kup-dash_2.entry.js +2 -2
  126. package/dist/esm/kup-dashboard.entry.js +6 -6
  127. package/dist/esm/kup-drawer.entry.js +2 -2
  128. package/dist/esm/kup-echart.entry.js +2 -2
  129. package/dist/esm/kup-family-tree.entry.js +4 -4
  130. package/dist/esm/kup-form.entry.js +8 -8
  131. package/dist/esm/kup-iframe.entry.js +2 -2
  132. package/dist/esm/kup-image-list.entry.js +8 -8
  133. package/dist/esm/kup-lazy.entry.js +2 -2
  134. package/dist/esm/kup-magic-box.entry.js +3 -3
  135. package/dist/esm/{kup-manager-abbae73e.js → kup-manager-c54e6df5.js} +16 -6
  136. package/dist/esm/kup-nav-bar.entry.js +2 -2
  137. package/dist/esm/kup-numeric-picker.entry.js +3 -3
  138. package/dist/esm/kup-photo-frame.entry.js +2 -2
  139. package/dist/esm/kup-probe.entry.js +2 -2
  140. package/dist/esm/kup-qlik.entry.js +2 -2
  141. package/dist/esm/kup-snackbar.entry.js +4 -4
  142. package/dist/esm/loader.js +3 -3
  143. package/dist/esm/polyfills/css-shim.js +1 -1
  144. package/dist/ketchup/ketchup.esm.js +1 -1
  145. package/dist/ketchup/{p-5933aa02.entry.js → p-182b869e.entry.js} +1 -1
  146. package/dist/ketchup/{p-c05f2638.js → p-1dfd2a51.js} +1 -1
  147. package/dist/ketchup/{p-62f3ec78.entry.js → p-1f5c7f21.entry.js} +1 -1
  148. package/dist/ketchup/p-22ec1ba0.entry.js +9 -0
  149. package/dist/ketchup/{p-5552f156.js → p-23cd5a68.js} +1 -1
  150. package/dist/ketchup/{p-62421bcf.js → p-25bf0cb6.js} +1 -1
  151. package/dist/ketchup/{p-6946b614.entry.js → p-260ff835.entry.js} +1 -1
  152. package/dist/ketchup/{p-ccef2553.entry.js → p-2e184b57.entry.js} +1 -1
  153. package/dist/ketchup/{p-eeadd688.entry.js → p-30a63b85.entry.js} +1 -1
  154. package/dist/ketchup/{p-3760a159.entry.js → p-313e376b.entry.js} +1 -1
  155. package/dist/ketchup/{p-7e16265d.entry.js → p-41620707.entry.js} +1 -1
  156. package/dist/ketchup/{p-5ea2a1ff.entry.js → p-4a0ccf18.entry.js} +1 -1
  157. package/dist/ketchup/{p-6f3040fb.js → p-4f0d3062.js} +1 -1
  158. package/dist/ketchup/p-4fdb684f.js +2 -0
  159. package/dist/ketchup/{p-27538d6f.entry.js → p-53d3ae80.entry.js} +1 -1
  160. package/dist/ketchup/{p-20221a50.js → p-5bea2971.js} +1 -1
  161. package/dist/ketchup/{p-1ef5d16d.entry.js → p-60fa0ccf.entry.js} +1 -1
  162. package/dist/ketchup/p-6333388c.js +1 -0
  163. package/dist/ketchup/{p-725c6268.entry.js → p-6bd57787.entry.js} +1 -1
  164. package/dist/ketchup/p-758d03f4.entry.js +1 -0
  165. package/dist/ketchup/{p-9419919c.entry.js → p-7e7b6127.entry.js} +1 -1
  166. package/dist/ketchup/p-8386e3db.entry.js +1 -0
  167. package/dist/ketchup/{p-a4a30e0e.entry.js → p-859163c2.entry.js} +1 -1
  168. package/dist/ketchup/{p-a450d60a.entry.js → p-8e1fa7a8.entry.js} +1 -1
  169. package/dist/ketchup/{p-29d72040.entry.js → p-90860d9e.entry.js} +1 -1
  170. package/dist/ketchup/{p-d8af7ba6.entry.js → p-b7fdc7aa.entry.js} +1 -1
  171. package/dist/ketchup/{p-7d37ea62.entry.js → p-bffaef6e.entry.js} +1 -1
  172. package/dist/ketchup/{p-3e74e1ed.js → p-c35c5e05.js} +1 -1
  173. package/dist/ketchup/{p-e6ebdb80.js → p-e1d0ea71.js} +1 -1
  174. package/dist/ketchup/{p-fd930a34.entry.js → p-f9d5e553.entry.js} +1 -1
  175. package/dist/ketchup/{p-f6409c42.entry.js → p-fb4d772a.entry.js} +1 -1
  176. package/dist/loader/package.json +1 -0
  177. package/dist/types/components/kup-box/kup-box-declarations.d.ts +3 -0
  178. package/dist/types/components/kup-card/scalable/kup-card-scalable.d.ts +6 -0
  179. package/dist/types/components/kup-data-table/kup-data-table.d.ts +15 -1
  180. package/dist/types/components/kup-list/kup-list.d.ts +5 -0
  181. package/dist/types/components/kup-tab-bar/kup-tab-bar.d.ts +5 -0
  182. package/dist/types/components.d.ts +23 -0
  183. package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations.d.ts +1 -0
  184. package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover.d.ts +2 -1
  185. package/dist/types/stencil-public-runtime.d.ts +15 -4
  186. package/package.json +1 -1
  187. package/CHANGELOG.md +0 -5
  188. package/dist/ketchup/p-1d2dea0a.entry.js +0 -1
  189. package/dist/ketchup/p-680a8cb4.entry.js +0 -9
  190. package/dist/ketchup/p-b0b3989b.js +0 -2
  191. package/dist/ketchup/p-d7a92197.entry.js +0 -1
  192. package/dist/ketchup/p-e07a10fb.js +0 -1
@@ -16,9 +16,7 @@ export const FButton = (props, children) => {
16
16
  (props.styling.toLowerCase() === FButtonStyling.RAISED &&
17
17
  props.icon &&
18
18
  (props.label === null || props.label === undefined)));
19
- return (h("div", Object.assign({ class: `f-button ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
20
- isIconButton ? renderIconButton(props) : renderButton(props),
21
- children));
19
+ return (h("div", Object.assign({ class: `f-button ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), isIconButton ? renderIconButton(props) : renderButton(props), children));
22
20
  };
23
21
  /*-------------------------------------------------*/
24
22
  /* M e t h o d s */
@@ -58,18 +56,15 @@ function renderButton(props) {
58
56
  const styleSpinnerContainer = {
59
57
  '--kup_button_spinner_height': propsFImage.sizeY,
60
58
  };
61
- return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title },
62
- props.trailingIcon
63
- ? [
64
- h("span", { class: classLabelObj }, props.label),
65
- props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
66
- ]
67
- : [
68
- props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
69
- h("span", { class: classLabelObj }, props.label),
70
- ],
71
- props.showSpinner && !props.disabled ? (h("div", { class: "button__spinner-container" },
72
- h("slot", { name: "spinner" }))) : undefined));
59
+ return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title }, props.trailingIcon
60
+ ? [
61
+ h("span", { class: classLabelObj }, props.label),
62
+ props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
63
+ ]
64
+ : [
65
+ props.icon ? h(FImage, Object.assign({}, propsFImage)) : undefined,
66
+ h("span", { class: classLabelObj }, props.label),
67
+ ], props.showSpinner && !props.disabled ? (h("div", { class: "button__spinner-container" }, h("slot", { name: "spinner" }))) : undefined));
73
68
  }
74
69
  function renderIconButton(props) {
75
70
  const propsFImage = {
@@ -93,9 +88,5 @@ function renderIconButton(props) {
93
88
  const iconOff = props.iconOff
94
89
  ? props.iconOff
95
90
  : props.icon + '_border';
96
- return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, value: props.checked ? 'on' : 'off', "aria-label": props.title },
97
- !props.showSpinner || props.disabled ? (h(FImage, Object.assign({}, propsFImage, { resource: props.toggable && !props.checked ? iconOff : props.icon, wrapperClass: `icon-button__icon kup-icon` }))) : null,
98
- props.toggable && !props.showSpinner ? (h(FImage, Object.assign({}, propsFImage, { resource: props.icon, wrapperClass: `icon-button__icon icon-button__icon--on kup-icon` }))) : null,
99
- props.showSpinner && !props.disabled ? (h("div", { class: "icon-button__spinner-container" },
100
- h("slot", { name: "spinner" }))) : undefined));
91
+ return (h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, value: props.checked ? 'on' : 'off', "aria-label": props.title }, !props.showSpinner || props.disabled ? (h(FImage, Object.assign({}, propsFImage, { resource: props.toggable && !props.checked ? iconOff : props.icon, wrapperClass: `icon-button__icon kup-icon` }))) : null, props.toggable && !props.showSpinner ? (h(FImage, Object.assign({}, propsFImage, { resource: props.icon, wrapperClass: `icon-button__icon icon-button__icon--on kup-icon` }))) : null, props.showSpinner && !props.disabled ? (h("div", { class: "icon-button__spinner-container" }, h("slot", { name: "spinner" }))) : undefined));
101
92
  }
@@ -103,10 +103,9 @@ export const FCell = (props, children) => {
103
103
  }
104
104
  return (h("div", { class: classObj, "kup-get-cell-props": () => {
105
105
  return props;
106
- }, style: cell.style },
107
- h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
108
- ? children
109
- : [props.indents, infoEl, icon, content])));
106
+ }, style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
107
+ ? children
108
+ : [props.indents, infoEl, icon, content])));
110
109
  };
111
110
  function setCellSize(cellType, subcomponentProps, cell, props) {
112
111
  switch (cellType) {
@@ -202,24 +201,24 @@ function setCellSizeKup(cellType, subcomponentProps, cell) {
202
201
  function setEditableCell(cellType, classObj, cell, column, props) {
203
202
  switch (cellType) {
204
203
  case FCellTypes.AUTOCOMPLETE:
205
- return (h("kup-autocomplete", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
204
+ return (h("kup-autocomplete", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
206
205
  case FCellTypes.CHECKBOX:
207
206
  if (isAutoCentered(props)) {
208
207
  classObj[FCellClasses.C_CENTERED] = true;
209
208
  }
210
209
  return (h(FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
211
210
  case FCellTypes.COLOR_PICKER:
212
- return (h("kup-color-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
211
+ return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
213
212
  case FCellTypes.COMBOBOX:
214
- return (h("kup-combobox", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
213
+ return (h("kup-combobox", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
215
214
  case FCellTypes.DATE:
216
- return (h("kup-date-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
215
+ return (h("kup-date-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
217
216
  case FCellTypes.RATING:
218
- return (h("kup-rating", Object.assign({}, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
217
+ return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
219
218
  case FCellTypes.SWITCH:
220
219
  return (h(FSwitch, Object.assign({}, cell.data, { disabled: false, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
221
220
  case FCellTypes.TIME:
222
- return (h("kup-time-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
221
+ return (h("kup-time-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
223
222
  case FCellTypes.NUMBER:
224
223
  classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
225
224
  case FCellTypes.STRING:
@@ -287,21 +286,20 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
287
286
  switch (cellType) {
288
287
  case FCellTypes.BAR:
289
288
  if (!subcomponentProps.data) {
290
- return h("kup-image", Object.assign({}, subcomponentProps));
289
+ return (h("kup-image", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
291
290
  }
292
291
  else {
293
292
  const barStyle = {
294
293
  height: subcomponentProps.sizeY,
295
294
  width: '100%',
296
295
  };
297
- return (h("div", { style: barStyle },
298
- h(FImage, Object.assign({}, subcomponentProps))));
296
+ return (h("div", { style: barStyle }, h(FImage, Object.assign({}, subcomponentProps))));
299
297
  }
300
298
  case FCellTypes.BUTTON:
301
299
  if (isAutoCentered(props)) {
302
300
  classObj[FCellClasses.C_CENTERED] = true;
303
301
  }
304
- return (h("kup-button", Object.assign({}, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
302
+ return (h("kup-button", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
305
303
  case FCellTypes.BUTTON_LIST:
306
304
  if (isAutoCentered(props)) {
307
305
  classObj[FCellClasses.C_CENTERED] = true;
@@ -311,29 +309,29 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
311
309
  row: row,
312
310
  column: column,
313
311
  };
314
- return h("kup-button-list", Object.assign({}, subcomponentProps));
312
+ return (h("kup-button-list", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
315
313
  case FCellTypes.CHART:
316
314
  if (isAutoCentered(props)) {
317
315
  classObj[FCellClasses.C_CENTERED] = true;
318
316
  }
319
- return h("kup-chart", Object.assign({}, subcomponentProps));
317
+ return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
320
318
  case FCellTypes.CHIP:
321
319
  return h(FChip, Object.assign({}, subcomponentProps));
322
320
  case FCellTypes.COLOR_PICKER:
323
- return (h("kup-color-picker", Object.assign({}, subcomponentProps, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: true })));
321
+ return (h("kup-color-picker", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { class: isFullWidth(props) ? 'kup-full-width' : '', disabled: true })));
324
322
  case FCellTypes.GAUGE:
325
- return (h("kup-gauge", Object.assign({ value: stringToNumber(cell.value), "width-component": "280px" }, subcomponentProps)));
323
+ return (h("kup-gauge", Object.assign({ key: column.name + props.row.id, value: stringToNumber(cell.value), "width-component": "280px" }, subcomponentProps)));
326
324
  case FCellTypes.KNOB:
327
325
  case FCellTypes.PROGRESS_BAR:
328
- return h("kup-progress-bar", Object.assign({}, subcomponentProps));
326
+ return (h("kup-progress-bar", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
329
327
  case FCellTypes.RADIO:
330
328
  if (isAutoCentered(props)) {
331
329
  classObj[FCellClasses.C_CENTERED] = true;
332
330
  }
333
331
  subcomponentProps['disabled'] = row.readOnly;
334
- return h("kup-radio", Object.assign({}, subcomponentProps));
332
+ return (h("kup-radio", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
335
333
  case FCellTypes.RATING:
336
- return h("kup-rating", Object.assign({}, subcomponentProps, { disabled: true }));
334
+ return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, subcomponentProps, { disabled: true })));
337
335
  }
338
336
  }
339
337
  function cellEvent(e, props, cellType, cellEventName) {
@@ -12,13 +12,5 @@ export const FCheckbox = (props) => {
12
12
  'checkbox--disabled': props.disabled ? true : false,
13
13
  'checkbox--indeterminate': props.indeterminate ? true : false,
14
14
  };
15
- return (h("div", Object.assign({ class: `f-checkbox ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
16
- h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
17
- h("div", { class: classObj },
18
- h("input", Object.assign({ type: "checkbox", class: "checkbox__native-control", checked: props.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus }, indeterminateAttr, { value: props.checked ? 'on' : 'off' })),
19
- h("div", { class: "checkbox__background", onClick: props.onChange },
20
- h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" },
21
- h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
22
- h("div", { class: "checkbox__mixedmark" }))),
23
- props.label ? h("label", null, props.label) : undefined)));
15
+ return (h("div", Object.assign({ class: `f-checkbox ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` }, h("div", { class: classObj }, h("input", Object.assign({ type: "checkbox", class: "checkbox__native-control", checked: props.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus }, indeterminateAttr, { value: props.checked ? 'on' : 'off' })), h("div", { class: "checkbox__background", onClick: props.onChange }, h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" }, h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })), h("div", { class: "checkbox__mixedmark" }))), props.label ? h("label", null, props.label) : undefined)));
24
16
  };
@@ -20,8 +20,7 @@ export const FChip = (props) => {
20
20
  'chip-set--filter': isFilter ? true : false,
21
21
  'chip-set--input': isInput ? true : false,
22
22
  };
23
- return (h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
24
- h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
23
+ return (h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
25
24
  };
26
25
  /*-------------------------------------------------*/
27
26
  /* M e t h o d s */
@@ -40,16 +39,13 @@ function createChipList(props, isChoice, isFilter, isInput) {
40
39
  };
41
40
  chipGroup.push(h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
42
41
  ? 'chip-set__wrapper--hidden-children'
43
- : ''}` },
44
- h("div", { class: "chip-set__indent", style: indentStyle }),
45
- hasChildren ? (h(FImage, { onClick: props.onExpansionClick &&
46
- props.onExpansionClick[i]
47
- ? props.onExpansionClick[i].bind(props.onExpansionClick[i], chip)
48
- : null, resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "18px", sizeY: "18px", title: dom.ketchup.language.translate(KupLanguageGeneric.EXPAND) +
49
- '/' +
50
- dom.ketchup.language.translate(KupLanguageGeneric.COLLAPSE) +
51
- ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (h(FImage, { resource: "blank", sizeX: "18px", sizeY: "18px", wrapperClass: "dropdown-icon" })) : null,
52
- createChip(chip)));
42
+ : ''}` }, h("div", { class: "chip-set__indent", style: indentStyle }), hasChildren ? (h(FImage, { onClick: props.onExpansionClick &&
43
+ props.onExpansionClick[i]
44
+ ? props.onExpansionClick[i].bind(props.onExpansionClick[i], chip)
45
+ : null, resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "18px", sizeY: "18px", title: dom.ketchup.language.translate(KupLanguageGeneric.EXPAND) +
46
+ '/' +
47
+ dom.ketchup.language.translate(KupLanguageGeneric.COLLAPSE) +
48
+ ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (h(FImage, { resource: "blank", sizeX: "18px", sizeY: "18px", wrapperClass: "dropdown-icon" })) : null, createChip(chip)));
53
49
  if (showChildren) {
54
50
  for (let index = 0; index < chip.children.length; index++) {
55
51
  if (chip.children[index]) {
@@ -84,28 +80,19 @@ function createChipList(props, isChoice, isFilter, isInput) {
84
80
  iconEl.push(h(FImage, Object.assign({}, p)));
85
81
  }
86
82
  if (isFilter) {
87
- iconEl.push(h("span", { class: "chip__checkmark" },
88
- h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
89
- h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
83
+ iconEl.push(h("span", { class: "chip__checkmark" }, h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" }, h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
90
84
  }
91
85
  return (h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
92
86
  ? props.onClick[i].bind(props.onClick[i], chip)
93
- : null, role: "row", title: chip.title ? chip.title : '' },
94
- h("span", { class: "chip-set__indent" }),
95
- iconEl,
96
- h("span", { role: "gridcell" },
97
- h("span", { role: "button", tabindex: i, class: "chip__primary-action",
98
- // @ts-ignore
99
- value: chip.id, checked: chip.checked, onBlur: props.onBlur && props.onBlur[i]
100
- ? props.onBlur[i].bind(props.onBlur[i], chip)
101
- : null, onFocus: props.onFocus && props.onFocus[i]
102
- ? props.onFocus[i].bind(props.onFocus[i], chip)
103
- : null },
104
- h("span", { class: "chip__text" }, chip.value))),
105
- isInput ? (h("span", { role: "gridcell" },
106
- h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
107
- ? props.onIconClick[i].bind(props.onIconClick[i], chip)
108
- : null }))) : null));
87
+ : null, role: "row", title: chip.title ? chip.title : '' }, h("span", { class: "chip-set__indent" }), iconEl, h("span", { role: "gridcell" }, h("span", { role: "button", tabindex: i, class: "chip__primary-action",
88
+ // @ts-ignore
89
+ value: chip.id, checked: chip.checked, onBlur: props.onBlur && props.onBlur[i]
90
+ ? props.onBlur[i].bind(props.onBlur[i], chip)
91
+ : null, onFocus: props.onFocus && props.onFocus[i]
92
+ ? props.onFocus[i].bind(props.onFocus[i], chip)
93
+ : null }, h("span", { class: "chip__text" }, chip.value))), isInput ? (h("span", { role: "gridcell" }, h("span", { tabindex: "-1", class: `kup-icon chip__icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
94
+ ? props.onIconClick[i].bind(props.onIconClick[i], chip)
95
+ : null }))) : null));
109
96
  }
110
97
  }
111
98
  return chipList;
@@ -38,9 +38,7 @@ export const FImage = (props) => {
38
38
  badgeCollection.push(h("kup-badge", Object.assign({}, props.badgeData[index])));
39
39
  }
40
40
  }
41
- return (h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ${props.fit ? 'kup-fit' : ''}` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }),
42
- el,
43
- ...badgeCollection));
41
+ return (h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ${props.fit ? 'kup-fit' : ''}` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }), el, ...badgeCollection));
44
42
  };
45
43
  /*-------------------------------------------------*/
46
44
  /* M e t h o d s */
@@ -41,12 +41,7 @@ export const FPaginator = (props) => {
41
41
  min: 1,
42
42
  },
43
43
  };
44
- return (h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
45
- props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, wrapperClass: "prev-page" })) : null,
46
- h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }),
47
- props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, wrapperClass: "next-page" })) : null,
48
- h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }),
49
- props.onLoadMore ? (h(FButton, { icon: "plus", onClick: props.onLoadMore, label: dom.ketchup.language.translate(KupLanguageGeneric.LOAD_MORE), styling: FButtonStyling.FLAT, wrapperClass: "load-more-button" })) : null));
44
+ return (h("div", Object.assign({ class: `f-paginator ${props.mode ? props.mode : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_left", disabled: isPrevPageDisabled(props), onClick: props.onPrevPage, wrapperClass: "prev-page" })) : null, h("kup-combobox", { class: "page-selector", data: dataPageSelector, initialValue: props.currentPage.toString(), "onkup-combobox-change": props.onPageChange }), props.mode !== FPaginatorMode.SIMPLE ? (h(FButton, { icon: "chevron_right", disabled: isNextPageDisabled(props), onClick: props.onNextPage, wrapperClass: "next-page" })) : null, h("kup-combobox", { class: "rows-selector", data: dataRowsSelector, initialValue: props.perPage.toString(), "onkup-combobox-change": props.onRowsChange }), props.onLoadMore ? (h(FButton, { icon: "plus", onClick: props.onLoadMore, label: dom.ketchup.language.translate(KupLanguageGeneric.LOAD_MORE), styling: FButtonStyling.FLAT, wrapperClass: "load-more-button" })) : null));
50
45
  };
51
46
  function getPageItems(props, maxNumberOfPage) {
52
47
  const pageItems = [];
@@ -8,12 +8,5 @@ export const FSwitch = (props) => {
8
8
  'switch--checked': props.checked,
9
9
  'switch--disabled': props.disabled,
10
10
  };
11
- return (h("div", Object.assign({ class: `f-switch ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
12
- h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
13
- h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` },
14
- h("div", { class: "switch__track" }),
15
- h("div", { class: "switch__thumb-underlay" },
16
- h("div", { class: "switch__thumb" },
17
- h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))),
18
- h("label", { onClick: props.onChange }, props.label))));
11
+ return (h("div", Object.assign({ class: `f-switch ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` }, h("div", { class: `switch ${props.checked ? 'switch--checked' : ''} ${props.disabled ? 'switch--disabled' : ''}` }, h("div", { class: "switch__track" }), h("div", { class: "switch__thumb-underlay" }, h("div", { class: "switch__thumb" }, h("input", { type: "checkbox", class: "switch__native-control", role: "switch", checked: props.checked, disabled: props.disabled, value: props.checked ? 'on' : 'off', onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus })))), h("label", { onClick: props.onChange }, props.label))));
19
12
  };
@@ -4,13 +4,11 @@ import { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarati
4
4
  /* C o m p o n e n t */
5
5
  /*-------------------------------------------------*/
6
6
  export const FTextField = (props, children) => {
7
- return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
8
- props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
9
- setContent(props),
10
- setHelper(props),
11
- h("label", null, props.label),
12
- ])) : ([setContent(props), setHelper(props)]),
13
- children));
7
+ return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }), props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
8
+ setContent(props),
9
+ setHelper(props),
10
+ h("label", null, props.label),
11
+ ])) : ([setContent(props), setHelper(props)]), children));
14
12
  };
15
13
  /*-------------------------------------------------*/
16
14
  /* M e t h o d s */
@@ -49,30 +47,17 @@ function setContent(props) {
49
47
  'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
50
48
  'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
51
49
  };
52
- return (h("div", { class: classObj },
53
- props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
54
- "'0 / ' + ",
55
- props.maxLength)) : undefined,
56
- !props.trailingIcon ? iconEl : undefined,
57
- props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
58
- h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
59
- ? props.label
60
- : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onChange: (e) => {
61
- if (props.decimals !== null &&
62
- props.inputType === 'number') {
63
- e.target.value = parseFloat(e.target.value).toFixed(props.decimals);
64
- }
65
- if (props.onChange) {
66
- props.onChange(e);
67
- }
68
- }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
69
- props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
70
- props.trailingIcon ? iconEl : undefined,
71
- !props.fullWidth && !isOutlined ? labelEl : undefined,
72
- isOutlined ? (h("div", { class: "mdc-notched-outline" },
73
- h("div", { class: "mdc-notched-outline__leading" }),
74
- h("div", { class: "mdc-notched-outline__notch" }, labelEl),
75
- h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
50
+ return (h("div", { class: classObj }, props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)) : undefined, !props.trailingIcon ? iconEl : undefined, props.textArea ? (h("span", { class: "mdc-text-field__resizer" }, h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
51
+ ? props.label
52
+ : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onChange: (e) => {
53
+ if (props.decimals !== null &&
54
+ props.inputType === 'number') {
55
+ e.target.value = parseFloat(e.target.value).toFixed(props.decimals);
56
+ }
57
+ if (props.onChange) {
58
+ props.onChange(e);
59
+ }
60
+ }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })), props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined, props.trailingIcon ? iconEl : undefined, !props.fullWidth && !isOutlined ? labelEl : undefined, isOutlined ? (h("div", { class: "mdc-notched-outline" }, h("div", { class: "mdc-notched-outline__leading" }), h("div", { class: "mdc-notched-outline__notch" }, labelEl), h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
76
61
  }
77
62
  function setHelper(props) {
78
63
  if (props.helperEnabled !== false) {
@@ -81,18 +66,11 @@ function setHelper(props) {
81
66
  'mdc-text-field-helper-text': true,
82
67
  'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
83
68
  };
84
- return (h("div", { class: "mdc-text-field-helper-line" },
85
- h("div", { class: classObj }, props.helper),
86
- props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
87
- "'0 / ' + ",
88
- props.maxLength.toString())) : undefined));
69
+ return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: classObj }, props.helper), props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength.toString())) : undefined));
89
70
  }
90
71
  else {
91
72
  if (props.maxLength && !props.textArea) {
92
- return (h("div", { class: "mdc-text-field-helper-line" },
93
- h("div", { class: "mdc-text-field-character-counter" },
94
- "'0 / ' + ",
95
- props.maxLength)));
73
+ return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)));
96
74
  }
97
75
  }
98
76
  }
@@ -1,12 +1,17 @@
1
1
  var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
- if (kind === "m") throw new TypeError("Private method is not writable");
3
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
2
+ if (kind === "m")
3
+ throw new TypeError("Private method is not writable");
4
+ if (kind === "a" && !f)
5
+ throw new TypeError("Private accessor was defined without a setter");
6
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
7
+ throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
8
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
9
  };
7
10
  var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
11
+ if (kind === "a" && !f)
12
+ throw new TypeError("Private accessor was defined without a getter");
13
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
14
+ throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
15
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
16
  };
12
17
  var _KupDebug_debugWidget;
@@ -1,12 +1,17 @@
1
1
  var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
- if (kind === "m") throw new TypeError("Private method is not writable");
3
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
2
+ if (kind === "m")
3
+ throw new TypeError("Private method is not writable");
4
+ if (kind === "a" && !f)
5
+ throw new TypeError("Private accessor was defined without a setter");
6
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
7
+ throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
8
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
9
  };
7
10
  var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
11
+ if (kind === "a" && !f)
12
+ throw new TypeError("Private accessor was defined without a getter");
13
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
14
+ throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
15
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
16
  };
12
17
  var _KupScrollOnHover_instances, _KupScrollOnHover_arrowsContainer, _KupScrollOnHover_leftArrows, _KupScrollOnHover_rightArrows, _KupScrollOnHover_scrollEvent, _KupScrollOnHover_mousemoveEvent, _KupScrollOnHover_mouseleaveEvent, _KupScrollOnHover_rAF, _KupScrollOnHover_timeout, _KupScrollOnHover_initArrows;
@@ -47,8 +52,9 @@ export class KupScrollOnHover {
47
52
  * @param {KupScrollOnHoverElement} el - Element to watch.
48
53
  * @param {boolean} vertical - Enables vertical scroll.
49
54
  * @param {KupScrollOnHoverPercentages} percentages - Sets how big is the area in which the scroll is enabled.
55
+ * @param {number} step - The amount in pixels for each scroll recursion.
50
56
  */
51
- register(el, vertical, percentages) {
57
+ register(el, vertical, percentages, step) {
52
58
  if (!__classPrivateFieldGet(this, _KupScrollOnHover_arrowsContainer, "f")) {
53
59
  __classPrivateFieldGet(this, _KupScrollOnHover_instances, "m", _KupScrollOnHover_initArrows).call(this);
54
60
  }
@@ -60,6 +66,7 @@ export class KupScrollOnHover {
60
66
  ? percentages
61
67
  : { back: 0.1, forward: 0.9 },
62
68
  rect: null,
69
+ step: step,
63
70
  vertical: vertical || null,
64
71
  x: 0,
65
72
  y: 0,
@@ -248,7 +255,9 @@ export class KupScrollOnHover {
248
255
  this.stop(el);
249
256
  return;
250
257
  }
251
- el.scrollTop += this.step;
258
+ el.scrollTop += el.scrollOnHover.step
259
+ ? el.scrollOnHover.step
260
+ : this.step;
252
261
  break;
253
262
  }
254
263
  case ScrollOnHoverDirection.LEFT: {
@@ -257,7 +266,9 @@ export class KupScrollOnHover {
257
266
  this.stop(el);
258
267
  return;
259
268
  }
260
- el.scrollLeft -= this.step;
269
+ el.scrollLeft -= el.scrollOnHover.step
270
+ ? el.scrollOnHover.step
271
+ : this.step;
261
272
  break;
262
273
  }
263
274
  case ScrollOnHoverDirection.RIGHT: {
@@ -266,7 +277,9 @@ export class KupScrollOnHover {
266
277
  this.stop(el);
267
278
  return;
268
279
  }
269
- el.scrollLeft += this.step;
280
+ el.scrollLeft += el.scrollOnHover.step
281
+ ? el.scrollOnHover.step
282
+ : this.step;
270
283
  break;
271
284
  }
272
285
  case ScrollOnHoverDirection.TOP: {
@@ -275,7 +288,9 @@ export class KupScrollOnHover {
275
288
  this.stop(el);
276
289
  return;
277
290
  }
278
- el.scrollTop -= this.step;
291
+ el.scrollTop -= el.scrollOnHover.step
292
+ ? el.scrollOnHover.step
293
+ : this.step;
279
294
  break;
280
295
  }
281
296
  }
@@ -1,12 +1,17 @@
1
1
  var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
- if (kind === "m") throw new TypeError("Private method is not writable");
3
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
2
+ if (kind === "m")
3
+ throw new TypeError("Private method is not writable");
4
+ if (kind === "a" && !f)
5
+ throw new TypeError("Private accessor was defined without a setter");
6
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
7
+ throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
8
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
9
  };
7
10
  var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
11
+ if (kind === "a" && !f)
12
+ throw new TypeError("Private accessor was defined without a getter");
13
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
14
+ throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
15
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
16
  };
12
17
  var _KupToolbar_keyEvent;
@@ -1,12 +1,17 @@
1
1
  var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
2
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
3
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
2
+ if (kind === "a" && !f)
3
+ throw new TypeError("Private accessor was defined without a getter");
4
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
5
+ throw new TypeError("Cannot read private member from an object whose class did not declare it");
4
6
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
5
7
  };
6
8
  var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
7
- if (kind === "m") throw new TypeError("Private method is not writable");
8
- if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
9
- if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
9
+ if (kind === "m")
10
+ throw new TypeError("Private method is not writable");
11
+ if (kind === "a" && !f)
12
+ throw new TypeError("Private accessor was defined without a setter");
13
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
14
+ throw new TypeError("Cannot write private member to an object whose class did not declare it");
10
15
  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
11
16
  };
12
17
  var _KupTooltip_instances, _KupTooltip_clickCb, _KupTooltip_dynPos, _KupTooltip_create, _KupTooltip_setOptions;
@@ -117,27 +117,6 @@ export class KupColumnMenu {
117
117
  : dom.ketchup.language.translate(KupLanguageGrouping.ENABLE),
118
118
  });
119
119
  }
120
- props.push({
121
- className: 'printable',
122
- customStyle: ':host {--kup-font-size: 0.75em;}',
123
- icon: 'open-in-new',
124
- id: KupColumnMenuIds.BUTTON_OPEN_IN_NEW,
125
- title: dom.ketchup.language.translate(KupLanguageGeneric.OPEN_IN_NEW_TAB),
126
- });
127
- props.push({
128
- className: 'printable',
129
- customStyle: ':host {--kup-font-size: 0.75em;}',
130
- icon: 'search',
131
- id: KupColumnMenuIds.BUTTON_SEARCH,
132
- title: dom.ketchup.language.translate(KupLanguageGeneric.INFO),
133
- });
134
- props.push({
135
- className: 'printable',
136
- customStyle: ':host {--kup-font-size: 0.75em;}',
137
- icon: 'add',
138
- id: KupColumnMenuIds.BUTTON_NEW,
139
- title: dom.ketchup.language.translate(KupLanguageGeneric.ADD_NEW),
140
- });
141
120
  if (comp.removableColumns) {
142
121
  props.push({
143
122
  className: 'printable',
@@ -1,6 +1,6 @@
1
- import { h } from './index-e41330a5.js';
1
+ import { h } from './index-a2197376.js';
2
2
  import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
3
- import { F as FImage } from './f-image-98783644.js';
3
+ import { F as FImage } from './f-image-ab3dc8cb.js';
4
4
 
5
5
  /*-------------------------------------------------*/
6
6
  /* C o m p o n e n t */