handleSelectAllKeydown(e)} onClick={toggleSelectAll}>
-
+
diff --git a/packages/components/src/components/select/multi-select/readme.md b/packages/components/src/components/select/multi-select/readme.md
index d38a10f7d..2e42fbce6 100644
--- a/packages/components/src/components/select/multi-select/readme.md
+++ b/packages/components/src/components/select/multi-select/readme.md
@@ -15,6 +15,7 @@
| `errorMessage` | `error-message` | | `string` | `"Error"` |
| `label` | `label` | | `string` | `""` |
| `maxItemCount` | `max-item-count` | | `number` | `undefined` |
+| `name` | `name` | | `string` | `undefined` |
| `options` | `options` | | `any[] \| string` | `undefined` |
| `placeholder` | `placeholder` | | `string` | `""` |
| `showSearch` | `show-search` | | `boolean` | `true` |
diff --git a/packages/components/src/components/select/single-select/select.tsx b/packages/components/src/components/select/single-select/select.tsx
index 6aaa9f173..914a76577 100644
--- a/packages/components/src/components/select/single-select/select.tsx
+++ b/packages/components/src/components/select/single-select/select.tsx
@@ -435,7 +435,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
},
input: ({ classNames }) => {
return template(`
-
` |
+## Methods
+
+### `isChecked() => Promise
`
+
+
+
+#### Returns
+
+Type: `Promise`
+
+
+
+
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/switch/switch.e2e.ts b/packages/components/src/components/switch/switch.e2e.ts
index 7504adb19..ccf384766 100644
--- a/packages/components/src/components/switch/switch.e2e.ts
+++ b/packages/components/src/components/switch/switch.e2e.ts
@@ -60,14 +60,12 @@ describe('ifx-switch', () => {
expect(container).not.toHaveClass('checked');
});
-
-
- it('updates the visual state when value prop changes', async () => {
+ it('updates the visual state when checked prop changes', async () => {
const page = await newE2EPage();
- await page.setContent('');
+ await page.setContent('');
const component = await page.find('ifx-switch');
- component.setProperty('value', true);
+ component.setProperty('checked', true);
await page.waitForChanges();
const container = await page.find('ifx-switch >>> .switch__checkbox-container');
@@ -101,6 +99,20 @@ describe('ifx-switch', () => {
expect(value).toBe('on')
});
+ it('should be value when form is submitted and value is set', async () => {
+ const page = await newE2EPage();
+ await page.setContent(``);
+ await addHandleSubmitScript(page);
+ const switchEl = await page.find('ifx-switch');
+
+ await switchEl.click();
+
+ const value = await submitAndGetValue(page);
+ expect(value).toBe('val')
+ });
it('should not change value when disabled attribute is present', async () => {
const page = await newE2EPage();
diff --git a/packages/components/src/components/switch/switch.stories.ts b/packages/components/src/components/switch/switch.stories.ts
index 4d1c96856..bef4ce3fd 100644
--- a/packages/components/src/components/switch/switch.stories.ts
+++ b/packages/components/src/components/switch/switch.stories.ts
@@ -5,15 +5,18 @@ export default {
tags: ['autodocs'],
args: {
- value: false,
- disabled: false,
+ checked: false,
label: 'Switch',
- name: 'switch'
+ name: 'switch',
+ value: 'switch',
},
argTypes: {
name: {
description: 'Name of the element, that is used as reference when a form is submitted.'
},
+ value: {
+ description: 'The value that gets submitted, when the radio button is checked'
+ },
ifxChange: {
description: 'Custom event emitted on change',
table: {
@@ -32,9 +35,9 @@ const DefaultTemplate = args => {
const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement;
// Set the attributes
- element.setAttribute('disabled', args.disabled);
- element.setAttribute('value', args.value);
+ element.setAttribute('checked', args.checked);
element.setAttribute('name', args.name);
+ element.setAttribute('value', args.value);
// Add the event listener
// element.addEventListener('ifxChange', action('ifxChange'));
diff --git a/packages/components/src/components/switch/switch.tsx b/packages/components/src/components/switch/switch.tsx
index 8bff4ca61..a9cf3ea42 100644
--- a/packages/components/src/components/switch/switch.tsx
+++ b/packages/components/src/components/switch/switch.tsx
@@ -1,4 +1,4 @@
-import { AttachInternals } from '@stencil/core';
+import { AttachInternals, Method } from '@stencil/core';
import { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';
@@ -9,10 +9,11 @@ import { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '
formAssociated: true
})
export class Switch {
- @Prop() value: boolean = false;
+ @Prop() checked: boolean = false;
@Prop() name: string = '';
@Prop() disabled: boolean = false;
- @State() internalValue: boolean = false;
+ @Prop() value: string;
+ @State() internalChecked: boolean = false;
@AttachInternals() internals: ElementInternals;
@@ -20,8 +21,13 @@ export class Switch {
@Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;
+ @Method()
+ async isChecked(): Promise {
+ return this.internalChecked;
+ }
+
componentWillLoad() {
- this.internalValue = this.value;
+ this.internalChecked = this.checked;
}
@@ -40,18 +46,28 @@ export class Switch {
}
- @Watch('value')
+ @Watch('checked')
valueChanged(newValue: boolean, oldValue: boolean) {
if (newValue !== oldValue) {
- this.internalValue = newValue;
+ this.internalChecked = newValue;
}
}
toggleSwitch() {
if (this.disabled) return;
- this.internalValue = !this.internalValue;
- this.internals.setFormValue(this.internalValue ? 'on' : null);
- this.ifxChange.emit(this.internalValue);
+ this.internalChecked = !this.internalChecked;
+
+ if (this.internalChecked) {
+ if (this.value !== undefined) {
+ this.internals.setFormValue(this.value);
+ } else {
+ this.internals.setFormValue("on")
+ }
+ } else {
+ this.internals.setFormValue(null)
+ }
+
+ this.ifxChange.emit(this.internalChecked);
}
handleKeyDown(event: KeyboardEvent) {
@@ -75,22 +91,23 @@ export class Switch {
this.toggleSwitch()}
onKeyDown={(event) => this.handleKeyDown(event)}
>
{/* Checkbox */}
-
+ checked={this.internalChecked}
+ value={`${this.value}`} />
+
diff --git a/packages/components/src/components/table-advanced-version/list/list-entry/list-entry.tsx b/packages/components/src/components/table-advanced-version/list/list-entry/list-entry.tsx
index 2936ab5fa..805b2b4b3 100644
--- a/packages/components/src/components/table-advanced-version/list/list-entry/list-entry.tsx
+++ b/packages/components/src/components/table-advanced-version/list/list-entry/list-entry.tsx
@@ -35,11 +35,11 @@ export class ListEntry {
{this.type === 'checkbox' ? (
- {this.label}
+ {this.label}
) : (
- {this.label}
+ {this.label}
)}