@sapudex/web-components 0.147.0 → 0.172.0

package/src/utils/listItemLabelStartsWithKeyFocus.ts

@@ -0,0 +1,74 @@
+import { LetterPressedHandlerObj } from "../types/List.js";
+import {
+  findFirstItemLabelStartsWithLetterKey,
+  findNextItemLabelStartsWithKey,
+  getSearchedKeyItemsCount,
+} from "./listItemLabelUtils.js";
+
+const listItemLabelStartsWithKeyFocus = (letterKey: string, items: Element[], letterKeyHandleObj: LetterPressedHandlerObj) => {
+  const searchedKeyItemsCount = getSearchedKeyItemsCount(letterKey, items);
+  const {
+    setLastFoundPosition,
+  } = letterKeyHandleObj;
+  if (searchedKeyItemsCount > 0) {
+    // updates key pressed state variables
+    handleKeyPress(letterKey, letterKeyHandleObj);
+    // obtain focus index for listItem element
+    const elementFocusIndex = getFocusIndexForElementItem(letterKey, items, searchedKeyItemsCount, letterKeyHandleObj);
+    // update searching position for next occurence
+    setLastFoundPosition(elementFocusIndex);
+    // focuses item with starting letter
+    focusListItem(items[elementFocusIndex]);
+  }
+};
+
+// updates pressed key variables for state
+const handleKeyPress = (letterKey: string, letterKeyHandleObj: LetterPressedHandlerObj) => {
+  const {
+    getPressedKey, setPressedKey,
+    getPressedCount, setPressedCount,
+    setLastFoundPosition,
+  } = letterKeyHandleObj;
+  if (letterKey === getPressedKey()) {
+    setPressedCount(getPressedCount() + 1);
+  } else {
+    setPressedKey(letterKey);
+    setPressedCount(1);
+    setLastFoundPosition(0);
+  }
+};
+
+// obtains index for nextElement
+const getFocusIndexForElementItem = (letterKey: string, items: Element[], searchedKeyItemsCount: number, letterKeyHandleObj: LetterPressedHandlerObj) => {
+  const {
+    getPressedCount, setPressedCount,
+    getLastFoundPosition,
+  } = letterKeyHandleObj;
+
+  let focusIndex:number;
+
+  if (getPressedCount() <= searchedKeyItemsCount) {
+    // while in cycle for next item
+    const startPosition = (getPressedCount() === 1 ? 0 : getLastFoundPosition() + 1);
+    focusIndex = findItemLabelWithLetterIndex(letterKey, items, startPosition) + getLastFoundPosition();
+    // move to next position
+    if (getPressedCount() !== 1) {
+      focusIndex += 1;
+    }
+  } else {
+    // start again
+    focusIndex = findItemLabelWithLetterIndex(letterKey, items);
+    setPressedCount(1);
+  }
+  return focusIndex;
+};
+
+const focusListItem = (listItem: Element) => {
+  (listItem as HTMLElement).focus();
+};
+
+const findItemLabelWithLetterIndex = (letterKey: string, items: Element[], startPosition = 0): number => {
+  return startPosition === 0 ? findFirstItemLabelStartsWithLetterKey(letterKey, items) : findNextItemLabelStartsWithKey(letterKey, items, startPosition);
+};
+
+export default listItemLabelStartsWithKeyFocus;

package/src/utils/listItemLabelUtils.ts

@@ -0,0 +1,50 @@
+import UDExListItemBase from "../ListItemBase.js";
+
+const cleanLabel = (str: string) : string => {
+  return str.replace(/<\/?b[^>]*>/g, "");
+};
+
+const stringLabelStartsWithLetterKey = (label: string, letterKey:string): boolean => {
+  return cleanLabel(label).toLowerCase().startsWith(letterKey);
+};
+
+const listBaseItemStartsWithLetterKey = (item: Element, letterKey: string): boolean => {
+  return stringLabelStartsWithLetterKey((item as UDExListItemBase)._state?.label as string || "", letterKey);
+};
+
+const popOverItemLabelStartsWithLetterKey = (item: Element, letterKey: string): boolean => {
+  return stringLabelStartsWithLetterKey((item as UDExListItemBase)?.innerText || "", letterKey);
+};
+
+const itemLabelStartsWithLetterKey = (item: Element, letterKey: string): boolean => {
+  return listBaseItemStartsWithLetterKey(item as UDExListItemBase, letterKey) || popOverItemLabelStartsWithLetterKey(item, letterKey);
+};
+
+const itemCanBeFocused = (item: Element, letterKey: string): boolean => {
+  const itemDisabled = (item as UDExListItemBase)?.disabled || false;
+  return !itemDisabled && itemLabelStartsWithLetterKey(item, letterKey);
+};
+
+// finds first label in list items starting with letterKey
+const findFirstItemLabelStartsWithLetterKey = (letterKey: string, items: Element[]) => {
+  const findIndex = items.findIndex(item => itemCanBeFocused(item, letterKey));
+  return findIndex > -1 ? findIndex : 0;
+};
+
+const findNextItemLabelStartsWithKey = (key: string, items: Element[], start: number): number => {
+  return items.slice(start, items.length).findIndex(item => itemCanBeFocused(item, key));
+};
+
+// find number of item starting with letterKey
+const getSearchedKeyItemsCount = (letterKey: string, items: Element[]): number => {
+  const searchedItemsCountArray = items.map(i => {
+    return itemLabelStartsWithLetterKey(i, letterKey) ? i : null;
+  }).filter(i => i) as Element[];
+  return searchedItemsCountArray.length;
+};
+
+export {
+  cleanLabel, stringLabelStartsWithLetterKey,
+  itemLabelStartsWithLetterKey, findFirstItemLabelStartsWithLetterKey,
+  getSearchedKeyItemsCount, findNextItemLabelStartsWithKey,
+};

package/dist/assets/messagebundle_de-8158912e.js

@@ -1 +0,0 @@
-const E="Zählung",T="Vorgeschlagene Suchanfragen",n="Empfohlene Seiten",e="Ungültige Eingabe",_="Warnung ausgegeben",A="Informationseintrag",S="Eintrag erfolgreich validiert",t={COUNT:E,SUGGESTED_TEXT:T,RECOMMENDED_TEXT:n,VALUE_STATE_ERROR:e,VALUE_STATE_WARNING:_,VALUE_STATE_INFORMATION:A,VALUE_STATE_SUCCESS:S};export{E as COUNT,n as RECOMMENDED_TEXT,T as SUGGESTED_TEXT,e as VALUE_STATE_ERROR,A as VALUE_STATE_INFORMATION,S as VALUE_STATE_SUCCESS,_ as VALUE_STATE_WARNING,t as default};

package/dist/assets/messagebundle_en-c677773a.js

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

package/dist/assets/messagebundle_es-8dab6565.js

@@ -1 +0,0 @@
-const E="Cuenta",T="Búsquedas sugeridas",a="Páginas recomendadas",A="Entrada no válida",_="Advertencia enviada",n="Entrada informativa",s="Entrada validada correctamente",t={COUNT:E,SUGGESTED_TEXT:T,RECOMMENDED_TEXT:a,VALUE_STATE_ERROR:A,VALUE_STATE_WARNING:_,VALUE_STATE_INFORMATION:n,VALUE_STATE_SUCCESS:s};export{E as COUNT,a as RECOMMENDED_TEXT,T as SUGGESTED_TEXT,A as VALUE_STATE_ERROR,n as VALUE_STATE_INFORMATION,s as VALUE_STATE_SUCCESS,_ as VALUE_STATE_WARNING,t as default};

package/dist/assets/messagebundle_fr-669aca6d.js

@@ -1 +0,0 @@
-const E="Comte",T="Recherches suggérées",e="Pages recommandées",A="Entrée non valide",_="Avertissement édité",t="Entrée pour information",n="Entrée validée correctement",s={COUNT:E,SUGGESTED_TEXT:T,RECOMMENDED_TEXT:e,VALUE_STATE_ERROR:A,VALUE_STATE_WARNING:_,VALUE_STATE_INFORMATION:t,VALUE_STATE_SUCCESS:n};export{E as COUNT,e as RECOMMENDED_TEXT,T as SUGGESTED_TEXT,A as VALUE_STATE_ERROR,t as VALUE_STATE_INFORMATION,n as VALUE_STATE_SUCCESS,_ as VALUE_STATE_WARNING,s as default};