@sme.up/ketchup 9.6.3 → 9.6.4

package/dist/collection/assets/input-panel.js

@@ -0,0 +1,249 @@
+let data = {
+    columns: [
+        {
+            name: 'NAM',
+            title: 'Name',
+            visible: true,
+        },
+        {
+            name: 'SUR',
+            title: 'Surname',
+            visible: true,
+        },
+        {
+            name: 'NAT',
+            title: 'Nation',
+            visible: true,
+        },
+        {
+            name: 'CIT',
+            title: 'City',
+            visible: true,
+        },
+        {
+            name: 'CHK',
+            title: 'Checkbox',
+            visible: true,
+        },
+        {
+            name: 'RAD',
+            title: 'Radio Buttons',
+            visible: true,
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                NAM: {
+                    value: '',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'ITX',
+                },
+                SUR: {
+                    value: '',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'ITX',
+                },
+                NAT: {
+                    value: '',
+                    options: [
+                        {
+                            id: 'ITA',
+                            label: 'Italy',
+                        },
+                        {
+                            id: 'SPA',
+                            label: 'Spain',
+                        },
+                        {
+                            id: 'GER',
+                            label: 'Germany',
+                        },
+                        {
+                            id: 'FRA',
+                            label: 'France',
+                        },
+                        {
+                            id: 'POR',
+                            label: 'Portugal',
+                        },
+                        {
+                            id: 'ENG',
+                            label: 'England',
+                        },
+                    ],
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    shape: 'CMB',
+                },
+                CIT: {
+                    value: '',
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    editable: true,
+                    mandatory: true,
+                    options: [
+                        {
+                            id: 'ROM',
+                            label: 'Rome',
+                        },
+                        {
+                            id: 'FLO',
+                            label: 'Florence',
+                        },
+                        {
+                            id: 'VEN',
+                            label: 'Venice',
+                        },
+                        {
+                            id: 'MAD',
+                            label: 'Madrid',
+                        },
+                        {
+                            id: 'BAR',
+                            label: 'Barcelona',
+                        },
+                        {
+                            id: 'SEV',
+                            label: 'Seville',
+                        },
+                        {
+                            id: 'BER',
+                            label: 'Berlin',
+                        },
+                        {
+                            id: 'MUN',
+                            label: 'Munich',
+                        },
+                        {
+                            id: 'HAM',
+                            label: 'Hamburg',
+                        },
+                        {
+                            id: 'PAR',
+                            label: 'Paris',
+                        },
+                        {
+                            id: 'MAR',
+                            label: 'Marseille',
+                        },
+                        {
+                            id: 'LYO',
+                            label: 'Lyon',
+                        },
+                        {
+                            id: 'LIS',
+                            label: 'Lisbon',
+                        },
+                        {
+                            id: 'POR',
+                            label: 'Porto',
+                        },
+                        {
+                            id: 'FAR',
+                            label: 'Faro',
+                        },
+                        {
+                            id: 'LON',
+                            label: 'London',
+                        },
+                        {
+                            id: 'MAN',
+                            label: 'Manchester',
+                        },
+                        {
+                            id: 'LIV',
+                            label: 'Liverpool',
+                        },
+                    ],
+                    shape: 'ACP',
+                },
+                CHK: {
+                    value: 'on',
+                    editable: true,
+                    mandatory: true,
+                    shape: 'CHK',
+                },
+                RAD: {
+                    value: '3',
+                    options: [
+                        {
+                            id: '1',
+                            label: 'One',
+                        },
+                        {
+                            id: '2',
+                            label: 'Two',
+                        },
+                        {
+                            id: '3',
+                            label: 'Three',
+                        },
+                        {
+                            id: '4',
+                            label: 'Four',
+                        },
+                    ],
+                    editable: true,
+                    mandatory: true,
+                    shape: 'RAD',
+                },
+            },
+            layout: {},
+        },
+    ],
+};
+
+const inputPanel = document.getElementById('input-panel');
+inputPanel.data = data;
+
+const inputPanelCallback = [
+    {
+        eventName: 'kup-autocomplete-input',
+        eventCallback: (e) => {
+            const newdata = {
+                ...data,
+                rows: data.rows.map((row) => {
+                    const keys = Object.keys(row.cells);
+                    const updatedCells = keys.reduce((acc, key) => {
+                        let updatedValue = e.state.find(
+                            (state) => state.column.name === key
+                        ).cell.value;
+                        return {
+                            ...acc,
+                            [key]: {
+                                ...row.cells[key],
+                                value: updatedValue,
+                            },
+                        };
+                    }, {});
+                    return { ...row, cells: updatedCells };
+                }),
+            };
+            const inputPanel = document.getElementById('input-panel');
+            inputPanel.data = newdata;
+        },
+    },
+];
+
+inputPanel.valueChangeCb = inputPanelCallback;

package/dist/collection/assets/pdf.js

@@ -0,0 +1,15 @@
+const comp = document.getElementById('pdf');
+
+comp.addEventListener('kup-pdf-ready', (e) => {
+    console.log('Pdf ready', e);
+});
+
+const props = {
+    pdfPath: '../../assets/kup-pdf-sample.pdf',
+};
+
+if (props) {
+    for (const key in props) {
+        comp[key] = props[key];
+    }
+}

package/dist/collection/collection-manifest.json

@@ -32,12 +32,14 @@
     "components/kup-iframe/kup-iframe.js",
     "components/kup-image/kup-image.js",
     "components/kup-image-list/kup-image-list.js",
+    "components/kup-input-panel/kup-input-panel.js",
     "components/kup-lazy/kup-lazy.js",
     "components/kup-radio/kup-radio.js",
     "components/kup-list/kup-list.js",
     "components/kup-magic-box/kup-magic-box.js",
     "components/kup-nav-bar/kup-nav-bar.js",
     "components/kup-numeric-picker/kup-numeric-picker.js",
+    "components/kup-pdf/kup-pdf.js",
     "components/kup-photo-frame/kup-photo-frame.js",
     "components/kup-planner/kup-planner.js",
     "components/kup-planner/utils/custom-task-list-header.js",

package/dist/collection/components/kup-input-panel/kup-input-panel-declarations.js

@@ -0,0 +1,8 @@
+export var KupInputPanelProps;
+(function (KupInputPanelProps) {
+    KupInputPanelProps["customStyle"] = "Custom style of the component.";
+    KupInputPanelProps["data"] = "Actual data of the input panel.";
+    KupInputPanelProps["hiddenSubmitButton"] = "Creates a hidden submit button in order to submit the form with enter.";
+    KupInputPanelProps["submitCb"] = "Sets the callback function on submit form";
+    KupInputPanelProps["valueChangeCb"] = "Sets the callback function on value change event";
+})(KupInputPanelProps || (KupInputPanelProps = {}));

package/dist/collection/components/kup-input-panel/kup-input-panel.css

@@ -0,0 +1,132 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control {
+  height: 40px;
+  width: 40px;
+}