@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/lib/components/pagination/Pagination.d.ts

@@ -0,0 +1,16 @@
+import { ClassNameProps } from "../../helper/types";
+import "./Pagination.scss";
+export declare enum PaginationType {
+    Simple = "SIMPLE",
+    Numeric = "NUMERIC",
+    Dots = "DOTS"
+}
+export interface PaginationProps extends ClassNameProps {
+    type?: PaginationType;
+    onChange?: (page: number) => void;
+    pageCurrent?: number;
+    defaultPageCurrent?: number;
+    pageMax: number;
+}
+declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/lib/components/pagination/Pagination.js

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export let PaginationType = /*#__PURE__*/function (PaginationType) {
+  PaginationType["Simple"] = "SIMPLE";
+  PaginationType["Numeric"] = "NUMERIC";
+  PaginationType["Dots"] = "DOTS";
+  return PaginationType;
+}({});
+function Pagination(props) {
+  const {
+    pageMax,
+    onChange,
+    pageCurrent,
+    defaultPageCurrent = 1,
+    type = PaginationType.Numeric,
+    className
+  } = props;
+  const controlled = pageCurrent !== undefined;
+  const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
+  const dotArray = Array.from(new Array(pageMax).keys());
+  useEffect(() => {
+    if (controlled) {
+      setInnerPageCurrent(pageCurrent);
+    }
+  }, [pageCurrent, controlled]);
+  function handleChange(newPage) {
+    if (!controlled) {
+      setInnerPageCurrent(newPage);
+    }
+    if (onChange) {
+      onChange(newPage);
+    }
+  }
+  function onBtnDown() {
+    if (innerPageCurrent > 1) {
+      const newPageCurrent = innerPageCurrent - 1;
+      handleChange(newPageCurrent);
+    }
+  }
+  function onBtnUp() {
+    if (innerPageCurrent < pageMax) {
+      const newPageCurrent = innerPageCurrent + 1;
+      handleChange(newPageCurrent);
+    }
+  }
+  function onDotClick(index) {
+    const newPageCurrent = index + 1;
+    handleChange(newPageCurrent);
+  }
+  function handleKeyPress(event, index) {
+    if (event.key === "Enter" || event.key === " ") {
+      onDotClick(index);
+    }
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [type !== PaginationType.Dots && /*#__PURE__*/_jsxs("div", {
+      className: classNames("fwe-pagination fwe-p-m", {
+        "fwe-d-none": pageMax < 2
+      }, className),
+      children: [/*#__PURE__*/_jsx("button", {
+        className: classNames("fwe-navigate-btn-down", {
+          "fwe-disabled": innerPageCurrent <= 1
+        }),
+        onClick: onBtnDown,
+        type: "button",
+        "aria-label": "navigate-btn-down"
+      }), type === PaginationType.Numeric && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "fwe-page-current",
+          children: innerPageCurrent
+        }), /*#__PURE__*/_jsx("span", {
+          className: "fwe-page-max",
+          children: pageMax
+        })]
+      }), /*#__PURE__*/_jsx("button", {
+        className: classNames("fwe-navigate-btn-up", {
+          "fwe-disabled": innerPageCurrent >= pageMax,
+          "fwe-ml-4": type === PaginationType.Simple
+        }),
+        onClick: onBtnUp,
+        type: "button",
+        "aria-label": "navigate-btn-up"
+      })]
+    }), type === PaginationType.Dots && /*#__PURE__*/_jsx("div", {
+      className: classNames("fwe-p-m", {
+        "fwe-d-none": pageMax < 2
+      }, className),
+      children: /*#__PURE__*/_jsx("div", {
+        className: "fwe-pagination",
+        children: dotArray.map(index => /*#__PURE__*/_jsx("span", {
+          tabIndex: 0,
+          role: "button",
+          className: classNames("fwe-page-dot", {
+            "fwe-selected": index + 1 === innerPageCurrent
+          }),
+          onClick: () => onDotClick(index),
+          "aria-label": "page-dot",
+          onKeyPress: e => handleKeyPress(e, index)
+        }, index))
+      })
+    })]
+  });
+}
+export default Pagination;

package/lib/components/popovers/legend/Legend.d.ts

@@ -0,0 +1,11 @@
+import { type PopoverProps } from "../popover/Popover";
+import "./Legend.scss";
+interface PopoverLegendItem {
+    name: string;
+    text: string;
+}
+export interface LegendProps extends Omit<PopoverProps, "popoverContent"> {
+    items: PopoverLegendItem[];
+}
+declare function Legend({ items, ...props }: Readonly<LegendProps>): import("react/jsx-runtime").JSX.Element;
+export default Legend;

package/lib/components/popovers/legend/Legend.js

@@ -0,0 +1,24 @@
+import Popover from "../popover/Popover.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function Legend(_ref) {
+  let {
+    items,
+    ...props
+  } = _ref;
+  const content = items.length > 0 ? /*#__PURE__*/_jsx("dl", {
+    className: "fr-legend",
+    children: items.map(item => /*#__PURE__*/_jsxs("div", {
+      className: "fr-legend-content",
+      children: [/*#__PURE__*/_jsx("dt", {
+        children: item.name
+      }), /*#__PURE__*/_jsx("dt", {
+        children: item.text
+      })]
+    }, item.name))
+  }) : null;
+  return /*#__PURE__*/_jsx(Popover, {
+    popoverContent: content,
+    ...props
+  });
+}
+export default Legend;

package/{dist → lib}/components/popovers/popover/Popover.d.ts

@@ -1,7 +1,7 @@
-import type { Placement } from '@popperjs/core';
-import type React from 'react';
-import type { ClassNamePropsWithChildren } from '../../../utils/types';
-import './Popover.scss';
+import React from "react";
+import { Placement } from "@popperjs/core";
+import { ClassNamePropsWithChildren } from "../../../helper/types";
+import "./Popover.scss";
 export interface PopoverProps extends ClassNamePropsWithChildren {
     popoverContent: React.ReactNode;
     position?: Placement;
@@ -17,4 +17,5 @@ export interface PopoverProps extends ClassNamePropsWithChildren {
     arrow?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
-export declare function Popover({ popoverContent, children, position, fallbackPositions, openOnHover, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function Popover({ popoverContent, children, position, fallbackPositions, openOnHover, defaultOpen, open, onStatusChange, wrapper, className, flip, containerClassName, stopPropagation, arrow, onClick, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export default Popover;

package/lib/components/popovers/popover/Popover.js

@@ -0,0 +1,123 @@
+import React, { useRef, useState } from "react";
+import { usePopper } from "react-popper";
+import classNames from "classnames";
+import useOnClickOutside from "../../../helper/useOnClickOutside.js";
+import useForkRef from "../../../helper/useForkRef.js";
+import useControlled from "../../../helper/useControlled.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function Popover(_ref) {
+  let {
+    popoverContent,
+    children,
+    position,
+    fallbackPositions,
+    openOnHover = false,
+    defaultOpen = false,
+    open,
+    onStatusChange,
+    wrapper,
+    className,
+    flip = true,
+    containerClassName,
+    stopPropagation,
+    arrow = true,
+    onClick
+  } = _ref;
+  const [showPopper, setShowPopper] = useControlled({
+    controlled: open,
+    default: defaultOpen
+  });
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const referenceElement = useRef(null);
+  const popperElRef = useRef(null);
+  const combinedRef = useForkRef(popperElRef, setPopperElement);
+  const classes = classNames(className);
+  const {
+    styles,
+    attributes
+  } = usePopper(referenceElement.current, popperElement, {
+    placement: position,
+    modifiers: [{
+      name: "arrow",
+      options: {
+        element: arrowElement
+      }
+    }, {
+      name: "offset",
+      options: {
+        offset: [0, 24]
+      }
+    }, {
+      name: "flip",
+      options: {
+        fallbackPlacements: flip ? fallbackPositions : [position || "auto"]
+      }
+    }]
+  });
+  const handleChange = (e, status) => {
+    if (stopPropagation) {
+      e?.stopPropagation();
+      e?.preventDefault();
+    }
+    setShowPopper(status);
+    onStatusChange?.(status);
+  };
+  function closePopover(event) {
+    handleChange(event, false);
+  }
+  useOnClickOutside(popperElRef, closePopover, referenceElement);
+  function handleKeyDown(event) {
+    if (event.key === "Enter") {
+      handleChange(undefined, true);
+    }
+    if (event.key === "Escape") {
+      handleChange(undefined, false);
+    }
+  }
+  function handleKeyUp(event) {
+    if (event.key === " ") {
+      handleChange(undefined, true);
+    }
+  }
+  function handleTriggerClick(event) {
+    onClick?.(event);
+    if (event.defaultPrevented) {
+      setShowPopper(!showPopper);
+    } else {
+      handleChange(event, !showPopper);
+    }
+  }
+  const childrenWrapper =
+  /*#__PURE__*/
+  // biome-ignore lint/a11y/useSemanticElements: since a button in button is wrong, we need a div with click handler here. 
+  _jsx("div", {
+    tabIndex: 0,
+    role: "button",
+    className: classes,
+    ref: referenceElement,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    onClick: handleTriggerClick,
+    onMouseEnter: openOnHover ? e => handleChange(e, true) : undefined,
+    onMouseLeave: openOnHover ? e => handleChange(e, false) : undefined,
+    children: children
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [wrapper ? wrapper(childrenWrapper) : childrenWrapper, showPopper && /*#__PURE__*/_jsxs("div", {
+      className: classNames("fwe-popover-container", containerClassName),
+      ref: combinedRef,
+      style: styles.popper,
+      ...attributes.popper,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "fwe-popover",
+        children: popoverContent
+      }), arrow && /*#__PURE__*/_jsx("div", {
+        ref: setArrowElement,
+        style: styles.arrow,
+        id: "arrow"
+      })]
+    })]
+  });
+}
+export default Popover;

package/lib/components/popovers/popover-menu/PopoverMenu.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import { type PopoverProps } from "../popover/Popover";
+import "./PopoverMenu.scss";
+import { PopoverMenuItemProps } from "../popover-menu-item/PopoverMenuItem";
+export interface PopoverMenuProps extends Omit<PopoverProps, "popoverContent" | "open" | "onStatusChange"> {
+    menu: PopoverMenuItemProps[] | ReactNode[];
+}
+declare function PopoverMenu({ menu, ...props }: Readonly<PopoverMenuProps>): import("react/jsx-runtime").JSX.Element;
+export default PopoverMenu;

package/lib/components/popovers/popover-menu/PopoverMenu.js

@@ -0,0 +1,46 @@
+import { useMemo, useState } from "react";
+import classNames from "classnames";
+import Popover from "../popover/Popover.js";
+import PopoverMenuItem from "../popover-menu-item/PopoverMenuItem.js";
+import PopoverMenuContext from "./PopoverMenuContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function PopoverMenu(_ref) {
+  let {
+    menu,
+    ...props
+  } = _ref;
+  const [showPopper, setShowPopper] = useState(false);
+  const isPopoverMenuItemPropsArray = items => Array.isArray(items) && items.length > 0 && "text" in items[0];
+  let content = null;
+  if (isPopoverMenuItemPropsArray(menu)) {
+    // menu is PopoverMenuItemProps[]
+    content = menu.map(item => /*#__PURE__*/_jsx(PopoverMenuItem, {
+      item: item
+    }, item.text));
+  } else {
+    // menu is ReactNode
+    content = menu;
+  }
+  const popoverMenuContext = useMemo(() => ({
+    setShowPopper
+  }), []);
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames("fwe-popover-menu", props.className),
+    children: /*#__PURE__*/_jsx(PopoverMenuContext.Provider, {
+      value: popoverMenuContext,
+      children: /*#__PURE__*/_jsx(Popover, {
+        popoverContent: content,
+        position: "right",
+        open: showPopper,
+        onStatusChange: setShowPopper,
+        ...props,
+        children: /*#__PURE__*/_jsx("div", {
+          "data-testid": "fwe-popover-menu-button",
+          className: "fwe-popover-menu-button",
+          children: props.children
+        })
+      })
+    })
+  });
+}
+export default PopoverMenu;

package/lib/components/popovers/popover-menu/PopoverMenuContext.d.ts

@@ -0,0 +1,4 @@
+declare const PopoverMenuContext: import("react").Context<{
+    setShowPopper: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export default PopoverMenuContext;

package/lib/components/popovers/popover-menu/PopoverMenuContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const PopoverMenuContext = /*#__PURE__*/createContext({
+  setShowPopper: () => {}
+});
+export default PopoverMenuContext;

package/{dist → lib}/components/popovers/popover-menu-item/PopoverMenuItem.d.ts

@@ -1,10 +1,11 @@
-import './PopoverMenuItem.scss';
+import "./PopoverMenuItem.scss";
 export interface PopoverMenuItemProps {
     text: string;
     icon: React.ReactNode;
     action?: (data: unknown) => void;
     data?: unknown;
 }
-export declare function PopoverMenuItem({ item, }: Readonly<{
+declare function PopoverMenuItem({ item }: Readonly<{
     item: PopoverMenuItemProps;
 }>): import("react/jsx-runtime").JSX.Element | null;
+export default PopoverMenuItem;

package/lib/components/popovers/popover-menu-item/PopoverMenuItem.js

@@ -0,0 +1,41 @@
+import { useContext } from "react";
+import IconWrapper from "../../icon-wrapper/IconWrapper.js";
+import PopoverMenuContext from "../popover-menu/PopoverMenuContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function PopoverMenuItem(_ref) {
+  let {
+    item
+  } = _ref;
+  // get context to close the popover menu
+  const {
+    setShowPopper
+  } = useContext(PopoverMenuContext);
+  function handleClick(e) {
+    // prevent event propagation
+    e?.stopPropagation();
+    e?.preventDefault();
+
+    // close the popover menu
+    if (setShowPopper) {
+      setShowPopper(false);
+    }
+    if (item.action) {
+      item.action(item.data);
+    }
+  }
+  if (!item) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    className: "fwe-btn-unstyled fr-popover-item",
+    onClick: e => handleClick(e),
+    children: [/*#__PURE__*/_jsx(IconWrapper, {
+      icon: item.icon
+    }), /*#__PURE__*/_jsx("span", {
+      className: "fwe-mr-xxs",
+      children: item.text
+    })]
+  });
+}
+export default PopoverMenuItem;

package/lib/components/popovers/tooltip/Tooltip.d.ts

@@ -0,0 +1,6 @@
+import type { PopoverProps } from "../popover/Popover";
+export interface TooltipProps extends Omit<PopoverProps, "popoverContent" | "openOnHover"> {
+    title: React.ReactNode;
+}
+declare function Tooltip({ title, ...props }: Readonly<TooltipProps>): import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/lib/components/popovers/tooltip/Tooltip.js

@@ -0,0 +1,16 @@
+import Popover from "../popover/Popover.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Tooltip(_ref) {
+  let {
+    title,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Popover, {
+    position: "bottom",
+    popoverContent: title,
+    openOnHover: true,
+    ...props,
+    children: props.children
+  });
+}
+export default Tooltip;

package/lib/components/progress/Progress.d.ts

@@ -0,0 +1,8 @@
+import { ClassNameProps } from "../../helper/types";
+interface ProgressProps extends ClassNameProps {
+    progress: number;
+    background?: "white" | "black" | "background";
+    error?: boolean;
+}
+declare function Progress({ background, error, progress, className }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export default Progress;

package/lib/components/progress/Progress.js

@@ -0,0 +1,32 @@
+import classNames from "classnames";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Progress(_ref) {
+  let {
+    background = "white",
+    error = false,
+    progress,
+    className
+  } = _ref;
+  const classes = classNames("fwe-progress-bar", {
+    "fwe-bg-red": error
+  }, {
+    "fwe-progress-bar-black": background === "black"
+  }, {
+    "fwe-progress-bar-background": background === "background"
+  });
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames("fwe-progress", className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes,
+      role: "progressbar",
+      style: {
+        width: `${progress}%`
+      },
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": "progressbar"
+    })
+  });
+}
+export default Progress;

package/lib/components/scroll-area/ScrollArea.d.ts

@@ -0,0 +1,5 @@
+interface ScrollAreaProps extends React.ComponentPropsWithoutRef<"div"> {
+    scrollbarMinSize?: number;
+}
+export default function ScrollArea({ children, scrollbarMinSize, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/scroll-area/ScrollArea.js

@@ -0,0 +1,14 @@
+import SimpleBar from "simplebar-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ScrollArea(_ref) {
+  let {
+    children,
+    scrollbarMinSize = 25,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(SimpleBar, {
+    ...props,
+    scrollbarMinSize: scrollbarMinSize,
+    children: children
+  });
+}

package/lib/components/search-input/ClearButton.d.ts

@@ -0,0 +1,2 @@
+import { ComponentPropsWithoutRef } from "react";
+export default function ClearButton(props: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;

package/lib/components/search-input/ClearButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ClearButton(props) {
+  return /*#__PURE__*/_jsx("div", {
+    role: "button",
+    tabIndex: -1,
+    className: "fwe-clear-icon",
+    "aria-label": "Clear",
+    ...props
+  });
+}

package/lib/components/search-input/SearchInput.d.ts

@@ -0,0 +1,15 @@
+import "./SearchInput.scss";
+import SearchSuggestion from "./SearchSuggestion";
+export interface SearchInputProps {
+    disabled?: boolean;
+    label?: string;
+    defaultValue?: string;
+    value?: string;
+    suggestions?: SearchSuggestion[];
+    onChange?: (value: string) => void;
+    onKeyboardNavigate?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    className?: string;
+}
+declare function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export default SearchInput;

package/lib/components/search-input/SearchInput.js

@@ -0,0 +1,77 @@
+import { useRef } from "react";
+import classNames from "classnames";
+import useSearchInput from "./useSearchInput.js";
+import useOnClickOutside from "../../helper/useOnClickOutside.js";
+import ClearButton from "./ClearButton.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function SearchInput(_ref) {
+  let {
+    defaultValue,
+    disabled,
+    label,
+    value,
+    suggestions,
+    onChange,
+    onSearch,
+    onKeyboardNavigate,
+    className
+  } = _ref;
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
+  const {
+    handleFocus,
+    handleInput,
+    handleClearQuery,
+    handleSuggestionClick,
+    handleOutsideClick,
+    handleKeyDown,
+    hideSuggestionList,
+    selectedSuggestionIndex,
+    innerValue
+  } = useSearchInput(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
+  useOnClickOutside(containerRef, handleOutsideClick);
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames("fwe-search-input", className),
+    ref: containerRef,
+    children: [/*#__PURE__*/_jsx("input", {
+      ref: inputRef,
+      disabled: disabled,
+      placeholder: label,
+      onFocus: handleFocus,
+      type: "search",
+      "aria-label": "Search",
+      onInput: handleInput,
+      onKeyDown: handleKeyDown,
+      value: innerValue
+    }), /*#__PURE__*/_jsx("div", {
+      className: "fwe-search-icon"
+    }), /*#__PURE__*/_jsx(ClearButton, {
+      onClick: handleClearQuery
+    }), Boolean(suggestions?.length) && !hideSuggestionList && /*#__PURE__*/_jsxs("div", {
+      className: "fwe-search-suggestions",
+      children: [cappedSuggestions.map((suggestion, i) =>
+      /*#__PURE__*/
+      // key event is handled via parent
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      _jsx("div", {
+        role: "option",
+        tabIndex: -1,
+        "aria-label": suggestion.value,
+        "aria-selected": selectedSuggestionIndex === i,
+        onClick: () => handleSuggestionClick(suggestion),
+        className: `fwe-search-suggestion ${selectedSuggestionIndex === i ? "fwe-selected" : ""}`,
+        children: /*#__PURE__*/_jsx("div", {
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML: {
+            __html: suggestion.template
+          }
+        })
+      }, suggestion.value)), suggestions && suggestions.length > 10 && /*#__PURE__*/_jsx("div", {
+        className: "fwe-ml-xxs",
+        children: "..."
+      })]
+    })]
+  });
+}
+export default SearchInput;

package/{dist → lib}/components/search-input/SearchSuggestion.d.ts

@@ -1,4 +1,4 @@
-export declare class SearchSuggestion {
+export default class SearchSuggestion {
     /**
      * a html-string. e.g.: '<b> hello </b>'
      */

package/lib/components/search-input/SearchSuggestion.js

@@ -0,0 +1,32 @@
+export default class SearchSuggestion {
+  /**
+   * a html-string. e.g.: '<b> hello </b>'
+   */
+
+  /**
+   * This Value will be used as new query when the user selects the suggestion.
+   */
+
+  /**
+   * Creates a basic Suggestion from a string. The first query match is highlighted by bold tags.
+   * @param suggestionString The suggested string (should contain the whole query)
+   * @param query The current query. This string will be highlighted.
+   * @returns a html-string.
+   */
+  static basicSuggestion(suggestionString, query) {
+    const i = suggestionString.toLocaleLowerCase().indexOf(query.toLocaleLowerCase());
+    let template = suggestionString;
+    if (i !== -1) {
+      const boldStart = i;
+      const boldEnd = i + query.length;
+      const part1 = suggestionString.substring(0, boldStart);
+      const part2 = suggestionString.substring(boldStart, boldEnd);
+      const part3 = suggestionString.substring(boldEnd, suggestionString.length);
+      template = `${part1}<strong>${part2}</strong>${part3}`;
+    }
+    return {
+      value: suggestionString,
+      template
+    };
+  }
+}