@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/collection/assets/data-table.js

@@ -1,5 +1,5 @@
 document.addEventListener('kup-card-event', (e) => console.log(e));
-document.addEventListener('kup-datatable-cellupdate', (e) => {
+document.addEventListener('kup-cell-update', (e) => {
     console.log(e);
     e.detail.cell['info'] = {
         color: 'var(--kup-success-color)',
@@ -12,6 +12,7 @@ document.addEventListener('kup-datatable-rowactionclick', (e) =>
     console.log(e)
 );
 document.addEventListener('kupColumnMenuActive', (e) => console.log(e));
+document.addEventListener('kup-datatable-dblclick', (e) => console.log(e));
 document.addEventListener('kup-datatable-contextmenu', (e) => console.log(e));
 document.addEventListener('kup-datatable-click', (e) => console.log(e));
 document.addEventListener('kup-datatable-columnmenu', (e) => {
@@ -76,6 +77,519 @@ document.addEventListener('kup-datatable-columnmenu', (e) => {
         e.detail.card.refresh();
     }
 });
+
+const completeData = {
+    columns: [
+        {
+            name: 'AUTOCOMPLETE',
+            title: 'Autocomplete',
+        },
+        {
+            name: 'BAR',
+            title: 'Bar',
+        },
+        {
+            name: 'BTN',
+            title: 'Btn',
+        },
+        {
+            name: 'BUTTON',
+            title: 'Button',
+        },
+        {
+            name: 'CHART',
+            title: 'Chart',
+        },
+        {
+            name: 'CHECKBOX',
+            title: 'Checkbox',
+        },
+        {
+            name: 'CHIPS',
+            title: 'Chips',
+        },
+        {
+            name: 'COLORPICKER',
+            title: 'Color picker',
+        },
+        {
+            name: 'COMBOBOX',
+            title: 'Combobox',
+        },
+        {
+            name: 'DATE',
+            title: 'Date',
+        },
+        {
+            name: 'DATETIME',
+            title: 'Date time',
+        },
+        {
+            name: 'EDITOR',
+            title: 'Editor',
+        },
+        {
+            name: 'GAUGE',
+            title: 'Gauge',
+        },
+        {
+            name: 'ICON',
+            title: 'Icon',
+        },
+        {
+            name: 'IMAGE',
+            title: 'Image',
+        },
+        {
+            name: 'KNOB',
+            title: 'Knob',
+        },
+        {
+            name: 'LINK',
+            title: 'Link',
+        },
+        {
+            name: 'NUMBER',
+            title: 'Number',
+        },
+        {
+            name: 'PROGRESSBAR',
+            title: 'Progress bar',
+        },
+        {
+            name: 'RADIO',
+            title: 'Radio',
+        },
+        {
+            name: 'RATING',
+            title: 'Rating',
+        },
+        {
+            name: 'STRING',
+            title: 'String',
+        },
+        {
+            name: 'TIME',
+            title: 'Time',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                AUTOCOMPLETE: {
+                    data: {
+                        data: {
+                            'kup-list': {
+                                data: [
+                                    {
+                                        text: 'First item',
+                                        value: 'CODE_1',
+                                        selected: false,
+                                    },
+                                    {
+                                        text: 'Second item',
+                                        value: 'CODE_2',
+                                        selected: false,
+                                    },
+                                    {
+                                        text: 'Third item',
+                                        value: 'CODE_3',
+                                        selected: false,
+                                    },
+                                ],
+                                displayMode: 'both',
+                                selectable: true,
+                            },
+                            'kup-text-field': {
+                                label: 'Demo',
+                            },
+                        },
+                        initialValue: 'CODE_1',
+                    },
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    isEditable: true,
+                    shape: 'ACP',
+                    value: 'CODE_1',
+                    options: false,
+                },
+                BAR: {
+                    obj: {
+                        t: 'J4',
+                        p: 'BAR',
+                        k: 'R255G128B000;20,58\\\\HEIGHT;60',
+                    },
+                    data: {
+                        data: [
+                            {
+                                shape: 'bar',
+                                color: 'rgb(255,128,0)',
+                                width: '20%',
+                                height: '60%',
+                            },
+                        ],
+                    },
+                    value: 'R255G128B000;20,58\\\\HEIGHT;60',
+                },
+                BTN: {
+                    cssClass: 'strong-text',
+                    data: {
+                        data: [
+                            {
+                                children: [
+                                    {
+                                        children: [],
+                                        disabled: false,
+                                        expandable: false,
+                                        icon: 'lightbulb-outline',
+                                        isExpanded: false,
+                                        obj: {
+                                            k: '000050',
+                                            p: 'COD_VER',
+                                            t: 'VO',
+                                        },
+                                        options: false,
+                                        value: 'Collaboratore',
+                                    },
+                                    {
+                                        children: [],
+                                        disabled: false,
+                                        expandable: false,
+                                        icon: 'briefcase',
+                                        isExpanded: false,
+                                        obj: {
+                                            k: '000050',
+                                            p: 'COD_VER',
+                                            t: 'VO',
+                                        },
+                                        options: false,
+                                        value: 'Azienda',
+                                    },
+                                ],
+                                data: {
+                                    dropdownOnly: true,
+                                },
+                                disabled: false,
+                                expandable: false,
+                                isExpanded: false,
+                                options: false,
+                            },
+                        ],
+                        customStyle:
+                            ' #kup-component button { padding: 0; font-size: 0.65em; } ',
+                        icon: 'settings',
+                        className: 'kup-slim',
+                    },
+                    isEditable: false,
+                    obj: {
+                        k: '000050',
+                        p: 'COD_VER',
+                        t: 'VO',
+                    },
+                    shape: 'BTN',
+                    value: '',
+                },
+                BUTTON: {
+                    cssClass: 'strong-text',
+                    data: {
+                        label: 'Testo',
+                    },
+                    isEditable: false,
+                    obj: {
+                        k: 'T(Testo)',
+                        p: 'BTN',
+                        t: 'J4',
+                    },
+                    value: 'Testo',
+                    style: {
+                        minHeight: '36px',
+                    },
+                },
+                CHART: {
+                    obj: {
+                        t: 'J4',
+                        p: 'GRA_PIE',
+                        k: '1;2;1',
+                    },
+                    value: '1;2;1',
+                    data: {
+                        colors: ['red', 'blue', 'purple'],
+                        id: 'pie_example',
+                        sizeX: '100px',
+                        sizeY: '100px',
+                        offlineMode: {
+                            value: '1;2;1',
+                            shape: 'pie',
+                        },
+                    },
+                },
+                CHECKBOX: {
+                    obj: {
+                        k: '1',
+                        p: 'SI/NO',
+                        t: 'V2',
+                    },
+                    data: {
+                        checked: true,
+                    },
+                    options: false,
+                    value: '1',
+                    style: {
+                        minHeight: '18px',
+                    },
+                    isEditable: true,
+                },
+                CHIPS: {
+                    data: {
+                        data: [
+                            {
+                                value: 'text',
+                                label: 'Text only',
+                            },
+                            {
+                                value: 'icon',
+                                icon: 'widgets',
+                                label: 'With icon',
+                            },
+                        ],
+                    },
+                    obj: {
+                        t: 'JL',
+                        p: '**',
+                        k: 'text;icon',
+                    },
+                    value: 'text;icon',
+                    options: false,
+                    style: {
+                        minHeight: '40px',
+                    },
+                },
+                COLORPICKER: {
+                    data: {
+                        initialValue: 'rgb(255, 0, 0)',
+                    },
+                    obj: {
+                        t: 'J1',
+                        p: 'COL',
+                        k: 'R255G000B000',
+                    },
+                    value: 'R255G000B000',
+                    options: false,
+                    isEditable: true,
+                },
+                COMBOBOX: {
+                    isEditable: true,
+                    data: {
+                        data: {
+                            'kup-list': {
+                                data: [
+                                    {
+                                        text: 'First item',
+                                        value: 'CODE_1',
+                                        selected: false,
+                                    },
+                                    {
+                                        text: 'Second item',
+                                        value: 'CODE_2',
+                                        selected: false,
+                                    },
+                                    {
+                                        text: 'Third item',
+                                        value: 'CODE_3',
+                                        selected: false,
+                                    },
+                                ],
+                                displayMode: 'both',
+                                selectable: true,
+                            },
+                            'kup-text-field': {
+                                label: 'Demo',
+                            },
+                        },
+                        initialValue: 'CODE_2',
+                    },
+                    obj: {
+                        t: '',
+                        p: '',
+                        k: '',
+                    },
+                    shape: 'CMB',
+                    value: 'CODE_2',
+                    options: false,
+                    isEditable: true,
+                },
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '',
+                        k: '',
+                    },
+                    value: '2021-01-02',
+                    displayedValue: '02/01/2021',
+                    isEditable: true,
+                },
+                DATETIME: {
+                    obj: {
+                        t: 'I3',
+                        p: '2',
+                        k: '',
+                    },
+                    value: '2021-07-19 10:33:44',
+                    displayedValue: '19/07/2021, 10:33:44',
+                    isEditable: true,
+                },
+                EDITOR: {
+                    isEditable: false,
+                    obj: {
+                        k: '<ul><li>6737</li><li>6796</li></ul>',
+                        p: '',
+                        t: '',
+                    },
+                    shape: 'Edt',
+                    value: '<ul><li>6737</li><li>6796</li></ul>',
+                },
+                GAUGE: {
+                    data: {
+                        minValue: '30',
+                        maxValue: '150',
+                        value: '50',
+                    },
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '50',
+                    },
+                    value: '50',
+                    shape: 'Gau',
+                    options: false,
+                },
+                ICON: {
+                    obj: {
+                        t: 'J4',
+                        p: 'ICO',
+                        k: 'CN;COL;Customers module',
+                    },
+                    data: {
+                        resource: 'account',
+                    },
+                    value: 'account',
+                    style: {
+                        minHeight: '18px',
+                    },
+                },
+                IMAGE: {
+                    obj: {
+                        t: 'J4',
+                        p: 'IMG',
+                        k: 'CN;COL;Customers module',
+                    },
+                    data: {
+                        resource: 'https://via.placeholder.com/64?text=PF',
+                    },
+                    value: 'https://via.placeholder.com/64?text=PF',
+                },
+                KNOB: {
+                    obj: {
+                        t: 'J4',
+                        p: 'PGB',
+                        k: '80',
+                    },
+                    data: {
+                        value: '80',
+                        isRadial: true,
+                    },
+                    value: '80',
+                },
+                LINK: {
+                    cssClass: '',
+                    isEditable: false,
+                    obj: {
+                        k: 'https://via.placeholder.com/64?text=PF',
+                        p: 'URL',
+                        t: 'J1',
+                    },
+                    value: 'https://via.placeholder.com/64?text=PF',
+                },
+                NUMBER: {
+                    obj: {
+                        k: '12345',
+                        p: '',
+                        t: 'NR',
+                    },
+                    value: '12345.0',
+                    displayedValue: '12.345',
+                    isEditable: true,
+                },
+                PROGRESSBAR: {
+                    obj: {
+                        t: 'J4',
+                        p: 'PGB',
+                        k: '80',
+                    },
+                    data: {
+                        value: '80',
+                    },
+                    value: '80',
+                },
+                RADIO: {
+                    data: {
+                        data: [
+                            {
+                                checked: true,
+                                value: '10',
+                            },
+                        ],
+                    },
+                    obj: {
+                        k: '10',
+                        p: 'B£WAR',
+                        t: 'TA',
+                    },
+                    shape: 'Rad',
+                    value: '10',
+                },
+                RATING: {
+                    data: {
+                        value: '5',
+                        maxValue: 10,
+                    },
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '5',
+                    },
+                    value: '5',
+                    options: false,
+                    shape: 'Rtg',
+                },
+                STRING: {
+                    obj: {
+                        k: 'String value',
+                        p: '',
+                        t: '',
+                    },
+                    value: 'String value',
+                    isEditable: true,
+                },
+                TIME: {
+                    obj: {
+                        t: 'I1',
+                        p: '',
+                        k: '',
+                    },
+                    value: '10:55',
+                    displayedValue: '10:55',
+                    isEditable: true,
+                },
+            },
+            id: '0',
+        },
+    ],
+};
+
 const radioColumns = [
     {
         name: 'G08ID',
@@ -132018,6 +132532,9 @@ const textfieldRow = [
     },
 ];
 
+const completeTable = document.getElementById('complete-data');
+completeTable.data = completeData;
+
 const textfieldTable = document.getElementById('text-field');
 textfieldTable.data = { columns: textfieldColumn, rows: textfieldRow };
 textfieldTable.rowActions = rowActions;

package/dist/collection/assets/index.js

@@ -46,6 +46,10 @@ components.data = [
         text: 'Card',
         value: 'card.html',
     },
+    {
+        text: 'Cell',
+        value: 'cell.html',
+    },
     {
         text: 'Chart',
         value: 'chart.html',
@@ -118,6 +122,10 @@ components.data = [
         text: 'Rating',
         value: 'rating.html',
     },
+    {
+        text: 'Snackbar',
+        value: 'snackbar.html',
+    },
     {
         text: 'Switch',
         value: 'switch.html',

package/dist/collection/assets/snackbar.js

@@ -0,0 +1,32 @@
+const bottomButton = document.getElementById('bottom');
+const topButton = document.getElementById('top');
+const snackbar = document.getElementById('snackbar');
+const props = {
+    text: 'This is a snackbar demo',
+    actionButton: { label: 'Action', styling: 'flat' },
+    closeButton: true,
+    timeout: 2000,
+};
+
+bottomButton.addEventListener('kup-button-click', () => {
+    showBottomSnackbar(props);
+});
+topButton.addEventListener('kup-button-click', () => {
+    showTopSnackbar(props);
+});
+
+function showBottomSnackbar(props) {
+    for (const key in props) {
+        snackbar[key] = props[key];
+    }
+    snackbar.classList.remove('kup-top');
+    snackbar.show();
+}
+
+function showTopSnackbar(props) {
+    for (const key in props) {
+        snackbar[key] = props[key];
+    }
+    snackbar.classList.add('kup-top');
+    snackbar.show();
+}

package/dist/collection/collection-manifest.json

@@ -1,7 +1,9 @@
 {
   "entries": [
+    "./components/kup-card/kup-card.js",
     "./components/kup-badge/kup-badge.js",
     "./components/kup-tooltip/kup-tooltip.js",
+    "./components/kup-chart/kup-chart.js",
     "./components/kup-data-table/kup-data-table.js",
     "./components/kup-tree/kup-tree.js",
     "./components/kup-accordion/kup-accordion.js",
@@ -10,8 +12,7 @@
     "./components/kup-button/kup-button.js",
     "./components/kup-button-list/kup-button-list.js",
     "./components/kup-calendar/kup-calendar.js",
-    "./components/kup-card/kup-card.js",
-    "./components/kup-chart/kup-chart.js",
+    "./components/kup-cell/kup-cell.js",
     "./components/kup-checkbox/kup-checkbox.js",
     "./components/kup-chip/kup-chip.js",
     "./components/kup-color-picker/kup-color-picker.js",
@@ -21,13 +22,11 @@
     "./components/kup-date-picker/kup-date-picker.js",
     "./components/kup-drawer/kup-drawer.js",
     "./components/kup-dropdown-button/kup-dropdown-button.js",
-    "./components/kup-editor/kup-editor.js",
     "./components/kup-field/kup-field.js",
     "./components/kup-gauge/kup-gauge.js",
     "./components/kup-grid/kup-grid.js",
     "./components/kup-iframe/kup-iframe.js",
     "./components/kup-image/kup-image.js",
-    "./components/kup-layout/kup-layout.js",
     "./components/kup-lazy/kup-lazy.js",
     "./components/kup-radio/kup-radio.js",
     "./components/kup-list/kup-list.js",
@@ -38,6 +37,7 @@
     "./components/kup-progress-bar/kup-progress-bar.js",
     "./components/kup-qlik/kup-qlik.js",
     "./components/kup-rating/kup-rating.js",
+    "./components/kup-snackbar/kup-snackbar.js",
     "./components/kup-spinner/kup-spinner.js",
     "./components/kup-switch/kup-switch.js",
     "./components/kup-tab-bar/kup-tab-bar.js",
@@ -46,8 +46,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.9.0",
-    "typescriptVersion": "4.2.3"
+    "version": "2.12.0",
+    "typescriptVersion": "4.3.5"
   },
   "collections": [],
   "bundles": []