@sme.up/ketchup 9.6.3 → 9.6.5

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

@@ -147,7 +147,7 @@
     transparent
   );
   --kup_imagelist_columns: var(--kup-imagelist-columns, 4);
-  --kup_imagelist_grid_gap: var(--kup-imagelist-grid-gap, 0.5em);
+  --kup_imagelist_grid_gap: var(--kup-imagelist-grid-gap, var(--kup-space-03));
   --kup_imagelist_image_min_height: var(
     --kup-imagelist-image-min-height,
     var(--kup-space-09)
@@ -246,8 +246,25 @@
   height: 100%;
   width: 100%;
 }
+.image-list .f-cell .f-cell__content {
+  height: 100%;
+}
 .image-list .f-cell .f-cell__content .image-list__wrapper {
-  padding: var(--kup-space-03) var(--kup-space-02);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  position: relative;
+}
+.image-list .f-cell .f-cell__content .image-list__wrapper.images {
+  height: 100%;
+  justify-content: flex-end;
+}
+.image-list .f-cell .f-cell__content .image-list__wrapper.images .f-image {
+  position: unset;
+  overflow: auto;
+  height: 100%;
+  display: flex;
 }
 .image-list__item {
   background-color: var(--kup_imagelist_item_background_color);
@@ -261,16 +278,23 @@
   background-color: var(--kup-gray-color-20);
 }
 .image-list__image.f-image {
-  margin-bottom: var(--kup-space-03);
+  position: absolute;
+  padding: var(--kup-space-03);
+  padding-bottom: 0px;
+  box-sizing: border-box;
+  width: 100%;
+  height: calc(100% - 16px - var(--kup-space-03) * 2);
+  overflow: hidden;
 }
 .image-list__image.f-image .f-image__icon {
-  min-height: var(--kup_imagelist_image_min_height);
+  mask-size: 100% !important;
 }
 .image-list__label {
   overflow: hidden;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding: var(--kup-space-03);
   font-family: var(--kup-font-family);
   font-size: 12px;
   line-height: 16px;
@@ -278,6 +302,15 @@
   letter-spacing: 0.32px;
 }
 
+@media screen and (min-width: 678px) {
+  :host {
+    --kup_imagelist_columns: var(--kup-imagelist-columns, 8);
+  }
+  .image-list {
+    grid-template-columns: repeat(var(--kup_imagelist_columns, 8), minmax(0px, 1fr));
+    grid-gap: var(--kup-space-05);
+  }
+}
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/

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

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

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

@@ -0,0 +1,169 @@
+.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;
+}
+
+/**
+* @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

@@ -0,0 +1,346 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('kup-input-panel', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<kup-input-panel></kup-input-panel>');
+        const element = await page.find('kup-input-panel');
+        expect(element).toHaveClass('hydrated');
+    });
+    it('renders 2 text field with labels', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<kup-input-panel></kup-input-panel>');
+        const inputPanel = await page.find('kup-input-panel');
+        const data = {
+            columns: [
+                {
+                    name: 'NAM',
+                    title: 'Name',
+                    visible: true,
+                },
+                {
+                    name: 'SUR',
+                    title: 'Surname',
+                    visible: true,
+                },
+            ],
+            rows: [
+                {
+                    cells: {
+                        NAM: {
+                            value: '',
+                            editable: true,
+                            shape: 'ITX',
+                        },
+                        SUR: {
+                            value: '',
+                            editable: true,
+                            shape: 'ITX',
+                        },
+                    },
+                },
+            ],
+        };
+        inputPanel.setProperty('data', data);
+        await page.waitForChanges();
+        const inputPanelContent = await page.find('kup-input-panel >>> form.input-panel');
+        expect(inputPanelContent).not.toBeNull();
+        const textFields = await inputPanelContent.findAll('.f-cell.string-cell .f-text-field');
+        expect(textFields).toHaveLength(data.columns.length);
+        for (const [i, textField] of textFields.entries()) {
+            const label = await textField.find('label');
+            expect(label).not.toBeNull();
+            expect(label).toHaveClass('mdc-floating-label');
+            expect(label).toEqualText(data.columns[i].title);
+            const input = await textField.find('input');
+            expect(input).not.toBeNull();
+            const value = await input.getProperty('value');
+            expect(value).toBe('');
+            await input.press('KeyS');
+            await input.press('KeyT');
+            await input.press('KeyR');
+            await input.press('KeyI');
+            await input.press('KeyN');
+            await input.press('KeyG');
+            const updatedValue = await input.getProperty('value');
+            expect(updatedValue).toBe('string');
+        }
+    });
+    it('renders autocomplete', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<kup-input-panel></kup-input-panel> <div kup-dynamic-position></div>');
+        const inputPanel = await page.find('kup-input-panel');
+        const data = {
+            columns: [
+                {
+                    name: 'CIT',
+                    title: 'City',
+                    visible: true,
+                },
+            ],
+            rows: [
+                {
+                    cells: {
+                        CIT: {
+                            value: '',
+                            obj: {
+                                t: '',
+                                p: '',
+                                k: '',
+                            },
+                            editable: true,
+                            mandatory: true,
+                            options: [
+                                {
+                                    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',
+                        },
+                    },
+                },
+            ],
+        };
+        inputPanel.setProperty('data', data);
+        await page.waitForChanges();
+        const inputPanelContent = await page.find('kup-input-panel >>> form.input-panel');
+        expect(inputPanelContent).not.toBeNull();
+        const autocompleteCell = await inputPanelContent.find('.f-cell.autocomplete-cell');
+        expect(autocompleteCell).not.toBeNull();
+        const autocompleteTextfield = await autocompleteCell.find('kup-autocomplete >>> div.f-text-field');
+        expect(autocompleteTextfield).not.toBeNull();
+        const label = await autocompleteTextfield.find('label');
+        expect(label).not.toBeNull();
+        expect(label).toEqualText(data.columns[0].title);
+        const input = await autocompleteTextfield.find('input');
+        expect(input).not.toBeNull();
+        await input.focus();
+        await input.press('KeyR');
+        await input.press('KeyO');
+        const updatedValue1 = await input.getProperty('value');
+        expect(updatedValue1).toBe('ro');
+        await page.waitForChanges();
+        await page.waitForChanges();
+        const list = await page.find('div[kup-dynamic-position] kup-list');
+        expect(list).not.toBeNull();
+        const listOptions = await page.findAll('kup-list >>> ul.list li');
+        expect(listOptions).not.toBeNull();
+        expect(listOptions).toHaveLength(1);
+        const firstOptionValue = await listOptions[0].find('span');
+        expect(firstOptionValue).toEqualText('Rome');
+        await firstOptionValue.click();
+        const updatedValue = await input.getProperty('value');
+        expect(updatedValue).toBe('Rome');
+    });
+    it('renders combobox', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<kup-input-panel></kup-input-panel> <div kup-dynamic-position></div>');
+        const inputPanel = await page.find('kup-input-panel');
+        const data = {
+            columns: [
+                {
+                    name: 'NAT',
+                    title: 'Nation',
+                    visible: true,
+                },
+            ],
+            rows: [
+                {
+                    cells: {
+                        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',
+                                },
+                            ],
+                            editable: true,
+                            shape: 'CMB',
+                        },
+                    },
+                },
+            ],
+        };
+        inputPanel.setProperty('data', data);
+        await page.waitForChanges();
+        const inputPanelContent = await page.find('kup-input-panel >>> form.input-panel');
+        expect(inputPanelContent).not.toBeNull();
+        const comboCell = await inputPanelContent.find('.f-cell.combobox-cell');
+        expect(comboCell).not.toBeNull();
+        const comboTextfield = await comboCell.find('kup-combobox >>> div.f-text-field');
+        expect(comboTextfield).not.toBeNull();
+        const label = await comboTextfield.find('label');
+        expect(label).not.toBeNull();
+        expect(label).toEqualText(data.columns[0].title);
+        const input = await comboTextfield.find('input');
+        expect(input).not.toBeNull();
+        const icon = await comboTextfield.find('span.kup-icon.kup-dropdown-icon');
+        expect(icon).not.toBeNull();
+        await icon.click();
+        await page.waitForChanges();
+        await page.waitForChanges();
+        const list = await page.find('div[kup-dynamic-position] kup-list');
+        expect(list).not.toBeNull();
+        const listOptions = await page.findAll('kup-list >>> ul.list li');
+        expect(listOptions).not.toBeNull();
+        expect(listOptions).toHaveLength(data.rows[0].cells.NAT.options.length);
+        const firstOptionValue = await listOptions[0].find('span');
+        expect(firstOptionValue).toEqualText('Italy');
+        await firstOptionValue.click();
+        const updatedValue = await input.getProperty('value');
+        expect(updatedValue).toBe('Italy');
+    });
+    it('renders checkbox', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<kup-input-panel></kup-input-panel>');
+        const inputPanel = await page.find('kup-input-panel');
+        const data = {
+            columns: [
+                {
+                    name: 'CHK',
+                    title: 'Checkbox',
+                    visible: true,
+                },
+            ],
+            rows: [
+                {
+                    cells: {
+                        CHK: {
+                            value: 'off',
+                            editable: true,
+                            shape: 'CHK',
+                        },
+                    },
+                },
+            ],
+        };
+        inputPanel.setProperty('data', data);
+        await page.waitForChanges();
+        const inputPanelContent = await page.find('kup-input-panel >>> form.input-panel');
+        expect(inputPanelContent).not.toBeNull();
+        const checkboxCell = await inputPanelContent.find('.f-cell.checkbox-cell');
+        expect(checkboxCell).not.toBeNull();
+        const label = await checkboxCell.find('label');
+        expect(label).not.toBeNull();
+        expect(label).toEqualText(data.columns[0].title);
+        const input = await checkboxCell.find('input');
+        expect(input).not.toBeNull();
+        const value = await input.getProperty('value');
+        expect(value).toBe('off');
+        await input.click();
+        const updatedValue = await input.getProperty('value');
+        expect(updatedValue).toBe('on');
+    });
+    it('renders radio buttons', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<kup-input-panel></kup-input-panel>');
+        const inputPanel = await page.find('kup-input-panel');
+        const data = {
+            columns: [
+                {
+                    name: 'RAD',
+                    title: 'Radio Buttons',
+                    visible: true,
+                },
+            ],
+            rows: [
+                {
+                    cells: {
+                        RAD: {
+                            value: '1',
+                            options: [
+                                {
+                                    id: '1',
+                                    label: 'One',
+                                },
+                                {
+                                    id: '2',
+                                    label: 'Two',
+                                },
+                                {
+                                    id: '3',
+                                    label: 'Three',
+                                },
+                                {
+                                    id: '4',
+                                    label: 'Four',
+                                },
+                            ],
+                            editable: true,
+                            shape: 'RAD',
+                        },
+                    },
+                },
+            ],
+        };
+        inputPanel.setProperty('data', data);
+        await page.waitForChanges();
+        const inputPanelContent = await page.find('kup-input-panel >>> form.input-panel');
+        expect(inputPanelContent).not.toBeNull();
+        const radioButtonsCell = await inputPanelContent.find('.f-cell.radio-cell');
+        expect(radioButtonsCell).not.toBeNull();
+        const radioOptions = data.rows[0].cells.RAD.options;
+        const radioButtons = await radioButtonsCell.findAll('div.form-field');
+        expect(radioButtons).toHaveLength(radioOptions.length);
+        for (const [i, radioButton] of radioButtons.entries()) {
+            const label = await radioButton.find('label');
+            expect(label).not.toBeNull();
+            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].id);
+            if (data.rows[0].cells.RAD.value === value) {
+                const radioButtonCircle = await radioButton.find('div.radio');
+                expect(radioButtonCircle).toHaveClass('radio--checked');
+            }
+        }
+        const newRadioButtonChecked = await radioButtons[2].find('div.radio');
+        await newRadioButtonChecked.click();
+        await page.waitForChanges();
+        const updatedRadioButtons = await radioButtonsCell.findAll('div.form-field');
+        const updateRadioButtonChecked = await updatedRadioButtons[2].find('div.radio ');
+        expect(updateRadioButtonChecked).toHaveClass('radio--checked');
+    });
+});