@sapudex/web-components 0.231.4 → 0.231.6

package/src/themes/MastheadMenu.css

@@ -124,8 +124,8 @@
   text-align: center;
 }
 
-:host([_is-mobile-mode])::part(menu-item-link-badge),
-:host([_is-mobile-mode])::part(menu-item-link) {
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item-link-badge),
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item-link) {
   border-bottom: 1px solid var(--udex-masthead-menu-item-mobile-border-color);
   padding: var(--udex-masthead-menu-item-header-padding-mobile);
   display: flex;
@@ -134,13 +134,13 @@
   width: 100%;
 }
 
-:host([_is-mobile-mode])::part(menu-item-link-badge) {
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item-link-badge) {
   padding-block-start: var(--udex-masthead-menu-item-padding-mobile-with-badge-vertical);
   padding-inline-end: var(--udex-masthead-menu-item-padding-mobile-end-with-badge);
   padding-inline-start: var(--udex-masthead-menu-item-padding-mobile-start-with-badge);
 }
 
-:host([_is-mobile-mode])::part(menu-item) {
+:host([_is-mobile-mode]) [udex-masthead-menu-item]::part(menu-item) {
   padding: var(--udex-masthead-menu-item-header-padding-mobile);
   justify-content: center;
 }

package/src/themes/SelectBox.css

@@ -215,10 +215,9 @@
   font-size: var(--udexTypographyBodyXSFontSize, 14px);
   line-height: var(--udexTypographyBodyLineHeight, 1.5);
   color: var(--sapContent_TitleColor, #000000);
-  padding: 0 var(--udexSpacer16, 16px) var(--udexSpacer16, 16px);
+  padding: 0 var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);
 }
 
-
 .udex-select-box__dropdown::part(header),
 .udex-select-box__dropdown::part(footer) {
   padding: var(--udexSpacer16, 16px) var(--udexSpacer12, 12px);

package/src/themes/TextField.css

@@ -98,11 +98,6 @@
   outline: 0;
 }
 
-:host([active]) .udex-text-field_icon-container {
-  border-color: transparent;
-  color: var(--udexColorGrey7, #475E75);
-}
-
 .udex-text-field__wrap[open]:hover {
   border-color: var(--udex-input-color-standard-active-border);
 }
@@ -262,27 +257,6 @@
   --sapButton_BorderWidth: 0 1px 0 0;
 }
 
-:host([active]) [active].udex-text-field_icon-container,
-:host([active]) [active].udex-text-field_icon-container,
-:host([active]) [active].udex-text-field_icon-container {
-  border-color: transparent;
-  color: var(--udexColorGrey7, #475E75);
-}
-
-:host [active].udex-text-field_icon-container,
-:host [active].udex-text-field_icon-container,
-:host [active].udex-text-field_icon-container {
-  border-color: var(--udexColorBlue4, #89D1FF);
-  color: var(--udexColorBlue9, #0040B0);
-}
-
-:host([active]) .udex-text-field_icon-container:hover,
-:host([active]) .udex-text-field_icon-container:hover,
-:host([active]) .udex-text-field_icon-container:hover {
-  border-color: var(--udexColorGrey7, #475E75);
-  color: var(--udexColorGrey7, #475E75);
-}
-
 /* Supporting text styles */
 
 .udex-text-field__supporting-text {

package/src/utils/debounce.ts

@@ -1,11 +1,26 @@
 import CallbackFunction from "../types/callback.js";
 
 const debounce = <T extends CallbackFunction>(cb: T, timeout = 300) => {
-  let timer: ReturnType<typeof setTimeout>;
-  return (...args: any) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => { cb(args); }, timeout);
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const fn = (...args: Parameters<T>) => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      timer = null;
+      cb(...args);
+    }, timeout);
+  };
+
+  (fn as typeof fn & { cancel: () => void }).cancel = () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
   };
+
+  return fn as typeof fn & { cancel: () => void };
 };
 
 export default debounce;