@vodafone_de/brix-components 3.0.1 → 3.0.2

package/dist/components/Stepper/index.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useViewport } from "../../hooks/useViewport/index.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { v as viewport, b as breakpoint_medium_number } from "../../index-Ck2bCrhT.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getFontWeight } from "../../foundations/token/getFontWeight/index.js";
+import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";
+import { g as colorBorderBrand, a as colorBorderNeutral, h as colorBorderInverse } from "../../BorderColor-BummoQ1-.js";
+import { f as fontWeightBold } from "../../FontWeight-CR22KTex.js";
+import { c as colorObjectBrand, a as colorObjectInverse } from "../../ObjectColor-BZDBuV8H.js";
+import { s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const StepperItemStyled = styled.li.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "StepperItemStyled",
+  componentId: "sc-6fjel6-0"
+})(({
+  isActive = false
+}) => {
+  return {
+    fontWeight: isActive ? getFontWeight(fontWeightBold) : void 0,
+    position: "relative",
+    flex: 1,
+    textAlign: "center",
+    textIndent: isActive ? "0px" : "-9999px",
+    ...viewport.md({
+      textIndent: "0px"
+    })
+  };
+}, ({
+  next
+}) => ({
+  // using :before to create the track between the dots
+  "&::before": {
+    ...forcedColors({
+      background: "CanvasText"
+    }),
+    position: "absolute",
+    display: "block",
+    background: getBorderColor(next ? colorBorderBrand : colorBorderNeutral),
+    content: "''",
+    width: "100%",
+    height: next ? "2px" : "1px",
+    top: "-17px",
+    ...viewport.md({
+      top: "-20px"
+    }),
+    left: "-50%",
+    //move track behind dots
+    zIndex: 1
+  },
+  /* hide the first one,  because there is always one less gap in the fence than slats */
+  "&:first-child::before": {
+    display: "none"
+  }
+}), ({
+  isActive,
+  next
+}) => {
+  const boxShadow = {};
+  if (isActive) {
+    boxShadow.boxShadow = `0px 0px 0px 2px ${getBorderColor(colorBorderInverse)}, 0px 0px 0px 4px ${getBorderColor(colorBorderBrand)}`;
+  }
+  return {
+    // using :after to create the dots on the track
+    "&::after": {
+      ...forcedColors({
+        background: next ? "CanvasText" : "Canvas",
+        borderWidth: isActive ? "2px" : "1px",
+        borderColor: isActive ? "Canvas" : getBorderColor(next ? colorBorderBrand : colorBorderNeutral),
+        outline: isActive ? "2px solid CanvasText" : "none"
+      }),
+      position: "absolute",
+      display: "block",
+      background: getObjectColor(next ? colorObjectBrand : colorObjectInverse),
+      content: "''",
+      width: "14px",
+      height: "14px",
+      ...viewport.md({
+        width: "18px",
+        height: "18px"
+      }),
+      borderRadius: "20px",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: getBorderColor(next ? colorBorderBrand : colorBorderNeutral),
+      top: "-24px",
+      ...viewport.md({
+        top: "-28px"
+      }),
+      left: "0",
+      right: 0,
+      margin: "auto",
+      ...boxShadow,
+      //move dots before track
+      zIndex: 2
+    }
+  };
+});
+const mobileOnly = (stylesInViewport) => {
+  return {
+    [`@media screen and (max-width: ${breakpoint_medium_number - 1}px)`]: {
+      ...stylesInViewport
+    }
+  };
+};
+const StepperActiveItemStyled = styled.strong.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "StepperActiveItemStyled",
+  componentId: "sc-6fjel6-1"
+})(({
+  offset = 0
+}) => mobileOnly({
+  position: "absolute",
+  width: "max-content",
+  left: `50%`,
+  transform: "translateX(-50%)",
+  textAlign: "center",
+  zIndex: 3,
+  marginLeft: offset ? `${offset}px` : void 0
+}));
+const StepperStyled = styled.ol.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "StepperStyled",
+  componentId: "sc-6fjel6-2"
+})({
+  flexGrow: 1,
+  display: "flex",
+  paddingTop: "28px",
+  ...viewport.md({
+    paddingTop: "32px"
+  }),
+  ...getBodySize(textBodyMd)
+}, mobileOnly({
+  position: "relative"
+}), ({
+  bottomSpacing = spacingMd
+}) => getBottomSpacing({
+  bottomSpacing
+}));
+const getAriaLabel = ({
+  activeStep = 1,
+  steps,
+  ariaLabelTemplate
+}) => {
+  return ariaLabelTemplate.replace("%current%", activeStep.toString()).replace("%total%", steps.length.toString());
+};
+const Stepper = ({
+  activeStep = 1,
+  steps,
+  ariaLabelTemplate,
+  ...props
+}) => {
+  activeStep = Math.min(Math.max(activeStep, 1), steps.length);
+  const [offset, setOffset] = useState(0);
+  const stepperRef = useRef(null);
+  const viewport2 = useViewport();
+  const check = () => {
+    if (null === stepperRef.current || "sm" !== viewport2) {
+      return;
+    }
+    const listItemWidth = stepperRef.current.getElementsByTagName("li")[0].offsetWidth;
+    const activeWidth = stepperRef.current.getElementsByTagName("strong")[0].offsetWidth;
+    if (listItemWidth >= activeWidth) {
+      setOffset(0);
+      return;
+    }
+    const neededSpace = activeWidth / 2;
+    const availableSpaceRight = listItemWidth * (activeStep - 0.5);
+    const wholeSpace = listItemWidth * steps.length;
+    if (neededSpace + availableSpaceRight > wholeSpace) {
+      setOffset(wholeSpace - availableSpaceRight - neededSpace);
+      return;
+    }
+    const availableSpaceLeft = (activeStep - 0.5) * listItemWidth;
+    if (availableSpaceLeft > neededSpace) {
+      setOffset(0);
+      return;
+    }
+    setOffset(neededSpace - availableSpaceLeft);
+  };
+  useEffect(() => {
+    if (!stepperRef.current) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(check);
+    resizeObserver.observe(stepperRef.current.getElementsByTagName("strong")[0]);
+    return () => resizeObserver.disconnect();
+  }, [activeStep]);
+  return /* @__PURE__ */ jsx("div", { role: "region", "aria-label": getAriaLabel({
+    activeStep,
+    steps,
+    ariaLabelTemplate
+  }), children: /* @__PURE__ */ jsx(StepperStyled, { ref: stepperRef, ...props, children: steps.map((step, index) => /* @__PURE__ */ jsx(StepperItemStyled, { isActive: index + 1 === activeStep, next: index < activeStep, children: index + 1 === activeStep ? /* @__PURE__ */ jsx(StepperActiveItemStyled, { offset, "aria-current": "step", children: renderInlineRichTextFromOpenText(step) }) : renderInlineRichTextFromOpenText(step) }, `${step}`)) }) });
+};
+export {
+  Stepper as default
+};

package/dist/components/SuggestInput/index.js

@@ -0,0 +1,387 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconLoader, iconSizeSm } from "@vfde-react/inline-icon-library";
+import { useState, useEffect, forwardRef, useRef, useImperativeHandle } from "react";
+import FlexItem from "../FlexItem/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import FormHelperStatusIcon from "../FormHelperStatusIcon/index.js";
+import { i as inputStateError } from "../../props-Czq9XX2J.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-CDWclYAa.js";
+import { c as spacingSm, a as spacingXs, s as spacingMd } from "../../Spacing-D0HQH9YJ.js";
+import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-CA52y1-B.js";
+import Body from "../Body/index.js";
+import { g as strongTagName } from "../../tags-DI6H1biK.js";
+import styled from "styled-components";
+import Card from "../Card/index.js";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getHoverColor } from "../../foundations/token/getHoverColor/index.js";
+import { getSpacing } from "../../foundations/token/getSpacing/index.js";
+import { c as colorBackgroundNeutral } from "../../BackgroundColor-JObp_2xA.js";
+import { c as colorBorderFocus } from "../../BorderColor-BummoQ1-.js";
+import { t as textBodyMd } from "../../TextBodySize-BcZR9mh2.js";
+import Flex from "../Flex/index.js";
+import LoadingSpinner from "../LoadingSpinner/index.js";
+import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
+import { getOpacity } from "../../foundations/token/getOpacity/index.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { a as opacityDisabled } from "../../Opacity-smkGiwsf.js";
+import { a as colorTextNeutral } from "../../TextColor-BXiR5Uq9.js";
+import { f as filterProps } from "../../filterProps-Cewck8OH.js";
+const calculateListMaxHeight = (numberOfVisibleItems) => {
+  return `calc((${getSpacing(spacingSm)} * 2 + ${getBodySize(textBodyMd).fontSize} * ${getBodySize(textBodyMd).lineHeight}) * ${numberOfVisibleItems})`;
+};
+const SuggestInputListWrapperStyled = styled(Card).withConfig({
+  displayName: "SuggestInputListWrapperStyled",
+  componentId: "sc-5e6nao-0"
+})({
+  ...forcedColors({
+    background: "Field",
+    color: "fieldtext",
+    border: "none"
+  }),
+  position: "absolute",
+  maxHeight: 0,
+  overflow: "hidden",
+  transition: "max-height .2s cubic-bezier(0.445, 0.05, 0.55, 0.95)",
+  zIndex: 1,
+  "&&": {
+    padding: 0,
+    height: "fit-content"
+  }
+}, ({
+  showList
+}) => {
+  if (showList) {
+    return {
+      maxHeight: calculateListMaxHeight(5)
+    };
+  }
+});
+const SuggestInputListStyled = styled.ul.withConfig({
+  displayName: "SuggestInputListStyled",
+  componentId: "sc-5e6nao-1"
+})({
+  display: "flex",
+  flexDirection: "column",
+  overflowY: "auto",
+  maxHeight: calculateListMaxHeight(5)
+});
+const SuggestInputListItemStyled = styled.li.withConfig({
+  displayName: "SuggestInputListItemStyled",
+  componentId: "sc-5e6nao-2"
+})({
+  padding: `${getSpacing(spacingSm)}`,
+  "&:hover": {
+    ...forcedColors({
+      background: "Field"
+    }),
+    background: getHoverColor(colorBackgroundNeutral),
+    cursor: "pointer"
+  },
+  "&:focus-visible": {
+    outline: "none"
+  }
+}, ({
+  isSelected
+}) => {
+  if (isSelected) {
+    return {
+      ...forcedColors({
+        background: "SelectedItem",
+        color: "SelectedItemText"
+      }),
+      boxShadow: `inset 0px 0px 0px 4px ${getBorderColor(colorBorderFocus)} `,
+      background: getHoverColor(colorBackgroundNeutral),
+      outline: "none"
+    };
+  }
+}, getBodySize(textBodyMd));
+const highlightQuery = (label, query) => {
+  const lowerLabel = label.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  const index = lowerLabel.indexOf(lowerQuery);
+  if (query.length > 0 && index !== -1) {
+    const beforeQuery = label.slice(0, index);
+    const afterQuery = label.slice(index + lowerQuery.length);
+    const boldQuery = /* @__PURE__ */ jsx(Body, { tag: strongTagName, children: label.slice(index, index + lowerQuery.length) });
+    return [beforeQuery, boldQuery, afterQuery];
+  }
+  return label;
+};
+const SuggestInputList = ({
+  listItems,
+  showList,
+  filterItems,
+  sortItems,
+  selectedOption,
+  listItemsRef,
+  pickOption,
+  uid,
+  query
+}) => {
+  const [options, setOptions] = useState(listItems);
+  useEffect(() => {
+    setOptions(listItems);
+  }, [listItems]);
+  return /* @__PURE__ */ jsx(SuggestInputListWrapperStyled, { showList, children: /* @__PURE__ */ jsx(SuggestInputListStyled, { role: "listbox", id: "listbox", children: options == null ? void 0 : options.filter((listItem) => filterItems(listItem.label)).sort((a, b) => {
+    return sortItems(query, a.label, b.label);
+  }).map((listItem, index) => {
+    const isSelected = index === selectedOption;
+    return /* @__PURE__ */ jsx(SuggestInputListItemStyled, { ref: (el) => {
+      listItemsRef.current[index] = el;
+    }, onMouseDown: () => pickOption(listItem.label), "aria-selected": isSelected ? "true" : void 0, isSelected, role: "option", id: `${uid}-item-${index}`, children: highlightQuery(listItem.label, query) }, listItem.label);
+  }) }) });
+};
+const SuggestInputFormElementStyled = styled.div.withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SuggestInputFormElementStyled",
+  componentId: "sc-tvkime-0"
+})({
+  position: "relative"
+}, getBodySize("md"), ({
+  disabled
+}) => {
+  if (disabled) {
+    return {
+      pointerEvents: "none",
+      opacity: getOpacity(opacityDisabled)
+    };
+  }
+  return {};
+}, getBottomSpacing);
+const SuggestInputWrapperStyled = styled(InputWrapperStyled).withConfig({
+  shouldForwardProp: filterProps(),
+  displayName: "SuggestInputWrapperStyled",
+  componentId: "sc-tvkime-1"
+})({
+  position: "relative",
+  ":focus, :focus-visible": {
+    outline: "none"
+  },
+  marginBottom: getSpacing(spacingXs)
+});
+const SuggestInputIconsBarStyled = styled(Flex).withConfig({
+  displayName: "SuggestInputIconsBarStyled",
+  componentId: "sc-tvkime-2"
+})({
+  gap: `${getSpacing(spacingXs)}`,
+  flexWrap: "nowrap",
+  height: "auto"
+});
+const SuggestInputIconButtonStyled = styled.button.withConfig({
+  displayName: "SuggestInputIconButtonStyled",
+  componentId: "sc-tvkime-3"
+})({
+  background: "none",
+  color: getTextColor(colorTextNeutral),
+  flexGrow: 1,
+  "&:focus-visible": {
+    boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px 4px`
+  }
+}, ({
+  disabled
+}) => {
+  if (!disabled) {
+    return {
+      "&:hover": {
+        cursor: "pointer"
+      }
+    };
+  }
+});
+const SuggestInputLoadingSpinner = styled(LoadingSpinner).withConfig({
+  displayName: "SuggestInputLoadingSpinner",
+  componentId: "sc-tvkime-4"
+})({
+  ...forcedColors({
+    stroke: "FieldText"
+  })
+});
+const SuggestInputFormElement = forwardRef(({
+  children,
+  ...props
+}, ref) => {
+  return /* @__PURE__ */ jsx(SuggestInputFormElementStyled, { ...props, ref, children });
+});
+const SuggestInput = forwardRef(({
+  bottomSpacing = spacingMd,
+  isLoading = false,
+  label,
+  listItems,
+  errorMessage,
+  helperText,
+  onClose,
+  onPick,
+  onUpdate,
+  status,
+  uid,
+  disabled,
+  placeholder,
+  ...props
+}, outerRef) => {
+  const initialValueState = !props.value ? "" : props.value;
+  const [buttonIcon, setButtonIcon] = useState("ChevronDown");
+  const [selectedOption, setSelectedOption] = useState(-1);
+  const [showList, setShowList] = useState(false);
+  const [confirmedValue, setConfirmedValue] = useState(initialValueState);
+  const [value, setValue] = useState(initialValueState);
+  const messageId = `text-${uid}`;
+  const inputProps = {
+    ...props,
+    type: "text",
+    id: uid,
+    "aria-describedby": inputStateError !== status && helperText || inputStateError === status && errorMessage ? messageId : void 0,
+    "aria-invalid": inputStateError === status ? true : void 0
+  };
+  const inputRef = useRef(null);
+  useImperativeHandle(outerRef, () => inputRef.current, []);
+  const formElementRef = useRef(null);
+  const listItemsRef = useRef([]);
+  useEffect(() => {
+    showList ? setButtonIcon("Close") : setButtonIcon("ChevronDown");
+    if (!showList) {
+      setSelectedOption(-1);
+    }
+  }, [showList]);
+  useEffect(() => {
+    if (!props.value) {
+      return;
+    }
+    setValue(props.value);
+    setConfirmedValue(props.value);
+  }, [props.value]);
+  useEffect(() => {
+    var _a;
+    document.addEventListener("click", onClick);
+    (_a = formElementRef.current) == null ? void 0 : _a.addEventListener("keydown", onKeyDown);
+    return () => {
+      var _a2;
+      document.removeEventListener("click", onClick);
+      (_a2 = formElementRef.current) == null ? void 0 : _a2.removeEventListener("keydown", onKeyDown);
+    };
+  });
+  const closeList = () => {
+    setValue(confirmedValue);
+    setShowList(false);
+    onClose && onClose();
+  };
+  const filterItems = (option) => {
+    if (props.filterItems) {
+      return props.filterItems(value, option);
+    }
+    const queryString = value.trim().toLowerCase();
+    const optionString = option.trim().toLowerCase();
+    return optionString.includes(queryString);
+  };
+  const sortItems = (value2, a, b) => {
+    if (props.sortItems) {
+      return props.sortItems(value2, a, b);
+    }
+    if (a === b) {
+      return 0;
+    }
+    if (a > b) {
+      return 1;
+    }
+    return -1;
+  };
+  const handleChange = (userInput) => {
+    if (!showList && !isLoading) setShowList(true);
+    setValue(userInput);
+    setSelectedOption(-1);
+    if (userInput === "") setConfirmedValue("");
+    onUpdate && onUpdate(userInput);
+  };
+  const pickOption = (value2) => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    setShowList(false);
+    setValue(value2);
+    setConfirmedValue(value2);
+    onPick && onPick(value2);
+    onClose && onClose();
+  };
+  const onClick = (event) => {
+    if (formElementRef.current && !formElementRef.current.contains(event.target)) {
+      formElementRef.current.blur();
+      closeList();
+    }
+  };
+  const moveToOption = (option) => {
+    option.focus();
+    option.scrollIntoView({
+      block: "nearest",
+      inline: "nearest"
+    });
+  };
+  const onKeyDown = (event) => {
+    var _a;
+    switch (event.key) {
+      case "ArrowDown":
+        if (!showList) setShowList(true);
+        if (listItems && listItems.length > 0 && listItemsRef.current[selectedOption + 1]) {
+          moveToOption(listItemsRef.current[selectedOption + 1]);
+          setSelectedOption(selectedOption + 1);
+        } else {
+          moveToOption(listItemsRef.current[0]);
+          setSelectedOption(0);
+        }
+        break;
+      case "ArrowUp":
+        if (!showList) setShowList(true);
+        if (listItems && listItems.length > 0 && listItemsRef.current[selectedOption - 1]) {
+          moveToOption(listItemsRef.current[selectedOption - 1]);
+          setSelectedOption(selectedOption - 1);
+        } else if (listItems == null ? void 0 : listItems.length) {
+          moveToOption(listItemsRef.current[(listItems == null ? void 0 : listItems.length) - 1]);
+          setSelectedOption((listItems == null ? void 0 : listItems.length) - 1);
+        }
+        break;
+      case "Enter":
+        if (showList) {
+          pickOption(listItemsRef.current[selectedOption].innerText);
+          (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(value.length, value.length);
+        }
+        break;
+      case "Escape":
+        if (showList) {
+          closeList();
+        }
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsxs(SuggestInputFormElement, { tabIndex: 0, ref: formElementRef, bottomSpacing, disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(SuggestInputWrapperStyled, { status, bottomSpacing: inputStateError !== status && helperText || inputStateError === status && errorMessage ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(InputStyled, { ...inputProps, ref: inputRef, onChange: (e) => handleChange(e.target.value), onClick: () => {
+        if (disabled) return;
+        setShowList(true);
+      }, role: "combobox", value, ...{
+        "aria-expanded": showList,
+        "aria-controls": "listbox",
+        "aria-activedescendant": selectedOption > -1 ? `${uid}-item-${selectedOption}` : void 0,
+        "aria-live": isLoading !== void 0 ? "polite" : void 0,
+        "aria-busy": isLoading ? isLoading : void 0,
+        "aria-autocomplete": "list"
+      }, disabled, placeholder: renderInlineRichTextFromOpenText(placeholder) }),
+      /* @__PURE__ */ jsxs(SuggestInputIconsBarStyled, { children: [
+        /* @__PURE__ */ jsx(FlexItem, { grow: "full", children: /* @__PURE__ */ jsx(SuggestInputLoadingSpinner, { size: "xs", isActive: isLoading }) }),
+        status && /* @__PURE__ */ jsx(FlexItem, { grow: "full", children: /* @__PURE__ */ jsx(FormHelperStatusIcon, { status }) }),
+        listItems && listItems.length > 0 && /* @__PURE__ */ jsx(SuggestInputIconButtonStyled, { type: "button", onClick: () => {
+          if (disabled) return;
+          showList ? closeList() : setShowList(true);
+        }, tabIndex: -1, disabled, children: /* @__PURE__ */ jsx(IconLoader, { size: iconSizeSm, name: buttonIcon }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SuggestInputList, { listItems, listItemsRef, filterItems, sortItems, pickOption, query: value, showList, selectedOption, uid, ...{
+      "aria-label": label
+    } }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: inputStateError === status ? errorMessage : helperText })
+  ] });
+});
+export {
+  SuggestInput as default
+};