@syncfusion/ej2-angular-inplace-editor 22.1.34 → 22.1.36

package/schematics/ng-add/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lib_details_1 = require("./../utils/lib-details");
+const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
+function default_1(options) {
+    const libOptions = Object.assign({}, { 'pkgName': lib_details_1.pkgName, 'pkgVer': lib_details_1.pkgVer, 'moduleName': lib_details_1.moduleName, 'themeVer': lib_details_1.themeVer });
+    return schematics_1.install(options, libOptions);
+}
+exports.default = default_1;

package/schematics/ng-add/schema.d.ts

@@ -0,0 +1,13 @@
+export interface OptionsSchema {
+    skipPackageJson: boolean;
+    modules: string;
+    modulePath: string;
+    theme: 'material' | 'fabric' | 'bootstrap' | 'highcontrast';
+    project?: string;
+}
+export interface LibOptionsSchema {
+    pkgName: string;
+    pkgVer: string;
+    moduleName: string;
+    themeVer: string;
+}

package/schematics/ng-add/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/ng-add/schema.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ngAdd",
+  "title": "Add Essential JS 2 Angular packages",
+  "type": "object",
+  "properties": {
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add add Essential JS 2 Angular packages dependencies to package.json (e.g., --skipPackageJson)"
+    },
+    "modules": {
+      "type": "string",
+      "default": "",
+      "description": "Add only specific Essential JS 2 modules to the app.module file (eg: --modules=slider, grid)"
+    },
+    "modulePath": {
+      "type": "string",
+      "default": "",
+      "description": "Used to specify the path of the module file where the EJ2 module needs to be imported"
+    },
+    "theme": {
+      "enum": [
+        "material",
+        "fabric",
+        "bootstrap",
+        "highcontrast"
+      ],
+      "default": "material",
+      "description": "Used to change the theme that needs to be imported"
+    }
+  },
+  "required": []
+}

package/schematics/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "lib": ["es2017", "dom"],
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "noEmitOnError": false,
+        "skipDefaultLibCheck": true,
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "target": "es6",
+        "declaration": true,
+        "types": [
+            "jasmine",
+            "node"
+        ]
+    },
+    "exclude": [
+        "node_modules",
+        "src",
+        "src/**/*.ts",
+        "spec",
+        "spec/**/*.ts",
+        "@typings"
+    ]
+}

package/schematics/utils/lib-details.d.ts

@@ -0,0 +1,4 @@
+export declare const pkgName = "@syncfusion/ej2-angular-inplace-editor";
+export declare const pkgVer = "^21.1.36";
+export declare const moduleName = "InPlaceEditorModule";
+export declare const themeVer = "~21.1.36";

package/schematics/utils/lib-details.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pkgName = '@syncfusion/ej2-angular-inplace-editor';
+exports.pkgVer = '^22.1.36';
+exports.moduleName = 'InPlaceEditorModule';
+exports.themeVer = '~22.1.36';

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
 export const pkgName = '@syncfusion/ej2-angular-inplace-editor';
-export const pkgVer = '^20.1.55';
+export const pkgVer = '^22.1.36';
 export const moduleName = 'InPlaceEditorModule';
-export const themeVer = '~20.1.55';
+export const themeVer = '~22.1.36';

package/src/inplace-editor/inplaceeditor.component.d.ts

@@ -39,6 +39,7 @@ export declare class InPlaceEditorComponent extends InPlaceEditor implements ICo
      *
      * @default ''
      * @blazortype string
+     * @asptype string
      */
     template: any;
     focus: any;

package/styles/bootstrap4.css

@@ -1088,18 +1088,21 @@
   background-color: #545b62;
   border: 1px solid #4e555b;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons {
+  color: #fff;
+}
 
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #fff;

package/styles/bootstrap5-dark.css

@@ -785,19 +785,15 @@
   border: 1px solid #444c54;
   border-radius: 4px;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;

package/styles/bootstrap5.css

@@ -785,19 +785,15 @@
   border: 1px solid #dee2e6;
   border-radius: 4px;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;

package/styles/inplace-editor/_theme.scss

@@ -174,7 +174,6 @@
         }
 
         &:hover,
-        &:focus,
         &:active {
 
           .e-btn-icon.e-icons {
@@ -184,6 +183,16 @@
             }
           }
         }
+
+        &:focus {
+
+          .e-btn-icon.e-icons {
+
+            @if $skin-name == 'bootstrap4' {
+              color: $white;
+            }
+          }
+        }
       }
     }
   }

package/styles/inplace-editor/bootstrap4.css

@@ -1088,18 +1088,21 @@
   background-color: #545b62;
   border: 1px solid #4e555b;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
+.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons {
+  color: #fff;
+}
 
 .e-inplaceeditor-tip.e-tooltip-wrap.e-popup {
   background: #fff;

package/styles/inplace-editor/bootstrap5-dark.css

@@ -785,19 +785,15 @@
   border: 1px solid #444c54;
   border-radius: 4px;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;

package/styles/inplace-editor/bootstrap5.css

@@ -785,19 +785,15 @@
   border: 1px solid #dee2e6;
   border-radius: 4px;
 }
-.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
+.e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons, .e-inplaceeditor .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-save.e-icon-btn:active .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:hover .e-btn-icon.e-icons,
-.e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:focus .e-btn-icon.e-icons,
 .e-inplaceeditor-tip .e-editable-action-buttons .e-btn-cancel.e-icon-btn:active .e-btn-icon.e-icons {
   color: #fff;
 }
-
 .e-inplaceeditor .e-editable-value-wrapper {
   background-color: transparent;
   border-radius: 4px;

package/styles/inplace-editor/material3-dark.css

@@ -131,21 +131,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -165,7 +170,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -174,7 +179,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -184,8 +189,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -198,6 +203,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/inplace-editor/material3.css

@@ -187,21 +187,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -221,7 +226,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -230,7 +235,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -240,8 +245,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -254,6 +259,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/material3-dark.css

@@ -131,21 +131,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -165,7 +170,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -174,7 +179,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -184,8 +189,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -198,6 +203,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }

package/styles/material3.css

@@ -187,21 +187,26 @@
 }
 
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  margin: 6px 6px 5px;
-  min-height: 12px;
-  min-width: 12px;
-  padding: 6px;
+  margin: 0 6px;
+  min-height: 30px;
+  min-width: 30px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
-  min-height: 16px;
-  min-width: 16px;
+  min-height: 38px;
+  min-width: 38px;
+}
+
+.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
+.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
+  min-height: 22px;
+  min-width: 22px;
 }
 
 .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
 .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
-  padding: 8px 16px 8px 0;
+  padding: 4px 16px 4px 0;
 }
 
 .e-input-group.e-ddl,
@@ -221,7 +226,7 @@
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
-  margin: 0;
+  margin: 4px;
 }
 
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -230,7 +235,7 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
 .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
-  padding: 5px 5px 5px 12px;
+  padding: 4px 5px 4px 12px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
@@ -240,8 +245,8 @@
 .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
 .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
-  min-height: 18px;
-  min-width: 18px;
+  min-height: 34px;
+  min-width: 34px;
 }
 
 .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
@@ -254,6 +259,10 @@
   padding: 8px 16px;
 }
 
+.e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
+  margin: 0 4px;
+}
+
 .e-ddl.e-popup.e-outline .e-filter-parent {
   padding: 4px 8px;
 }