Merge branch 'master' into 247-implementation-pagination

Infineon · Sep 5, 2023 · 18f70d0 · 18f70d0
2 parents 5548d74 + be43f05
commit 18f70d0
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 23 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,3 +1,17 @@
+# v20.15.4 (Tue Sep 05 2023)
+
+#### 🐛 Bug Fix
+
+- Bugfix: Multiselect [#456](https://github.com/Infineon/infineon-design-system-stencil/pull/456) ([email protected] [@tishoyanchev](https://github.com/tishoyanchev) [@verena-ifx](https://github.com/verena-ifx))
+
+#### Authors: 3
+
+- [@verena-ifx](https://github.com/verena-ifx)
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+- verena-ifx ([email protected])
+
+---
+
 # v20.15.3 (Tue Sep 05 2023)
 
 #### 🐛 Bug Fix

diff --git a/packages/components/src/components/select/multi-select/multiselect.scss b/packages/components/src/components/select/multi-select/multiselect.scss
@@ -134,6 +134,11 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    &.placeholder {
+      opacity: 0.5;
+    }
+
   }
 
 

diff --git a/packages/components/src/components/select/multi-select/multiselect.stories.ts b/packages/components/src/components/select/multi-select/multiselect.stories.ts
@@ -34,7 +34,7 @@ export default {
   tags: ['autodocs'],
   args: {
     size: "m",
-    max: 5,
+    // max: 5,
     error: false,
     errorMessage: 'Some error',
     label: '',
@@ -52,11 +52,10 @@ export default {
         type: 'radio',
       },
     },
-    max: {
-      control: { type: 'number' },
-      description: 'Maximum selectable items',
-
-    },
+    // max: {
+    //   control: { type: 'number' },
+    //   description: 'Maximum selectable items',
+    // },
     disabled: {
       options: [true, false],
       control: { type: 'radio' },
@@ -80,8 +79,7 @@ const DefaultTemplate = (args) => {
   error='${args.error}'
   error-message='${args.errorMessage}'
   label='${args.label}'
-  disabled='${args.disabled}'
-  max-item-count='${args.max}'>
+  disabled='${args.disabled}'>
 </ifx-multiselect>`;
 
   setTimeout(() => {

diff --git a/packages/components/src/components/select/multi-select/multiselect.tsx b/packages/components/src/components/select/multi-select/multiselect.tsx
@@ -20,7 +20,7 @@ export class Multiselect {
   @State() listOfOptions: Option[] = [];
   @State() dropdownOpen = false;
   @State() dropdownFlipped: boolean;
-  @Prop() maxItemCount: number = 10;
+  @Prop() maxItemCount: number;
   @State() zIndex: number = 1; // default z-index value
   static globalZIndex = 1; // This will be shared among all instances of the component.
   private currentIndex: number = 0; //needed for option selection using keyboard
@@ -38,11 +38,6 @@ export class Multiselect {
 
   @Watch('options')
   handleOptionsChange() {
-    // this.listOfOptions = (typeof this.options === 'string' && (this.options.startsWith('{') || this.options.startsWith('[')))  //passed in string form via storybook
-    //   ? JSON.parse(this.options).map((option) => ({ value: option.value, label: option.label, children: option.children, selected: option.selected })) // added selected
-    //   : this.options;
-
-
     if (typeof this.options === 'string') {
       try {
         this.listOfOptions = JSON.parse(this.options);
@@ -71,11 +66,18 @@ export class Multiselect {
     this.handleOptionsChange();
   }
 
+
+
   handleOptionClick(option: Option) {
+    this.error = false; //reset potential previous errors
 
     // 1. Prevent action if disabled
-    if (this.persistentSelectedOptions.length >= this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {
+    //check if newly selected option has children => if not, count it as 1, otherwise count the # of children
+    let newOptionsLength = option.children ? option.children.length : 1;
+    if (this.maxItemCount && this.persistentSelectedOptions.length + newOptionsLength > this.maxItemCount && !this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value)) {
       console.error('Max item count reached');
+      this.error = true;
+      this.errorMessage = "Please consider the maximum number of items to choose from";
       return;
     }
 
@@ -328,7 +330,7 @@ export class Multiselect {
 
   renderOption(option: Option, index: number) {
     const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
-    const disableCheckbox = !isSelected && this.persistentSelectedOptions.length >= this.maxItemCount;
+    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
     const uniqueId = `checkbox-${option.value}-${index}`; // Generate a unique ID using the index
     const isIndeterminate = this.isOptionIndeterminate(option);
 
@@ -339,7 +341,7 @@ export class Multiselect {
           data-value={option.value}
           onClick={() => !disableCheckbox && this.handleOptionClick(option)}
           tabindex="0"
-          role={`${option.children}?.length > 0 ? "option" : "treeitem"`}
+          role={`${option.children?.length > 0 ? "treeitem" : "option"}`}
         >
           <ifx-checkbox id={uniqueId} value={isSelected} indeterminate={isIndeterminate} disabled={disableCheckbox}></ifx-checkbox>
           <label htmlFor={uniqueId}>{option.label}</label>
@@ -379,15 +381,16 @@ export class Multiselect {
 
   renderSubOption(option: Option, index: string) {
     const isSelected = this.persistentSelectedOptions.some(selectedOption => selectedOption.value === option.value);
+    const disableCheckbox = !isSelected && this.maxItemCount && this.persistentSelectedOptions.length >= this.maxItemCount;
     const uniqueId = `checkbox-${option.value}-${index}`;
 
     return (
       <div class={`option sub-option ${isSelected ? 'selected' : ''} ${this.getSizeClass()}`}
         data-value={option.value}
-        role={`${option.children}?.length > 0 ? "option" : "treeitem"`}
-        onClick={() => this.handleOptionClick(option)}
+        role={`${option.children?.length > 0 ? "option" : "treeitem"}`}
+        onClick={() => !disableCheckbox && this.handleOptionClick(option)}
         tabindex="0">
-        <ifx-checkbox id={uniqueId} value={isSelected}></ifx-checkbox>
+        <ifx-checkbox id={uniqueId} value={isSelected} disabled={disableCheckbox}></ifx-checkbox>
         <label htmlFor={uniqueId}>{option.label}</label>
       </div>
     );
@@ -414,7 +417,9 @@ export class Multiselect {
           tabindex="0"
           onClick={(event) => this.handleWrapperClick(event)}
           onKeyDown={(event) => this.handleKeyDown(event)} >
-          <div class="ifx-multiselect-input"
+          <div class={`ifx-multiselect-input 
+          ${this.persistentSelectedOptions.length === 0 ? 'placeholder' : ""}
+          `}
             onClick={this.disabled ? undefined : () => this.toggleDropdown()}
           >
             {this.persistentSelectedOptions.length > 0 ? selectedOptionsLabels : 'Placeholder'}

diff --git a/packages/components/src/components/select/multi-select/readme.md b/packages/components/src/components/select/multi-select/readme.md
@@ -13,7 +13,7 @@
 | `error`        | `error`          |             | `boolean`         | `false`           |
 | `errorMessage` | `error-message`  |             | `string`          | `"Error"`         |
 | `label`        | `label`          |             | `string`          | `""`              |
-| `maxItemCount` | `max-item-count` |             | `number`          | `10`              |
+| `maxItemCount` | `max-item-count` |             | `number`          | `undefined`       |
 | `options`      | `options`        |             | `any[] \| string` | `undefined`       |
 | `size`         | `size`           |             | `string`          | `'medium (40px)'` |
 

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -21,7 +21,14 @@
 
 <body>
 
-
+  <ifx-multiselect 
+  options='[{"value":"a","label":"option a","selected":true},{"value":"b","label":"option b","selected":false},{"value":"c","label":"option c","selected":false,"children":[{"value":"c1","label":"option c1","selected":false},{"value":"c2","label":"option c2","selected":false}]}]' 
+  size='m'
+  error='false'
+  error-message='Some error'
+  label=''
+  disabled='false'>
+</ifx-multiselect>
 
 </body>