@sapudex/web-components 2.13.0 → 2.15.0

package/src/Search.ts

@@ -10,13 +10,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
 import {
-  isEnter,
-  isTabNext,
-  isTabPrevious,
-  isUp,
-  isDown,
-  isEscape,
-  isSpace,
+  isEnter, isTabNext, isTabPrevious, isUp, isDown, isEscape, isSpace,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
@@ -45,6 +39,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import sanitizeString from "./utils/sanitizeString.js";
 import UDExButton from "./Button.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
@@ -58,12 +53,12 @@ const SearchIcon: string = "sap-icon://search";
 
 const SuggestionsPopoverId: string = "suggestions-popover";
 
-type ListItem = {
+export type ListItem = {
   label: string;
   icon: string;
 }
 
-type DataList = Array<ListItem | string>;
+export type DataList = Array<ListItem | string>;
 
 export type SuggestionData = {
   label: string,
@@ -75,7 +70,7 @@ export type RecommendData = {
   list: DataList
 }
 
-type SuggestionRecommendLists = {
+export type SuggestionRecommendLists = {
   suggested: SuggestionData | DataList,
   recommended: RecommendData | DataList
 }
@@ -99,15 +94,17 @@ export type PopoverPlacement = "Bottom" | "Top";
 
 type UDExSearchBaseEventDetail = {
   value: string,
+  categoryName?: string
 }
 
 type UDExSearchPrefixItemClickEventDetail = {
   item: ListItemBase,
 }
 
-export type UDExSearchKeydownEventDetail = {
+type UDExSearchKeydownEventDetail = {
   e: KeyboardEvent;
 }
+
 /**
  * @class
  *
@@ -693,13 +690,13 @@ class UDExSearch extends UI5Element {
       const itemWithCustomIcon = typeof item === "object";
       const label = itemWithCustomIcon ? item.label : item;
       return {
-        handleSelectItem: this.handleSelectItem(label),
-        text: this.getTextWithSuggestion(label),
-        title: label,
+        handleSelectItem: this.handleSelectItem(label, idName),
+        text: sanitizeString(this.getTextWithSuggestion(label)),
+        title: sanitizeString(label),
         icon: itemWithCustomIcon ? item.icon : SearchIcon,
         hasCustomIcon: itemWithCustomIcon,
         id: `${idName}-${index}`,
-        suggestionDescription: `${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`,
+        suggestionDescription: sanitizeString(`${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`),
       };
     });
   }
@@ -715,14 +712,14 @@ class UDExSearch extends UI5Element {
     return text.replace(search, "<b>$&</b>");
   }
 
-  handleSelectItem = (itemValue: string) => () => {
+  handleSelectItem = (itemValue: string, categoryName: string) => () => {
     this.value = itemValue;
-    this.fireDropdownItemClick(itemValue);
+    this.fireDropdownItemClick(itemValue, categoryName);
     this.handleSubmitValue();
   };
 
-  fireDropdownItemClick(value: string) {
-    this.fireDecoratorEvent("dropdown-item-click", { value });
+  fireDropdownItemClick(value: string, categoryName: string) {
+    this.fireDecoratorEvent("dropdown-item-click", { value: sanitizeString(value), categoryName });
   }
 
   handleDropdownClick() {
@@ -1323,3 +1320,4 @@ class UDExSearch extends UI5Element {
 UDExSearch.define();
 
 export default UDExSearch;
+export type { UDExSearchBaseEventDetail, UDExSearchKeydownEventDetail, UDExSearchPrefixItemClickEventDetail };

package/src/SearchableListBase.ts

@@ -30,6 +30,11 @@ type UDExSearchableListBaseSubmitSearchEventDetail = {
   selectedItems: Array<UDExListItemBase>
 }
 
+type UDExSelectBoxIconClickEventDetail = {
+  originalEvent: PointerEvent,
+  item: UDExItemFromList,
+}
+
 export type UDExSearchableListBaseEvents = {
   "select-all": void,
   "selection-change": UDExSearchableListBaseSelectionChangeEventDetail,
@@ -40,11 +45,6 @@ export type UDExSearchableListBaseEvents = {
   "second-icon-click": UDExSelectBoxIconClickEventDetail,
 }
 
-type UDExSelectBoxIconClickEventDetail = {
-  originalEvent: PointerEvent,
-  item: UDExItemFromList,
-}
-
 /**
  * @class
  *
@@ -250,18 +250,6 @@ class UDExSearchableListBase extends UI5Element {
     this.fireSelectionChange(dropdownItemId);
   }
 
-  onFilterSelectAllHeaderPress(e:CustomEvent) {
-    const dropdownHeaderItemId = this.getDataTokenId(e);
-    this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === dropdownHeaderItemId) {
-        this.activateHeaderAndSetAllItems(item as UDExListGroupHeaderBase);
-      }
-    });
-
-    this.syncFilteredItems();
-    this.fireSelectionChange(dropdownHeaderItemId);
-  }
-
   activateHeaderAndSetAllItems(item: UDExListGroupHeaderBase) {
     item.activateHeader();
     item.setAllItems(false);
@@ -298,28 +286,29 @@ class UDExSearchableListBase extends UI5Element {
 
   handleGroupHeaderState(groupHeader: UDExListGroupHeaderBase) {
     if (this.modeMultiSelect) {
-      if (groupHeader.isFilterMenuSelectAllHeader) {
-        groupHeader.deactivateHeader();
-
-        if (groupHeader.isAllDeselected()) {
-          groupHeader.activateHeader();
-        }
-      } else {
-        groupHeader.handleHeaderState();
-      }
+      groupHeader.handleHeaderState();
     }
   }
 
   onHeaderPress(e:CustomEvent) {
-    const dropdownHeaderItemId = this.getDataTokenId(e);
+    this.handleGroupHeaderSelection(e);
+    this.syncFilteredItems();
+    this.fireSelectionChange(this.getDataTokenId(e));
+  }
+
+  onSelectAllHeaderPress(e:CustomEvent) {
+    this.handleGroupHeaderSelection(e);
+    this.syncFilteredItems();
+    this.fireDecoratorEvent("select-all");
+  }
+
+  handleGroupHeaderSelection(e: CustomEvent): void {
+    const headerItemId = this.getDataTokenId(e);
     this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === dropdownHeaderItemId) {
+      if (item._id === headerItemId) {
         (item as UDExListGroupHeaderBase).handleSelectionGroupState();
       }
     });
-
-    this.syncFilteredItems();
-    this.fireSelectionChange(dropdownHeaderItemId);
   }
 
   onSearch(e:CustomEvent) {
@@ -655,3 +644,6 @@ class UDExSearchableListBase extends UI5Element {
 }
 
 export default UDExSearchableListBase;
+export type {
+  UDExSelectBoxIconClickEventDetail, UDExSearchableListBaseSubmitSearchEventDetail, UDExSearchableListBaseChangeSearchEventDetail, UDExSearchableListBaseSelectionChangeEventDetail,
+};

package/src/SecondaryNavigation.ts

@@ -525,3 +525,4 @@ class UDExSecondaryNavigation extends UI5Element {
 UDExSecondaryNavigation.define();
 
 export default UDExSecondaryNavigation;
+export type { UDExSecondaryNavigationClickEventDetail, UDExSecondaryNavigationHeadingClickEventDetail };

package/src/SecondaryNavigationItem.ts

@@ -5,15 +5,7 @@ import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import {
-  isLeft,
-  isRight,
-  isUp,
-  isDown,
-  isEscape,
-  isSpace,
-  isEnter,
-  isHome,
-  isEnd, isTabNext, isTabPrevious,
+  isLeft, isRight, isUp, isDown, isEscape, isSpace, isEnter, isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { RelativeValue } from "./utils/parseRelativeUnits.js";
 import parseRelativeUnits from "./utils/parseRelativeUnits.js";
@@ -29,13 +21,13 @@ import SecondaryNavigationItemCss from "./generated/themes/SecondaryNavigationIt
 
 export const menuItemRole: string = "menuitem";
 
-export type UDExSecondaryNavigationItemClickEventDetail = {
+type UDExSecondaryNavigationItemClickEventDetail = {
   item: HTMLElement,
   index: number,
   originalEvent: PointerEvent | KeyboardEvent
 };
 
-export type UDExSecondaryNavigationItemSubItemClickEventDetail = {
+type UDExSecondaryNavigationItemSubItemClickEventDetail = {
   item: NavItem,
   index: number,
   originalEvent: PointerEvent
@@ -507,3 +499,4 @@ class UDExSecondaryNavigationItem extends UDExSecondaryNavigationItemBase {
 UDExSecondaryNavigationItem.define();
 
 export default UDExSecondaryNavigationItem;
+export type { UDExSecondaryNavigationItemClickEventDetail, UDExSecondaryNavigationItemSubItemClickEventDetail };

package/src/SecondaryNavigationItemBase.ts

@@ -29,7 +29,6 @@ export type NavItem = {
  * @extends UI5Element
  * @public
  */
-
 @customElement({
   renderer: litRender,
 })

package/src/SecondaryNavigationSubItem.ts

@@ -15,12 +15,12 @@ import SecondaryNavigationSubItemTemplate from "./generated/templates/SecondaryN
 // Styles
 import SecondaryNavigationSubItemCss from "./generated/themes/SecondaryNavigationSubItem.css.js";
 
-export type UDExSecondaryNavigationSubItemClickEventDetail = {
+type UDExSecondaryNavigationSubItemClickEventDetail = {
   item: UDExSecondaryNavigationSubItem,
   originalEvent: PointerEvent
 }
 
-export type UDExSecondaryNavigationSubItemBackClickEventDetail = {
+type UDExSecondaryNavigationSubItemBackClickEventDetail = {
   originalEvent: PointerEvent
 }
 
@@ -124,3 +124,4 @@ class UDExSecondaryNavigationSubItem extends UDExSecondaryNavigationItemBase {
 UDExSecondaryNavigationSubItem.define();
 
 export default UDExSecondaryNavigationSubItem;
+export type { UDExSecondaryNavigationSubItemClickEventDetail, UDExSecondaryNavigationSubItemBackClickEventDetail };

package/src/SelectBox.ts

@@ -4,18 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
-  isEnter,
-  isSpace,
-  isDelete,
-  isTabPrevious,
-  isTabNext,
-  isLeft,
-  isRight,
-  isDown,
-  isUp,
-  isEscape,
-  isBackSpace,
-  isShift,
+  isEnter, isSpace, isDelete, isTabPrevious, isTabNext, isLeft, isRight, isDown, isUp, isEscape, isBackSpace, isShift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
@@ -337,8 +326,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleSelectAll(e:CustomEvent) {
-    this.onHeaderPress(e);
-    this.fireDecoratorEvent("select-all");
+    this.onSelectAllHeaderPress(e);
   }
 
   handleHeaderPress(e:CustomEvent) {
@@ -649,6 +637,14 @@ class UDExSelectBox extends UDExSearchableListBase {
     this._tags.forEach((tag, i) => { this.getTagContent(tag).tabIndex = (i === 0 && !this.isDisabled) ? this._activeTabIndex : this._inactiveTabIndex; });
   }
 
+  /**
+   * Close the dropdown.
+   * @public
+   */
+  close(): void {
+    this.closeDropdown();
+  }
+
   get allowTargetOverlap(): boolean {
     return !this.disableTargetOverlap;
   }
@@ -754,3 +750,4 @@ class UDExSelectBox extends UDExSearchableListBase {
 UDExSelectBox.define();
 
 export default UDExSelectBox;
+export type { UDExSelectBoxRemoveEventDetail };

package/src/SelectBoxGroupHeader.ts

@@ -24,7 +24,6 @@ import UDExSelectBoxItem from "./SelectBoxItem.js";
  * @tagname udex-select-box-group-header
  * @public
  */
-
 @customElement({
   tag: "udex-select-box-group-header",
   renderer: litRender,

package/src/SideNavigationMobile.ts

@@ -17,7 +17,7 @@ import type UDExSideNavigationGroup from "./SideNavigationGroup.js";
 import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css.js";
 import SideNavigationMobileDropdownCss from "./generated/themes/SideNavigationMobileDropdown.css.js";
 
-type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
+export type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
 
 /**
  * @class

package/src/SocialMediaButton.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import SocialMediaButtonTemplate from "./SocialMediaButtonTemplate.js";
 import UDExSocialMediaButtonType from "./types/SocialMediaButtonType.js";
@@ -52,6 +53,15 @@ class UDExSocialMediaButton extends UI5Element {
     "click": LinkClickEventDetail,
   };
 
+  /**
+   * Defines the slot for custom SVG icon.
+   *
+   * @slot content
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    image!: Array<HTMLElement>;
+
   /**
    * Defines the type of Social Media Button.
    * <br><br>
@@ -111,7 +121,9 @@ class UDExSocialMediaButton extends UI5Element {
   }
 
   onAfterRendering(): void {
-    this.fetchIconSvg();
+    if (!this.imageSlot) {
+      this.fetchIconSvg();
+    }
   }
 
   async fetchIconSvg() {
@@ -145,6 +157,10 @@ class UDExSocialMediaButton extends UI5Element {
   get buttonAccessibleName(): string {
     return this.accessibleName || UDExSocialMediaButton.i18nBundle.getText(SOCIAL_MEDIA_BUTTON);
   }
+
+  get imageSlot(): boolean {
+    return !!this.image.length;
+  }
 }
 
 UDExSocialMediaButton.define();

package/src/SocialMediaButtonTemplate.tsx

@@ -10,7 +10,9 @@ export default function SocialMediaButtonTemplate(this: UDExSocialMediaButton) {
         target={this.target}
         accessible-name={this.buttonAccessibleName}
         onClick={this.fireLinkClickEvent}>
-        <div class={`udex-social-media-button udex-social-media-button-${this.type}`} title={this.buttonAccessibleName}></div>
+        <div class={`udex-social-media-button udex-social-media-button-${this.type}`} title={this.buttonAccessibleName}>
+          {this.imageSlot && <slot></slot>}
+        </div>
         <div class="hidden">{this.buttonAccessibleName}</div>
       </UDExLink>
     </div>

package/src/StepInput.ts

@@ -7,18 +7,7 @@ import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import "@ui5/webcomponents-icons/dist/less.js";
 import "@ui5/webcomponents-icons/dist/add.js";
 import {
-  isDown,
-  isDownCtrl,
-  isDownShift,
-  isDownShiftCtrl,
-  isEnter,
-  isEscape,
-  isPageDownShift,
-  isPageUpShift,
-  isUp,
-  isUpCtrl,
-  isUpShift,
-  isUpShiftCtrl,
+  isDown, isDownCtrl, isDownShift, isDownShiftCtrl, isEnter, isEscape, isPageDownShift, isPageUpShift, isUp, isUpCtrl, isUpShift, isUpShiftCtrl,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getAllAccessibleNameRefTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -38,11 +27,11 @@ const ACCELERATION = 0.8;
 const MIN_WAIT_TIMEOUT = 50; // milliseconds
 const INITIAL_SPEED = 120; // milliseconds
 
-export type UDExStepInputValueChangeEventDetail = {
+type UDExStepInputValueChangeEventDetail = {
   value: number,
 }
 
-export type UDExStepInputValueStateChangeEventDetail = {
+type UDExStepInputValueStateChangeEventDetail = {
   valueState: `${UDExValueState}`,
   valid: boolean
 }
@@ -569,3 +558,4 @@ class UDExStepInput extends UI5Element {
 UDExStepInput.define();
 
 export default UDExStepInput;
+export type { UDExStepInputValueChangeEventDetail, UDExStepInputValueStateChangeEventDetail };

package/src/StepInputTemplate.tsx

@@ -9,7 +9,7 @@ export default function StepInputTemplate(this: UDExStepInput) {
       label={this.label}
       supporting-text={this.supportingText}
       value={this._valuePrecisioned}
-      aria-label={this.accInfo.ariaLabel}
+      accessible-name={this.accInfo.ariaLabel}
       onFocusIn={this._onInputFocusIn}
       onFocusOut={this._onInputFocusOut}
       onKeydown={this._onkeydown}

package/src/Switch.ts

@@ -41,7 +41,6 @@ export enum UDExSwitchColor {
  * @tagname udex-switch
  * @public
  */
-
 @customElement({
   tag: "udex-switch",
   renderer: litRender,

package/src/Tab.ts

@@ -17,7 +17,7 @@ import { ATTENTION_BADGE } from "./generated/i18n/i18n-defaults.js";
 // Styles
 import TabInOverflowCss from "./generated/themes/TabInOverflow.css.js";
 
-interface ITab extends UI5Element {
+export interface ITab extends UI5Element {
   getTabInHeaderDomRef: () => ITab | null;
   disabled?: boolean;
   icon?: string;
@@ -286,4 +286,3 @@ UDExTab.define();
 TabNavigation.registerStaticAreaTabStyles(TabInOverflowCss);
 
 export default UDExTab;
-export { ITab };

package/src/TabNavigation.ts

@@ -10,17 +10,7 @@ import Popover from "@ui5/webcomponents/dist/Popover.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import {
-  isUp,
-  isDown,
-  isRight,
-  isLeft,
-  isEnter,
-  isSpace,
-  isEscape,
-  isHome,
-  isEnd,
-  isTabNext,
-  isTabPrevious,
+  isUp, isDown, isRight, isLeft, isEnter, isSpace, isEscape, isHome, isEnd, isTabNext, isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { ITab } from "./Tab.js";
 import type Tab from "./Tab.js";
@@ -51,12 +41,12 @@ export enum Mode {
 }
 
 type UDExTabNavigationClickDetail = {
-  currentPage: number,
+  currentPage: number
 }
 
 type UDExTabContainerTabSelectEventDetail = {
-  tab: Tab;
-  tabIndex: number;
+  tab: Tab,
+  tabIndex: number
 }
 
 /**
@@ -851,3 +841,4 @@ class UDExTabNavigation extends UI5Element {
 UDExTabNavigation.define();
 
 export default UDExTabNavigation;
+export type { UDExTabNavigationClickDetail, UDExTabContainerTabSelectEventDetail };

package/src/Table.ts

@@ -21,9 +21,9 @@ import TableTemplate from "./generated/templates/TableTemplate.lit.js";
 import TableCss from "./generated/themes/Table.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 
-type TableBaseRow = UDExTableHeaderRow | UDExTableRow;
+export type TableBaseRow = UDExTableHeaderRow | UDExTableRow;
 
-type KeyBoardItem = {
+export type KeyBoardItem = {
   id: string;
   group?: boolean;
   elements: Array<HTMLElement>;

package/src/TableCellBase.ts

@@ -17,7 +17,6 @@ import TableCellBaseCss from "./generated/themes/TableCellBase.css.js";
  * @extends UI5Element
  * @public
  */
-
 @customElement({
   renderer: litRender,
   styles: TableCellBaseCss,

package/src/TableRowBase.ts

@@ -17,7 +17,6 @@ import TableRowBase from "./generated/themes/TableRowBase.css.js";
  * @extends UI5Element
  * @public
  */
-
 @customElement({
   renderer: litRender,
   styles: TableRowBase,

package/src/Tag.ts

@@ -329,3 +329,4 @@ class UDExTag extends UI5Element {
 UDExTag.define();
 
 export default UDExTag;
+export type { UDExTagLinkClickEventDetail };

package/src/TagGroup.ts

@@ -236,3 +236,4 @@ class UDExTagGroup extends UI5Element {
 UDExTagGroup.define();
 
 export default UDExTagGroup;
+export type { UDExTagClickEventDetail, UDExTagKeydownEventDetail, UDExTagIconClickEventDetail };

package/src/TextField.ts

@@ -33,7 +33,7 @@ export type AccInfo = {
   ariaHasPopup?: string,
 }
 
-export type UDExTextFieldKeydownEventDetail = {
+type UDExTextFieldKeydownEventDetail = {
   keyboardEvent: KeyboardEvent;
 }
 
@@ -490,3 +490,4 @@ class UDExTextField extends UI5Element {
 UDExTextField.define();
 
 export default UDExTextField;
+export type { UDExTextFieldKeydownEventDetail };

package/src/Tile.ts

@@ -12,11 +12,12 @@ import TileTemplate from "./TileTemplate.js";
 // Styles
 import TileCss from "./generated/themes/Tile.css.js";
 
-type AnchorNode = HTMLAnchorElement | undefined | null;
+export type AnchorNode = HTMLAnchorElement | undefined | null;
 
 type UDExTileClickEventDetail = {
   originalEvent: MouseEvent,
 }
+
 /**
  * @class
  *
@@ -140,3 +141,4 @@ class UDExTile extends UI5Element {
 UDExTile.define();
 
 export default UDExTile;
+export type { UDExTileClickEventDetail };

package/src/Tooltip.hbs

@@ -10,7 +10,11 @@
   accessible-name-ref="{{accessibleNameRef}}"
   accessible-role="{{accessibleRole}}"
   ?prevent-initial-focus="{{preventInitialFocus}}"
-  ?prevent-focus-restore="{{preventFocusRestore}}">
+  ?prevent-focus-restore="{{preventFocusRestore}}"
+  @ui5-open="{{handleOpen}}"
+  @ui5-close="{{handleClose}}"
+  @ui5-before-close="{{handleBeforeClose}}"
+  @ui5-before-open="{{handleBeforeOpen}}">
   {{#if title}}
     <div class="udex-tooltip-title">{{title}}</div>
   {{/if}}