@sapudex/web-components 2.3.0 → 2.4.0

package/src/themes/Contact.css

@@ -0,0 +1,184 @@
+:host {
+  --udex-contact-popover-width: 360px;
+  --udex-contact-popover-shadow: 0 20px 80px 0 rgba(34, 54, 73, 0.25), 0 0 0 0 rgba(255, 255, 255, 0.00);
+  --udex-contact-call-us-background: var(--udexColorBlue7, #0070F2);
+  --udex-contact-call-us-padding: 28px var(--udexSpacer32);
+  --udex-contact-botton-position: var(--udexSpacer24);
+  --udex-contact-right-position: var(--udexSpacer24);
+
+  position: fixed;
+  bottom: var(--udex-contact-botton-position);
+  right: var(--udex-contact-right-position);
+}
+
+:host(:dir(rtl)) {
+  right: auto;
+  left: var(--udex-contact-right-position);
+}
+
+.udex-contact__button {
+  --udex-button-icon-l-size: 26px;
+  --udex-button-large-size: 58px;
+  --udex-button-icon-text-spacing-large-size: var(--udexSpacer12);
+  --udex-button-padding-large: 8px 18px;
+  box-shadow: var(--sapContent_Shadow2, 0 10px 30px 0 #22364940);
+  font-size: var(--udexTypographyHeadingMediumXXXSFontSize, 18px);
+  border: 2px solid var(--udexColorNeutralWhite, #FFF);
+  background: var(--udexColorBlue7, #0070F2);
+}
+
+.udex-contact__opener {
+  padding-top: var(--udexSpacer24);
+}
+
+.udex-contact__button:hover {
+  background: var(--udexColorBlue9, #0040B0);
+}
+
+[open].udex-contact__popover + .udex-contact__opener {
+  pointer-events: none;
+}
+
+[open].udex-contact__popover + .udex-contact__opener .udex-contact__button,
+:host [active].udex-contact__button {
+  background: var(--udexColorNeutralWhite, #FFF);
+  color: var(--udexColorBlue9, #0040B0);
+  border-color: var(--udexColorBlue9, #0040B0);
+  pointer-events: auto;
+}
+
+.udex-contact__popover {
+  width: var(--udex-contact-popover-width);
+  box-shadow: var(--udex-contact-popover-shadow);
+}
+
+.udex-contact__call-us {
+  background: var(--udex-contact-call-us-background);
+  padding: var(--udex-contact-call-us-padding);
+  font-family: var(--sapFontFamily, sans-serif);
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 21px);
+  color: var(--udexColorNeutralWhite);
+  text-align: center;
+}
+
+.udex-contact__close-btn-wrap {
+  text-align: end;
+  height: 0;
+}
+
+.udex-contact__close-btn {
+  --udex-button-focus-border-color: var(--udexColorNeutralWhite, #FFF);
+  color: var(--udexColorNeutralWhite, #FFF);
+  margin-inline-start: auto;
+  display: none;
+}
+
+[on-phone] .udex-contact__call-us-heading,
+[on-phone] .udex-contact__close-btn {
+  display: block;
+}
+
+[on-phone] .udex-contact__call-us-heading {
+  margin-inline-end: var(--udexSpacer8);
+}
+
+.udex-contact__items {
+  padding: var(--udexSpacer12) 0;
+}
+
+.udex-contact__popover::part(content) {
+  padding: 0;
+}
+
+.udex-contact__call-us-heading,
+[on-phone].udex-contact__popover::part(header) {
+  display: none;
+}
+
+.udex-contact__call-us-title {
+  font-size: var(--udexTypographyBodyXLFontSize, 24px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
+  margin: 0 0 var(--udexSpacer12);
+}
+
+.udex-contact__number-wrapper:first-child .udex-contact__number {
+  font-size: var(--udexTypographyHeadingMediumSFontSize, 28px);
+  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+}
+
+.udex-contact__number-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: var(--udexSpacer12);
+  font-size: var(--udexTypographyBodyLFontSize	, 20px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+}
+
+.udex-contact__complete-list {
+  margin: 28px 0 0 ;
+}
+
+.udex-contact__country {
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 21px);
+  margin-bottom: var(--udexSpacer2);
+}
+
+.udex-contact__local-country-link,
+.udex-contact__number {
+  --sapContent_FocusColor: var(--udexColorNeutralWhite, #FFF);
+  color: var(--udexColorNeutralWhite, #FFF);
+  text-decoration: none;
+}
+
+.udex-contact__local-country-link {
+  --udex-link-hover-text-decoration: none;
+  font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  line-height: var(--udexTypographyBodyLineHeight, 21px);
+  text-decoration: none;
+}
+
+.udex-contact__number {
+  --udex-link-text-decoration: none;
+  --udex-link-line-height: var(--udexTypographyHeadingLineHeight, 1.1);
+  font-size: var(--udexTypographyBodyLFontSize, 20px);
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+}
+
+.udex-contact__number:hover {
+  text-decoration: underline;
+}
+
+.udex-contact__call-us_empty {
+  height: 16px;
+  padding: 0;
+}
+
+[on-phone] .udex-contact__call-us_empty {
+  font-size: var(--udexTypographyHeadingMediumXXXSFontSize, 18px);
+  font-weight: var(--udexTypographyFontWeightMedium, 500);
+  padding: var(--udexSpacer16);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: auto;
+}
+
+@media (max-width: 979px) {
+  :host {
+    bottom: var(--udexSpacer16);
+    right: var(--udexSpacer16);
+  }
+
+  :host(:dir(rtl)) {
+    right: auto;
+    left: var(--udexSpacer16);
+  }
+
+  .udex-contact__opener {
+    padding-top: var(--udexSpacer16);
+  }
+}

package/src/themes/ContactItem.css

@@ -0,0 +1,44 @@
+:host {
+  --udex-contact-item-font-family: var(--sapFontFamily, sans-serif);
+  --udex-contact-item-font-size: var(--udexTypographyBodyXSFontSize, 14px);
+  --udex-contact-item-line-height: var(--udexTypographyBodyLineHeight, 21px);
+  --udex-contact-item-padding: var(--udexSpacer16) 18px;
+  --udex-contact-item-color: var(--udexColorGrey9, #223548);
+  --udex-contact-item-icon-color: var(--udexColorGrey7, #475E75);
+  --udex-contact-item-icon-size: 26px;
+  --udex-contact-item-icon-padding: 6px;
+}
+
+.udex-contact-item {
+  font-family: var(--udex-contact-item-font-family);
+  font-size: var(--udex-contact-item-font-size);
+  line-height: var(--udex-contact-item-line-height);
+  padding: var(--udex-contact-item-padding);
+  color: var(--udex-contact-item-color);
+  display: flex;
+}
+
+.udex-contact-item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.udex-contact-item__description {
+  margin: var(--udexSpacer4) 0 0;
+}
+
+.udex-contact-item__text,
+.udex-contact-item__link {
+  font-size: var(--udexTypographyBodySFontSize, 16px);
+  line-height: var(--udexTypographyBodyLineHeight, 1.5);
+}
+
+.udex-contact-item__icon {
+  color: var(--udex-contact-item-icon-color);
+  margin-inline-end: var(--udexSpacer16);
+  min-width: var(--udex-contact-item-icon-size);
+  width: var(--udex-contact-item-icon-size);
+  height: var(--udex-contact-item-icon-size);
+  padding: var(--udex-contact-item-icon-padding);
+}

package/src/themes/Modal.css

@@ -27,8 +27,8 @@
 }
 
 :host .ui5-popup-root .ui5-popup-content  {
-	padding: var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);
-  scrollbar-gutter: auto;
+	padding: var(--udex-modal-and-overlay-modal-content-padding-vertical) calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udexGridXSGutter, 16px)) var(--udex-modal-and-overlay-modal-content-padding-vertical) var(--udex-modal-and-overlay-modal-content-padding-horizontal);
+  scrollbar-gutter: stable;
 }
 
 :host([type="basic"]) {
@@ -37,8 +37,8 @@
 }
 
 :host([type="basic"]) .ui5-popup-root .ui5-popup-content {
-	padding: 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);
-  scrollbar-gutter: auto;
+  padding: 0 calc(var(--udex-modal-and-overlay-modal-content-padding-horizontal) - var(--udexGridXSGutter, 16px)) 0 var(--udex-modal-and-overlay-modal-content-padding-horizontal);
+  scrollbar-gutter: stable;
 }
 
 :host ::slotted([slot="header"][ui5-bar]) {

package/src/types/ContactItemIcon.ts

@@ -0,0 +1,7 @@
+export enum UDExContactItemIcon {
+  "Email" = "Email",
+  "Headset" = "Headset",
+  "Discussion-2" = "Discussion-2",
+}
+
+export default UDExContactItemIcon;

package/src/utils/parseArrayFromString.ts

@@ -0,0 +1,5 @@
+function parseArrayFromString<T>(string: string): T[] {
+  return string ? JSON.parse(string) as T[] : [];
+}
+
+export default parseArrayFromString;

package/dist/assets/messagebundle_en-CVKgy_9L.js

@@ -1 +0,0 @@
-const T="Count",E="of",_="Pagination page",A="Selected",S="Unselected",I="Indeterminate",t="Edit",R="Delete",N="Primary",O="Secondary",n="Tertiary",o="Warning",L="Positive",s="Negative",e="Emphasized",c="Default",C="Transparent",U="Attention",P="Date Input",a="Toggled",D="First page",i="Last page",B="Previous page",r="Next page",G="Current page",l="Activate page number",M="Suggested searches",d="Clear",V="Search",u="Clear",W="Voice",F="Submit",Y="Listening",g="Available Values",p="Recommended pages",X="Expand All",m="Collapse All",f="More",H="Attention badge",y="Read more",v="Read less",h="Rating Indicator",b="Rating",K="Required",w="Total",k="Contains Multi-Selectable Items",x="Contains Selectable Items",Q="Show Results",Z="Show/Hide Password Button",q="Reset",z="Message Strip Close Button",j="Information Bar",J="Positive Bar",$="Warning Bar",TT="Negative Bar",ET="Action Bar",_T="reviews",AT="stars",ST="Select Options",IT="Select All",tT="{0} characters remaining",RT="Field State Error",NT="Field State Warning",OT="Field State Success",nT="Field State Standard",oT="Previous Page",LT="Next Page",sT="No matches found.",eT="Breadcrumb Trail",cT="More",CT="Increase Quantity by",UT="Decrease Quantity by",PT="No data found",aT="Invalid entry",DT="Warning issued",iT="Informative entry",BT="Entry successfully validated",rT="Read only",GT="Logout",lT="Select country",MT="Overview",dT="Cart",VT="Country Selector",uT="Support",WT="Link Graphic",FT="Phone number",YT="Contact us",gT="Email",pT="Chat with us",XT="Quick Links",mT="Trending",fT="About SAP",HT="Site Information",yT="Or see our complete list of",vT="local country numbers",hT="© {0} SAP SE or an SAP affiliate company. All rights reserved.",bT="Avatar",KT="Open Calendar icon",wT="Edit list item entry",kT="Delete list item entry",xT="back button label",QT="Status Badge",ZT="Click to edit profile",qT="Click to open profile information",zT="Warning, potential risk with the profile",jT="There is an error with the profile",JT="Successfully verified profile",$T="Profile",TE="main links",EE="opens in a new window",_E="Text field",AE="Uploading",SE="Terminated",IE="Remove file",tE="Upload file",RE={COUNT:T,OF:E,PAGINATION_PAGE:_,SELECTED:A,UNSELECTED:S,INDETERMINATE:I,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:o,BUTTON_ARIA_TYPE_POSITIVE:L,BUTTON_ARIA_TYPE_NEGATIVE:s,BUTTON_ARIA_EMPHASIZED:e,BUTTON_ARIA_DEFAULT:c,BUTTON_ARIA_TRANSPARENT:C,BUTTON_ARIA_ATTENTION:U,DATEPICKER_DATE_DESCRIPTION:P,TOGGLED:a,FIRST_PAGE:D,LAST_PAGE:i,PREVIOUS_PAGE:B,NEXT_PAGE:r,CURRENT_PAGE:G,ACTIVATE_PAGE:l,SUGGESTED_TEXT:M,ACCESSIBLE_NAME_RESET_ICON:d,ACCESSIBLE_NAME_SEARCH_ICON:V,TOOLTIP_RESET_BUTTON:u,TOOLTIP_VOICE_BUTTON:W,TOOLTIP_SUBMIT_BUTTON:F,LISTENING:Y,AVAILABLE_VALUES:g,RECOMMENDED_TEXT:p,EXPAND_ALL:X,COLLAPSE_ALL:m,MORE:f,ATTENTION_BADGE:H,READ_MORE:y,READ_LESS:v,RATING_INDICATOR_TEXT:h,RATING_INDICATOR_TOOLTIP_TEXT:b,RATING_INDICATOR_ARIA_DESCRIPTION:K,TOTAL:w,ARIA_LABEL_LIST_MULTISELECTABLE:k,ARIA_LABEL_LIST_SELECTABLE:x,SHOW_RESULTS:Q,SHOW_HIDE_PASSWORD:Z,RESET:q,MESSAGE_STRIP_CLOSE_BUTTON:z,MESSAGE_STRIP_INFORMATION:j,MESSAGE_STRIP_SUCCESS:J,MESSAGE_STRIP_WARNING:$,MESSAGE_STRIP_ERROR:TT,MESSAGE_STRIP_ACTION:ET,REVIEWS:_T,STARS:AT,SELECT_OPTIONS:ST,SELECT_ALL:IT,TEXTAREA_CHARACTERS_LEFT:tT,VALUE_STATE_TYPE_ERROR:RT,VALUE_STATE_TYPE_WARNING:NT,VALUE_STATE_TYPE_SUCCESS:OT,VALUE_STATE_TYPE_STANDARD:nT,CAROUSEL_PREVIOUS_ARROW_TEXT:oT,CAROUSEL_NEXT_ARROW_TEXT:LT,NO_MATCHES_FOUND:sT,BREADCRUMBS_ARIA_LABEL:eT,BREADCRUMBS_OVERFLOW_ARIA_LABEL:cT,STEPINPUT_INC_ICON_TITLE:CT,STEPINPUT_DEC_ICON_TITLE:UT,TABLE_NO_DATA_FOUND:PT,VALUE_STATE_ERROR:aT,VALUE_STATE_WARNING:DT,VALUE_STATE_INFORMATION:iT,VALUE_STATE_SUCCESS:BT,READ_ONLY:rT,LOGOUT:GT,COUNTRY_SELECT:lT,OVERVIEW:MT,CART:dT,COUNTRY_SELECTOR:VT,SUPPORT:uT,SOCIAL_LINK_ICON:WT,PHONE_NUMBER:FT,CONTACT_US:YT,EMAIL:gT,CHAT_WITH_US:pT,QUICK_LINKS:XT,TRENDING:mT,ABOUT_SAP:fT,SITE_INFORMATION:HT,SEE_COMPLETE_LIST:yT,LOCAL_COUNTRY_NAMES:vT,COPYRIGHT:hT,AVATAR_TEXT:bT,CALENDAR_ICON:KT,LIST_ITEM_EDIT_ICON:wT,LIST_ITEM_DELETE_ICON:kT,BACK_BUTTON_LABEL:xT,STATUS_BADGE_TEXT:QT,STATUS_BADGE_EDIT_TITLE:ZT,STATUS_BADGE_INFORMATION_TITLE:qT,STATUS_BADGE_WARNING_TITLE:zT,STATUS_BADGE_ERROR_TITLE:jT,STATUS_BADGE_SUCCESS_TITLE:JT,PROFILE:$T,MAIN_LINKS:TE,OPENS_IN_A_NEW_WINDOW:EE,TEXT_FIELD:_E,UPLOADING_FILE_STATUS_TEXT:AE,TERMINATED_FILE_STATUS_TEXT:SE,REMOVE_FILE_TEXT:IE,UPLOAD_BUTTON_LABEL:tE};export{fT as ABOUT_SAP,d as ACCESSIBLE_NAME_RESET_ICON,V as ACCESSIBLE_NAME_SEARCH_ICON,l as ACTIVATE_PAGE,k as ARIA_LABEL_LIST_MULTISELECTABLE,x as ARIA_LABEL_LIST_SELECTABLE,H as ATTENTION_BADGE,g as AVAILABLE_VALUES,bT as AVATAR_TEXT,xT as BACK_BUTTON_LABEL,eT as BREADCRUMBS_ARIA_LABEL,cT 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,L as BUTTON_ARIA_TYPE_POSITIVE,N as BUTTON_ARIA_TYPE_PRIMARY,O as BUTTON_ARIA_TYPE_SECONDARY,n as BUTTON_ARIA_TYPE_TERTIARY,o as BUTTON_ARIA_TYPE_WARNING,KT as CALENDAR_ICON,LT as CAROUSEL_NEXT_ARROW_TEXT,oT as CAROUSEL_PREVIOUS_ARROW_TEXT,dT as CART,pT as CHAT_WITH_US,m as COLLAPSE_ALL,YT as CONTACT_US,hT as COPYRIGHT,T as COUNT,lT as COUNTRY_SELECT,VT as COUNTRY_SELECTOR,G as CURRENT_PAGE,P as DATEPICKER_DATE_DESCRIPTION,R as DELETE_BUTTON,t as EDIT_BUTTON,gT as EMAIL,X as EXPAND_ALL,D as FIRST_PAGE,I as INDETERMINATE,i as LAST_PAGE,Y as LISTENING,kT as LIST_ITEM_DELETE_ICON,wT as LIST_ITEM_EDIT_ICON,vT as LOCAL_COUNTRY_NAMES,GT as LOGOUT,TE as MAIN_LINKS,ET as MESSAGE_STRIP_ACTION,z as MESSAGE_STRIP_CLOSE_BUTTON,TT as MESSAGE_STRIP_ERROR,j as MESSAGE_STRIP_INFORMATION,J as MESSAGE_STRIP_SUCCESS,$ as MESSAGE_STRIP_WARNING,f as MORE,r as NEXT_PAGE,sT as NO_MATCHES_FOUND,E as OF,EE as OPENS_IN_A_NEW_WINDOW,MT as OVERVIEW,_ as PAGINATION_PAGE,FT as PHONE_NUMBER,B as PREVIOUS_PAGE,$T as PROFILE,XT as QUICK_LINKS,K as RATING_INDICATOR_ARIA_DESCRIPTION,h as RATING_INDICATOR_TEXT,b as RATING_INDICATOR_TOOLTIP_TEXT,v as READ_LESS,y as READ_MORE,rT as READ_ONLY,p as RECOMMENDED_TEXT,IE as REMOVE_FILE_TEXT,q as RESET,_T as REVIEWS,yT as SEE_COMPLETE_LIST,A as SELECTED,IT as SELECT_ALL,ST as SELECT_OPTIONS,Z as SHOW_HIDE_PASSWORD,Q as SHOW_RESULTS,HT as SITE_INFORMATION,WT as SOCIAL_LINK_ICON,AT as STARS,ZT as STATUS_BADGE_EDIT_TITLE,jT as STATUS_BADGE_ERROR_TITLE,qT as STATUS_BADGE_INFORMATION_TITLE,JT as STATUS_BADGE_SUCCESS_TITLE,QT as STATUS_BADGE_TEXT,zT as STATUS_BADGE_WARNING_TITLE,UT as STEPINPUT_DEC_ICON_TITLE,CT as STEPINPUT_INC_ICON_TITLE,M as SUGGESTED_TEXT,uT as SUPPORT,PT as TABLE_NO_DATA_FOUND,SE as TERMINATED_FILE_STATUS_TEXT,tT as TEXTAREA_CHARACTERS_LEFT,_E as TEXT_FIELD,a as TOGGLED,u as TOOLTIP_RESET_BUTTON,F as TOOLTIP_SUBMIT_BUTTON,W as TOOLTIP_VOICE_BUTTON,w as TOTAL,mT as TRENDING,S as UNSELECTED,AE as UPLOADING_FILE_STATUS_TEXT,tE as UPLOAD_BUTTON_LABEL,aT as VALUE_STATE_ERROR,iT as VALUE_STATE_INFORMATION,BT as VALUE_STATE_SUCCESS,RT as VALUE_STATE_TYPE_ERROR,nT as VALUE_STATE_TYPE_STANDARD,OT as VALUE_STATE_TYPE_SUCCESS,NT as VALUE_STATE_TYPE_WARNING,DT as VALUE_STATE_WARNING,RE as default};