@sapudex/web-components 0.111.0 → 0.117.1

package/src/themes/SecondaryNavigationSubItem.css

@@ -0,0 +1,118 @@
+:host {
+  --udex-secondary-navigation-sub-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-secondary-navigation-sub-item-line-height: 1.125rem;
+  --udex-secondary-navigation-sub-item-color: var(--udexColorGrey9, #223548);
+  --udex-secondary-navigation-sub-item-hover-color: var(--udexColorBlue7, #0070f2);
+  --udex-secondary-navigation-sub-item-hover-bakground: var(--udexColorGrey1, #F5F6F7);
+  --udex-secondary-navigation-sub-item-active-bakground: var(--udexColorGrey2, #EAECEE);
+  --udex-secondary-navigation-sub-item-active-border-color: var(--udexColorBlue7, #0070f2);
+}
+
+.udex-secondary-navigation__dropdown-item {
+  padding: var(--udexSpacer12) var(--udexSpacer16);
+  font-family: var(--sapFontFamily);
+  font-size: var(--udex-secondary-navigation-sub-item-font-size);
+  line-height: var(--udex-secondary-navigation-sub-item-line-height);
+  color: var(--udex-secondary-navigation-sub-item-color);
+  display: flex;
+  text-decoration: none;
+  position: relative;
+  cursor: pointer;
+}
+
+button.udex-secondary-navigation__dropdown-item {
+  border: 0;
+  width: 100%;
+  background: none;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.udex-secondary-navigation__dropdown-item:focus {
+  outline: none;
+}
+
+:host([desktop]) .udex-secondary-navigation__dropdown-item:focus,
+.udex-secondary-navigation__dropdown-item:focus-visible {
+  outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+  border-radius: var(--udexRadiusXXS);
+  outline-offset:  calc(var(--udexSpacer4) * -1);
+}
+
+[active].udex-secondary-navigation__dropdown-item:before,
+[sub-active].udex-secondary-navigation__dropdown-item:before {
+  background: var(--udex-secondary-navigation-sub-item-active-border-color);
+  border-radius: 0 var(--udexRadiusXXS) var(--udexRadiusXXS) 0;
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: 3px;
+}
+
+[active].udex-secondary-navigation__dropdown-item:dir(rtl):before,
+[sub-active].udex-secondary-navigation__dropdown-item:dir(rtl):before {
+  left: auto;
+  right: 0;
+}
+
+[is-back].udex-secondary-navigation__dropdown-item {
+  justify-content: normal;
+}
+
+.udex-secondary-navigation__item:hover .udex-secondary-navigation__item-icon,
+.udex-secondary-navigation__item:hover {
+  color: var(--udex-secondary-navigation-sub-item-hover-color);
+}
+
+.udex-secondary-navigation__dropdown-item:hover {
+  background: var(--udex-secondary-navigation-sub-item-hover-bakground);
+}
+
+.udex-secondary-navigation__dropdown-item:active {
+  background: var(--udex-secondary-navigation-sub-item-active-bakground);
+}
+
+.udex-secondary-navigation__dropdown:dir(rtl) {
+  left: auto;
+  right: calc(var(--udexSpacer16) * -1);
+}
+
+.udex-secondary-navigation__dropdown-icon {
+  min-width: 14px;
+  height: 14px;
+}
+
+.udex-secondary-navigation__dropdown-icon_back {
+  margin-inline-end: var(--udexSpacer4);
+}
+
+@media (max-width: 979px) {
+  .udex-secondary-navigation__dropdown-item {
+    padding: var(--udexSpacer12) var(--udexSpacer48);
+    text-align: left;
+  }
+
+  .udex-secondary-navigation__dropdown-item:hover .udex-secondary-navigation__dropdown-icon,
+  .udex-secondary-navigation__dropdown-item:hover {
+    background: none;
+  }
+
+  :host([desktop]) .udex-secondary-navigation__dropdown-item:focus {
+    outline: none;
+  }
+
+  :host([desktop]) .udex-secondary-navigation__dropdown-item:focus-visible {
+    outline: var(--udexRadiusXXS) solid var(--udexColorBlue10);
+    border-radius: var(--udexRadiusXXS);
+    outline-offset:  calc(var(--udexSpacer4) * -1);
+  }
+}
+
+@media (max-width: 639px) {
+  .udex-secondary-navigation__dropdown-item {
+    padding: var(--udexSpacer12) var(--udexSpacer24);
+  }
+}

package/src/themes/StatusBadge.css

@@ -0,0 +1,135 @@
+:host {
+  --udex-status-badge-icon-color-error: var(--udexColorRed8);
+  --udex-status-badge-background-color-error: var(--udexColorRed2);
+  --udex-status-badge-border-color-error: var(--udexColorRed7);
+
+  --udex-status-badge-icon-color-success: var(--udexColorGreen8);
+  --udex-status-badge-background-color-success: var(--udexColorGreen2);
+  --udex-status-badge-border-color-success: var(--udexColorGreen7);
+
+  --udex-status-badge-icon-color-warning: var(--udexColorMango8);
+  --udex-status-badge-background-color-warning: var(--udexColorMango2);
+  --udex-status-badge-border-color-warning: var(--udexColorMango7);
+
+  --udex-status-badge-icon-color-information: var(--udexColorBlue8);
+  --udex-status-badge-background-color-information: var(--udexColorBlue2);
+  --udex-status-badge-border-color-information: var(--udexColorBlue7);
+
+  --udex-status-badge-icon-color-edit: white;
+  --udex-status-badge-background-color-edit: var(--udexColorBlue7);
+
+  --udex-status-badge-size-background-xs-and-s-and-m: 18px;
+  --udex-status-badge-size-background-l: 20px;
+  --udex-status-badge-size-background-xl: 28px;
+
+  --udex-status-badge-size-icon-xs-and-s-and-m: 12px;
+  --udex-status-badge-size-icon-l: 14px;
+  --udex-status-badge-size-icon-xl: 16px;
+
+  display: inline-block;
+  box-sizing: border-box;
+	position: relative;
+}
+
+.udex-status-badge__icon {
+  color: inherit;
+  display: inline-block;
+  border-radius: 50%;
+  outline: 1px solid;
+  vertical-align: top;
+}
+
+/* Value state design styles */
+
+.udex-status-badge__icon,
+:host([value-state="Information"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-information);
+  border-color: var(--udex-status-badge-border-color-information);
+  background: var(--udex-status-badge-background-color-information);
+}
+
+:host([value-state="Error"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-error);
+  border-color: var(--udex-status-badge-border-color-error);
+  background: var(--udex-status-badge-background-color-error);
+}
+
+:host([value-state="Success"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-success);
+  border-color: var(--udex-status-badge-border-color-success);
+  background: var(--udex-status-badge-background-color-success);
+}
+
+:host([value-state="Warning"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-warning);
+  border-color: var(--udex-status-badge-border-color-warning);
+  background: var(--udex-status-badge-background-color-warning);
+}
+
+:host([value-state="Edit"]) .udex-status-badge__icon {
+  color: var(--udex-status-badge-icon-color-edit);
+  background: var(--udex-status-badge-background-color-edit);
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+}
+
+/* Size styles */
+
+.udex-status-badge__icon,
+:host([size="XS"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="S"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="M"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-icon-xs-and-s-and-m);
+  padding: 3px;
+}
+
+:host([size="L"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-l);
+  height: var(--udex-status-badge-size-icon-l);
+  padding: 3px;
+}
+
+:host([size="XL"]) .udex-status-badge__icon {
+  width: var(--udex-status-badge-size-icon-xl);
+  height: var(--udex-status-badge-size-icon-xl);
+  padding: 6px;
+}
+
+.udex-status-badge,
+:host([size="XS"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-background-xs-and-s-and-m);
+}
+
+:host([size="S"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-background-xs-and-s-and-m);
+}
+
+
+:host([size="M"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xs-and-s-and-m);
+  height: var(--udex-status-badge-size-background-xs-and-s-and-m);
+}
+
+:host([size="L"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-l);
+  height: var(--udex-status-badge-size-background-l);
+}
+
+:host([size="XL"]) .udex-status-badge {
+  width: var(--udex-status-badge-size-background-xl);
+  height: var(--udex-status-badge-size-background-xl);
+}

package/src/themes/Tag.css

@@ -75,7 +75,7 @@
     position: relative;
     max-width: 100%;
   }
-  
+
   .udex-tag--medium {
     font-size: var(--udex-tags-medium-font-size);
     line-height: var(--udex-tags-medium-line-height);
@@ -107,6 +107,11 @@
     background-color: var(--udex-tags-grey-selected-background-color);
 }
 
+.udex-tag-grey.udex-tag--nonselectable,
+.udex-tag-grey.udex-tag--nonselectable:hover {
+  color: var(--udex-tags-text-color);
+}
+
 .udex-tag-grey.udex-tag--selected:after {
     content: '';
     position: absolute;

package/src/themes/TextField.css

@@ -29,12 +29,21 @@
   --udex-input-color-read-only-default-background: var(--sapField_ReadOnly_Background, var(--udexColorGrey2));
 
   --udex-input-padding: 9px var(--udexSpacer12, 12px);
+  --udex-input-min-width-xs-and-s: 100%;
+  --udex-input-max-width: 100%;
 }
 
 .udex-text-field__container {
-  width: 100%;
   position: relative;
   font-family: var(--sapFontFamily, sans-serif);
+  max-width: var(--udex-input-max-width);
+  width: 100%;
+}
+
+@media (width < 640px) {
+  .udex-text-field__container{
+    min-width: var(--udex-input-min-width-xs-and-s);
+  }
 }
 
 :host([disabled]) .udex-text-field__container {

package/src/types/callback.ts

@@ -0,0 +1,3 @@
+type CallbackFunction<T = any> = (args?: any) => T;
+
+export default CallbackFunction;

package/src/utils/debounce.ts

@@ -1,4 +1,4 @@
-type CallbackFunction = (args: any) => any;
+import CallbackFunction from "../types/callback.js";
 
 const debounce = <T extends CallbackFunction>(cb: T, timeout = 300) => {
   let timer: ReturnType<typeof setTimeout>;

package/src/utils/retryUntilSuccessful.ts

@@ -0,0 +1,23 @@
+import CallbackFunction from "../types/callback.js";
+
+const retryUntilSuccessful = (checkFn: CallbackFunction<void>, delay: number, maxAttempts: number, errorMessage: string): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    let currentAttempt = 0;
+
+    const attempt = () => {
+      currentAttempt++;
+      const result = checkFn();
+      if (result !== undefined) {
+        resolve(result);
+      } else if (currentAttempt < maxAttempts) {
+        setTimeout(attempt, delay);
+      } else {
+        reject(new Error(errorMessage));
+      }
+    };
+
+    attempt();
+  });
+};
+
+export default retryUntilSuccessful;

package/dist/assets/messagebundle_en-26cd7a92.js

@@ -1 +0,0 @@
-const T="Count",E="of",A="Pagination page",_="Selected",I="Unselected",S="Indeterminate",t="Edit button",R="Delete button",N="Primary",O="Secondary",n="Tertiary",L="Warning",o="Positive",s="Negative",e="Emphasized",c="Default",C="Transparent",U="Attention",P="Toggled",a="First page",D="Last page",i="Previous page",r="Next page",B="Activate page number",G="Suggested searches",M="Available Values",l="Recommended pages",V="Expand All",d="Collapse All",u="More",Y="Attention badge",W="Read more",g="Read less",F="Rating Indicator",m="Rating",X="Required",H="Total",y="Contains Multi-Selectable Items",p="Contains Selectable Items",b="Show Results",v="Show/Hide Password Button",f="Reset",h="Information Bar Close",K="Information",w="Success",Q="Warning",x="Error",k="Select Options",Z="Select All",q="{0} characters remaining",z="Field State Error",j="Field State Warning",J="Field State Success",$="Field State Standard",TT="Previous Page",ET="Next Page",AT="No matches found.",_T="Breadcrumb Trail",IT="More",ST="Increase Quantity by",tT="Decrease Quantity by",RT="No data found",NT="Invalid entry",OT="Warning issued",nT="Informative entry",LT="Entry successfully validated",oT="Read only",sT="Logout",eT="Country Select",cT="Overview",CT="Link Graphic",UT="Phone number",PT="Contact us",aT="Email",DT="Chat with us",iT="Quick Links",rT="Trending",BT="About SAP",GT="Site Information",MT="Or see our complete list of",lT="local country numbers",VT="Avatar",dT="Employee start date",uT="Edit list item entry",YT="Delete list item entry",WT={COUNT:T,OF:E,PAGINATION_PAGE:A,SELECTED:_,UNSELECTED:I,INDETERMINATE:S,EDIT_BUTTON:t,DELETE_BUTTON:R,BUTTON_ARIA_TYPE_PRIMARY:N,BUTTON_ARIA_TYPE_SECONDARY:O,BUTTON_ARIA_TYPE_TERTIARY:n,BUTTON_ARIA_TYPE_WARNING:L,BUTTON_ARIA_TYPE_POSITIVE:o,BUTTON_ARIA_TYPE_NEGATIVE:s,BUTTON_ARIA_EMPHASIZED:e,BUTTON_ARIA_DEFAULT:c,BUTTON_ARIA_TRANSPARENT:C,BUTTON_ARIA_ATTENTION:U,TOGGLED:P,FIRST_PAGE:a,LAST_PAGE:D,PREVIOUS_PAGE:i,NEXT_PAGE:r,ACTIVATE_PAGE:B,SUGGESTED_TEXT:G,AVAILABLE_VALUES:M,RECOMMENDED_TEXT:l,EXPAND_ALL:V,COLLAPSE_ALL:d,MORE:u,ATTENTION_BADGE:Y,READ_MORE:W,READ_LESS:g,RATING_INDICATOR_TEXT:F,RATING_INDICATOR_TOOLTIP_TEXT:m,RATING_INDICATOR_ARIA_DESCRIPTION:X,TOTAL:H,ARIA_LABEL_LIST_MULTISELECTABLE:y,ARIA_LABEL_LIST_SELECTABLE:p,SHOW_RESULTS:b,SHOW_HIDE_PASSWORD:v,RESET:f,MESSAGE_STRIP_CLOSE_BUTTON:h,MESSAGE_STRIP_INFORMATION:K,MESSAGE_STRIP_SUCCESS:w,MESSAGE_STRIP_WARNING:Q,MESSAGE_STRIP_ERROR:x,SELECT_OPTIONS:k,SELECT_ALL:Z,TEXTAREA_CHARACTERS_LEFT:q,VALUE_STATE_TYPE_ERROR:z,VALUE_STATE_TYPE_WARNING:j,VALUE_STATE_TYPE_SUCCESS:J,VALUE_STATE_TYPE_STANDARD:$,CAROUSEL_PREVIOUS_ARROW_TEXT:TT,CAROUSEL_NEXT_ARROW_TEXT:ET,NO_MATCHES_FOUND:AT,BREADCRUMBS_ARIA_LABEL:_T,BREADCRUMBS_OVERFLOW_ARIA_LABEL:IT,STEPINPUT_INC_ICON_TITLE:ST,STEPINPUT_DEC_ICON_TITLE:tT,TABLE_NO_DATA_FOUND:RT,VALUE_STATE_ERROR:NT,VALUE_STATE_WARNING:OT,VALUE_STATE_INFORMATION:nT,VALUE_STATE_SUCCESS:LT,READ_ONLY:oT,LOGOUT:sT,COUNTRY_SELECT:eT,OVERVIEW:cT,SOCIAL_LINK_ICON:CT,PHONE_NUMBER:UT,CONTACT_US:PT,EMAIL:aT,CHAT_WITH_US:DT,QUICK_LINKS:iT,TRENDING:rT,ABOUT_SAP:BT,SITE_INFORMATION:GT,SEE_COMPLETE_LIST:MT,LOCAL_COUNTRY_NAMES:lT,AVATAR_TEXT:VT,CALENDAR_ICON:dT,LIST_ITEM_EDIT_ICON:uT,LIST_ITEM_DELETE_ICON:YT};export{BT as ABOUT_SAP,B as ACTIVATE_PAGE,y as ARIA_LABEL_LIST_MULTISELECTABLE,p as ARIA_LABEL_LIST_SELECTABLE,Y as ATTENTION_BADGE,M as AVAILABLE_VALUES,VT as AVATAR_TEXT,_T as BREADCRUMBS_ARIA_LABEL,IT as BREADCRUMBS_OVERFLOW_ARIA_LABEL,U as BUTTON_ARIA_ATTENTION,c as BUTTON_ARIA_DEFAULT,e as BUTTON_ARIA_EMPHASIZED,C as BUTTON_ARIA_TRANSPARENT,s as BUTTON_ARIA_TYPE_NEGATIVE,o as BUTTON_ARIA_TYPE_POSITIVE,N as BUTTON_ARIA_TYPE_PRIMARY,O as BUTTON_ARIA_TYPE_SECONDARY,n as BUTTON_ARIA_TYPE_TERTIARY,L as BUTTON_ARIA_TYPE_WARNING,dT as CALENDAR_ICON,ET as CAROUSEL_NEXT_ARROW_TEXT,TT as CAROUSEL_PREVIOUS_ARROW_TEXT,DT as CHAT_WITH_US,d as COLLAPSE_ALL,PT as CONTACT_US,T as COUNT,eT as COUNTRY_SELECT,R as DELETE_BUTTON,t as EDIT_BUTTON,aT as EMAIL,V as EXPAND_ALL,a as FIRST_PAGE,S as INDETERMINATE,D as LAST_PAGE,YT as LIST_ITEM_DELETE_ICON,uT as LIST_ITEM_EDIT_ICON,lT as LOCAL_COUNTRY_NAMES,sT as LOGOUT,h as MESSAGE_STRIP_CLOSE_BUTTON,x as MESSAGE_STRIP_ERROR,K as MESSAGE_STRIP_INFORMATION,w as MESSAGE_STRIP_SUCCESS,Q as MESSAGE_STRIP_WARNING,u as MORE,r as NEXT_PAGE,AT as NO_MATCHES_FOUND,E as OF,cT as OVERVIEW,A as PAGINATION_PAGE,UT as PHONE_NUMBER,i as PREVIOUS_PAGE,iT as QUICK_LINKS,X as RATING_INDICATOR_ARIA_DESCRIPTION,F as RATING_INDICATOR_TEXT,m as RATING_INDICATOR_TOOLTIP_TEXT,g as READ_LESS,W as READ_MORE,oT as READ_ONLY,l as RECOMMENDED_TEXT,f as RESET,MT as SEE_COMPLETE_LIST,_ as SELECTED,Z as SELECT_ALL,k as SELECT_OPTIONS,v as SHOW_HIDE_PASSWORD,b as SHOW_RESULTS,GT as SITE_INFORMATION,CT as SOCIAL_LINK_ICON,tT as STEPINPUT_DEC_ICON_TITLE,ST as STEPINPUT_INC_ICON_TITLE,G as SUGGESTED_TEXT,RT as TABLE_NO_DATA_FOUND,q as TEXTAREA_CHARACTERS_LEFT,P as TOGGLED,H as TOTAL,rT as TRENDING,I as UNSELECTED,NT as VALUE_STATE_ERROR,nT as VALUE_STATE_INFORMATION,LT as VALUE_STATE_SUCCESS,z as VALUE_STATE_TYPE_ERROR,$ as VALUE_STATE_TYPE_STANDARD,J as VALUE_STATE_TYPE_SUCCESS,j as VALUE_STATE_TYPE_WARNING,OT as VALUE_STATE_WARNING,WT as default};