@sme.up/ketchup 4.0.0 → 4.1.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/{cell-utils-1f89a299.js → cell-utils-841a7769.js} +2 -2
- package/dist/cjs/{f-chip-2d58c8f7.js → f-chip-b9f489ff.js} +7 -5
- package/dist/cjs/{f-image-5f4f29ca.js → f-image-0c3e6aa7.js} +3 -4
- package/dist/cjs/{index-3c471303.js → index-0416afab.js} +73 -64
- package/dist/cjs/ketchup.cjs.js +3 -3
- package/dist/cjs/kup-accordion.cjs.entry.js +5 -5
- package/dist/cjs/kup-autocomplete_29.cjs.entry.js +1014 -1103
- package/dist/cjs/kup-calendar.cjs.entry.js +8 -8
- package/dist/cjs/kup-dash-list.cjs.entry.js +6 -6
- package/dist/cjs/kup-dash_2.cjs.entry.js +106 -62
- package/dist/cjs/kup-drawer.cjs.entry.js +4 -4
- package/dist/cjs/kup-field.cjs.entry.js +3 -3
- package/dist/cjs/kup-iframe.cjs.entry.js +4 -4
- package/dist/cjs/kup-lazy.cjs.entry.js +4 -4
- package/dist/cjs/kup-magic-box.cjs.entry.js +21 -30
- package/dist/cjs/{kup-manager-59ad8bdc.js → kup-manager-828bd598.js} +599 -519
- package/dist/cjs/kup-nav-bar.cjs.entry.js +4 -4
- package/dist/cjs/{kup-objects-59ea949c.js → kup-objects-89f38d6a.js} +7 -29
- package/dist/cjs/kup-probe.cjs.entry.js +3 -3
- package/dist/cjs/kup-qlik.cjs.entry.js +3 -3
- package/dist/cjs/loader.cjs.js +3 -3
- package/dist/cjs/{utils-2af73538.js → utils-5192ee20.js} +1 -1
- package/dist/collection/assets/data-table.js +1 -0
- package/dist/collection/collection-manifest.json +2 -3
- package/dist/collection/components/kup-accordion/kup-accordion.js +14 -14
- package/dist/collection/components/kup-autocomplete/kup-autocomplete.css +9 -0
- package/dist/collection/components/kup-autocomplete/kup-autocomplete.js +20 -23
- package/dist/collection/components/kup-badge/kup-badge.js +12 -12
- package/dist/collection/components/kup-box/kup-box.css +30 -30
- package/dist/collection/components/kup-box/kup-box.js +181 -171
- package/dist/collection/components/kup-button/kup-button.css +8 -5
- package/dist/collection/components/kup-button/kup-button.js +26 -26
- package/dist/collection/components/kup-button-list/kup-button-list.css +8 -5
- package/dist/collection/components/kup-button-list/kup-button-list.js +18 -18
- package/dist/collection/components/kup-calendar/kup-calendar.css +8 -6
- package/dist/collection/components/kup-calendar/kup-calendar.js +30 -30
- package/dist/collection/components/kup-card/kup-card-helper.js +2 -1
- package/dist/collection/components/kup-card/kup-card.css +20 -1
- package/dist/collection/components/kup-card/kup-card.js +26 -26
- package/dist/collection/components/kup-chart/kup-chart.js +40 -40
- package/dist/collection/components/kup-checkbox/kup-checkbox.js +18 -18
- package/dist/collection/components/kup-chip/kup-chip.css +0 -1
- package/dist/collection/components/kup-chip/kup-chip.js +14 -14
- package/dist/collection/components/kup-color-picker/kup-color-picker.css +6 -9
- package/dist/collection/components/kup-color-picker/kup-color-picker.js +32 -40
- package/dist/collection/components/kup-combobox/kup-combobox.css +9 -0
- package/dist/collection/components/kup-combobox/kup-combobox.js +20 -23
- package/dist/collection/components/kup-dash-list/kup-dash-list.js +2 -2
- package/dist/collection/components/kup-data-table/kup-data-table-declarations.js +1 -0
- package/dist/collection/components/kup-data-table/kup-data-table-helper.js +25 -46
- package/dist/collection/components/kup-data-table/kup-data-table.css +83 -87
- package/dist/collection/components/kup-data-table/kup-data-table.js +364 -531
- package/dist/collection/components/kup-date-picker/kup-date-picker.css +2373 -5
- package/dist/collection/components/kup-date-picker/kup-date-picker.js +72 -104
- package/dist/collection/components/kup-drawer/kup-drawer.js +8 -8
- package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.css +13 -5
- package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js +38 -43
- package/dist/collection/components/kup-field/kup-field.js +20 -20
- package/dist/collection/components/kup-gauge/kup-gauge.js +16 -16
- package/dist/collection/components/kup-grid/kup-grid.css +2 -1
- package/dist/collection/components/kup-grid/kup-grid.js +12 -12
- package/dist/collection/components/kup-iframe/kup-iframe.js +4 -4
- package/dist/collection/components/kup-image/kup-image.js +24 -24
- package/dist/collection/components/kup-lazy/kup-lazy.js +16 -16
- package/dist/collection/components/kup-list/kup-list-declarations.js +1 -1
- package/dist/collection/components/kup-list/kup-list.css +4 -0
- package/dist/collection/components/kup-list/kup-list.js +38 -47
- package/dist/collection/components/kup-magic-box/kup-magic-box.css +11 -6
- package/dist/collection/components/kup-magic-box/kup-magic-box.js +27 -36
- package/dist/collection/components/kup-nav-bar/kup-nav-bar.js +10 -10
- package/dist/collection/components/kup-paginator/kup-paginator.css +8 -5
- package/dist/collection/components/kup-probe/kup-probe.js +8 -8
- package/dist/collection/components/kup-progress-bar/kup-progress-bar.js +20 -20
- package/dist/collection/components/kup-radio/kup-radio.js +16 -16
- package/dist/collection/components/kup-rating/kup-rating.js +14 -14
- package/dist/collection/components/kup-spinner/kup-spinner.js +22 -22
- package/dist/collection/components/kup-switch/kup-switch.js +16 -16
- package/dist/collection/components/kup-tab-bar/kup-tab-bar.js +12 -12
- package/dist/collection/components/kup-text-field/kup-text-field.js +48 -48
- package/dist/collection/components/kup-time-picker/kup-time-picker.css +2376 -0
- package/dist/collection/components/kup-time-picker/kup-time-picker.js +50 -83
- package/dist/collection/components/kup-tooltip/kup-tooltip.js +18 -12
- package/dist/collection/components/kup-tree/kup-tree.css +10 -10
- package/dist/collection/components/kup-tree/kup-tree.js +96 -66
- package/dist/collection/f-components/f-button/f-button.js +4 -2
- package/dist/collection/f-components/f-image/f-image.js +1 -2
- package/dist/collection/f-components/f-text-field/f-text-field.js +8 -6
- package/dist/collection/utils/kup-column-menu/kup-column-menu.js +11 -3
- package/dist/collection/utils/kup-debug/kup-debug.js +25 -27
- package/dist/collection/utils/kup-dynamic-position/kup-dynamic-position.js +3 -5
- package/dist/collection/utils/kup-interact/kup-interact-declarations.js +48 -0
- package/dist/collection/utils/kup-interact/kup-interact.js +362 -0
- package/dist/collection/utils/kup-manager/kup-manager.js +18 -6
- package/dist/collection/utils/kup-objects/kup-objects.js +7 -29
- package/dist/collection/utils/kup-scroll-on-hover/kup-scroll-on-hover.js +60 -62
- package/dist/collection/utils/kup-toolbar/kup-toolbar.js +16 -18
- package/dist/esm/{cell-utils-cb612463.js → cell-utils-de384721.js} +2 -2
- package/dist/esm/{f-chip-125d5dd6.js → f-chip-d585b63e.js} +7 -5
- package/dist/esm/{f-image-68b34fab.js → f-image-23548d00.js} +3 -4
- package/dist/esm/{index-bf2824a6.js → index-51694018.js} +73 -64
- package/dist/esm/ketchup.js +3 -3
- package/dist/esm/kup-accordion.entry.js +5 -5
- package/dist/esm/kup-autocomplete_29.entry.js +818 -907
- package/dist/esm/kup-calendar.entry.js +8 -8
- package/dist/esm/kup-dash-list.entry.js +6 -6
- package/dist/esm/kup-dash_2.entry.js +106 -62
- package/dist/esm/kup-drawer.entry.js +4 -4
- package/dist/esm/kup-field.entry.js +3 -3
- package/dist/esm/kup-iframe.entry.js +4 -4
- package/dist/esm/kup-lazy.entry.js +4 -4
- package/dist/esm/kup-magic-box.entry.js +21 -30
- package/dist/esm/{kup-manager-e7d7b353.js → kup-manager-583f2815.js} +595 -520
- package/dist/esm/kup-nav-bar.entry.js +4 -4
- package/dist/esm/{kup-objects-d38d2fa2.js → kup-objects-5968aefd.js} +7 -29
- package/dist/esm/kup-probe.entry.js +3 -3
- package/dist/esm/kup-qlik.entry.js +3 -3
- package/dist/esm/loader.js +3 -3
- package/dist/esm/{utils-13dd007a.js → utils-a1dd14c3.js} +1 -1
- package/dist/ketchup/ketchup.esm.js +1 -1
- package/dist/ketchup/{p-64ea7e37.entry.js → p-0e91c9c9.entry.js} +1 -1
- package/dist/ketchup/{p-0320e24e.entry.js → p-0f2b6a24.entry.js} +1 -1
- package/dist/ketchup/{p-a5424073.js → p-361d9431.js} +1 -1
- package/dist/ketchup/p-565785ce.js +1 -0
- package/dist/ketchup/{p-7896031c.entry.js → p-57eb45ac.entry.js} +1 -1
- package/dist/ketchup/{p-08c7a092.js → p-6f5d8830.js} +1 -1
- package/dist/ketchup/{p-9c858a38.entry.js → p-802d8906.entry.js} +1 -1
- package/dist/ketchup/p-850b9e67.entry.js +1 -0
- package/dist/ketchup/{p-a12a5690.entry.js → p-88a5787a.entry.js} +1 -1
- package/dist/ketchup/p-8ed2b7bf.entry.js +1 -0
- package/dist/ketchup/{p-ee89966f.entry.js → p-90a0c2b7.entry.js} +2 -2
- package/dist/ketchup/{p-876da4c2.entry.js → p-94c0dd8c.entry.js} +1 -1
- package/dist/ketchup/p-9ec3c377.entry.js +45 -0
- package/dist/ketchup/p-b30f34d8.js +1 -0
- package/dist/ketchup/p-b6a47512.entry.js +1 -0
- package/dist/ketchup/p-bfaf8a82.js +1 -0
- package/dist/ketchup/{p-940ab57a.entry.js → p-ca0ebdcc.entry.js} +1 -1
- package/dist/ketchup/p-d5a3a4ed.js +1 -0
- package/dist/ketchup/{p-c7ee1fbc.js → p-ee7b190c.js} +1 -1
- package/dist/ketchup/{p-b0724035.entry.js → p-f6b54fa1.entry.js} +1 -1
- package/dist/types/components/kup-box/kup-box-declarations.d.ts +11 -2
- package/dist/types/components/kup-box/kup-box.d.ts +8 -4
- package/dist/types/components/kup-color-picker/kup-color-picker.d.ts +0 -1
- package/dist/types/components/kup-data-table/kup-data-table-declarations.d.ts +12 -4
- package/dist/types/components/kup-data-table/kup-data-table-helper.d.ts +0 -2
- package/dist/types/components/kup-data-table/kup-data-table.d.ts +16 -49
- package/dist/types/components/kup-date-picker/kup-date-picker.d.ts +11 -14
- package/dist/types/components/kup-dropdown-button/kup-dropdown-button.d.ts +0 -4
- package/dist/types/components/kup-list/kup-list-declarations.d.ts +1 -1
- package/dist/types/components/kup-list/kup-list.d.ts +2 -3
- package/dist/types/components/kup-magic-box/kup-magic-box.d.ts +1 -0
- package/dist/types/components/kup-time-picker/kup-time-picker.d.ts +7 -11
- package/dist/types/components/kup-tree/kup-tree-declarations.d.ts +4 -4
- package/dist/types/components/kup-tree/kup-tree.d.ts +3 -0
- package/dist/types/components.d.ts +84 -121
- package/dist/types/utils/kup-dynamic-position/kup-dynamic-position.d.ts +2 -2
- package/dist/types/utils/kup-interact/kup-interact-declarations.d.ts +127 -0
- package/dist/types/utils/kup-interact/kup-interact.d.ts +93 -0
- package/dist/types/utils/kup-manager/kup-manager-declarations.d.ts +21 -4
- package/dist/types/utils/kup-manager/kup-manager.d.ts +2 -2
- package/dist/types/utils/kup-objects/kup-objects.d.ts +1 -7
- package/package.json +3 -3
- package/dist/cjs/drag-and-drop-4787ff6f.js +0 -281
- package/dist/cjs/kup-grid.cjs.entry.js +0 -130
- package/dist/collection/assets/images/drag-multiple.js +0 -1
- package/dist/collection/components/kup-layout/kup-layout.css +0 -53
- package/dist/collection/components/kup-layout/kup-layout.js +0 -156
- package/dist/collection/utils/drag-and-drop.js +0 -109
- package/dist/collection/utils/kup-dialog/kup-dialog-declarations.js +0 -36
- package/dist/collection/utils/kup-dialog/kup-dialog.js +0 -310
- package/dist/esm/drag-and-drop-321cb4ca.js +0 -265
- package/dist/esm/kup-grid.entry.js +0 -126
- package/dist/ketchup/p-00fe1e3e.js +0 -1
- package/dist/ketchup/p-1165f4ea.entry.js +0 -1
- package/dist/ketchup/p-170d3cba.js +0 -1
- package/dist/ketchup/p-18cb3ba3.js +0 -1
- package/dist/ketchup/p-23541a97.entry.js +0 -45
- package/dist/ketchup/p-8fb9d9b2.entry.js +0 -1
- package/dist/ketchup/p-b14e77f0.js +0 -1
- package/dist/ketchup/p-d24cfdea.entry.js +0 -1
- package/dist/ketchup/p-fcd2fd8f.js +0 -1
- package/dist/ketchup/p-fce3b9d8.entry.js +0 -1
- package/dist/types/assets/images/drag-multiple.d.ts +0 -1
- package/dist/types/components/kup-layout/kup-layout.d.ts +0 -25
- package/dist/types/utils/drag-and-drop.d.ts +0 -53
- package/dist/types/utils/kup-dialog/kup-dialog-declarations.d.ts +0 -43
- package/dist/types/utils/kup-dialog/kup-dialog.d.ts +0 -50
|
@@ -1,130 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
const index = require('./index-3c471303.js');
|
|
6
|
-
const kupManager = require('./kup-manager-59ad8bdc.js');
|
|
7
|
-
const utils = require('./utils-2af73538.js');
|
|
8
|
-
const GenericVariables = require('./GenericVariables-9cd88034.js');
|
|
9
|
-
require('./kup-objects-59ea949c.js');
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Props of the kup-grid component.
|
|
13
|
-
* Used to export every prop in an object.
|
|
14
|
-
*/
|
|
15
|
-
var KupGridProps;
|
|
16
|
-
(function (KupGridProps) {
|
|
17
|
-
KupGridProps["columns"] = "The number of columns displayed by the grid, the default behavior is 12.";
|
|
18
|
-
KupGridProps["customStyle"] = "Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization";
|
|
19
|
-
KupGridProps["singleLine"] = "When set to true, forces the content on a single line.";
|
|
20
|
-
})(KupGridProps || (KupGridProps = {}));
|
|
21
|
-
|
|
22
|
-
const kupGridCss = ":host{--kup_grid_font_size:var(--kup-grid-font-size, var(--kup-font-size));--kup_grid_gap:var(--kup-grid-gap, 24px);--kup_grid_gap_mobile:var(--kup-grid-gap-mobile, 16px);--kup_grid_padding:var(--kup-grid-padding, 24px);font-size:var(--kup_grid_font_size);height:100%;width:100%}#kup-component{height:100%;width:100%}.layout-grid{box-sizing:border-box;margin:0px auto;padding:var(--kup_grid_padding)}.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap);grid-template-columns:repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr))}.layout-grid .layout-grid__inner .layout-grid__cell{display:flex;margin:0px;width:auto;box-sizing:border-box}.layout-grid__cell--span-1{grid-column-end:span 1}.layout-grid__cell--span-2{grid-column-end:span 2}.layout-grid__cell--span-3{grid-column-end:span 3}.layout-grid__cell--span-4{grid-column-end:span 4}.layout-grid__cell--span-5{grid-column-end:span 5}.layout-grid__cell--span-6{grid-column-end:span 6}.layout-grid__cell--span-7{grid-column-end:span 7}.layout-grid__cell--span-8{grid-column-end:span 8}.layout-grid__cell--span-9{grid-column-end:span 9}.layout-grid__cell--span-10{grid-column-end:span 10}.layout-grid__cell--span-11{grid-column-end:span 11}.layout-grid__cell--span-12{grid-column-end:span 12}.layout-grid__cell--span-13{grid-column-end:span 13}.layout-grid__cell--span-14{grid-column-end:span 14}.layout-grid__cell--span-15{grid-column-end:span 15}.layout-grid__cell--span-16{grid-column-end:span 16}.layout-grid__cell--span-17{grid-column-end:span 17}.layout-grid__cell--span-18{grid-column-end:span 18}.layout-grid__cell--span-19{grid-column-end:span 19}.layout-grid__cell--span-20{grid-column-end:span 20}.layout-grid__cell--span-21{grid-column-end:span 21}.layout-grid__cell--span-22{grid-column-end:span 22}.layout-grid__cell--span-23{grid-column-end:span 23}.layout-grid__cell--span-24{grid-column-end:span 24}.flex-layout,.flex-layout__inner{height:100%;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap}.flex-layout__inner{width:auto}.flex-layout__inner *{display:block;margin:0 1.5em}.flex-layout__inner .flex-layout__cell{display:flex}.flex-layout__inner .flex-layout__cell *{justify-content:center;margin:auto}@media (min-width: 600px) and (max-width: 839px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(8, minmax(0px, 1fr))}}@media (max-width: 599px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(4, minmax(0px, 1fr))}}:host(.kup-full-width) .flex-layout__inner{width:100%}:host(.kup-full-width) .flex-layout__inner *{margin:auto}";
|
|
23
|
-
|
|
24
|
-
let KupGrid = class {
|
|
25
|
-
constructor(hostRef) {
|
|
26
|
-
index.registerInstance(this, hostRef);
|
|
27
|
-
/*-------------------------------------------------*/
|
|
28
|
-
/* P r o p s */
|
|
29
|
-
/*-------------------------------------------------*/
|
|
30
|
-
/**
|
|
31
|
-
* The number of columns displayed by the grid, the default behavior is 12.
|
|
32
|
-
* @default 12
|
|
33
|
-
*/
|
|
34
|
-
this.columns = 12;
|
|
35
|
-
/**
|
|
36
|
-
* Custom style of the component.
|
|
37
|
-
* @default ""
|
|
38
|
-
* @see https://ketchup.smeup.com/ketchup-showcase/#/customization
|
|
39
|
-
*/
|
|
40
|
-
this.customStyle = '';
|
|
41
|
-
/**
|
|
42
|
-
* When set to true, forces the content on a single line.
|
|
43
|
-
* @default false
|
|
44
|
-
*/
|
|
45
|
-
this.singleLine = false;
|
|
46
|
-
/*-------------------------------------------------*/
|
|
47
|
-
/* I n t e r n a l V a r i a b l e s */
|
|
48
|
-
/*-------------------------------------------------*/
|
|
49
|
-
/**
|
|
50
|
-
* Instance of the KupManager class.
|
|
51
|
-
*/
|
|
52
|
-
this.kupManager = kupManager.kupManagerInstance();
|
|
53
|
-
}
|
|
54
|
-
/*-------------------------------------------------*/
|
|
55
|
-
/* P u b l i c M e t h o d s */
|
|
56
|
-
/*-------------------------------------------------*/
|
|
57
|
-
/**
|
|
58
|
-
* Used to retrieve component's props values.
|
|
59
|
-
* @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
|
|
60
|
-
* @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
|
|
61
|
-
*/
|
|
62
|
-
async getProps(descriptions) {
|
|
63
|
-
return utils.getProps(this, KupGridProps, descriptions);
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* This method is used to trigger a new render of the component.
|
|
67
|
-
*/
|
|
68
|
-
async refresh() {
|
|
69
|
-
index.forceUpdate(this);
|
|
70
|
-
}
|
|
71
|
-
/**
|
|
72
|
-
* Sets the props to the component.
|
|
73
|
-
* @param {GenericObject} props - Object containing props that will be set to the component.
|
|
74
|
-
*/
|
|
75
|
-
async setProps(props) {
|
|
76
|
-
utils.setProps(this, KupGridProps, props);
|
|
77
|
-
}
|
|
78
|
-
/*-------------------------------------------------*/
|
|
79
|
-
/* L i f e c y c l e H o o k s */
|
|
80
|
-
/*-------------------------------------------------*/
|
|
81
|
-
componentWillLoad() {
|
|
82
|
-
this.kupManager.debug.logLoad(this, false);
|
|
83
|
-
this.kupManager.theme.register(this);
|
|
84
|
-
}
|
|
85
|
-
componentDidLoad() {
|
|
86
|
-
this.kupManager.debug.logLoad(this, true);
|
|
87
|
-
}
|
|
88
|
-
componentWillRender() {
|
|
89
|
-
this.kupManager.debug.logRender(this, false);
|
|
90
|
-
}
|
|
91
|
-
componentDidRender() {
|
|
92
|
-
this.kupManager.debug.logRender(this, true);
|
|
93
|
-
}
|
|
94
|
-
render() {
|
|
95
|
-
const slots = this.rootElement.children;
|
|
96
|
-
if (!slots || slots.length === 0) {
|
|
97
|
-
this.kupManager.debug.logMessage(this, 'Missing slots, not rendering!', kupManager.KupDebugCategory.WARNING);
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
const content = [];
|
|
101
|
-
for (let i = 0; i < slots.length; i++) {
|
|
102
|
-
let el = null;
|
|
103
|
-
if (this.singleLine) {
|
|
104
|
-
el = index.h("slot", { name: `${i}` });
|
|
105
|
-
}
|
|
106
|
-
else {
|
|
107
|
-
let span = 1;
|
|
108
|
-
if (slots[i]['span']) {
|
|
109
|
-
span = slots[i]['span'];
|
|
110
|
-
}
|
|
111
|
-
el = (index.h("div", { class: `layout-grid__cell layout-grid__cell--span-${span}` }, index.h("slot", { name: `${i}` })));
|
|
112
|
-
}
|
|
113
|
-
content.push(el);
|
|
114
|
-
}
|
|
115
|
-
const style = {
|
|
116
|
-
['--kup_grid_columns']: this.columns,
|
|
117
|
-
};
|
|
118
|
-
const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
|
|
119
|
-
return (index.h(index.Host, { style: style }, customStyle ? index.h("style", null, customStyle) : null, index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", { class: this.singleLine ? 'flex-layout' : 'layout-grid' }, index.h("div", { class: this.singleLine
|
|
120
|
-
? 'flex-layout__inner'
|
|
121
|
-
: 'layout-grid__inner' }, content)))));
|
|
122
|
-
}
|
|
123
|
-
disconnectedCallback() {
|
|
124
|
-
this.kupManager.theme.unregister(this);
|
|
125
|
-
}
|
|
126
|
-
get rootElement() { return index.getElement(this); }
|
|
127
|
-
};
|
|
128
|
-
KupGrid.style = kupGridCss;
|
|
129
|
-
|
|
130
|
-
exports.kup_grid = KupGrid;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const dragMultipleImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBRDk4M0E2RjcwOEIxMUU4QjVGOEJGOEU4QjFDNjQyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBRDk4M0E3MDcwOEIxMUU4QjVGOEJGOEU4QjFDNjQyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkFEOTgzQTZENzA4QjExRThCNUY4QkY4RThCMUM2NDI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkFEOTgzQTZFNzA4QjExRThCNUY4QkY4RThCMUM2NDI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+R5zvIwAAAeJJREFUeNrs3b+q2mAYwOHERnQ6VLoJHV3cHHojrp1dNKsgXodOHbwAhzMUvItegLifDh1U8E8L1TTZWrFiPMeSU54fiJiQ5Xs074dLwiRJAhWnEAgQAXlFIHkv6Pf7H3e7XcPS3aco7wWVSqXc6XSCRoPJSxfHcVCyDMUKyGu5ZfV6vfDSRsBm4BmDOwzzgaQY79O3x3PnVqvVu8lkUomiyMreWLvd/txqtb7m+oU0m83v3W63enp8u91mgz0Acluz2cwMMdR1+1BP58XbM8cfDodDtNls3pye2O/3pfRcyS3rim97qZRUq9Vcu59sVZfnTszn82AwGFjVZ1Sv138Oh8Nvube9o9HI6r1wi8UimE6nuf+aMkMMdQEBIiBABASIgAAREAEBIiBABASIgAAREAEBIiBABASIgAAREAEBIiBABASIgAAREAEBIiBABASIgAAREAEBIiBABASIgAAREAEBIiBABASIgAAREAEBoivyqLU7djweg+Xyz2euZZ8vPVwSyH071Gq1p98PZE9JTfuUvr4AKU7JeDxOzBBDXYZ6gVqv10Ecx0CKUhiG2UD/cHr8b/MDyD/o0uKbIYa6bhrqeQePrqtcLv/IPXeSJLFyRdoIAAEiIEAE5P/olwADAE+GfLJCR9BSAAAAAElFTkSuQmCC';
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @prop --lyo_column-number, --kup-layout_column-number: Number of columns. This property is regulated by the columnsNumber property, but can be overridden by !important declarations.
|
|
3
|
-
* @prop --lyo_grid-gap, --kup-layout_grid-gap: Space between two adjacent cells (on columns and rows).
|
|
4
|
-
*/
|
|
5
|
-
:host {
|
|
6
|
-
--lyo_column-number: var(--kup-layout_column-number, 1);
|
|
7
|
-
--lyo_grid-gap: var(--kup-layout_grid-gap, 2rem);
|
|
8
|
-
display: inline-grid;
|
|
9
|
-
grid-auto-flow: row;
|
|
10
|
-
grid-column: 1;
|
|
11
|
-
grid-gap: var(--lyo_grid-gap) var(--lyo_grid-gap);
|
|
12
|
-
gap: var(--lyo_grid-gap) var(--lyo_grid-gap);
|
|
13
|
-
grid-row: auto;
|
|
14
|
-
grid-template-columns: repeat(var(--lyo_column-number), 1fr);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
:host([content-based-columns-width]) {
|
|
18
|
-
grid-template-columns: repeat(var(--lyo_column-number), minmax(min-content, auto));
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
:host(.lyo-multiple-columns) {
|
|
22
|
-
--kup-layout_column-number: 2;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host([fill-space]) {
|
|
26
|
-
display: grid;
|
|
27
|
-
text-align: center;
|
|
28
|
-
width: 100%;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:host([vertical]) {
|
|
32
|
-
grid-gap: 10px;
|
|
33
|
-
padding: 10px;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
:host([content-based-columns-width]) {
|
|
37
|
-
table-layout: auto;
|
|
38
|
-
column-width: auto;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
:host([horizontal]:not(.lyo-multiple-columns)) {
|
|
42
|
-
display: inline-block;
|
|
43
|
-
max-width: 100%;
|
|
44
|
-
overflow: visible;
|
|
45
|
-
white-space: nowrap;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
:host([horizontal][fill-space]:not(.lyo-multiple-columns)) {
|
|
49
|
-
display: grid;
|
|
50
|
-
grid-auto-columns: 1fr;
|
|
51
|
-
grid-auto-flow: column;
|
|
52
|
-
width: 100%;
|
|
53
|
-
}
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
import { Component, Host, Prop, h } from '@stencil/core';
|
|
2
|
-
export class KupLayout {
|
|
3
|
-
constructor() {
|
|
4
|
-
/**
|
|
5
|
-
* Specifies how many columns the content must be organized onto.
|
|
6
|
-
*
|
|
7
|
-
* If this is greater than 1, then the horizontal prop will have no effect.
|
|
8
|
-
*/
|
|
9
|
-
this.columnsNumber = 1;
|
|
10
|
-
/**
|
|
11
|
-
* By default, columns size is calculated by the grid layout and it tries to give the same space to elements.
|
|
12
|
-
*
|
|
13
|
-
* If this is true, columns width will be calculated according to the cells content.
|
|
14
|
-
* See SCSS file for more details.
|
|
15
|
-
*/
|
|
16
|
-
this.contentBasedColumnsWidth = false;
|
|
17
|
-
/**
|
|
18
|
-
* When true, the layout and its contents will try to take all the available horizontal space.
|
|
19
|
-
*/
|
|
20
|
-
this.fillSpace = false;
|
|
21
|
-
/**
|
|
22
|
-
* Tells the layout to place all elements onto a single row.
|
|
23
|
-
* It does not work when columnsNumber is greater then 1.
|
|
24
|
-
*/
|
|
25
|
-
this.horizontal = false;
|
|
26
|
-
}
|
|
27
|
-
render() {
|
|
28
|
-
let classLayout = null;
|
|
29
|
-
//horizontal class
|
|
30
|
-
//let posHorizontal = null;
|
|
31
|
-
if (this.columnsNumber <= 1) {
|
|
32
|
-
if (this.horizontal) {
|
|
33
|
-
classLayout = {
|
|
34
|
-
['horizontal']: true,
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
//fillspace class
|
|
39
|
-
//let allSpace = null;
|
|
40
|
-
if (this.fillSpace) {
|
|
41
|
-
classLayout = {
|
|
42
|
-
['fill-space']: true,
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
//contentBasedColumnsWidth
|
|
46
|
-
// let columnWidth = null;
|
|
47
|
-
if (this.contentBasedColumnsWidth) {
|
|
48
|
-
classLayout = {
|
|
49
|
-
['content-based-columns-width']: true,
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
// Classes
|
|
53
|
-
//let layoutClasses = null;
|
|
54
|
-
if (this.columnsNumber > 1) {
|
|
55
|
-
classLayout = {
|
|
56
|
-
['lyo-multiple-columns']: true,
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
else
|
|
60
|
-
this.columnsNumber = 1;
|
|
61
|
-
classLayout = {
|
|
62
|
-
['vertical']: true,
|
|
63
|
-
};
|
|
64
|
-
// Styles
|
|
65
|
-
let layoutStyle = null;
|
|
66
|
-
if (this.columnsNumber >= 1) {
|
|
67
|
-
layoutStyle = {
|
|
68
|
-
['--lyo_column-number']: this.columnsNumber,
|
|
69
|
-
};
|
|
70
|
-
}
|
|
71
|
-
return (h(Host, { class: classLayout, style: layoutStyle },
|
|
72
|
-
h("slot", null)));
|
|
73
|
-
}
|
|
74
|
-
static get is() { return "kup-layout"; }
|
|
75
|
-
static get encapsulation() { return "shadow"; }
|
|
76
|
-
static get originalStyleUrls() { return {
|
|
77
|
-
"$": ["kup-layout.scss"]
|
|
78
|
-
}; }
|
|
79
|
-
static get styleUrls() { return {
|
|
80
|
-
"$": ["kup-layout.css"]
|
|
81
|
-
}; }
|
|
82
|
-
static get properties() { return {
|
|
83
|
-
"columnsNumber": {
|
|
84
|
-
"type": "number",
|
|
85
|
-
"mutable": true,
|
|
86
|
-
"complexType": {
|
|
87
|
-
"original": "number",
|
|
88
|
-
"resolved": "number",
|
|
89
|
-
"references": {}
|
|
90
|
-
},
|
|
91
|
-
"required": false,
|
|
92
|
-
"optional": false,
|
|
93
|
-
"docs": {
|
|
94
|
-
"tags": [],
|
|
95
|
-
"text": "Specifies how many columns the content must be organized onto.\n\nIf this is greater than 1, then the horizontal prop will have no effect."
|
|
96
|
-
},
|
|
97
|
-
"attribute": "columns-number",
|
|
98
|
-
"reflect": true,
|
|
99
|
-
"defaultValue": "1"
|
|
100
|
-
},
|
|
101
|
-
"contentBasedColumnsWidth": {
|
|
102
|
-
"type": "boolean",
|
|
103
|
-
"mutable": false,
|
|
104
|
-
"complexType": {
|
|
105
|
-
"original": "boolean",
|
|
106
|
-
"resolved": "boolean",
|
|
107
|
-
"references": {}
|
|
108
|
-
},
|
|
109
|
-
"required": false,
|
|
110
|
-
"optional": false,
|
|
111
|
-
"docs": {
|
|
112
|
-
"tags": [],
|
|
113
|
-
"text": "By default, columns size is calculated by the grid layout and it tries to give the same space to elements.\n\nIf this is true, columns width will be calculated according to the cells content.\nSee SCSS file for more details."
|
|
114
|
-
},
|
|
115
|
-
"attribute": "content-based-columns-width",
|
|
116
|
-
"reflect": true,
|
|
117
|
-
"defaultValue": "false"
|
|
118
|
-
},
|
|
119
|
-
"fillSpace": {
|
|
120
|
-
"type": "boolean",
|
|
121
|
-
"mutable": false,
|
|
122
|
-
"complexType": {
|
|
123
|
-
"original": "boolean",
|
|
124
|
-
"resolved": "boolean",
|
|
125
|
-
"references": {}
|
|
126
|
-
},
|
|
127
|
-
"required": false,
|
|
128
|
-
"optional": false,
|
|
129
|
-
"docs": {
|
|
130
|
-
"tags": [],
|
|
131
|
-
"text": "When true, the layout and its contents will try to take all the available horizontal space."
|
|
132
|
-
},
|
|
133
|
-
"attribute": "fill-space",
|
|
134
|
-
"reflect": true,
|
|
135
|
-
"defaultValue": "false"
|
|
136
|
-
},
|
|
137
|
-
"horizontal": {
|
|
138
|
-
"type": "boolean",
|
|
139
|
-
"mutable": false,
|
|
140
|
-
"complexType": {
|
|
141
|
-
"original": "boolean",
|
|
142
|
-
"resolved": "boolean",
|
|
143
|
-
"references": {}
|
|
144
|
-
},
|
|
145
|
-
"required": false,
|
|
146
|
-
"optional": false,
|
|
147
|
-
"docs": {
|
|
148
|
-
"tags": [],
|
|
149
|
-
"text": "Tells the layout to place all elements onto a single row.\nIt does not work when columnsNumber is greater then 1."
|
|
150
|
-
},
|
|
151
|
-
"attribute": "horizontal",
|
|
152
|
-
"reflect": true,
|
|
153
|
-
"defaultValue": "false"
|
|
154
|
-
}
|
|
155
|
-
}; }
|
|
156
|
-
}
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
// TODO: [feat-1]: if acceptedDataTypesFound must be passed to all drag event handler but the dragStart event.a
|
|
2
|
-
// This could possibly simplify the analysis of the e.dataTransfer.types
|
|
3
|
-
// TODO: PayloadStructure to implement or remove (implement the TypeScript type lika a generic)
|
|
4
|
-
const dragDropPayloadHolder = {
|
|
5
|
-
// fields used only by the D&D wrapper
|
|
6
|
-
// [...]
|
|
7
|
-
// The holder of the payload data
|
|
8
|
-
dragPayload: undefined,
|
|
9
|
-
};
|
|
10
|
-
// payload getter
|
|
11
|
-
export function getDragDropPayload() {
|
|
12
|
-
return dragDropPayloadHolder.dragPayload;
|
|
13
|
-
}
|
|
14
|
-
// payload setter
|
|
15
|
-
export function setDragDropPayload(dragPayload) {
|
|
16
|
-
dragDropPayloadHolder.dragPayload = dragPayload;
|
|
17
|
-
}
|
|
18
|
-
// playload cleaner
|
|
19
|
-
function _cleanDragDropPayload() {
|
|
20
|
-
dragDropPayloadHolder.dragPayload = undefined;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
*
|
|
24
|
-
*/
|
|
25
|
-
export function setKetchupDraggable(handlers, data, image) {
|
|
26
|
-
const onDragStart = (e) => {
|
|
27
|
-
// clean the DragDropPlayload
|
|
28
|
-
_cleanDragDropPayload();
|
|
29
|
-
// Sets drag data, the type of drag action, and the image
|
|
30
|
-
Object.keys(data).forEach((key) => {
|
|
31
|
-
e.dataTransfer.setData(key, typeof data[key] === 'string'
|
|
32
|
-
? data[key]
|
|
33
|
-
: JSON.stringify(data[key]));
|
|
34
|
-
});
|
|
35
|
-
// manage the dragImage
|
|
36
|
-
if (image) {
|
|
37
|
-
e.dataTransfer.setDragImage(image.img, image.offsetX, image.offsetY);
|
|
38
|
-
}
|
|
39
|
-
// Executes the given handler for custom behavior
|
|
40
|
-
handlers.onDragStart(e);
|
|
41
|
-
};
|
|
42
|
-
let onDragOver = undefined;
|
|
43
|
-
if (handlers.onDragOver) {
|
|
44
|
-
onDragOver = (e) => {
|
|
45
|
-
if (handlers.onDragOver(e)) {
|
|
46
|
-
// this is mandatory in order to launch the onDrop method
|
|
47
|
-
e.preventDefault();
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
}
|
|
51
|
-
// remember that onDragOver and onDragLeave can be replaced by the same methods in DropHandlers (if the component is both draggable and droppable)
|
|
52
|
-
// in this scenario it's possible to merge the logic in the DropHandlers only
|
|
53
|
-
return Object.assign(Object.assign(Object.assign({ draggable: true, onDragStart }, (handlers.onDragLeave ? { onDragLeave: handlers.onDragLeave } : {})), (onDragOver ? { onDragOver } : {})), (handlers.onDragEnd ? { onDragEnd: handlers.onDragEnd } : {}));
|
|
54
|
-
}
|
|
55
|
-
export function setKetchupDroppable(handlers, acceptedDataTypes, dispatcherElement, targetElement) {
|
|
56
|
-
const onDrop = (e) => {
|
|
57
|
-
// Searches for accepted data types
|
|
58
|
-
const acceptedDataTypesFound = acceptedDataTypes.filter((dataType) => hasDragDataType(e, dataType));
|
|
59
|
-
// If not accepted data types have been found, we stop the drop operation
|
|
60
|
-
let processedDataType = '';
|
|
61
|
-
if (acceptedDataTypesFound.length >= 1 &&
|
|
62
|
-
!!(processedDataType = handlers.onDrop(e, acceptedDataTypesFound))) {
|
|
63
|
-
let sourceElement;
|
|
64
|
-
try {
|
|
65
|
-
sourceElement = JSON.parse(e.dataTransfer.getData('kup-drag-source-element'));
|
|
66
|
-
}
|
|
67
|
-
catch (error) {
|
|
68
|
-
console.log('Managed error during the kup-drop-source-element parsing', error);
|
|
69
|
-
sourceElement = e.dataTransfer.getData('kup-drag-source-element');
|
|
70
|
-
}
|
|
71
|
-
// dataType: identifier of Drag & Drop
|
|
72
|
-
// sourceElement: applicative dragged object
|
|
73
|
-
// targetElement: applicative dropped object
|
|
74
|
-
const ketchupDropEvent = new CustomEvent('kup-drop', {
|
|
75
|
-
bubbles: true,
|
|
76
|
-
cancelable: true,
|
|
77
|
-
detail: {
|
|
78
|
-
dataType: processedDataType,
|
|
79
|
-
sourceElement,
|
|
80
|
-
targetElement,
|
|
81
|
-
},
|
|
82
|
-
});
|
|
83
|
-
console.log('kup-drop event', ketchupDropEvent);
|
|
84
|
-
dispatcherElement.dispatchEvent(ketchupDropEvent);
|
|
85
|
-
// this is mandatory
|
|
86
|
-
e.preventDefault();
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
let onDragOver = undefined;
|
|
90
|
-
if (handlers.onDragOver) {
|
|
91
|
-
onDragOver = (e) => {
|
|
92
|
-
if (handlers.onDragOver(e)) {
|
|
93
|
-
// this is mandatory
|
|
94
|
-
e.preventDefault();
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
}
|
|
98
|
-
// remember that onDragOver and onDragLeave can be replace the same methods in DragHandlers (if the component is both draggable and droppable)
|
|
99
|
-
// in this scenario it's possible to merge the logic in the DropHandlers only
|
|
100
|
-
return Object.assign(Object.assign(Object.assign({}, (onDragOver ? { onDragOver } : {})), (handlers.onDragLeave ? { onDragLeave: handlers.onDragLeave } : {})), { onDrop });
|
|
101
|
-
}
|
|
102
|
-
// utility that set the drag effect allowed
|
|
103
|
-
export function setDragEffectAllowed(e, effectAllowed = 'move') {
|
|
104
|
-
e.dataTransfer.effectAllowed = effectAllowed;
|
|
105
|
-
}
|
|
106
|
-
// utility that simply check the drag data type
|
|
107
|
-
export function hasDragDataType(e, dataType) {
|
|
108
|
-
return e.dataTransfer.types.indexOf(dataType) >= 0;
|
|
109
|
-
}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* HTML Attribute attached to dialogs.
|
|
3
|
-
* Referenced by kup-theme.css
|
|
4
|
-
*/
|
|
5
|
-
export const kupDialogAttribute = 'kup-dialog';
|
|
6
|
-
/**
|
|
7
|
-
* CSS class attached to resizable dialogs.
|
|
8
|
-
* Referenced by kup-theme.css
|
|
9
|
-
*/
|
|
10
|
-
export const kupResizableDialogClass = 'kup-resizable';
|
|
11
|
-
/**
|
|
12
|
-
* Actions performed by KupDialog.
|
|
13
|
-
* The value reflects the CSS "cursor" property.
|
|
14
|
-
*/
|
|
15
|
-
export var KupDialogActions;
|
|
16
|
-
(function (KupDialogActions) {
|
|
17
|
-
KupDialogActions["MOVE"] = "move";
|
|
18
|
-
KupDialogActions["RESIZE"] = "resize";
|
|
19
|
-
})(KupDialogActions || (KupDialogActions = {}));
|
|
20
|
-
/**
|
|
21
|
-
* Coordinates of the resize.
|
|
22
|
-
* The value reflects the CSS "cursor" property.
|
|
23
|
-
*/
|
|
24
|
-
export var KupDialogCoordinates;
|
|
25
|
-
(function (KupDialogCoordinates) {
|
|
26
|
-
KupDialogCoordinates["ALL"] = "move";
|
|
27
|
-
KupDialogCoordinates["UNSET"] = "auto";
|
|
28
|
-
KupDialogCoordinates["NORTHWEST"] = "nw-resize";
|
|
29
|
-
KupDialogCoordinates["NORTH"] = "n-resize";
|
|
30
|
-
KupDialogCoordinates["NORTHEAST"] = "ne-resize";
|
|
31
|
-
KupDialogCoordinates["EAST"] = "e-resize";
|
|
32
|
-
KupDialogCoordinates["SOUTHEAST"] = "se-resize";
|
|
33
|
-
KupDialogCoordinates["SOUTH"] = "s-resize";
|
|
34
|
-
KupDialogCoordinates["SOUTHWEST"] = "sw-resize";
|
|
35
|
-
KupDialogCoordinates["WEST"] = "w-resize";
|
|
36
|
-
})(KupDialogCoordinates || (KupDialogCoordinates = {}));
|