Merge pull request #1639 from Infineon/1615-single-select-remove-the-…

…close-button-when-nested-inside-pagination

Single-select: removes the close button on small resolution and adds it when default option is selected

examples/wrapper-components/react-vite-js/package.json

@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+    "@infineon/infineon-design-system-react": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/wrapper-components/vue-javascript/package.json

@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+    "@infineon/infineon-design-system-vue": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+  "version": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+  "version": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+    "@infineon/infineon-design-system-angular": "^29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+  "version": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0"
+    "@infineon/infineon-design-system-stencil": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+  "version": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+    "@infineon/infineon-design-system-stencil": "^29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+  "version": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0"
+    "@infineon/infineon-design-system-stencil": "^29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "29.2.1--canary.1638.b8df42a289a6ff6eb917dbf3f987e4b3899cfdce.0",
+  "version": "29.3.0--canary.1639.52a545f9a651e2536d4f40c373f7eb826907d680.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/components/pagination/pagination.tsx

@@ -24,7 +24,11 @@ export class Pagination {
 
   @Listen('ifxSelect')
   setItemsPerPage(e) {
-    this.itemsPerPage = parseInt(e.detail.label)
+    if(e.detail) {
+      this.itemsPerPage = parseInt(e.detail.label)
+    } else { 
+      this.itemsPerPage = 10;
+    }
   }
 
   componentDidLoad() {

packages/components/src/components/select/single-select/readme.md

@@ -142,6 +142,16 @@ Type: `Promise<void>`
 
 
 
+### `handleDeleteIcon() => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
 ### `hideDropdown(blurInput?: boolean) => Promise<this>`
 
 

packages/components/src/components/select/single-select/select.scss

@@ -163,6 +163,10 @@
       display: flex;
       align-items: center;
       justify-content: center;
+
+      &.hide { 
+        display: none;
+      }
     }
 
   }

packages/components/src/components/select/single-select/select.tsx

@@ -81,6 +81,9 @@ export class Choices implements IChoicesProps, IChoicesMethods {
   @Prop({ mutable: true }) options: any[] | string;
   @Prop() size: string = 'medium (40px)';
   @State() selectedOption: any | null = null;
+  @State() optionIsSelected: boolean = false;
+
+  private resizeObserver: ResizeObserver;
 
   @Element() private readonly root: HTMLElement;
   private choice;
@@ -101,6 +104,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
     this.setPreSelected(null);
     this.closeDropdown();
     this.ifxSelect.emit(null);
+    this.optionIsSelected = false;
   }
 
   @Method()
@@ -245,18 +249,76 @@ export class Choices implements IChoicesProps, IChoicesMethods {
     return this;
   }
 
+    @Method()
+    async handleDeleteIcon() {
+      const width = this.root.offsetWidth;
+      const deleteIconWrapper = this.root.querySelector('.ifx-choices__icon-wrapper-delete');
+      if(deleteIconWrapper) { 
+        if (width <= 180) {
+          deleteIconWrapper.classList.add('hide')
+        } else { 
+          deleteIconWrapper.classList.remove('hide')
+        }
+      }
+    }
+
+
+  handleCloseButton() { 
+    if(typeof this.options === 'string') { 
+      const optionsToArray = JSON.parse(this.options);
+      const optionIsSelected = optionsToArray.find(option => option.selected === true)
+      if(optionIsSelected) { 
+        this.optionIsSelected = true;
+      } else { 
+        this.optionIsSelected = false;
+      }
+    } else if(this.options && Array.isArray(this.options)) { 
+      const optionIsSelected = this.options.find(option => option.selected === true)
+      if(optionIsSelected) { 
+        this.optionIsSelected = true;
+      } else { 
+        this.optionIsSelected = false;
+      }
+    }
+  }
+
+  protected componentWillLoad() { 
+   this.handleCloseButton()
+  }
+
+  protected componentWillUpdate() { 
+    this.handleCloseButton()
+
+  }
+
+  addResizeObserver() { 
+    this.resizeObserver = new ResizeObserver(() => {
+      this.handleDeleteIcon();
+    });
+
+    const componentWrapper = this.root.querySelector('.ifx-choices__wrapper');
+    this.resizeObserver.observe(componentWrapper);
+  }
+
   protected componentDidLoad() {
     this.init();
     this.addEventListenersToHandleCustomFocusAndActiveState();
-
+    this.handleDeleteIcon();
+    this.addResizeObserver()
   }
 
   protected componentDidUpdate() {
     this.init();
+    this.handleDeleteIcon()
   }
 
   protected disconnectedCallback() {
     this.destroy();
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
   }
 
   protected render(): any {
@@ -289,7 +351,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
             {this.createSelectOptions(this.options)}
           </select>
 
-          { this.selectedOption && (
+          { this.optionIsSelected && (
             <div class="ifx-choices__icon-wrapper-delete">
               <ifx-icon icon="cremove16" onClick={() => this.handleDeleteSelection()}></ifx-icon>
             </div>