@sme.up/ketchup 9.6.4 → 9.6.5

package/dist/collection/components/kup-image-list/kup-image-list.js

@@ -69,7 +69,7 @@ export class KupImageList {
         _KupImageList_interactableTouch.set(this, []);
         this.currentNode = null;
         this.navigationBarToggled = false;
-        this.columns = 4;
+        this.columns = null;
         this.customStyle = '';
         this.data = [];
         this.ripple = true;
@@ -180,14 +180,14 @@ export class KupImageList {
             };
             combinedGridStyle = Object.assign(Object.assign({}, combinedGridStyle), gridRowsStyle);
         }
-        return (h(Host, { key: '86c391c4a1e0c507dc0c07971aa90e6f7091bc95' }, h("style", { key: '99f966c6cd10aac991c99b4badca0a6cff1dbf5b' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e4eaa257a47cabcb34a412f56d736cd77fbc97af', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'b62094a90858c7c5f36a9f76b3b4372b506ace67' }, h("style", { key: 'eeb8ad09387f7aaad846441e1d7c28554c6996e2' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd908bdbb3d41f6cedaa6e905cc6be9aa4eb4e27b', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '48ff34cbb307b0ab49ca3b8ed240f0510e674e93', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: 'e3852ae5ff9a61857cc70f9ebd83f5f317d596da', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '97ac20f9d893c131c03adc953e78435bb062f137', class: "image-list", style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '1726193b158b8cefb9a445acc5b75ae1d07061a3', class: "image-list", style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));
@@ -221,13 +221,13 @@ export class KupImageList {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "4"
+                            "text": "null"
                         }],
                     "text": "Number of columns to display in the grid layout."
                 },
                 "attribute": "columns",
                 "reflect": false,
-                "defaultValue": "4"
+                "defaultValue": "null"
             },
             "customStyle": {
                 "type": "string",
@@ -555,7 +555,10 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     };
     const image = h(FImage, Object.assign({}, props));
     const label = h("div", { class: "image-list__label" }, node.value);
-    return (h(FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: FCellPadding.NONE, row: Object.assign({}, node) }, h("div", { class: "image-list__wrapper" }, image, label)));
+    const hasExternalResource = props.resource.indexOf('.') > -1 ||
+        props.resource.indexOf('/') > -1 ||
+        props.resource.indexOf('\\') > -1;
+    return (h(FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: FCellPadding.NONE, row: Object.assign({}, node) }, h("div", { class: `image-list__wrapper${hasExternalResource ? ' images' : ''}` }, !hasExternalResource && (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 24 24" })), image, label)));
 }, _KupImageList_createList = function _KupImageList_createList() {
     const nodes = [];
     const items = this.currentNode ? this.currentNode.children : this.data;
@@ -660,10 +663,14 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     const holdCb = (e) => {
         if (e.pointerType === 'pen' || e.pointerType === 'touch') {
             __classPrivateFieldSet(this, _KupImageList_hold, true, "f");
+            this.kupContextMenu.emit({
+                comp: this,
+                id: this.rootElement.id,
+                details: __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_contextMenuHandler).call(this, e),
+            });
         }
     };
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.TAP, tapCb);
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.DOUBLETAP, doubletapCb);
-    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
 };

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

@@ -4,5 +4,5 @@ export var KupInputPanelProps;
     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["optionsHandler"] = "Sets the callback function to recieve options";
 })(KupInputPanelProps || (KupInputPanelProps = {}));

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

@@ -126,7 +126,44 @@
   letter-spacing: 0;
 }
 
-.input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control {
+/**
+* @prop --kup-input-panel-background-color: Sets background of the component.
+* @prop --kup-input-panel-color: Sets text color of the component.
+* @prop --kup-input-panel-font-family: Sets font family of the component.
+* @prop --kup-input-panel-font-size: Sets font size of the component.
+* @prop --kup-input-panel-label-alignment: Sets the text alignment of labels.
+* @prop --kup-input-panel-label-width: Sets the width of labels.
+* @prop --kup-input-panel-padding: Sets the padding of the input panel.
+*/
+:host {
+  --kup_input_panel_background_color: var(--kup-input-panel-background-color,
+      var(--kup-background-color));
+  --kup_input_panel_color: var(--kup-input-panel-color, var(--kup-text-color));
+  --kup_input_panel_font_family: var(--kup-input-panel-font-family, var(--kup-font-family));
+  --kup_input_panel_font_size: var(--kup-input-panel-font-size, var(--kup-font-size));
+  --kup_input_panel_label_alignment: var(--kup-input-panel-label-alignment);
+  --kup_input_panel_label_width: var(--kup-input-panel-label-width);
+  --kup_input_panel_padding: var(--kup-input-panel-padding, 1em 0);
+}
+:host .input-panel {
+  background: var(--kup_input_panel_background_color);
+  color: var(--kup_input_panel_color);
+  display: flex;
+  flex-grow: 1;
+  overflow: auto;
+  padding: var(--kup_input_panel_padding);
+  position: relative;
+}
+:host .input-panel--column {
+  flex-direction: column;
+}
+:host .input-panel__section {
+  display: grid;
+}
+:host .input-panel__horizontal-section {
+  display: inline-grid;
+}
+:host .input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control {
   height: 40px;
   width: 40px;
 }

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

@@ -90,24 +90,30 @@ describe('kup-input-panel', () => {
                             editable: true,
                             mandatory: true,
                             options: [
-                                'Florence',
-                                'Venice',
-                                'Rome',
-                                'Madrid',
-                                'Barcelona',
-                                'Seville',
-                                'Berlin',
-                                'Munich',
-                                'Hamburg',
-                                'Paris',
-                                'Marseille',
-                                'Lyon',
-                                'Lisbon',
-                                'Porto',
-                                'Faro',
-                                'London',
-                                'Manchester',
-                                'Liverpool',
+                                {
+                                    id: 'FLO',
+                                    label: 'Florence',
+                                },
+                                {
+                                    id: 'VEN',
+                                    label: 'Venice',
+                                },
+                                {
+                                    id: 'ROM',
+                                    label: 'Rome',
+                                },
+                                {
+                                    id: 'MAD',
+                                    label: 'Madrid',
+                                },
+                                {
+                                    id: 'BAR',
+                                    label: 'Barcelona',
+                                },
+                                {
+                                    id: 'SEV',
+                                    label: 'Seville',
+                                },
                             ],
                             shape: 'ACP',
                         },
@@ -139,7 +145,7 @@ describe('kup-input-panel', () => {
         expect(list).not.toBeNull();
         const listOptions = await page.findAll('kup-list >>> ul.list li');
         expect(listOptions).not.toBeNull();
-        expect(listOptions).toHaveLength(2);
+        expect(listOptions).toHaveLength(1);
         const firstOptionValue = await listOptions[0].find('span');
         expect(firstOptionValue).toEqualText('Rome');
         await firstOptionValue.click();
@@ -164,12 +170,30 @@ describe('kup-input-panel', () => {
                         NAT: {
                             value: '',
                             options: [
-                                'Italy',
-                                'Spain',
-                                'Germany',
-                                'France',
-                                'Portugal',
-                                'England',
+                                {
+                                    id: 'ITA',
+                                    label: 'Italy',
+                                },
+                                {
+                                    id: 'SPA',
+                                    label: 'Spain',
+                                },
+                                {
+                                    id: 'GER',
+                                    label: 'Germany',
+                                },
+                                {
+                                    id: 'FRA',
+                                    label: 'France',
+                                },
+                                {
+                                    id: 'POR',
+                                    label: 'Portugal',
+                                },
+                                {
+                                    id: 'ENG',
+                                    label: 'England',
+                                },
                             ],
                             editable: true,
                             shape: 'CMB',
@@ -265,7 +289,24 @@ describe('kup-input-panel', () => {
                     cells: {
                         RAD: {
                             value: '1',
-                            options: ['1', '2', '3', '4'],
+                            options: [
+                                {
+                                    id: '1',
+                                    label: 'One',
+                                },
+                                {
+                                    id: '2',
+                                    label: 'Two',
+                                },
+                                {
+                                    id: '3',
+                                    label: 'Three',
+                                },
+                                {
+                                    id: '4',
+                                    label: 'Four',
+                                },
+                            ],
                             editable: true,
                             shape: 'RAD',
                         },
@@ -285,11 +326,11 @@ describe('kup-input-panel', () => {
         for (const [i, radioButton] of radioButtons.entries()) {
             const label = await radioButton.find('label');
             expect(label).not.toBeNull();
-            expect(label).toEqualText(radioOptions[i]);
+            expect(label).toEqualText(radioOptions[i].label);
             const input = await radioButton.find('input');
             expect(input).not.toBeNull();
             const value = await input.getProperty('value');
-            expect(value).toBe(radioOptions[i]);
+            expect(value).toBe(radioOptions[i].id);
             if (data.rows[0].cells.RAD.value === value) {
                 const radioButtonCircle = await radioButton.find('div.radio');
                 expect(radioButtonCircle).toHaveClass('radio--checked');