@sme.up/ketchup 6.6.0 → 6.8.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.
- package/README.md +7 -1
- package/dist/cjs/{f-button-a531feb2.js → f-button-229c63fd.js} +2 -2
- package/dist/cjs/{f-cell-75cb7933.js → f-cell-dd006395.js} +22 -22
- package/dist/cjs/{f-checkbox-cd977193.js → f-checkbox-1097ca5d.js} +1 -1
- package/dist/cjs/{f-chip-9508a2e4.js → f-chip-f2c369fd.js} +3 -3
- package/dist/cjs/{f-image-c21cc616.js → f-image-847a6ddf.js} +2 -2
- package/dist/cjs/{f-paginator-utils-2b72d7e8.js → f-paginator-utils-cedc4b3e.js} +3 -3
- package/dist/cjs/{f-text-field-a5b2bd0e.js → f-text-field-fe85187d.js} +2 -2
- package/dist/cjs/{index-31125378.js → index-ffdb46f6.js} +423 -252
- package/dist/cjs/ketchup.cjs.js +3 -3
- package/dist/cjs/kup-accordion.cjs.entry.js +7 -30
- package/dist/cjs/{kup-autocomplete_25.cjs.entry.js → kup-autocomplete_26.cjs.entry.js} +3925 -4288
- package/dist/cjs/kup-box.cjs.entry.js +33 -113
- package/dist/cjs/kup-calendar.cjs.entry.js +10 -34
- package/dist/cjs/kup-cell.cjs.entry.js +10 -29
- package/dist/cjs/kup-dash-list.cjs.entry.js +10 -9
- package/dist/cjs/kup-dash_2.cjs.entry.js +7 -35
- package/dist/cjs/kup-dashboard.cjs.entry.js +10 -32
- package/dist/cjs/kup-drawer.cjs.entry.js +4 -19
- package/dist/cjs/kup-echart.cjs.entry.js +16 -77
- package/dist/cjs/kup-family-tree.cjs.entry.js +12 -48
- package/dist/cjs/kup-iframe.cjs.entry.js +5 -17
- package/dist/cjs/kup-image-list.cjs.entry.js +16 -34
- package/dist/cjs/kup-lazy.cjs.entry.js +10 -37
- package/dist/cjs/kup-magic-box.cjs.entry.js +6 -25
- package/dist/cjs/{kup-manager-8e67afec.js → kup-manager-c53468cd.js} +82 -7
- package/dist/cjs/kup-nav-bar.cjs.entry.js +4 -16
- package/dist/cjs/kup-numeric-picker.cjs.entry.js +14 -57
- package/dist/cjs/kup-photo-frame.cjs.entry.js +9 -31
- package/dist/cjs/kup-probe.cjs.entry.js +13 -33
- package/dist/cjs/kup-qlik.cjs.entry.js +6 -60
- package/dist/cjs/kup-snackbar.cjs.entry.js +7 -38
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/collection/assets/box.js +9 -6
- package/dist/collection/collection-manifest.json +3 -3
- package/dist/collection/components/kup-accordion/kup-accordion.js +243 -261
- package/dist/collection/components/kup-autocomplete/kup-autocomplete.js +560 -594
- package/dist/collection/components/kup-badge/kup-badge.js +179 -189
- package/dist/collection/components/kup-box/kup-box.js +911 -1010
- package/dist/collection/components/kup-button/kup-button.js +382 -428
- package/dist/collection/components/kup-button-list/kup-button-list.js +254 -278
- package/dist/collection/components/kup-calendar/kup-calendar.js +306 -329
- package/dist/collection/components/kup-card/box/kup-card-box.js +10 -24
- package/dist/collection/components/kup-card/built-in/kup-card-built-in.js +10 -2
- package/dist/collection/components/kup-card/built-in/kup-card-calendar.js +14 -28
- package/dist/collection/components/kup-card/built-in/kup-card-clock.js +6 -19
- package/dist/collection/components/kup-card/built-in/kup-card-column-drop-menu.js +1 -2
- package/dist/collection/components/kup-card/built-in/kup-card-form.js +11 -0
- package/dist/collection/components/kup-card/built-in/kup-card-numeric.js +9 -44
- package/dist/collection/components/kup-card/collapsible/kup-card-collapsible.js +2 -21
- package/dist/collection/components/kup-card/dialog/kup-card-dialog.js +6 -33
- package/dist/collection/components/kup-card/kup-card-helper.js +3 -8
- package/dist/collection/components/kup-card/kup-card.css +118 -12
- package/dist/collection/components/kup-card/kup-card.js +394 -385
- package/dist/collection/components/kup-card/scalable/kup-card-scalable.js +68 -81
- package/dist/collection/components/kup-card/standard/kup-card-standard.js +98 -278
- package/dist/collection/components/kup-cell/kup-cell.js +224 -238
- package/dist/collection/components/kup-chart/kup-chart.js +562 -586
- package/dist/collection/components/kup-checkbox/kup-checkbox.js +278 -304
- package/dist/collection/components/kup-chip/kup-chip.js +243 -250
- package/dist/collection/components/kup-color-picker/kup-color-picker.js +278 -299
- package/dist/collection/components/kup-combobox/kup-combobox.js +467 -482
- package/dist/collection/components/kup-dash/kup-dash.js +112 -172
- package/dist/collection/components/kup-dash-list/kup-dash-list.js +218 -220
- package/dist/collection/components/kup-dashboard/kup-dashboard.js +200 -229
- package/dist/collection/components/kup-data-table/kup-data-table-declarations.js +2 -0
- package/dist/collection/components/kup-data-table/kup-data-table.css +9 -0
- package/dist/collection/components/kup-data-table/kup-data-table.js +4700 -4452
- package/dist/collection/components/kup-date-picker/kup-date-picker.js +415 -429
- package/dist/collection/components/kup-drawer/kup-drawer.js +246 -253
- package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js +486 -527
- package/dist/collection/components/kup-echart/kup-echart.js +450 -498
- package/dist/collection/components/kup-family-tree/kup-family-tree.js +416 -465
- package/dist/collection/components/kup-form/kup-form.js +226 -248
- package/dist/collection/components/kup-gauge/kup-gauge.js +460 -521
- package/dist/collection/components/kup-grid/kup-grid.js +159 -172
- package/dist/collection/components/kup-iframe/kup-iframe.js +184 -188
- package/dist/collection/components/kup-image/canvas/kup-image-canvas.js +9 -3
- package/dist/collection/components/kup-image/kup-image.js +305 -340
- package/dist/collection/components/kup-image-list/kup-image-list.js +300 -311
- package/dist/collection/components/kup-lazy/kup-lazy.js +261 -288
- package/dist/collection/components/kup-list/kup-list.js +546 -572
- package/dist/collection/components/kup-magic-box/kup-magic-box.js +148 -167
- package/dist/collection/components/kup-nav-bar/kup-nav-bar.js +192 -198
- package/dist/collection/components/kup-numeric-picker/kup-numeric-picker.js +501 -532
- package/dist/collection/components/kup-photo-frame/kup-photo-frame.js +261 -271
- package/dist/collection/components/kup-probe/kup-probe.js +98 -114
- package/dist/collection/components/kup-progress-bar/kup-progress-bar.js +240 -276
- package/dist/collection/components/kup-qlik/kup-qlik.js +182 -228
- package/dist/collection/components/kup-radio/kup-radio.js +261 -289
- package/dist/collection/components/kup-rating/kup-rating.js +212 -224
- package/dist/collection/components/kup-snackbar/kup-snackbar.js +252 -280
- package/dist/collection/components/kup-spinner/kup-spinner.js +277 -308
- package/dist/collection/components/kup-switch/kup-switch.js +258 -280
- package/dist/collection/components/kup-tab-bar/kup-tab-bar.js +268 -247
- package/dist/collection/components/kup-text-field/kup-text-field.js +816 -920
- package/dist/collection/components/kup-time-picker/kup-time-picker.js +472 -493
- package/dist/collection/components/kup-tree/kup-tree-faker.js +3 -2
- package/dist/collection/components/kup-tree/kup-tree.js +1107 -1205
- package/dist/collection/f-components/f-button/f-button.js +11 -20
- package/dist/collection/f-components/f-cell/f-cell.js +20 -22
- package/dist/collection/f-components/f-checkbox/f-checkbox.js +1 -9
- package/dist/collection/f-components/f-chip/f-chip.js +18 -31
- package/dist/collection/f-components/f-image/f-image.js +1 -3
- package/dist/collection/f-components/f-paginator/f-paginator.js +1 -6
- package/dist/collection/f-components/f-switch/f-switch.js +1 -8
- package/dist/collection/f-components/f-text-field/f-text-field.js +18 -40
- package/dist/collection/managers/kup-debug/kup-debug.js +10 -5
- package/dist/collection/managers/kup-language/kup-language-declarations.js +6 -0
- package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js +25 -10
- package/dist/collection/managers/kup-toolbar/kup-toolbar.js +10 -5
- package/dist/collection/managers/kup-tooltip/kup-tooltip.js +10 -5
- package/dist/collection/utils/kup-column-menu/kup-column-menu.js +0 -21
- package/dist/esm/{f-button-15719ec1.js → f-button-d1aba968.js} +2 -2
- package/dist/esm/{f-cell-692c37bf.js → f-cell-646406bb.js} +22 -22
- package/dist/esm/{f-checkbox-e06cf07b.js → f-checkbox-b721178e.js} +1 -1
- package/dist/esm/{f-chip-abab04bf.js → f-chip-d94e9e81.js} +3 -3
- package/dist/esm/{f-image-98783644.js → f-image-57c88302.js} +2 -2
- package/dist/esm/{f-paginator-utils-d12ee737.js → f-paginator-utils-2c865e9a.js} +3 -3
- package/dist/esm/{f-text-field-282025dd.js → f-text-field-b0a1fea6.js} +2 -2
- package/dist/esm/{index-e41330a5.js → index-a2197376.js} +423 -252
- package/dist/esm/ketchup.js +3 -3
- package/dist/esm/kup-accordion.entry.js +7 -30
- package/dist/esm/{kup-autocomplete_25.entry.js → kup-autocomplete_26.entry.js} +3925 -4289
- package/dist/esm/kup-box.entry.js +33 -113
- package/dist/esm/kup-calendar.entry.js +10 -34
- package/dist/esm/kup-cell.entry.js +10 -29
- package/dist/esm/kup-dash-list.entry.js +10 -9
- package/dist/esm/kup-dash_2.entry.js +7 -35
- package/dist/esm/kup-dashboard.entry.js +10 -32
- package/dist/esm/kup-drawer.entry.js +4 -19
- package/dist/esm/kup-echart.entry.js +16 -77
- package/dist/esm/kup-family-tree.entry.js +12 -48
- package/dist/esm/kup-iframe.entry.js +5 -17
- package/dist/esm/kup-image-list.entry.js +16 -34
- package/dist/esm/kup-lazy.entry.js +10 -37
- package/dist/esm/kup-magic-box.entry.js +6 -25
- package/dist/esm/{kup-manager-abbae73e.js → kup-manager-c0fbb180.js} +83 -8
- package/dist/esm/kup-nav-bar.entry.js +4 -16
- package/dist/esm/kup-numeric-picker.entry.js +14 -57
- package/dist/esm/kup-photo-frame.entry.js +9 -31
- package/dist/esm/kup-probe.entry.js +13 -33
- package/dist/esm/kup-qlik.entry.js +6 -60
- package/dist/esm/kup-snackbar.entry.js +7 -38
- package/dist/esm/loader.js +3 -3
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/ketchup/ketchup.esm.js +1 -1
- package/dist/ketchup/{p-eeadd688.entry.js → p-1914969e.entry.js} +1 -1
- package/dist/ketchup/{p-5552f156.js → p-23cd5a68.js} +1 -1
- package/dist/ketchup/{p-a4a30e0e.entry.js → p-250118e3.entry.js} +1 -1
- package/dist/ketchup/{p-ccef2553.entry.js → p-30766296.entry.js} +1 -1
- package/dist/ketchup/{p-5933aa02.entry.js → p-351cecba.entry.js} +1 -1
- package/dist/ketchup/p-35e16ea2.entry.js +1 -0
- package/dist/ketchup/{p-e6ebdb80.js → p-395675b8.js} +1 -1
- package/dist/ketchup/p-3cf97e3a.js +1 -0
- package/dist/ketchup/p-4fdb684f.js +2 -0
- package/dist/ketchup/{p-9419919c.entry.js → p-596bdc10.entry.js} +1 -1
- package/dist/ketchup/{p-6f3040fb.js → p-61ff1761.js} +1 -1
- package/dist/ketchup/p-72d4fa26.entry.js +1 -0
- package/dist/ketchup/{p-fd930a34.entry.js → p-738685f9.entry.js} +1 -1
- package/dist/ketchup/{p-f6409c42.entry.js → p-7c8c5444.entry.js} +1 -1
- package/dist/ketchup/p-86154e2b.js +1 -0
- package/dist/ketchup/{p-7e16265d.entry.js → p-9214ef33.entry.js} +1 -1
- package/dist/ketchup/{p-62f3ec78.entry.js → p-980ed953.entry.js} +1 -1
- package/dist/ketchup/p-991bd70d.entry.js +1 -0
- package/dist/ketchup/{p-7d37ea62.entry.js → p-a1fe329f.entry.js} +1 -1
- package/dist/ketchup/p-a740352c.js +30 -0
- package/dist/ketchup/{p-62421bcf.js → p-a992cf87.js} +1 -1
- package/dist/ketchup/{p-3760a159.entry.js → p-b1da1ba7.entry.js} +2 -2
- package/dist/ketchup/{p-5ea2a1ff.entry.js → p-cee3635a.entry.js} +1 -1
- package/dist/ketchup/p-d05ed931.entry.js +9 -0
- package/dist/ketchup/{p-a450d60a.entry.js → p-d422151a.entry.js} +2 -2
- package/dist/ketchup/p-e6f19333.entry.js +1 -0
- package/dist/ketchup/{p-1ef5d16d.entry.js → p-eb10958a.entry.js} +1 -1
- package/dist/ketchup/{p-20221a50.js → p-ecac6269.js} +1 -1
- package/dist/ketchup/p-f43b445e.entry.js +1 -0
- package/dist/ketchup/{p-725c6268.entry.js → p-fa37e92e.entry.js} +1 -1
- package/dist/loader/package.json +1 -0
- package/dist/types/components/kup-box/kup-box-declarations.d.ts +3 -0
- package/dist/types/components/kup-card/built-in/kup-card-built-in.d.ts +7 -2
- package/dist/types/components/kup-card/built-in/kup-card-form.d.ts +3 -0
- package/dist/types/components/kup-card/kup-card-declarations.d.ts +11 -1
- package/dist/types/components/kup-card/kup-card.d.ts +5 -0
- package/dist/types/components/kup-card/scalable/kup-card-scalable.d.ts +6 -0
- package/dist/types/components/kup-data-table/kup-data-table-declarations.d.ts +9 -0
- package/dist/types/components/kup-data-table/kup-data-table.d.ts +54 -201
- package/dist/types/components/kup-list/kup-list.d.ts +5 -0
- package/dist/types/components/kup-tab-bar/kup-tab-bar.d.ts +5 -0
- package/dist/types/components/kup-tree/kup-tree.d.ts +0 -1
- package/dist/types/components.d.ts +78 -2
- package/dist/types/managers/kup-data/kup-data-declarations.d.ts +1 -0
- package/dist/types/managers/kup-language/kup-language-declarations.d.ts +7 -1
- package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations.d.ts +1 -0
- package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover.d.ts +2 -1
- package/dist/types/managers/kup-theme/kup-theme-declarations.d.ts +1 -0
- package/dist/types/stencil-public-runtime.d.ts +20 -4
- package/package.json +2 -2
- package/CHANGELOG.md +0 -5
- package/dist/cjs/kup-form.cjs.entry.js +0 -486
- package/dist/esm/kup-form.entry.js +0 -482
- package/dist/ketchup/p-1d2dea0a.entry.js +0 -1
- package/dist/ketchup/p-27538d6f.entry.js +0 -1
- package/dist/ketchup/p-29d72040.entry.js +0 -1
- package/dist/ketchup/p-3e74e1ed.js +0 -1
- package/dist/ketchup/p-680a8cb4.entry.js +0 -9
- package/dist/ketchup/p-6946b614.entry.js +0 -1
- package/dist/ketchup/p-b0b3989b.js +0 -2
- package/dist/ketchup/p-c05f2638.js +0 -30
- package/dist/ketchup/p-d7a92197.entry.js +0 -1
- package/dist/ketchup/p-d8af7ba6.entry.js +0 -1
- 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
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
:
|
|
68
|
-
|
|
69
|
-
|
|
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
|
}
|
|
@@ -25,7 +25,7 @@ export const FCell = (props, children) => {
|
|
|
25
25
|
? column.shape
|
|
26
26
|
: null;
|
|
27
27
|
const hasObj = !dom.ketchup.objects.isEmptyKupObj(cell.obj);
|
|
28
|
-
const isEditable = cell.isEditable && props.editable ? true : false;
|
|
28
|
+
const isEditable = (cell.isEditable || column.isEditable) && props.editable ? true : false;
|
|
29
29
|
const valueToDisplay = props.previousValue !== cell.value ? cell.value : '';
|
|
30
30
|
const cellType = dom.ketchup.data.cell.getType(cell, shape);
|
|
31
31
|
const subcomponentProps = Object.assign({}, cell.data);
|
|
@@ -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
|
-
|
|
108
|
-
|
|
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
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
|
|
54
|
-
|
|
55
|
-
props.
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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")
|
|
3
|
-
|
|
4
|
-
if (
|
|
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)
|
|
9
|
-
|
|
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;
|
|
@@ -91,10 +91,14 @@ export var KupLanguageFontsize;
|
|
|
91
91
|
*/
|
|
92
92
|
export var KupLanguageGeneric;
|
|
93
93
|
(function (KupLanguageGeneric) {
|
|
94
|
+
KupLanguageGeneric["ABORT"] = "genericAbort";
|
|
94
95
|
KupLanguageGeneric["ADD_NEW"] = "genericAddNew";
|
|
95
96
|
KupLanguageGeneric["APPLY"] = "genericApply";
|
|
96
97
|
KupLanguageGeneric["BACK"] = "genericBack";
|
|
97
98
|
KupLanguageGeneric["COLLAPSE"] = "genericCollapse";
|
|
99
|
+
KupLanguageGeneric["CONFIRM"] = "genericConfirm";
|
|
100
|
+
KupLanguageGeneric["CONFIRM_DELETE"] = "genericConfirmDelete";
|
|
101
|
+
KupLanguageGeneric["CONFIRM_DELETE_X_ROWS"] = "genericConfirmDeleteXRows";
|
|
98
102
|
KupLanguageGeneric["DAY"] = "genericDay";
|
|
99
103
|
KupLanguageGeneric["DRAG_AND_DROP"] = "genericDragAndDrop";
|
|
100
104
|
KupLanguageGeneric["DROP_YOUR_DATA"] = "genericDropYourData";
|
|
@@ -115,6 +119,7 @@ export var KupLanguageGeneric;
|
|
|
115
119
|
KupLanguageGeneric["MONTH"] = "genericMonth";
|
|
116
120
|
KupLanguageGeneric["MOVE"] = "genericMove";
|
|
117
121
|
KupLanguageGeneric["NEXT"] = "genericNext";
|
|
122
|
+
KupLanguageGeneric["NO"] = "genericNo";
|
|
118
123
|
KupLanguageGeneric["OPEN_NAVIGATION_MENU"] = "genericOpenNavigationMenu";
|
|
119
124
|
KupLanguageGeneric["OPEN_IN_NEW_TAB"] = "genericOpenInNewTab";
|
|
120
125
|
KupLanguageGeneric["OPEN_IN_NEW_WINDOW"] = "genericOpenInNewWindow";
|
|
@@ -133,6 +138,7 @@ export var KupLanguageGeneric;
|
|
|
133
138
|
KupLanguageGeneric["TRANSPOSE_DATA"] = "genericTransposeData";
|
|
134
139
|
KupLanguageGeneric["VIEW_AS"] = "genericViewAs";
|
|
135
140
|
KupLanguageGeneric["WEEK"] = "genericWeek";
|
|
141
|
+
KupLanguageGeneric["YES"] = "genericYes";
|
|
136
142
|
})(KupLanguageGeneric || (KupLanguageGeneric = {}));
|
|
137
143
|
/**
|
|
138
144
|
* Grid decodes (data table customization settings).
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
-
if (kind === "m")
|
|
3
|
-
|
|
4
|
-
if (
|
|
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)
|
|
9
|
-
|
|
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 +=
|
|
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 -=
|
|
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 +=
|
|
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 -=
|
|
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")
|
|
3
|
-
|
|
4
|
-
if (
|
|
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)
|
|
9
|
-
|
|
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)
|
|
3
|
-
|
|
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")
|
|
8
|
-
|
|
9
|
-
if (
|
|
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;
|