@sapudex/web-components 0.231.5 → 0.231.7

package/src/generated/themes/StepInput.css.ts

@@ -7,7 +7,7 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@sapudex/web-components", "sap_horizon", async () => defaultTheme);
 
-const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/StepInput.css.ts",content:`:host{--udex-step-input-button-size: 42px;--udex-step-input-input-horizontal-padding: var(--udexSpacer8, 8px);--udex-step-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-step-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-step-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-step-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-step-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-step-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-step-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-step-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F)}:host [udex-text-field]{--udex-input-color-standard-hover-border: var(--udex-step-input-color-standard-hover-border);--udex-input-color-standard-active-border: var(--udex-step-input-color-standard-active-border);--udex-input-color-error-hover-border: var(--udex-step-input-color-error-hover-border);--udex-input-color-error-active-border: var(--udex-step-input-color-error-active-border);--udex-input-color-warning-hover-border: var(--udex-step-input-color-warning-hover-border);--udex-input-color-warning-active-border: var(--udex-step-input-color-warning-active-border);--udex-input-color-success-hover-border: var(--udex-step-input-color-success-hover-border);--udex-input-color-success-active-border: var(--udex-step-input-color-success-active-border)}:host(:not([displayonly])) .udex-step-input__root{display:flex;align-items:flex-start}:host .udex-step-input__button{--udex-control-button-large-height: var(--udex-step-input-button-size);--udex-control-button-large-width: var(--udex-step-input-button-size);position:relative;padding:var(--udexSpacer4, 4px);width:38px;z-index:3;background:none;flex-shrink:0}:host .udex-step-input__root .udex-step-input__button_inc:not(:disabled):dir(ltr),:host .udex-step-input__root .udex-step-input__button_dec:not(:disabled):dir(rtl){border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent}:host .udex-step-input__root .udex-step-input__button_inc:not(:disabled):dir(rtl),:host .udex-step-input__root .udex-step-input__button_dec:not(:disabled):dir(ltr){border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent}:host([readonly]) .udex-step-input__button{opacity:1}:host(:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-standard-hover-border)}:host([value-state="Success"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-success-hover-border)}:host([value-state="Warning"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-warning-hover-border)}:host([value-state="Error"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-error-hover-border)}:host(:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-standard-active-border)}:host([value-state="Success"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-success-active-border)}:host([value-state="Warning"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-warning-active-border)}:host([value-state="Error"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-error-active-border)}:host(:not([displayonly])) [udex-text-field]::part(textfield-input){padding-right:calc(var(--udex-step-input-button-size) + var(--udex-step-input-input-horizontal-padding));padding-left:calc(var(--udex-step-input-button-size) + var(--udex-step-input-input-horizontal-padding))}:host(:not([displayonly])) [udex-text-field]{margin-right:calc(var(--udex-step-input-button-size) * -1);margin-left:calc(var(--udex-step-input-button-size) * -1);width:100%}:host(:not([displayonly])) [udex-text-field]::part(textfield-input){text-align:end}:host .udex-step-input__button_dec{order:1}:host [udex-text-field]{order:2}:host .udex-step-input__button_inc{order:3}
+const styleData: StyleData = {packageName:"@sapudex/web-components",fileName:"themes/StepInput.css.ts",content:`:host{--udex-step-input-button-size: 42px;--udex-step-input-input-horizontal-padding: var(--udexSpacer8, 8px);--udex-step-input-color-standard-hover-border: var(--sapField_Hover_BorderColor, var(--udexColorBlue6));--udex-step-input-color-standard-active-border: var(--sapField_Active_BorderColor, var(--udexColorBlue9));--udex-step-input-color-error-hover-border: var(--sapField_InvalidColor, var(--udexCoreSemanticError7));--udex-step-input-color-error-active-border: var(--udexCoreSemanticError9, #840606);--udex-step-input-color-warning-hover-border: var(--sapField_WarningColor, var(--udexCoreSemanticWarning7));--udex-step-input-color-warning-active-border: var(--udexCoreSemanticWarning9, #8D2A00);--udex-step-input-color-success-hover-border: var(--sapField_SuccessColor, var(--udexCoreSemanticSuccess7));--udex-step-input-color-success-active-border: var(--udexCoreSemanticSuccess9, #1E592F)}:host [udex-text-field]{--udex-input-color-standard-hover-border: var(--udex-step-input-color-standard-hover-border);--udex-input-color-standard-active-border: var(--udex-step-input-color-standard-active-border);--udex-input-color-error-hover-border: var(--udex-step-input-color-error-hover-border);--udex-input-color-error-active-border: var(--udex-step-input-color-error-active-border);--udex-input-color-warning-hover-border: var(--udex-step-input-color-warning-hover-border);--udex-input-color-warning-active-border: var(--udex-step-input-color-warning-active-border);--udex-input-color-success-hover-border: var(--udex-step-input-color-success-hover-border);--udex-input-color-success-active-border: var(--udex-step-input-color-success-active-border)}:host(:not([displayonly])) .udex-step-input__root{display:flex;align-items:flex-start}:host .udex-step-input__button{--udex-control-button-large-height: var(--udex-step-input-button-size);--udex-control-button-large-width: var(--udex-step-input-button-size);position:relative;padding:var(--udexSpacer4, 4px);width:38px;z-index:3;background:none;flex-shrink:0}:host .udex-step-input__root .udex-step-input__button_inc:not(:disabled):dir(ltr),:host .udex-step-input__root .udex-step-input__button_dec:not(:disabled):dir(rtl){border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent}:host .udex-step-input__root .udex-step-input__button_inc:not(:disabled):dir(rtl),:host .udex-step-input__root .udex-step-input__button_dec:not(:disabled):dir(ltr){border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent}:host([readonly]) .udex-step-input__button{opacity:1}:host(:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-standard-hover-border)}:host([value-state="Success"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-success-hover-border)}:host([value-state="Warning"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-warning-hover-border)}:host([value-state="Error"]:not([disabled]):not([readonly]):not([displayonly]):hover) ::part(textfield-input){border-color:var(--udex-step-input-color-error-hover-border)}:host(:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-standard-active-border)}:host([value-state="Success"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-success-active-border)}:host([value-state="Warning"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-warning-active-border)}:host([value-state="Error"]:not([disabled]):not([readonly]):not([displayonly]):focus-within) ::part(textfield-input){border-color:var(--udex-step-input-color-error-active-border)}:host(:not([displayonly])) [udex-text-field]::part(textfield-input){padding-right:calc(var(--udex-step-input-button-size) + var(--udex-step-input-input-horizontal-padding));padding-left:calc(var(--udex-step-input-button-size) + var(--udex-step-input-input-horizontal-padding))}:host(:not([displayonly])) [udex-text-field]{margin-right:calc(var(--udex-step-input-button-size) * -1);margin-left:calc(var(--udex-step-input-button-size) * -1);width:100%}:host(:not([displayonly])) [udex-text-field]::part(textfield-input){text-align:end}:host .udex-step-input__button_dec{order:1}:host [udex-text-field]{order:2}:host .udex-step-input__button_inc{order:3}.udex-step-input__root{position:relative}.hidden{position:absolute;z-index:-1;color:transparent}
 `};
 export default styleData;
 	

package/src/themes/CountrySelector.css

@@ -41,6 +41,10 @@
   padding-right: var(--udexSpacer12);
 }
 
+:host([hide-flag-images]) [udex-text-field]::part(textfield-input) {
+  padding-inline-start: var(--udexSpacer12);
+}
+
 .udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger::after {
   left: var(--udexSpacer12);
   right: var(--udexSpacer32);

package/src/themes/StepInput.css

@@ -124,4 +124,14 @@
 
 :host .udex-step-input__button_inc {
     order: 3;
+}
+
+.udex-step-input__root {
+    position: relative;
+}
+
+.hidden {
+    position: absolute;
+    z-index: -1;
+    color: transparent;
 }

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;