diff --git a/lerna.json b/lerna.json index f38acc1c86..e2a9e8395b 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "$schema": "node_modules/lerna/schemas/lerna-schema.json", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "command": { "publish": { "verifyAccess": false diff --git a/package-lock.json b/package-lock.json index 8cc00eae73..e4ab89431e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31982,7 +31982,7 @@ }, "packages/components": { "name": "@infineon/infineon-design-system-stencil", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "license": "MIT", "dependencies": { "@infineon/design-system-tokens": "3.3.2", @@ -32043,7 +32043,7 @@ } }, "packages/components-angular": { - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "license": "MIT", "dependencies": { "@angular/animations": "^17.3.3", @@ -32054,7 +32054,7 @@ "@angular/platform-browser": "^17.3.3", "@angular/platform-browser-dynamic": "^17.3.3", "@angular/router": "^17.3.3", - "@infineon/infineon-design-system-angular": "^24.3.0", + "@infineon/infineon-design-system-angular": "^24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" @@ -32074,7 +32074,7 @@ }, "packages/components-angular/projects/component-library": { "name": "@infineon/infineon-design-system-angular", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -32083,16 +32083,16 @@ "@angular/common": "^17.3.3", "@angular/core": "^17.3.3", "@infineon/design-system-tokens": "3.3.2", - "@infineon/infineon-design-system-stencil": "^24.3.0" + "@infineon/infineon-design-system-stencil": "^24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0" } }, "packages/components-react": { "name": "@infineon/infineon-design-system-react", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "license": "MIT", "dependencies": { "@infineon/design-system-tokens": "3.3.2", - "@infineon/infineon-design-system-stencil": "24.3.0" + "@infineon/infineon-design-system-stencil": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0" }, "devDependencies": { "@types/node": "^20.1.4", @@ -32105,11 +32105,11 @@ }, "packages/components-vue": { "name": "@infineon/infineon-design-system-vue", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "license": "MIT", "dependencies": { "@infineon/design-system-tokens": "3.3.2", - "@infineon/infineon-design-system-stencil": "24.3.0" + "@infineon/infineon-design-system-stencil": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0" }, "devDependencies": { "@babel/types": "^7.22.5", diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json index 076cb9dc7d..4be9542c38 100644 --- a/packages/components-angular/package.json +++ b/packages/components-angular/package.json @@ -1,6 +1,6 @@ { "name": "components-angular", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "scripts": { "ng": "ng", "start": "ng serve", @@ -26,7 +26,7 @@ "@angular/platform-browser": "^17.3.3", "@angular/platform-browser-dynamic": "^17.3.3", "@angular/router": "^17.3.3", - "@infineon/infineon-design-system-angular": "^24.3.0", + "@infineon/infineon-design-system-angular": "^24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json index 67f014285a..23a9858d68 100644 --- a/packages/components-angular/projects/component-library/package.json +++ b/packages/components-angular/projects/component-library/package.json @@ -1,6 +1,6 @@ { "name": "@infineon/infineon-design-system-angular", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "description": "Infineon design system Stencil web components for Angular", "author": "Verena Lechner", "license": "MIT", @@ -11,7 +11,7 @@ "@angular/common": "^17.3.3", "@angular/core": "^17.3.3", "@infineon/design-system-tokens": "3.3.2", - "@infineon/infineon-design-system-stencil": "^24.3.0" + "@infineon/infineon-design-system-stencil": "^24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/packages/components-react/package.json b/packages/components-react/package.json index ad867826c9..524b7853f1 100644 --- a/packages/components-react/package.json +++ b/packages/components-react/package.json @@ -1,6 +1,6 @@ { "name": "@infineon/infineon-design-system-react", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "description": "Infineon design system Stencil web components for React", "main": "dist/index.js", "module": "dist/index.js", @@ -28,7 +28,7 @@ }, "dependencies": { "@infineon/design-system-tokens": "3.3.2", - "@infineon/infineon-design-system-stencil": "24.3.0" + "@infineon/infineon-design-system-stencil": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0" }, "auto": { "plugins": [ diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json index f611d8201c..1dcc694f31 100644 --- a/packages/components-vue/package.json +++ b/packages/components-vue/package.json @@ -1,6 +1,6 @@ { "name": "@infineon/infineon-design-system-vue", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "description": "Infineon design system Stencil web components for Vue", "main": "./dist/index.js", "types": "./dist/index.d.ts", @@ -31,7 +31,7 @@ }, "dependencies": { "@infineon/design-system-tokens": "3.3.2", - "@infineon/infineon-design-system-stencil": "24.3.0" + "@infineon/infineon-design-system-stencil": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0" }, "auto": { "plugins": [ diff --git a/packages/components/package.json b/packages/components/package.json index 8771768c00..7a0c12476c 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -1,6 +1,6 @@ { "name": "@infineon/infineon-design-system-stencil", - "version": "24.3.0", + "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0", "private": false, "description": "Infineon design system Stencil web components", "homepage": "https://infineon.github.io/infineon-design-system-stencil", diff --git a/packages/components/src/components/select/multi-select/multiselect.stories.ts b/packages/components/src/components/select/multi-select/multiselect.stories.ts index 0fc058da6f..b4bcd0b8c7 100644 --- a/packages/components/src/components/select/multi-select/multiselect.stories.ts +++ b/packages/components/src/components/select/multi-select/multiselect.stories.ts @@ -30,6 +30,29 @@ const options = [ }, ]; +const longOptions = []; +for (let i=1; i<=50; i++) { + let children = undefined; + if (i % 3 == 0) { + children = [{ + "value": `${i}.1`, + "label": `Option ${i}.1`, + "selected": i % 2 == 0 ? true : false + },{ + "value": `${i}.2`, + "label": `Option ${i}.2`, + "selected": i % 4 == 0 ? true : false + }]; + } + longOptions.push({ + "value": i, + "label": `Option ${i}`, + "selected": i % 2 == 0 ? true : false, + "children": children + }) +} + + export default { title: 'Components/Select/Multi Select', // tags: ['autodocs'], @@ -120,7 +143,7 @@ export default { }, }; -const DefaultTemplate = args => { +const Template = args => { const template = ` { return template; }; -export const Default = DefaultTemplate.bind({}); +export const Default = Template.bind({}); Default.args = { options: options, }; + +export const WithLazyLoading = Template.bind({}); +WithLazyLoading.args = { + options: longOptions, + batchSize: 5, + maxItemCount: undefined +}; diff --git a/packages/components/src/components/select/multi-select/multiselect.tsx b/packages/components/src/components/select/multi-select/multiselect.tsx index 29f917fd36..17f42f5590 100644 --- a/packages/components/src/components/select/multi-select/multiselect.tsx +++ b/packages/components/src/components/select/multi-select/multiselect.tsx @@ -47,6 +47,7 @@ export class Multiselect { @Prop() showSearch: boolean = true; @Prop() showSelectAll: boolean = true; @State() optionCount: number = 0; // number of all options (leaves of the tree) + @State() optionsProcessed: boolean = false; // flag whether options have already been counted, intial selections saved @Event() ifxSelect: EventEmitter; @@ -101,19 +102,63 @@ export class Multiselect { console.error('Unexpected value for options:', this.options); } - this.optionCount = this.countOptions(allOptions); - + if (!this.optionsProcessed) { + this.optionCount = this.countOptions(allOptions); + const initiallySelected = this.collectSelectedOptions(allOptions); + const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value)); + this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState]; + this.optionsProcessed = true; + } + // Slice the options array based on startIndex and count const slicedOptions = allOptions.slice(startIndex, startIndex + count); + return slicedOptions; + } - // Update the state for initially selected options, if needed - if (startIndex === 0) { // Assuming you want to do this only for the first batch - const initiallySelected = slicedOptions.filter(option => option.selected); - const initallyAndNotAdded = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value)); - this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallyAndNotAdded]; + /** + * Collects and returns all options that are selected. + * When the parent is selected, then the value of the children will be overriden with selected as well. + * It will only collect the leaves of the tree. + * + * @param options A list of options. + * @returns A list with all selected options + */ + private collectSelectedOptions(options: Option[]): Option[] { + let selectedOptions: Option[] = []; + + for (const option of options) { + if (option.selected) { + if (option.children && option.children.length > 0) { + // if parent is selected, then select all child options + selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children)); + } else { + selectedOptions.push(option); + } + } else { + if (option.children && option.children.length > 0) { + selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children)); + } + } } + return selectedOptions; + } - return slicedOptions; + /** + * Collects all leaf children options. + * + * @param option A list with all leaf-children. + */ + private collectLeafOptions(children: Option[]): Option[] { + let leafOptions = []; + + for (const child of children) { + if (child.children && child.children.length > 0) { + leafOptions = leafOptions.concat(this.collectLeafOptions(child.children)); + } else { + leafOptions.push(child); + } + } + return leafOptions; } /**