@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.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/dist/cjs/{f-button-ac179257.js → f-button-94cb5f35.js} +4 -4
- package/dist/cjs/f-cell-76830a0d.js +416 -0
- package/dist/cjs/f-checkbox-cd977193.js +29 -0
- package/dist/cjs/{f-chip-b00897d7.js → f-chip-68d45fd3.js} +3 -3
- package/dist/cjs/{f-image-89f25556.js → f-image-0e71df7e.js} +2 -2
- package/dist/cjs/{f-paginator-utils-8fa501b3.js → f-paginator-utils-46689c0a.js} +80 -403
- package/dist/cjs/{f-text-field-e1e45ade.js → f-text-field-b4229cef.js} +11 -3
- package/dist/cjs/{index-eb556444.js → index-31125378.js} +15 -8
- package/dist/cjs/ketchup.cjs.js +3 -3
- package/dist/cjs/kup-accordion.cjs.entry.js +5 -6
- package/dist/cjs/kup-autocomplete_25.cjs.entry.js +331 -299
- package/dist/cjs/kup-box.cjs.entry.js +1304 -0
- package/dist/cjs/kup-calendar.cjs.entry.js +9 -11
- package/dist/cjs/kup-cell.cjs.entry.js +10 -11
- package/dist/cjs/kup-dash-list.cjs.entry.js +5 -7
- package/dist/cjs/kup-dash_2.cjs.entry.js +5 -9
- package/dist/cjs/kup-dashboard.cjs.entry.js +438 -0
- package/dist/cjs/kup-drawer.cjs.entry.js +5 -6
- package/dist/cjs/{kup-box_2.cjs.entry.js → kup-echart.cjs.entry.js} +66 -1353
- package/dist/cjs/kup-family-tree.cjs.entry.js +486 -0
- package/dist/cjs/kup-form.cjs.entry.js +478 -0
- package/dist/cjs/kup-iframe.cjs.entry.js +4 -5
- package/dist/cjs/kup-image-list.cjs.entry.js +73 -13
- package/dist/cjs/kup-lazy.cjs.entry.js +5 -6
- package/dist/cjs/kup-magic-box.cjs.entry.js +5 -6
- package/dist/cjs/{kup-manager-7a941909.js → kup-manager-7c514a30.js} +1787 -356
- package/dist/cjs/kup-nav-bar.cjs.entry.js +4 -5
- package/dist/cjs/kup-numeric-picker.cjs.entry.js +3 -3
- package/dist/cjs/kup-photo-frame.cjs.entry.js +6 -7
- package/dist/cjs/kup-probe.cjs.entry.js +2 -2
- package/dist/cjs/kup-qlik.cjs.entry.js +2 -2
- package/dist/cjs/kup-snackbar.cjs.entry.js +6 -7
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/collection/assets/dashboard.js +161 -0
- package/dist/collection/assets/data-table.js +59 -0
- package/dist/collection/assets/family-tree.js +2654 -0
- package/dist/collection/assets/form.js +433 -0
- package/dist/collection/assets/grid.js +17 -0
- package/dist/collection/assets/index.js +18 -6
- package/dist/collection/assets/kupinteract.js +68 -0
- package/dist/collection/collection-manifest.json +8 -7
- package/dist/collection/components/kup-autocomplete/kup-autocomplete.js +135 -129
- package/dist/collection/components/kup-box/kup-box.js +13 -2
- package/dist/collection/components/kup-button/kup-button.js +1 -0
- package/dist/collection/components/kup-combobox/kup-combobox.js +16 -13
- package/dist/collection/components/kup-dashboard/kup-dashboard-declarations.js +10 -0
- package/dist/collection/components/{kup-form-editor/kup-form-editor.css → kup-dashboard/kup-dashboard.css} +14 -6
- package/dist/collection/components/{kup-form-editor/kup-form-editor.js → kup-dashboard/kup-dashboard.js} +211 -152
- package/dist/collection/components/kup-data-table/kup-data-table-helper.js +42 -30
- package/dist/collection/components/kup-data-table/kup-data-table-state.js +1 -1
- package/dist/collection/components/kup-data-table/kup-data-table.js +7 -6
- package/dist/collection/components/kup-drawer/kup-drawer.css +5 -8
- package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js +1 -0
- package/dist/collection/components/kup-echart/kup-echart.js +9 -9
- package/dist/collection/components/kup-family-tree/kup-family-tree-declarations.js +14 -0
- package/dist/collection/components/kup-family-tree/kup-family-tree.css +171 -0
- package/dist/collection/components/kup-family-tree/kup-family-tree.js +854 -0
- package/dist/collection/components/kup-form/kup-form-declarations.js +25 -0
- package/dist/collection/components/kup-form/kup-form.css +99 -0
- package/dist/collection/components/kup-form/kup-form.js +647 -0
- package/dist/collection/components/kup-grid/kup-grid.js +1 -4
- package/dist/collection/components/kup-image-list/kup-image-list-state.js +9 -0
- package/dist/collection/components/kup-image-list/kup-image-list.css +0 -6
- package/dist/collection/components/kup-image-list/kup-image-list.js +113 -1
- package/dist/collection/components/kup-lazy/kup-lazy.css +13 -6
- package/dist/collection/components/kup-list/kup-list-helper.js +9 -3
- package/dist/collection/components/kup-photo-frame/kup-photo-frame.css +13 -3
- package/dist/collection/components/kup-photo-frame/kup-photo-frame.js +1 -1
- package/dist/collection/components/kup-text-field/kup-text-field-declarations.js +4 -0
- package/dist/collection/components/kup-text-field/kup-text-field.js +54 -0
- package/dist/collection/components/kup-time-picker/kup-time-picker.js +0 -6
- package/dist/collection/components/kup-tree/kup-tree.js +26 -9
- package/dist/collection/f-components/f-button/f-button.js +2 -2
- package/dist/collection/f-components/f-cell/f-cell-declarations.js +5 -1
- package/dist/collection/f-components/f-cell/f-cell.js +34 -114
- package/dist/collection/f-components/f-text-field/f-text-field.js +9 -1
- package/dist/collection/managers/kup-data/kup-data-cell-helper.js +48 -15
- package/dist/collection/managers/kup-data/kup-data-node-helper.js +69 -0
- package/dist/collection/managers/kup-data/kup-data.js +114 -6
- package/dist/collection/managers/kup-interact/kup-interact.js +3 -5
- package/dist/collection/managers/kup-language/kup-language-declarations.js +11 -0
- package/dist/collection/managers/kup-objects/kup-objects.js +10 -0
- package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations.js +2 -0
- package/dist/collection/managers/kup-scroll-on-hover/kup-scroll-on-hover.js +131 -45
- package/dist/collection/managers/kup-theme/kup-theme-declarations.js +20 -3
- package/dist/collection/types/GenericTypes.js +3 -2
- package/dist/collection/utils/filters/filters-rows.js +4 -23
- package/dist/collection/utils/filters/filters-tree-items.js +2 -1
- package/dist/esm/{f-button-871a544b.js → f-button-cd948e50.js} +4 -4
- package/dist/esm/{f-cell-521ef17a.js → f-cell-474dd282.js} +46 -283
- package/dist/esm/f-checkbox-e06cf07b.js +27 -0
- package/dist/esm/{f-chip-1dda722f.js → f-chip-d6f2eb94.js} +3 -3
- package/dist/esm/{f-image-c468d8ae.js → f-image-914a03ef.js} +2 -2
- package/dist/esm/{f-paginator-utils-7dff8ff0.js → f-paginator-utils-a4a52732.js} +44 -366
- package/dist/esm/{f-text-field-d6c61c73.js → f-text-field-76341fe3.js} +11 -3
- package/dist/esm/{index-baeab1ac.js → index-e41330a5.js} +15 -8
- package/dist/esm/ketchup.js +3 -3
- package/dist/esm/kup-accordion.entry.js +3 -4
- package/dist/esm/kup-autocomplete_25.entry.js +222 -190
- package/dist/esm/kup-box.entry.js +1300 -0
- package/dist/esm/kup-calendar.entry.js +5 -7
- package/dist/esm/kup-cell.entry.js +7 -8
- package/dist/esm/kup-dash-list.entry.js +2 -4
- package/dist/esm/kup-dash_2.entry.js +3 -7
- package/dist/esm/kup-dashboard.entry.js +434 -0
- package/dist/esm/kup-drawer.entry.js +3 -4
- package/dist/esm/{kup-box_2.entry.js → kup-echart.entry.js} +61 -1347
- package/dist/esm/kup-family-tree.entry.js +482 -0
- package/dist/esm/kup-form.entry.js +474 -0
- package/dist/esm/kup-iframe.entry.js +2 -3
- package/dist/esm/kup-image-list.entry.js +70 -10
- package/dist/esm/kup-lazy.entry.js +3 -4
- package/dist/esm/kup-magic-box.entry.js +3 -4
- package/dist/esm/{kup-manager-58b075b4.js → kup-manager-86f440c7.js} +1762 -357
- package/dist/esm/kup-nav-bar.entry.js +2 -3
- package/dist/esm/kup-numeric-picker.entry.js +3 -3
- package/dist/esm/kup-photo-frame.entry.js +4 -5
- package/dist/esm/kup-probe.entry.js +2 -2
- package/dist/esm/kup-qlik.entry.js +2 -2
- package/dist/esm/kup-snackbar.entry.js +4 -5
- package/dist/esm/loader.js +3 -3
- package/dist/ketchup/ketchup.esm.js +1 -1
- package/dist/ketchup/p-00e1133d.entry.js +9 -0
- package/dist/ketchup/p-066f344a.entry.js +1 -0
- package/dist/ketchup/p-0c6e0647.entry.js +1 -0
- package/dist/ketchup/p-151f7c17.entry.js +27 -0
- package/dist/ketchup/p-1e9c03b0.entry.js +1 -0
- package/dist/ketchup/p-21ea11cb.js +30 -0
- package/dist/ketchup/{p-fac1a08b.entry.js → p-2f4e6c50.entry.js} +1 -1
- package/dist/ketchup/p-3586f59c.js +1 -0
- package/dist/ketchup/p-359fd90d.entry.js +1 -0
- package/dist/ketchup/p-389fd0bf.js +1 -0
- package/dist/ketchup/p-5552f156.js +1 -0
- package/dist/ketchup/{p-f09f2f98.entry.js → p-77aff9c1.entry.js} +1 -1
- package/dist/ketchup/p-7cfdf53c.entry.js +39 -0
- package/dist/ketchup/p-853a5178.entry.js +1 -0
- package/dist/ketchup/{p-44ec4f03.js → p-8673bd4e.js} +1 -1
- package/dist/ketchup/p-8b55b786.entry.js +1 -0
- package/dist/ketchup/p-95f5834b.entry.js +1 -0
- package/dist/ketchup/p-a2c595c4.js +1 -0
- package/dist/ketchup/p-ae91f27e.entry.js +1 -0
- package/dist/ketchup/p-af664379.js +1 -0
- package/dist/ketchup/p-b0b3989b.js +2 -0
- package/dist/ketchup/p-b3b65a61.entry.js +1 -0
- package/dist/ketchup/p-bc306a53.entry.js +1 -0
- package/dist/ketchup/{p-f71a1675.entry.js → p-c3783b77.entry.js} +1 -1
- package/dist/ketchup/{p-7eff4eee.js → p-cd4fc3fb.js} +1 -1
- package/dist/ketchup/p-cee76b14.entry.js +1 -0
- package/dist/ketchup/p-cfaea29b.entry.js +1 -0
- package/dist/ketchup/p-d2f51e7b.entry.js +1 -0
- package/dist/ketchup/p-df8e6a4d.entry.js +1 -0
- package/dist/ketchup/p-e60a1170.entry.js +1 -0
- package/dist/ketchup/p-e9a1ba04.entry.js +1 -0
- package/dist/types/components/kup-autocomplete/kup-autocomplete.d.ts +1 -16
- package/dist/types/components/{kup-form-editor/kup-form-editor-declarations.d.ts → kup-dashboard/kup-dashboard-declarations.d.ts} +9 -27
- package/dist/types/components/{kup-form-editor/kup-form-editor.d.ts → kup-dashboard/kup-dashboard.d.ts} +17 -9
- package/dist/types/components/kup-data-table/kup-data-table-state.d.ts +1 -1
- package/dist/types/components/kup-family-tree/kup-family-tree-declarations.d.ts +37 -0
- package/dist/types/components/kup-family-tree/kup-family-tree.d.ts +82 -0
- package/dist/types/components/kup-form/kup-form-declarations.d.ts +60 -0
- package/dist/types/components/kup-form/kup-form.d.ts +63 -0
- package/dist/types/components/kup-image-list/kup-image-list-state.d.ts +6 -0
- package/dist/types/components/kup-image-list/kup-image-list.d.ts +17 -0
- package/dist/types/components/kup-text-field/kup-text-field-declarations.d.ts +4 -0
- package/dist/types/components/kup-text-field/kup-text-field.d.ts +10 -0
- package/dist/types/components/kup-time-picker/kup-time-picker.d.ts +0 -6
- package/dist/types/components/kup-tree/kup-tree-declarations.d.ts +2 -0
- package/dist/types/components/kup-tree/kup-tree.d.ts +0 -1
- package/dist/types/components.d.ts +492 -231
- package/dist/types/f-components/f-cell/f-cell-declarations.d.ts +4 -1
- package/dist/types/f-components/f-text-field/f-text-field-declarations.d.ts +2 -0
- package/dist/types/managers/kup-data/kup-data-cell-helper.d.ts +13 -6
- package/dist/types/managers/kup-data/kup-data-declarations.d.ts +8 -0
- package/dist/types/managers/kup-data/kup-data-node-helper.d.ts +15 -1
- package/dist/types/managers/kup-data/kup-data.d.ts +9 -2
- package/dist/types/managers/kup-language/kup-language-declarations.d.ts +11 -1
- package/dist/types/managers/kup-objects/kup-objects.d.ts +6 -0
- package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover-declarations.d.ts +9 -1
- package/dist/types/managers/kup-scroll-on-hover/kup-scroll-on-hover.d.ts +7 -5
- package/dist/types/types/GenericTypes.d.ts +3 -2
- package/dist/types/utils/filters/filters-rows.d.ts +0 -2
- package/package.json +2 -2
- package/dist/cjs/cell-utils-a78d6fac.js +0 -168
- package/dist/cjs/f-cell-69294bca.js +0 -653
- package/dist/cjs/kup-field.cjs.entry.js +0 -241
- package/dist/cjs/kup-form-editor.cjs.entry.js +0 -404
- package/dist/cjs/utils-6287d878.js +0 -447
- package/dist/collection/assets/form-editor.js +0 -338
- package/dist/collection/components/kup-field/kup-field-declarations.js +0 -15
- package/dist/collection/components/kup-field/kup-field.css +0 -48
- package/dist/collection/components/kup-field/kup-field.js +0 -514
- package/dist/collection/components/kup-form-editor/kup-form-editor-declarations.js +0 -23
- package/dist/esm/cell-utils-964da6b5.js +0 -160
- package/dist/esm/kup-field.entry.js +0 -237
- package/dist/esm/kup-form-editor.entry.js +0 -400
- package/dist/esm/utils-d7e4b3c2.js +0 -428
- package/dist/ketchup/p-1ae66cc5.js +0 -1
- package/dist/ketchup/p-34b74425.js +0 -1
- package/dist/ketchup/p-3c11e615.entry.js +0 -1
- package/dist/ketchup/p-4ffbc3ff.js +0 -1
- package/dist/ketchup/p-5264a3e6.entry.js +0 -1
- package/dist/ketchup/p-65974e48.entry.js +0 -1
- package/dist/ketchup/p-65b46587.entry.js +0 -40
- package/dist/ketchup/p-6dff70f8.entry.js +0 -1
- package/dist/ketchup/p-7454cb92.js +0 -1
- package/dist/ketchup/p-80968627.entry.js +0 -1
- package/dist/ketchup/p-8cdf61a4.js +0 -1
- package/dist/ketchup/p-954cc340.entry.js +0 -1
- package/dist/ketchup/p-976244f9.entry.js +0 -9
- package/dist/ketchup/p-99e0d768.entry.js +0 -1
- package/dist/ketchup/p-a0f6e25c.entry.js +0 -1
- package/dist/ketchup/p-a615a92b.entry.js +0 -1
- package/dist/ketchup/p-aca0e54b.js +0 -30
- package/dist/ketchup/p-b8939a8b.entry.js +0 -1
- package/dist/ketchup/p-bfc3bac7.js +0 -1
- package/dist/ketchup/p-c5ce8951.entry.js +0 -1
- package/dist/ketchup/p-d2ee56dd.entry.js +0 -1
- package/dist/ketchup/p-db71436b.entry.js +0 -27
- package/dist/ketchup/p-e0035c58.js +0 -1
- package/dist/ketchup/p-e1039cf2.entry.js +0 -1
- package/dist/ketchup/p-ea10176c.entry.js +0 -1
- package/dist/types/components/kup-field/kup-field-declarations.d.ts +0 -25
- package/dist/types/components/kup-field/kup-field.d.ts +0 -90
|
@@ -1,241 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-eb556444.js');
|
|
6
|
-
const kupManager = require('./kup-manager-7a941909.js');
|
|
7
|
-
const GenericVariables = require('./GenericVariables-a9ed17ee.js');
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Props of the kup-field component.
|
|
11
|
-
* Used to export every prop in an object.
|
|
12
|
-
*/
|
|
13
|
-
var KupFieldProps;
|
|
14
|
-
(function (KupFieldProps) {
|
|
15
|
-
KupFieldProps["customStyle"] = "Custom style of the component.";
|
|
16
|
-
KupFieldProps["data"] = "Effective data to pass to the component.";
|
|
17
|
-
KupFieldProps["label"] = "The text of the label. If set to empty or has only white space chars, the label will be removed.";
|
|
18
|
-
KupFieldProps["labelPos"] = "Sets the label's position, left right or top.";
|
|
19
|
-
KupFieldProps["showSubmit"] = "Sets whether the submit button must be displayed or not.";
|
|
20
|
-
KupFieldProps["submitLabel"] = "Sets the submit button's label.";
|
|
21
|
-
KupFieldProps["submitPos"] = "Sets the submit button's position, top right bottom or left.";
|
|
22
|
-
KupFieldProps["type"] = "The type of the FLD";
|
|
23
|
-
})(KupFieldProps || (KupFieldProps = {}));
|
|
24
|
-
|
|
25
|
-
const kupFieldCss = ":host{display:block;font-size:var(--kup-font-size)}label{color:var(--kup-text-color);font-family:var(--kup-font-family);font-size:1em}.kup-field__component{display:inline-block}.label-top.submit-top label{float:left;margin:auto auto 1em auto}.label-top.submit-top kup-button{float:right;margin:auto auto 1em auto}.label-right label{display:inline-block;margin:auto auto auto 1em}.submit-right kup-button{display:inline-block;margin:auto auto auto 1em}.label-left label{display:inline-block;margin:auto 1em auto auto}.submit-left kup-button{display:inline-block;margin:auto 1em auto auto}.submit-bottom kup-button{display:block;margin:1em auto auto auto}";
|
|
26
|
-
|
|
27
|
-
const KupField = class {
|
|
28
|
-
constructor(hostRef) {
|
|
29
|
-
index.registerInstance(this, hostRef);
|
|
30
|
-
this.kupChange = index.createEvent(this, "kup-field-change", 6);
|
|
31
|
-
this.kupSubmit = index.createEvent(this, "kup-field-submit", 6);
|
|
32
|
-
/*-------------------------------------------------*/
|
|
33
|
-
/* P r o p s */
|
|
34
|
-
/*-------------------------------------------------*/
|
|
35
|
-
/**
|
|
36
|
-
* Custom style of the component.
|
|
37
|
-
* @default ""
|
|
38
|
-
* @see https://ketchup.smeup.com/ketchup-showcase/#/customization
|
|
39
|
-
*/
|
|
40
|
-
this.customStyle = '';
|
|
41
|
-
/**
|
|
42
|
-
* Effective data to pass to the component.
|
|
43
|
-
* @default {}
|
|
44
|
-
*/
|
|
45
|
-
this.data = {};
|
|
46
|
-
/**
|
|
47
|
-
* The text of the label. If set to empty or has only white space chars, the label will be removed.
|
|
48
|
-
* @default ""
|
|
49
|
-
*/
|
|
50
|
-
this.label = '';
|
|
51
|
-
/**
|
|
52
|
-
* Sets the label's position, left right or top.
|
|
53
|
-
* @default "left"
|
|
54
|
-
*/
|
|
55
|
-
this.labelPos = 'left';
|
|
56
|
-
/**
|
|
57
|
-
* Sets whether the submit button must be displayed or not.
|
|
58
|
-
* @default false
|
|
59
|
-
*/
|
|
60
|
-
this.showSubmit = false;
|
|
61
|
-
/**
|
|
62
|
-
* Sets the submit button's label.
|
|
63
|
-
* @default ""
|
|
64
|
-
*/
|
|
65
|
-
this.submitLabel = '';
|
|
66
|
-
/**
|
|
67
|
-
* Sets the submit button's position, top right bottom or left.
|
|
68
|
-
* @default "right"
|
|
69
|
-
*/
|
|
70
|
-
this.submitPos = 'right';
|
|
71
|
-
/**
|
|
72
|
-
* The type of the FLD
|
|
73
|
-
* @default undefined
|
|
74
|
-
*/
|
|
75
|
-
this.type = undefined;
|
|
76
|
-
/*-------------------------------------------------*/
|
|
77
|
-
/* I n t e r n a l V a r i a b l e s */
|
|
78
|
-
/*-------------------------------------------------*/
|
|
79
|
-
/**
|
|
80
|
-
* Instance of the KupManager class.
|
|
81
|
-
*/
|
|
82
|
-
this.kupManager = kupManager.kupManagerInstance();
|
|
83
|
-
this.currentValue = null;
|
|
84
|
-
this.previousValue = null;
|
|
85
|
-
// Generates an instance of the event handler while binding the current component as its this value
|
|
86
|
-
// This is done once per component to improve performance speed
|
|
87
|
-
this.onChangeInstance = this.onChange.bind(this);
|
|
88
|
-
this.onSubmitInstance = this.onSubmit.bind(this);
|
|
89
|
-
}
|
|
90
|
-
// When a change or update event must be launched as if it's coming from the FLD itself
|
|
91
|
-
onChange(event) {
|
|
92
|
-
const { value, info } = event.detail;
|
|
93
|
-
this.kupChange.emit({
|
|
94
|
-
originalEvent: event,
|
|
95
|
-
oldValue: this.currentValue,
|
|
96
|
-
value,
|
|
97
|
-
info,
|
|
98
|
-
});
|
|
99
|
-
this.previousValue = this.currentValue;
|
|
100
|
-
this.currentValue = value;
|
|
101
|
-
}
|
|
102
|
-
// When a submit event must be launched as if it's coming from the FLD itself
|
|
103
|
-
onSubmit(event) {
|
|
104
|
-
this.kupSubmit.emit({
|
|
105
|
-
originalEvent: event,
|
|
106
|
-
oldValue: this.previousValue,
|
|
107
|
-
value: this.currentValue,
|
|
108
|
-
info: {
|
|
109
|
-
obj: event.detail.info && event.detail.info.obj
|
|
110
|
-
? event.detail.info.obj
|
|
111
|
-
: undefined,
|
|
112
|
-
},
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
/*-------------------------------------------------*/
|
|
116
|
-
/* P u b l i c M e t h o d s */
|
|
117
|
-
/*-------------------------------------------------*/
|
|
118
|
-
/**
|
|
119
|
-
* Provides an interface to get the current value programmatically
|
|
120
|
-
* @method getCurrentValue
|
|
121
|
-
* @returns {any}
|
|
122
|
-
*/
|
|
123
|
-
async getCurrentValue() {
|
|
124
|
-
return this.currentValue;
|
|
125
|
-
}
|
|
126
|
-
/**
|
|
127
|
-
* Used to retrieve component's props values.
|
|
128
|
-
* @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
|
|
129
|
-
* @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
|
|
130
|
-
*/
|
|
131
|
-
async getProps(descriptions) {
|
|
132
|
-
let props = {};
|
|
133
|
-
if (descriptions) {
|
|
134
|
-
props = KupFieldProps;
|
|
135
|
-
}
|
|
136
|
-
else {
|
|
137
|
-
for (const key in KupFieldProps) {
|
|
138
|
-
if (Object.prototype.hasOwnProperty.call(KupFieldProps, key)) {
|
|
139
|
-
props[key] = this[key];
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
return props;
|
|
144
|
-
}
|
|
145
|
-
/**
|
|
146
|
-
* This method is used to trigger a new render of the component.
|
|
147
|
-
*/
|
|
148
|
-
async refresh() {
|
|
149
|
-
index.forceUpdate(this);
|
|
150
|
-
}
|
|
151
|
-
/*-------------------------------------------------*/
|
|
152
|
-
/* L i f e c y c l e H o o k s */
|
|
153
|
-
/*-------------------------------------------------*/
|
|
154
|
-
componentWillLoad() {
|
|
155
|
-
this.kupManager.debug.logLoad(this, false);
|
|
156
|
-
this.kupManager.theme.register(this);
|
|
157
|
-
}
|
|
158
|
-
componentDidLoad() {
|
|
159
|
-
this.kupManager.debug.logLoad(this, true);
|
|
160
|
-
}
|
|
161
|
-
componentWillRender() {
|
|
162
|
-
this.kupManager.debug.logRender(this, false);
|
|
163
|
-
}
|
|
164
|
-
componentDidRender() {
|
|
165
|
-
this.kupManager.debug.logRender(this, true);
|
|
166
|
-
}
|
|
167
|
-
render() {
|
|
168
|
-
let toRender = [];
|
|
169
|
-
const baseClass = 'kup-field';
|
|
170
|
-
let label = null;
|
|
171
|
-
let submit = null;
|
|
172
|
-
let wrapperClass = '';
|
|
173
|
-
let propList = Object.assign({}, this.data);
|
|
174
|
-
if (this.label.trim().length) {
|
|
175
|
-
wrapperClass += ' label-' + this.labelPos;
|
|
176
|
-
label = (index.h("label", { class: baseClass +
|
|
177
|
-
'__label' +
|
|
178
|
-
' ' +
|
|
179
|
-
baseClass +
|
|
180
|
-
'--' +
|
|
181
|
-
this.labelPos }, this.label));
|
|
182
|
-
}
|
|
183
|
-
if (this.showSubmit) {
|
|
184
|
-
wrapperClass += ' submit-' + this.submitPos;
|
|
185
|
-
submit = (index.h("kup-button", { class: baseClass + '__submit', label: this.submitLabel, "onkup-button-click": this.onSubmitInstance }));
|
|
186
|
-
}
|
|
187
|
-
//-- If a component must be positioned on top of the dynamic one --
|
|
188
|
-
const labelIsTop = this.labelPos === 'top';
|
|
189
|
-
const labelIsLeft = this.labelPos === 'left';
|
|
190
|
-
const labelIsRight = this.labelPos === 'right';
|
|
191
|
-
const submitIsTop = this.submitPos === 'top';
|
|
192
|
-
const submitIsLeft = this.submitPos === 'left';
|
|
193
|
-
const submitIsRight = this.submitPos === 'right';
|
|
194
|
-
const submitIsBottom = this.submitPos === 'bottom';
|
|
195
|
-
if (labelIsTop || submitIsTop) {
|
|
196
|
-
toRender.push(index.h("div", { class: baseClass + '__top-container' }, labelIsTop && label ? label : null, submitIsTop && submit ? submit : null));
|
|
197
|
-
}
|
|
198
|
-
if (labelIsLeft && label) {
|
|
199
|
-
toRender.push(label);
|
|
200
|
-
}
|
|
201
|
-
if (submitIsLeft && submit) {
|
|
202
|
-
toRender.push(submit);
|
|
203
|
-
}
|
|
204
|
-
let comp = undefined;
|
|
205
|
-
if (this.type === undefined) {
|
|
206
|
-
this.kupManager.debug.logMessage(this, 'Type (state) is undefined!', kupManager.KupDebugCategory.WARNING);
|
|
207
|
-
}
|
|
208
|
-
else {
|
|
209
|
-
switch (this.type.toLowerCase()) {
|
|
210
|
-
case 'cmb':
|
|
211
|
-
comp = 'kup-combobox';
|
|
212
|
-
propList.onKupComboboxChange = this.onChangeInstance;
|
|
213
|
-
break;
|
|
214
|
-
case 'itx':
|
|
215
|
-
comp = 'kup-text-field';
|
|
216
|
-
propList.onkupTextFieldChange = this.onChangeInstance;
|
|
217
|
-
break;
|
|
218
|
-
case 'rad':
|
|
219
|
-
comp = 'kup-radio';
|
|
220
|
-
propList.onkupRadioChange = this.onChangeInstance;
|
|
221
|
-
break;
|
|
222
|
-
}
|
|
223
|
-
}
|
|
224
|
-
const $DynamicComponent = comp; // TODO check if there is a better typing
|
|
225
|
-
toRender.push(index.h($DynamicComponent, Object.assign({ class: baseClass + '__component' }, propList)));
|
|
226
|
-
if (labelIsRight && label) {
|
|
227
|
-
toRender.push(label);
|
|
228
|
-
}
|
|
229
|
-
if ((submitIsRight || submitIsBottom) && submit) {
|
|
230
|
-
toRender.push(submit);
|
|
231
|
-
}
|
|
232
|
-
return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, class: wrapperClass }, toRender)));
|
|
233
|
-
}
|
|
234
|
-
disconnectedCallback() {
|
|
235
|
-
this.kupManager.theme.unregister(this);
|
|
236
|
-
}
|
|
237
|
-
get rootElement() { return index.getElement(this); }
|
|
238
|
-
};
|
|
239
|
-
KupField.style = kupFieldCss;
|
|
240
|
-
|
|
241
|
-
exports.kup_field = KupField;
|
|
@@ -1,404 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-eb556444.js');
|
|
6
|
-
const fButton = require('./f-button-ac179257.js');
|
|
7
|
-
const kupManager = require('./kup-manager-7a941909.js');
|
|
8
|
-
const utils = require('./utils-6287d878.js');
|
|
9
|
-
const GenericVariables = require('./GenericVariables-a9ed17ee.js');
|
|
10
|
-
require('./f-button-declarations-b611587f.js');
|
|
11
|
-
require('./f-image-89f25556.js');
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Props of the kup-form-editor component.
|
|
15
|
-
* Used to export every prop in an object.
|
|
16
|
-
*/
|
|
17
|
-
var KupFormEditorProps;
|
|
18
|
-
(function (KupFormEditorProps) {
|
|
19
|
-
KupFormEditorProps["customStyle"] = "Custom style of the component.";
|
|
20
|
-
KupFormEditorProps["data"] = "The data of the component.";
|
|
21
|
-
})(KupFormEditorProps || (KupFormEditorProps = {}));
|
|
22
|
-
var KupFormEditorDragTypes;
|
|
23
|
-
(function (KupFormEditorDragTypes) {
|
|
24
|
-
KupFormEditorDragTypes["Components"] = "1";
|
|
25
|
-
KupFormEditorDragTypes["Sections"] = "2";
|
|
26
|
-
})(KupFormEditorDragTypes || (KupFormEditorDragTypes = {}));
|
|
27
|
-
var KupFormEditorLabels;
|
|
28
|
-
(function (KupFormEditorLabels) {
|
|
29
|
-
KupFormEditorLabels["Loaded"] = "Loaded";
|
|
30
|
-
KupFormEditorLabels["Reset"] = "Reset";
|
|
31
|
-
KupFormEditorLabels["Save"] = "Save";
|
|
32
|
-
KupFormEditorLabels["Components"] = "Components";
|
|
33
|
-
KupFormEditorLabels["Sections"] = "Sections";
|
|
34
|
-
KupFormEditorLabels["Column"] = "Column";
|
|
35
|
-
})(KupFormEditorLabels || (KupFormEditorLabels = {}));
|
|
36
|
-
|
|
37
|
-
const kupFormEditorCss = ":host{width:100%;height:100%}.header{display:flex;flex-direction:row;justify-content:center}.header>*{margin-left:0.5em}.form{display:grid;grid-gap:0.5em}.form-dropzone{padding:1em;border:1px solid var(--kup-primary-color)}.section{display:flex;flex-direction:column}.section-header{display:flex;flex-direction:column}.section-header>*{width:100%;display:flex;flex-direction:row}.section-header>*>.section-header-actions{display:flex;justify-content:end}.section-header>*>.section-header-actions>*{margin-top:auto;margin-bottom:auto}.section-body{display:grid}.section-dropzone{border:1px solid var(--kup-primary-color);min-height:100px}.section-draggable{border:1px solid var(--kup-secondary-color);padding:1em}.component{height:fit-content;padding:1em;margin:0.5em}.component-draggable{border:1px solid var(--kup-secondary-color)}.layout-row{grid-auto-flow:column;grid-template-columns:min-content}.layout-column{grid-auto-flow:row;grid-template-rows:min-content}";
|
|
38
|
-
|
|
39
|
-
const KupFormEditor = class {
|
|
40
|
-
constructor(hostRef) {
|
|
41
|
-
index.registerInstance(this, hostRef);
|
|
42
|
-
this.kupSave = index.createEvent(this, "kup-formeditor-save", 6);
|
|
43
|
-
/*-------------------------------------------------*/
|
|
44
|
-
/* S t a t e s */
|
|
45
|
-
/*-------------------------------------------------*/
|
|
46
|
-
/**
|
|
47
|
-
* Force render component by internal event.
|
|
48
|
-
*/
|
|
49
|
-
this.resetInternalData = false;
|
|
50
|
-
/*-------------------------------------------------*/
|
|
51
|
-
/* P r o p s */
|
|
52
|
-
/*-------------------------------------------------*/
|
|
53
|
-
/**
|
|
54
|
-
* Custom style of the component.
|
|
55
|
-
* @default ""
|
|
56
|
-
* @see https://ketchup.smeup.com/ketchup-showcase/#/customization
|
|
57
|
-
*/
|
|
58
|
-
this.customStyle = '';
|
|
59
|
-
/**
|
|
60
|
-
* The data of the component.
|
|
61
|
-
* @default false
|
|
62
|
-
*/
|
|
63
|
-
this.data = null;
|
|
64
|
-
/*-------------------------------------------------*/
|
|
65
|
-
/* I n t e r n a l V a r i a b l e s */
|
|
66
|
-
/*-------------------------------------------------*/
|
|
67
|
-
/**
|
|
68
|
-
* Instance of the KupManager class.
|
|
69
|
-
*/
|
|
70
|
-
this.kupManager = kupManager.kupManagerInstance();
|
|
71
|
-
/**
|
|
72
|
-
* Draggable type of Form (Components or Sections).
|
|
73
|
-
*/
|
|
74
|
-
this.dragType = KupFormEditorDragTypes.Components;
|
|
75
|
-
/**
|
|
76
|
-
* Internal data of the component.
|
|
77
|
-
*/
|
|
78
|
-
this.internalData = null;
|
|
79
|
-
/**
|
|
80
|
-
* Internal data backup of the component for refresh when changed content by drag&drop.
|
|
81
|
-
*/
|
|
82
|
-
this.internalDataBackup = null;
|
|
83
|
-
}
|
|
84
|
-
onKupSave() {
|
|
85
|
-
this.kupSave.emit({
|
|
86
|
-
comp: this,
|
|
87
|
-
id: this.rootElement.id,
|
|
88
|
-
data: this.internalData,
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
/*-------------------------------------------------*/
|
|
92
|
-
/* W a t c h e r s */
|
|
93
|
-
/*-------------------------------------------------*/
|
|
94
|
-
dataChanged() {
|
|
95
|
-
this.resetData();
|
|
96
|
-
}
|
|
97
|
-
/*-------------------------------------------------*/
|
|
98
|
-
/* P u b l i c M e t h o d s */
|
|
99
|
-
/*-------------------------------------------------*/
|
|
100
|
-
/**
|
|
101
|
-
* Used to retrieve component's props values.
|
|
102
|
-
* @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
|
|
103
|
-
* @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
|
|
104
|
-
*/
|
|
105
|
-
async getProps(descriptions) {
|
|
106
|
-
return utils.getProps(this, KupFormEditorProps, descriptions);
|
|
107
|
-
}
|
|
108
|
-
/**
|
|
109
|
-
* This method is used to trigger a new render of the component.
|
|
110
|
-
*/
|
|
111
|
-
async refresh() {
|
|
112
|
-
index.forceUpdate(this);
|
|
113
|
-
}
|
|
114
|
-
/**
|
|
115
|
-
* Sets the props to the component.
|
|
116
|
-
* @param {GenericObject} props - Object containing props that will be set to the component.
|
|
117
|
-
*/
|
|
118
|
-
async setProps(props) {
|
|
119
|
-
utils.setProps(this, KupFormEditorProps, props);
|
|
120
|
-
}
|
|
121
|
-
/*-------------------------------------------------*/
|
|
122
|
-
/* P r i v a t e M e t h o d s */
|
|
123
|
-
/*-------------------------------------------------*/
|
|
124
|
-
buildHeader() {
|
|
125
|
-
const clearButtonProp = {
|
|
126
|
-
icon: 'cancel',
|
|
127
|
-
label: KupFormEditorLabels.Reset,
|
|
128
|
-
secondary: true,
|
|
129
|
-
onClick: () => {
|
|
130
|
-
this.resetData();
|
|
131
|
-
},
|
|
132
|
-
};
|
|
133
|
-
const saveButtonProp = {
|
|
134
|
-
icon: 'save',
|
|
135
|
-
label: KupFormEditorLabels.Save,
|
|
136
|
-
onClick: () => this.onKupSave(),
|
|
137
|
-
};
|
|
138
|
-
const selRadioProp = [
|
|
139
|
-
{
|
|
140
|
-
label: KupFormEditorLabels.Components,
|
|
141
|
-
value: KupFormEditorDragTypes.Components,
|
|
142
|
-
checked: this.dragType == KupFormEditorDragTypes.Components,
|
|
143
|
-
},
|
|
144
|
-
{
|
|
145
|
-
label: KupFormEditorLabels.Sections,
|
|
146
|
-
value: KupFormEditorDragTypes.Sections,
|
|
147
|
-
checked: this.dragType == KupFormEditorDragTypes.Sections,
|
|
148
|
-
},
|
|
149
|
-
];
|
|
150
|
-
return (index.h("div", { class: "header" }, index.h("kup-radio", { data: selRadioProp, "onKup-radio-change": (ev) => {
|
|
151
|
-
this.dragType = ev.detail
|
|
152
|
-
.value;
|
|
153
|
-
this.resetData(this.internalData);
|
|
154
|
-
} }), index.h(fButton.FButton, Object.assign({}, clearButtonProp)), index.h(fButton.FButton, Object.assign({}, saveButtonProp))));
|
|
155
|
-
}
|
|
156
|
-
buildForm(form, parent) {
|
|
157
|
-
const classes = {
|
|
158
|
-
form: true,
|
|
159
|
-
'layout-column': form && form.layout == 'column',
|
|
160
|
-
'layout-row': form && form.layout == 'row',
|
|
161
|
-
'form-dropzone': form &&
|
|
162
|
-
this.dragType == KupFormEditorDragTypes.Sections &&
|
|
163
|
-
form.sections != null &&
|
|
164
|
-
form.sections.length > 0,
|
|
165
|
-
};
|
|
166
|
-
return form ? (index.h("div", { class: classes, ref: (el) => {
|
|
167
|
-
if (!el)
|
|
168
|
-
return;
|
|
169
|
-
const kel = el;
|
|
170
|
-
kel.kupData = { parent: parent, form: form };
|
|
171
|
-
} }, form.sections.map((section) => this.buildSection(section, form)))) : (index.h("div", null, this.kupManager.language.translate(kupManager.KupLanguageGeneric.EMPTY_DATA)));
|
|
172
|
-
}
|
|
173
|
-
buildSectionHeader(section, parent) {
|
|
174
|
-
const addButtonProp = {
|
|
175
|
-
icon: 'add',
|
|
176
|
-
slim: true,
|
|
177
|
-
onClick: () => {
|
|
178
|
-
if (!section.sections) {
|
|
179
|
-
section.sections = [];
|
|
180
|
-
}
|
|
181
|
-
const newSec = {
|
|
182
|
-
id: section.id + (section.sections.length + 1),
|
|
183
|
-
loaded: section.loaded,
|
|
184
|
-
layout: section.layout,
|
|
185
|
-
components: [],
|
|
186
|
-
};
|
|
187
|
-
if (section.components) {
|
|
188
|
-
section.components.forEach((x) => newSec.components.push(x));
|
|
189
|
-
section.components.splice(0);
|
|
190
|
-
}
|
|
191
|
-
section.sections.push(newSec);
|
|
192
|
-
this.resetData(this.internalData);
|
|
193
|
-
},
|
|
194
|
-
};
|
|
195
|
-
const removeButtonProp = {
|
|
196
|
-
icon: 'remove',
|
|
197
|
-
slim: true,
|
|
198
|
-
secondary: true,
|
|
199
|
-
onClick: () => {
|
|
200
|
-
const idx = parent.sections.indexOf(section);
|
|
201
|
-
parent.sections.splice(idx, 1);
|
|
202
|
-
this.resetData(this.internalData);
|
|
203
|
-
},
|
|
204
|
-
};
|
|
205
|
-
return (index.h("div", { class: "section-header" }, index.h("div", null, section.id, ' ', section.dim ? '(' + section.dim + ')' : undefined, " -", ' ', section.layout), index.h("div", null, index.h("div", { class: "section-header-actions" }, index.h("kup-switch", { checked: section.loaded, label: KupFormEditorLabels.Loaded, "onKup-switch-change": (ev) => {
|
|
206
|
-
section.loaded = ev.detail.value == 'on';
|
|
207
|
-
} }), index.h("kup-switch", { checked: section.layout == 'column', label: KupFormEditorLabels.Column, "onKup-switch-change": (ev) => {
|
|
208
|
-
section.layout =
|
|
209
|
-
ev.detail.value == 'on' ? 'column' : 'row';
|
|
210
|
-
this.resetData(this.internalData);
|
|
211
|
-
} }), index.h(fButton.FButton, Object.assign({}, addButtonProp)), index.h(fButton.FButton, Object.assign({}, removeButtonProp)), section.components && section.components.length > 0 ? (index.h("kup-image", { resource: "widgets", sizeX: "24px", sizeY: "24px" })) : undefined))));
|
|
212
|
-
}
|
|
213
|
-
buildSection(section, parent) {
|
|
214
|
-
const classes = {
|
|
215
|
-
section: true,
|
|
216
|
-
'section-draggable': this.dragType == KupFormEditorDragTypes.Sections,
|
|
217
|
-
'section-dropzone': !section.sections ||
|
|
218
|
-
section.sections.length == 0 ||
|
|
219
|
-
this.dragType == KupFormEditorDragTypes.Sections,
|
|
220
|
-
};
|
|
221
|
-
const bodyClasses = {
|
|
222
|
-
'section-body': true,
|
|
223
|
-
'layout-column': section && section.layout == 'column',
|
|
224
|
-
'layout-row': section && section.layout == 'row',
|
|
225
|
-
};
|
|
226
|
-
let bodyStyles = {};
|
|
227
|
-
if (section.sections) {
|
|
228
|
-
let gridTemplate = '';
|
|
229
|
-
section.sections.forEach((childSection) => {
|
|
230
|
-
if (!childSection.dim)
|
|
231
|
-
gridTemplate += ' 1fr';
|
|
232
|
-
else
|
|
233
|
-
gridTemplate +=
|
|
234
|
-
childSection.dim.indexOf('%') < 0
|
|
235
|
-
? ' ' + childSection.dim + 'px'
|
|
236
|
-
: ' ' + childSection.dim;
|
|
237
|
-
});
|
|
238
|
-
if (section.layout == 'column')
|
|
239
|
-
bodyStyles['gridTemplateRows'] = gridTemplate;
|
|
240
|
-
if (section.layout == 'row')
|
|
241
|
-
bodyStyles['gridTemplateColumns'] = gridTemplate;
|
|
242
|
-
}
|
|
243
|
-
return (index.h("div", { class: classes, ref: (el) => {
|
|
244
|
-
if (!el)
|
|
245
|
-
return;
|
|
246
|
-
const kel = el;
|
|
247
|
-
kel.kupData = { parent: parent, section: section };
|
|
248
|
-
} }, this.dragType == KupFormEditorDragTypes.Sections
|
|
249
|
-
? this.buildSectionHeader(section, parent)
|
|
250
|
-
: undefined, index.h("div", { class: bodyClasses, style: bodyStyles }, this.dragType == KupFormEditorDragTypes.Components &&
|
|
251
|
-
section.components
|
|
252
|
-
? section.components.map((component) => component.type == 'SCH' ? (this.buildForm(component, section)) : (index.h("div", { class: "component component-draggable", ref: (el) => {
|
|
253
|
-
if (!el)
|
|
254
|
-
return;
|
|
255
|
-
const kel = el;
|
|
256
|
-
kel.kupData = {
|
|
257
|
-
section: section,
|
|
258
|
-
componnent: component,
|
|
259
|
-
};
|
|
260
|
-
} }, component.id, " - ", component.type, index.h("kup-switch", { checked: component.loaded, label: KupFormEditorLabels.Loaded, "onKup-switch-change": (ev) => {
|
|
261
|
-
component.loaded =
|
|
262
|
-
ev.detail.value == 'on';
|
|
263
|
-
} }))))
|
|
264
|
-
: undefined, section.sections
|
|
265
|
-
? section.sections.map((childSection) => this.buildSection(childSection, section))
|
|
266
|
-
: undefined)));
|
|
267
|
-
}
|
|
268
|
-
didRenderInteractables() {
|
|
269
|
-
try {
|
|
270
|
-
const items = [];
|
|
271
|
-
this.rootElement.shadowRoot
|
|
272
|
-
.querySelectorAll('.component-draggable')
|
|
273
|
-
.forEach((x) => items.push(x));
|
|
274
|
-
this.rootElement.shadowRoot
|
|
275
|
-
.querySelectorAll('.section-draggable')
|
|
276
|
-
.forEach((x) => items.push(x));
|
|
277
|
-
items.forEach((item) => {
|
|
278
|
-
this.kupManager.interact.draggable(item, null, null, kupManager.KupDragEffect.CLONE);
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
catch (error) {
|
|
282
|
-
this.kupManager.debug.logMessage(this, error, kupManager.KupDebugCategory.ERROR);
|
|
283
|
-
}
|
|
284
|
-
try {
|
|
285
|
-
const items = [];
|
|
286
|
-
this.rootElement.shadowRoot
|
|
287
|
-
.querySelectorAll('.section-dropzone')
|
|
288
|
-
.forEach((x) => items.push(x));
|
|
289
|
-
this.rootElement.shadowRoot
|
|
290
|
-
.querySelectorAll('.form-dropzone')
|
|
291
|
-
.forEach((x) => items.push(x));
|
|
292
|
-
items.forEach((item) => {
|
|
293
|
-
this.kupManager.interact.dropzone(item, null, null, {
|
|
294
|
-
drop: (ev) => {
|
|
295
|
-
ev.currentTarget.appendChild(ev.relatedTarget);
|
|
296
|
-
this.dropped(ev.currentTarget, ev.relatedTarget);
|
|
297
|
-
},
|
|
298
|
-
});
|
|
299
|
-
});
|
|
300
|
-
}
|
|
301
|
-
catch (error) {
|
|
302
|
-
this.kupManager.debug.logMessage(this, error, kupManager.KupDebugCategory.ERROR);
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
dropped(parent, child) {
|
|
306
|
-
if (this.dragType == KupFormEditorDragTypes.Components) {
|
|
307
|
-
const idx = child.kupData.section.components.indexOf(child.kupData.componnent);
|
|
308
|
-
child.kupData.section.components.splice(idx, 1);
|
|
309
|
-
parent.kupData.section.components.push(child.kupData.componnent);
|
|
310
|
-
child.kupData.section = parent.kupData.section;
|
|
311
|
-
}
|
|
312
|
-
else if (this.dragType == KupFormEditorDragTypes.Sections) {
|
|
313
|
-
const idx = child.kupData.parent.sections.indexOf(child.kupData.section);
|
|
314
|
-
child.kupData.parent.sections.splice(idx, 1);
|
|
315
|
-
if (parent.kupData.form) {
|
|
316
|
-
// il nuovo target è la form.
|
|
317
|
-
if (!parent.kupData.form.sections)
|
|
318
|
-
parent.kupData.form.sections = [];
|
|
319
|
-
parent.kupData.form.sections.push(child.kupData.section);
|
|
320
|
-
child.kupData.parent = parent.kupData.form;
|
|
321
|
-
}
|
|
322
|
-
else if (parent.kupData.section) {
|
|
323
|
-
// il nuovo target è la section.
|
|
324
|
-
if (!parent.kupData.section.sections)
|
|
325
|
-
parent.kupData.section.sections = [];
|
|
326
|
-
if (parent.kupData.section.components &&
|
|
327
|
-
parent.kupData.section.components.length > 0) {
|
|
328
|
-
// devo creare una section contenitore e sposare i components
|
|
329
|
-
const newSec = {
|
|
330
|
-
id: parent.kupData.section.id + '1',
|
|
331
|
-
loaded: parent.kupData.section.loaded,
|
|
332
|
-
layout: parent.kupData.section.layout,
|
|
333
|
-
components: [],
|
|
334
|
-
};
|
|
335
|
-
parent.kupData.section.components.forEach((x) => newSec.components.push(x));
|
|
336
|
-
parent.kupData.section.components.splice(0);
|
|
337
|
-
parent.kupData.section.sections.push(newSec);
|
|
338
|
-
}
|
|
339
|
-
parent.kupData.section.sections.push(child.kupData.section);
|
|
340
|
-
child.kupData.parent = parent.kupData.section;
|
|
341
|
-
}
|
|
342
|
-
this.resetData(this.internalData);
|
|
343
|
-
}
|
|
344
|
-
}
|
|
345
|
-
resetData(form = null) {
|
|
346
|
-
if (form)
|
|
347
|
-
this.internalDataBackup = form;
|
|
348
|
-
this.resetInternalData = true;
|
|
349
|
-
setTimeout(() => {
|
|
350
|
-
if (this.internalDataBackup) {
|
|
351
|
-
this.internalData = this.internalDataBackup;
|
|
352
|
-
this.internalDataBackup = null;
|
|
353
|
-
}
|
|
354
|
-
this.resetInternalData = false;
|
|
355
|
-
}, 250);
|
|
356
|
-
}
|
|
357
|
-
unregisterInteractables() {
|
|
358
|
-
this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.component-draggable')));
|
|
359
|
-
this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.section-dropzone')));
|
|
360
|
-
this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.section-draggable')));
|
|
361
|
-
this.kupManager.interact.unregister(Array.from(this.rootElement.shadowRoot.querySelectorAll('.form-dropzone')));
|
|
362
|
-
}
|
|
363
|
-
/*-------------------------------------------------*/
|
|
364
|
-
/* L i f e c y c l e H o o k s */
|
|
365
|
-
/*-------------------------------------------------*/
|
|
366
|
-
componentWillLoad() {
|
|
367
|
-
this.kupManager.dates.register(this);
|
|
368
|
-
this.kupManager.debug.logLoad(this, false);
|
|
369
|
-
this.kupManager.language.register(this);
|
|
370
|
-
this.kupManager.theme.register(this);
|
|
371
|
-
}
|
|
372
|
-
componentDidLoad() {
|
|
373
|
-
this.kupManager.debug.logLoad(this, true);
|
|
374
|
-
}
|
|
375
|
-
componentWillRender() {
|
|
376
|
-
this.kupManager.debug.logRender(this, false);
|
|
377
|
-
if (this.resetInternalData) {
|
|
378
|
-
this.internalData = null;
|
|
379
|
-
this.unregisterInteractables();
|
|
380
|
-
}
|
|
381
|
-
else if (!this.internalData)
|
|
382
|
-
this.internalData = JSON.parse(JSON.stringify(this.data));
|
|
383
|
-
}
|
|
384
|
-
componentDidRender() {
|
|
385
|
-
this.kupManager.debug.logRender(this, true);
|
|
386
|
-
this.didRenderInteractables();
|
|
387
|
-
}
|
|
388
|
-
render() {
|
|
389
|
-
return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, this.buildHeader(), this.buildForm(this.internalData, null))));
|
|
390
|
-
}
|
|
391
|
-
disconnectedCallback() {
|
|
392
|
-
this.unregisterInteractables();
|
|
393
|
-
this.kupManager.dates.unregister(this);
|
|
394
|
-
this.kupManager.language.unregister(this);
|
|
395
|
-
this.kupManager.theme.unregister(this);
|
|
396
|
-
}
|
|
397
|
-
get rootElement() { return index.getElement(this); }
|
|
398
|
-
static get watchers() { return {
|
|
399
|
-
"data": ["dataChanged"]
|
|
400
|
-
}; }
|
|
401
|
-
};
|
|
402
|
-
KupFormEditor.style = kupFormEditorCss;
|
|
403
|
-
|
|
404
|
-
exports.kup_form_editor = KupFormEditor;
|