@geotab/zenith 3.1.1-beta.5 → 3.2.0-beta.0

package/dist/sortControl/sortControl.js

@@ -1,11 +1,73 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.SortControl = exports.SortDirections = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const checkboxState_1 = require("../checkbox/checkboxState");
 const popup_1 = require("../popup/popup");
 const selectList_1 = require("../selectList/selectList");
+injectString("cs", "Sort by", "\u0158adit podle");
+injectString("da-DK", "Sort by", "Sorter efter");
+injectString("de", "Sort by", "Sortieren nach");
+injectString("en", "Sort by", "Sort by");
+injectString("es", "Sort by", "Ordenar por");
+injectString("fi-FI", "Sort by", "J\xE4rjest\xE4");
+injectString("fr", "Sort by", "Trier par");
+injectString("fr-FR", "Sort by", "Trier par");
+injectString("hu-HU", "Sort by", "Rendez\xE9s");
+injectString("id", "Sort by", "Urutkan berdasarkan");
+injectString("it", "Sort by", "Ordinare per");
+injectString("ja", "Sort by", "\u3067\u30BD\u30FC\u30C8");
+injectString("ko-KR", "Sort by", "\uC815\uB82C \uAE30\uC900");
+injectString("ms", "Sort by", "Isih mengikut");
+injectString("nb-NO", "Sort by", "Sorter etter");
+injectString("nl", "Sort by", "Sorteren op");
+injectString("pl", "Sort by", "Sortuj wed\u0142ug");
+injectString("pt-BR", "Sort by", "Classificar por");
+injectString("sk-SK", "Sort by", "Zoradi\u0165 pod\u013Ea");
+injectString("sv", "Sort by", "Sortera enligt");
+injectString("th", "Sort by", "\u0E40\u0E23\u0E35\u0E22\u0E07\u0E15\u0E32\u0E21");
+injectString("tr", "Sort by", "S\u0131ralama \xF6l\xE7\xFCt\xFC");
+injectString("zh-Hans", "Sort by", "\u6392\u5E8F\u4F9D\u636E");
+injectString("zh-TW", "Sort by", "\u6392\u5E8F\u4F9D\u64DA");
+injectString("cs", "Change sort direction", "Zm\u011Bnit sm\u011Br \u0159azen\xED");
+injectString("da-DK", "Change sort direction", "Skift sorteringsretning");
+injectString("de", "Change sort direction", "Sortierrichtung \xE4ndern");
+injectString("en", "Change sort direction", "Change sort direction");
+injectString("es", "Change sort direction", "Cambiar direcci\xF3n de orden");
+injectString("fi-FI", "Change sort direction", "Vaihda lajittelusuunta");
+injectString("fr", "Change sort direction", "Modifier la direction de tri");
+injectString("fr-FR", "Change sort direction", "Changer l\u2019ordre de tri");
+injectString("hu-HU", "Change sort direction", "V\xE1ltoztasd meg a rendez\xE9s ir\xE1ny\xE1t.");
+injectString("id", "Change sort direction", "Ubah arah pengurutan");
+injectString("it", "Change sort direction", "Cambia ordinamento");
+injectString("ja", "Change sort direction", "\u30BD\u30FC\u30C8\u65B9\u5411\u3092\u5909\u66F4");
+injectString("ko-KR", "Change sort direction", "\uC815\uB82C \uBC29\uD5A5 \uBCC0\uACBD");
+injectString("ms", "Change sort direction", "Ubah arah isihan");
+injectString("nb-NO", "Change sort direction", "Endre sorteringsretning");
+injectString("nl", "Change sort direction", "Sorteerrichting wijzigen");
+injectString("pl", "Change sort direction", "Zmiana kierunku sortowania");
+injectString("pt-BR", "Change sort direction", "Alterar dire\xE7\xE3o de classifica\xE7\xE3o");
+injectString("sk-SK", "Change sort direction", "Zmeni\u0165 smer triedenia");
+injectString("sv", "Change sort direction", "\xC4ndra sorteringsriktning");
+injectString("th", "Change sort direction", "\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E17\u0E34\u0E28\u0E17\u0E32\u0E07\u0E01\u0E32\u0E23\u0E40\u0E23\u0E35\u0E22\u0E07");
+injectString("tr", "Change sort direction", "S\u0131ralama y\xF6n\xFCn\xFC de\u011Fi\u015Ftir");
+injectString("zh-Hans", "Change sort direction", "\u66F4\u6539\u6392\u5E8F");
+injectString("zh-TW", "Change sort direction", "\u8B8A\u66F4\u6392\u5E8F\u65B9\u5411");
+injectString("da-DK", "Sort Options", "Sorteringsmuligheder");
+injectString("en", "Sort Options", "Sort Options");
+injectString("fi-FI", "Sort Options", "Lajitteluvaihtoehdot");
+injectString("hu-HU", "Sort Options", "Rendez\xE9si lehet\u0151s\xE9gek");
+injectString("ko-KR", "Sort Options", "\uC815\uB82C \uC635\uC158");
+injectString("nb-NO", "Sort Options", "Sorteringsalternativer");
+injectString("sk-SK", "Sort Options", "Mo\u017Enosti triedenia");
+injectString("zh-TW", "Sort Options", "\u6392\u5E8F\u9078\u9805");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
@@ -17,47 +79,95 @@ const MENU_POSITION = "bottom-left";
 const BUTTON_TEXT_DEFAULT = "Sort by";
 var SortDirections;
 (function (SortDirections) {
-    SortDirections["Ascending"] = "asc";
-    SortDirections["Descending"] = "desc";
+  SortDirections["Ascending"] = "asc";
+  SortDirections["Descending"] = "desc";
 })(SortDirections || (exports.SortDirections = SortDirections = {}));
-const SortControl = ({ buttonText = BUTTON_TEXT_DEFAULT, id = "", sortBy, onChange, sortDirection = SortDirections.Ascending, directionIcon = true, disabled = false, className = "", items }) => {
-    //allows for the resetting of the popup once a new option has been selected by assigning a random number as a key, changing it when an option is changed
-    const [popupKey, setPopupKey] = (0, react_1.useState)(Math.random() * (999999999 - 0) + 0);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const driveComponentClassName = (0, useDriveClassName_1.useDriveClassName)("zen-sort-container");
-    const isDrive = (0, useDrive_1.useDrive)();
-    const buttonTextValue = buttonText === BUTTON_TEXT_DEFAULT ? translate(BUTTON_TEXT_DEFAULT) : buttonText;
-    const onOptionsToggle = (isCurrentlyOpen) => {
-        setIsOpen(isCurrentlyOpen);
-    };
-    const onSortDirectionToggle = () => {
-        if (sortDirection === SortDirections.Ascending) {
-            onChange(SortDirections.Descending, sortBy);
-        }
-        else {
-            onChange(SortDirections.Ascending, sortBy);
-        }
-    };
-    const onOptionChange = (0, react_1.useCallback)((newItemState) => {
-        [...newItemState].forEach(([k, v]) => {
-            if (v === checkboxState_1.CheckboxState.On) {
-                onChange(sortDirection === SortDirections.Ascending ? SortDirections.Ascending : SortDirections.Descending, k);
-                setPopupKey(Math.random() * (999999999 - 0) + 0);
-            }
-        });
-    }, [onChange, sortDirection]);
-    const isSingleItem = items.length === 1;
-    return (0, jsx_runtime_1.jsxs)("div", { id: id, className: (0, classNames_1.classNames)(["zen-sort-container", driveComponentClassName || "", className]), children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-sort-container__button", isSingleItem ? "" : "zen-sort-container__button--left-item"]), onClick: () => onSortDirectionToggle(), disabled: disabled, title: translate("Change sort direction"), "aria-label": translate("Change sort direction"), children: [directionIcon
-                        ? sortDirection === SortDirections.Ascending
-                            ? (0, jsx_runtime_1.jsx)(iconFilter3Asc_1.IconFilter3Asc, { className: "zen-sort-container__sort-icon", size: isDrive ? "huge" : "large" })
-                            : (0, jsx_runtime_1.jsx)(iconFilter3Desc_1.IconFilter3Desc, { className: "zen-sort-container__sort-icon", size: isDrive ? "huge" : "large" }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsxs)("span", { className: "zen-sort-container__text-block", children: [buttonTextValue && (0, jsx_runtime_1.jsxs)("span", { children: [buttonTextValue, ": "] }), (0, jsx_runtime_1.jsx)("span", { children: (items.find((item) => item.id === sortBy) || items[0]).children })] })] }), isSingleItem
-                ? ""
-                : (0, jsx_runtime_1.jsx)(popup_1.Popup, { trigger: ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-sort-container__button zen-sort-container__button--small zen-sort-container__button--right-item", disabled: disabled, title: translate("Sort by"), children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, { className: isOpen ? "zen-sort-container__arrow-icon--up" : "zen-sort-container__arrow-icon--down", size: isDrive ? "huge" : "large" }) })), alignment: MENU_POSITION, onOpenChange: (isCurrentlyOpen) => onOptionsToggle(isCurrentlyOpen), children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, { id: "sortControlSelectList", title: translate("Sort Options"), onChange: (itemMap) => onOptionChange(itemMap), items: [...items.reduce((acc, obj) => acc.set(obj.id, Object.assign(Object.assign({}, obj), { state: obj.id === sortBy ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off })), new Map()).values()] }) }, popupKey)] });
+const SortControl = ({
+  buttonText = BUTTON_TEXT_DEFAULT,
+  id = "",
+  sortBy,
+  onChange,
+  sortDirection = SortDirections.Ascending,
+  directionIcon = true,
+  disabled = false,
+  className = "",
+  items
+}) => {
+  //allows for the resetting of the popup once a new option has been selected by assigning a random number as a key, changing it when an option is changed
+  const [popupKey, setPopupKey] = (0, react_1.useState)(Math.random() * (999999999 - 0) + 0);
+  const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const driveComponentClassName = (0, useDriveClassName_1.useDriveClassName)("zen-sort-container");
+  const isDrive = (0, useDrive_1.useDrive)();
+  const buttonTextValue = buttonText === BUTTON_TEXT_DEFAULT ? translate("Sort by") : buttonText;
+  const onOptionsToggle = isCurrentlyOpen => {
+    setIsOpen(isCurrentlyOpen);
+  };
+  const onSortDirectionToggle = () => {
+    if (sortDirection === SortDirections.Ascending) {
+      onChange(SortDirections.Descending, sortBy);
+    } else {
+      onChange(SortDirections.Ascending, sortBy);
+    }
+  };
+  const onOptionChange = (0, react_1.useCallback)(newItemState => {
+    [...newItemState].forEach(([k, v]) => {
+      if (v === checkboxState_1.CheckboxState.On) {
+        onChange(sortDirection === SortDirections.Ascending ? SortDirections.Ascending : SortDirections.Descending, k);
+        setPopupKey(Math.random() * (999999999 - 0) + 0);
+      }
+    });
+  }, [onChange, sortDirection]);
+  const isSingleItem = items.length === 1;
+  return (0, jsx_runtime_1.jsxs)("div", {
+    id: id,
+    className: (0, classNames_1.classNames)(["zen-sort-container", driveComponentClassName || "", className]),
+    children: [(0, jsx_runtime_1.jsxs)("button", {
+      type: "button",
+      className: (0, classNames_1.classNames)(["zen-sort-container__button", isSingleItem ? "" : "zen-sort-container__button--left-item"]),
+      onClick: () => onSortDirectionToggle(),
+      disabled: disabled,
+      title: translate("Change sort direction"),
+      "aria-label": translate("Change sort direction"),
+      children: [directionIcon ? sortDirection === SortDirections.Ascending ? (0, jsx_runtime_1.jsx)(iconFilter3Asc_1.IconFilter3Asc, {
+        className: "zen-sort-container__sort-icon",
+        size: isDrive ? "huge" : "large"
+      }) : (0, jsx_runtime_1.jsx)(iconFilter3Desc_1.IconFilter3Desc, {
+        className: "zen-sort-container__sort-icon",
+        size: isDrive ? "huge" : "large"
+      }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), (0, jsx_runtime_1.jsxs)("span", {
+        className: "zen-sort-container__text-block",
+        children: [buttonTextValue && (0, jsx_runtime_1.jsxs)("span", {
+          children: [buttonTextValue, ": "]
+        }), (0, jsx_runtime_1.jsx)("span", {
+          children: (items.find(item => item.id === sortBy) || items[0]).children
+        })]
+      })]
+    }), isSingleItem ? "" : (0, jsx_runtime_1.jsx)(popup_1.Popup, {
+      trigger: (0, jsx_runtime_1.jsx)("button", {
+        type: "button",
+        className: "zen-sort-container__button zen-sort-container__button--small zen-sort-container__button--right-item",
+        disabled: disabled,
+        title: translate("Sort by"),
+        children: (0, jsx_runtime_1.jsx)(iconChevronDownSmall_1.IconChevronDownSmall, {
+          className: isOpen ? "zen-sort-container__arrow-icon--up" : "zen-sort-container__arrow-icon--down",
+          size: isDrive ? "huge" : "large"
+        })
+      }),
+      alignment: MENU_POSITION,
+      onOpenChange: isCurrentlyOpen => onOptionsToggle(isCurrentlyOpen),
+      children: (0, jsx_runtime_1.jsx)(selectList_1.SelectList, {
+        id: "sortControlSelectList",
+        title: translate("Sort Options"),
+        onChange: itemMap => onOptionChange(itemMap),
+        items: [...items.reduce((acc, obj) => acc.set(obj.id, Object.assign(Object.assign({}, obj), {
+          state: obj.id === sortBy ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off
+        })), new Map()).values()]
+      })
+    }, popupKey)]
+  });
 };
 exports.SortControl = SortControl;
-exports.TRANSLATIONS = [
-    "Sort by",
-    "Sort Options",
-    "Change sort direction"
-];
+exports.TRANSLATIONS = ["Sort by", "Sort Options", "Change sort direction"];

package/dist/stepperRaw/stepperRaw.js

@@ -1,5 +1,8 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.StepperRaw = exports.INPUT_DEFAULT_WIDTH_DRIVE = exports.INPUT_DEFAULT_WIDTH = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -22,47 +25,118 @@ const useFormFieldValues_1 = require("../commonHelpers/hooks/useFormFieldValues/
 // according to design
 exports.INPUT_DEFAULT_WIDTH = 47;
 exports.INPUT_DEFAULT_WIDTH_DRIVE = 56;
-const StepperRaw = (props) => {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { step = 1, width, readonly = false, isError, placeholder = "", className = "", id, ariaLabel, isReadOnly } = props;
-    const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-stepper-field");
-    const driveInputClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
-    const isDrive = (0, useDrive_1.useDrive)();
-    const validStep = (0, getValidStep_1.getValidStep)(step);
-    const inputWidth = (0, getValidInputWidth_1.getValidInputWidth)(width || (isDrive ? exports.INPUT_DEFAULT_WIDTH_DRIVE : exports.INPUT_DEFAULT_WIDTH), isDrive);
-    const { onBlur, onChange, name, value = "", min = -Infinity, max = Infinity, maxLength, disabled } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
-    const isErrorShown = !disabled && !readonly && isError;
-    const validValue = (0, getValidValue_1.getValidValue)(value, min, max);
-    const handleChange = (0, react_1.useCallback)((e) => {
-        // prevent cases, when user types "-" in the middle of the number, e.g "1-2"
-        if (!e.target.value && e.nativeEvent.data === "-") {
-            return;
-        }
-        if (!e.target.value) {
-            onChange === null || onChange === void 0 ? void 0 : onChange("");
-            return;
-        }
-        const newValue = (0, getValidValue_1.getValidValue)(e.target.value, min, max);
-        newValue.toString() !== value.toString() && (onChange === null || onChange === void 0 ? void 0 : onChange(newValue.toString()));
-    }, [max, min, onChange, value]);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const localRef = (0, react_1.useRef)(null);
-    const currRef = (props.ref || localRef);
-    if (isReadOnly) {
-        return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: String(value) });
+const StepperRaw = props => {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const {
+    step = 1,
+    width,
+    readonly = false,
+    isError,
+    placeholder = "",
+    className = "",
+    id,
+    ariaLabel,
+    isReadOnly
+  } = props;
+  const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-stepper-field");
+  const driveInputClass = (0, useDriveClassName_1.useDriveClassName)("zen-text-input");
+  const isDrive = (0, useDrive_1.useDrive)();
+  const validStep = (0, getValidStep_1.getValidStep)(step);
+  const inputWidth = (0, getValidInputWidth_1.getValidInputWidth)(width || (isDrive ? exports.INPUT_DEFAULT_WIDTH_DRIVE : exports.INPUT_DEFAULT_WIDTH), isDrive);
+  const {
+    onBlur,
+    onChange,
+    name,
+    value = "",
+    min = -Infinity,
+    max = Infinity,
+    maxLength,
+    disabled
+  } = (0, useFormFieldValues_1.useFormFieldValues)(props.controller, props);
+  const isErrorShown = !disabled && !readonly && isError;
+  const validValue = (0, getValidValue_1.getValidValue)(value, min, max);
+  const handleChange = (0, react_1.useCallback)(e => {
+    // prevent cases, when user types "-" in the middle of the number, e.g "1-2"
+    if (!e.target.value && e.nativeEvent.data === "-") {
+      return;
     }
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]), children: (0, jsx_runtime_1.jsxs)("div", { className: "zen-stepper-field__input-wrapper", children: [(0, jsx_runtime_1.jsx)("input", { id: id, ref: currRef, min: min, max: max, value: validValue, onBeforeInput: onBeforeInput_1.onBeforeInput, onChange: handleChange, disabled: disabled, type: "number", step: step, className: (0, classNames_1.classNames)(["zen-stepper-field__input", "zen-text-input", driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]), style: { width: `${inputWidth}px` }, placeholder: placeholder, readOnly: readonly, maxLength: maxLength, "aria-label": ariaLabel, name: name, onBlur: onBlur }), !readonly && (0, jsx_runtime_1.jsxs)("div", { className: "zen-stepper-field__controls", style: { left: `${inputWidth - 24}px` }, children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { icon: iconChevronTopSmall_1.IconChevronTopSmall, type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
-                                var _a;
-                                currRef.hasOwnProperty("current") && ((_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-                                onChange === null || onChange === void 0 ? void 0 : onChange(String((0, getIncreasedValue_1.getIncreasedValue)(validValue, validStep, max)));
-                            }, "aria-label": translate("Increase value") }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { icon: iconChevronDownSmall_1.IconChevronDownSmall, type: buttonType_1.ButtonType.TertiaryBlack, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconSize: isDrive ? "huge" : "large", className: "zen-stepper-field__control", tabIndex: -1, onClick: () => {
-                                var _a;
-                                currRef.hasOwnProperty("current") && ((_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-                                onChange === null || onChange === void 0 ? void 0 : onChange(String((0, getDecreasedValue_1.getDecreasedValue)(validValue, validStep, min)));
-                            }, "aria-label": translate("Decrease value") })] })] }) });
+    if (!e.target.value) {
+      onChange === null || onChange === void 0 ? void 0 : onChange("");
+      return;
+    }
+    const newValue = (0, getValidValue_1.getValidValue)(e.target.value, min, max);
+    newValue.toString() !== value.toString() && (onChange === null || onChange === void 0 ? void 0 : onChange(newValue.toString()));
+  }, [max, min, onChange, value]);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const localRef = (0, react_1.useRef)(null);
+  const currRef = props.ref || localRef;
+  if (isReadOnly) {
+    return (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, {
+      value: String(value)
+    });
+  }
+  return (0, jsx_runtime_1.jsx)("div", {
+    className: (0, classNames_1.classNames)(["zen-stepper-field", driveComponentClass || "", disabled ? "zen-stepper-field--disabled" : "", className]),
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-stepper-field__input-wrapper",
+      children: [(0, jsx_runtime_1.jsx)("input", {
+        id: id,
+        ref: currRef,
+        min: min,
+        max: max,
+        value: validValue,
+        onBeforeInput: onBeforeInput_1.onBeforeInput,
+        onChange: handleChange,
+        disabled: disabled,
+        type: "number",
+        step: step,
+        className: (0, classNames_1.classNames)(["zen-stepper-field__input", "zen-text-input", driveInputClass || "", isErrorShown ? "zen-stepper-field__input--error" : ""]),
+        style: {
+          width: `${inputWidth}px`
+        },
+        placeholder: placeholder,
+        readOnly: readonly,
+        maxLength: maxLength,
+        "aria-label": ariaLabel,
+        name: name,
+        onBlur: onBlur
+      }), !readonly && (0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-stepper-field__controls",
+        style: {
+          left: `${inputWidth - 24}px`
+        },
+        children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+          icon: iconChevronTopSmall_1.IconChevronTopSmall,
+          type: buttonType_1.ButtonType.TertiaryBlack,
+          iconPosition: textIconButton_1.ButtonIconPosition.Start,
+          iconSize: isDrive ? "huge" : "large",
+          className: "zen-stepper-field__control",
+          tabIndex: -1,
+          onClick: () => {
+            var _a;
+            currRef.hasOwnProperty("current") && ((_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+            onChange === null || onChange === void 0 ? void 0 : onChange(String((0, getIncreasedValue_1.getIncreasedValue)(validValue, validStep, max)));
+          },
+          "aria-label": translate("Increase value")
+        }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+          icon: iconChevronDownSmall_1.IconChevronDownSmall,
+          type: buttonType_1.ButtonType.TertiaryBlack,
+          iconPosition: textIconButton_1.ButtonIconPosition.Start,
+          iconSize: isDrive ? "huge" : "large",
+          className: "zen-stepper-field__control",
+          tabIndex: -1,
+          onClick: () => {
+            var _a;
+            currRef.hasOwnProperty("current") && ((_a = currRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+            onChange === null || onChange === void 0 ? void 0 : onChange(String((0, getDecreasedValue_1.getDecreasedValue)(validValue, validStep, min)));
+          },
+          "aria-label": translate("Decrease value")
+        })]
+      })]
+    })
+  });
 };
 exports.StepperRaw = StepperRaw;
-exports.TRANSLATIONS = [
-    "Decrease value",
-    "Increase value"
-];
+exports.TRANSLATIONS = ["Decrease value", "Increase value"];

package/dist/summary/summary.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Summary = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -7,11 +13,91 @@ const tooltip_1 = require("../tooltip/tooltip");
 const iconInfoCircle_1 = require("../icons/iconInfoCircle");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-const Summary = ({ color, title, value, unit, tooltip, more, isEnabled, onToggle, description }) => {
-    const isClickable = (0, react_1.useMemo)(() => color && onToggle, [color, onToggle]);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsxs)("div", { className: "zen-summary", children: [(color || title || tooltip) && (0, jsx_runtime_1.jsxs)("div", { className: "zen-summary__header", children: [color && (0, jsx_runtime_1.jsx)("button", { "aria-label": translate("Summary color"), className: (0, classNames_1.classNames)(["zen-summary__color", isClickable ? "zen-summary__clickable" : ""]), style: { backgroundColor: color }, onClick: onToggle }), isClickable ?
-                        (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)(["zen-summary__title-text zen-ellipsis heading-05 zen-summary__clickable", isEnabled ? "zen-summary__crossed-out" : ""]), onClick: onToggle, children: title }) :
-                        (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__title-text zen-ellipsis heading-05", children: title }), tooltip && (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { alignment: "top", size: "auto", trigger: (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__trigger", children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, { size: "large", className: "zen-summary__title-icon" }) }), children: tooltip })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-summary__data", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-summary__value zen-ellipsis", children: typeof value === "string" ? value : value.toFixed(2) }), unit && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__unit", children: unit }), more && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__more zen-ellipsis", children: more })] }), description && (0, jsx_runtime_1.jsx)("div", { className: "zen-summary__content", children: description })] });
+injectString("cs", "Summary color", "Barva souhrnu");
+injectString("da-DK", "Summary color", "Oversigt farve");
+injectString("de", "Summary color", "\xDCbersichtsfarbe");
+injectString("en", "Summary color", "Summary color");
+injectString("es", "Summary color", "Color de resumen");
+injectString("fi-FI", "Summary color", "Yhteenvetov\xE4ri");
+injectString("fr", "Summary color", "Couleur du sommaire");
+injectString("fr-FR", "Summary color", "Couleur du r\xE9sum\xE9");
+injectString("hu-HU", "Summary color", "\xD6sszefoglal\xF3 sz\xEDn");
+injectString("id", "Summary color", "Warna ringkasan");
+injectString("it", "Summary color", "Colore riepilogo");
+injectString("ja", "Summary color", "\u30B5\u30DE\u30EA\u30FC\u306E\u8272");
+injectString("ko-KR", "Summary color", "\uC694\uC57D \uADF8\uB798\uD504 \uC0C9\uC0C1");
+injectString("ms", "Summary color", "Warna ringkasan");
+injectString("nb-NO", "Summary color", "Sammendragsfarge");
+injectString("nl", "Summary color", "Overzichtskleur");
+injectString("pl", "Summary color", "Kolor podsumowania");
+injectString("pt-BR", "Summary color", "Cor do resumo");
+injectString("sk-SK", "Summary color", "S\xFAhrn farieb");
+injectString("sv", "Summary color", "F\xE4rg p\xE5 sammanfattning");
+injectString("th", "Summary color", "\u0E2A\u0E35\u0E02\u0E2D\u0E07\u0E2A\u0E23\u0E38\u0E1B");
+injectString("tr", "Summary color", "\xD6zet rengi");
+injectString("zh-Hans", "Summary color", "\u6458\u8981\u989C\u8272");
+injectString("zh-TW", "Summary color", "\u6458\u8981\u8272\u5F69");
+const Summary = ({
+  color,
+  title,
+  value,
+  unit,
+  tooltip,
+  more,
+  isEnabled,
+  onToggle,
+  description
+}) => {
+  const isClickable = (0, react_1.useMemo)(() => color && onToggle, [color, onToggle]);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    className: "zen-summary",
+    children: [(color || title || tooltip) && (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-summary__header",
+      children: [color && (0, jsx_runtime_1.jsx)("button", {
+        "aria-label": translate("Summary color"),
+        className: (0, classNames_1.classNames)(["zen-summary__color", isClickable ? "zen-summary__clickable" : ""]),
+        style: {
+          backgroundColor: color
+        },
+        onClick: onToggle
+      }), isClickable ? (0, jsx_runtime_1.jsx)("button", {
+        className: (0, classNames_1.classNames)(["zen-summary__title-text zen-ellipsis heading-05 zen-summary__clickable", isEnabled ? "zen-summary__crossed-out" : ""]),
+        onClick: onToggle,
+        children: title
+      }) : (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary__title-text zen-ellipsis heading-05",
+        children: title
+      }), tooltip && (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, {
+        alignment: "top",
+        size: "auto",
+        trigger: (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-summary__trigger",
+          children: (0, jsx_runtime_1.jsx)(iconInfoCircle_1.IconInfoCircle, {
+            size: "large",
+            className: "zen-summary__title-icon"
+          })
+        }),
+        children: tooltip
+      })]
+    }), (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-summary__data",
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary__value zen-ellipsis",
+        children: typeof value === "string" ? value : value.toFixed(2)
+      }), unit && (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary__unit",
+        children: unit
+      }), more && (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-summary__more zen-ellipsis",
+        children: more
+      })]
+    }), description && (0, jsx_runtime_1.jsx)("div", {
+      className: "zen-summary__content",
+      children: description
+    })]
+  });
 };
-exports.Summary = Summary;
+exports.Summary = Summary;