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

package/esm/dataGrid/withSortableColumns/columns/sortableColumnWrapper.js

@@ -1,3 +1,4 @@
+import { injectString } from "../../../utils/localization/translationsDictionary";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { classNames } from "../../../commonHelpers/classNames/classNames";
@@ -7,105 +8,182 @@ import { ColumnSortDirection } from "./columnSortDirection";
 import { useLanguage } from "../../../utils/localization/useLanguage";
 import { IconFilter3Desc } from "../../../icons/iconFilter3Desc";
 import { IconFilter3Asc } from "../../../icons/iconFilter3Asc";
+injectString("cs", "Sort by {COLUMN_NAME} descending", "Se\u0159adit sestupn\u011B podle {COLUMN_NAME}");
+injectString("da-DK", "Sort by {COLUMN_NAME} descending", "Sorter efter {COLUMN_NAME} faldende");
+injectString("de", "Sort by {COLUMN_NAME} descending", "Absteigend nach {COLUMN_NAME} sortieren");
+injectString("en", "Sort by {COLUMN_NAME} descending", "Sort by {COLUMN_NAME} descending");
+injectString("es", "Sort by {COLUMN_NAME} descending", "Ordenar por {COLUMN_NAME} de manera descendente");
+injectString("fi-FI", "Sort by {COLUMN_NAME} descending", "J\xE4rjest\xE4 {COLUMN_NAME} laskevasti");
+injectString("fr", "Sort by {COLUMN_NAME} descending", "Trier par {COLUMN_NAME} en ordre d\xE9croissant");
+injectString("fr-FR", "Sort by {COLUMN_NAME} descending", "Trier par {COLUMN_NAME} d\xE9croissant");
+injectString("hu-HU", "Sort by {COLUMN_NAME} descending", "Rendezd cs\xF6kken\u0151 sorrendben a(z) {COLUMN_NAME} alapj\xE1n.");
+injectString("id", "Sort by {COLUMN_NAME} descending", "Urutkan menurut {COLUMN_NAME} ke bawah");
+injectString("it", "Sort by {COLUMN_NAME} descending", "Consente di ordinare per {COLUMN_NAME} in ordine decrescente");
+injectString("ja", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} \u3092\u964D\u9806\u3067\u30BD\u30FC\u30C8");
+injectString("ko-KR", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} \uC5F4\uC744 \uB0B4\uB9BC\uCC28\uC21C\uC73C\uB85C \uC815\uB82C");
+injectString("ms", "Sort by {COLUMN_NAME} descending", "Isih mengikut {COLUMN_NAME} secara menurun");
+injectString("nb-NO", "Sort by {COLUMN_NAME} descending", "Sorter etter {COLUMN_NAME} fallende");
+injectString("nl", "Sort by {COLUMN_NAME} descending", "Sorteren op {COLUMN_NAME}, aflopend");
+injectString("pl", "Sort by {COLUMN_NAME} descending", "Sortuj wed\u0142ug {COLUMN_NAME} malej\u0105co");
+injectString("pt-BR", "Sort by {COLUMN_NAME} descending", "Classificar por {COLUMN_NAME} em ordem descendente");
+injectString("sk-SK", "Sort by {COLUMN_NAME} descending", "Zoradi\u0165 pod\u013Ea {COLUMN_NAME} zostupne");
+injectString("sv", "Sort by {COLUMN_NAME} descending", "Sortera efter {COLUMN_NAME} i fallande ordning");
+injectString("th", "Sort by {COLUMN_NAME} descending", "\u0E40\u0E23\u0E35\u0E22\u0E07\u0E15\u0E32\u0E21 {COLUMN_NAME} \u0E08\u0E32\u0E01\u0E21\u0E32\u0E01\u0E44\u0E1B\u0E2B\u0E32\u0E19\u0E49\u0E2D\u0E22");
+injectString("tr", "Sort by {COLUMN_NAME} descending", "{COLUMN_NAME} s\xFCtununa g\xF6re azalan s\u0131rada g\xF6ster");
+injectString("zh-Hans", "Sort by {COLUMN_NAME} descending", "\u6309 {COLUMN_NAME} \u964D\u5E8F\u6392\u5E8F");
+injectString("zh-TW", "Sort by {COLUMN_NAME} descending", "\u4F9D\u300C{COLUMN_NAME}\u300D\u905E\u6E1B\u6392\u5E8F");
+injectString("cs", "Sort by {COLUMN_NAME} ascending", "Se\u0159adit vzestupn\u011B podle {COLUMN_NAME}");
+injectString("da-DK", "Sort by {COLUMN_NAME} ascending", "Sorter efter {COLUMN_NAME} stigende");
+injectString("de", "Sort by {COLUMN_NAME} ascending", "Aufsteigend nach {COLUMN_NAME} sortieren");
+injectString("en", "Sort by {COLUMN_NAME} ascending", "Sort by {COLUMN_NAME} ascending");
+injectString("es", "Sort by {COLUMN_NAME} ascending", "Ordenar por {COLUMN_NAME} de manera ascendente");
+injectString("fi-FI", "Sort by {COLUMN_NAME} ascending", "J\xE4rjest\xE4 {COLUMN_NAME} nousevasti");
+injectString("fr", "Sort by {COLUMN_NAME} ascending", "Trier par {COLUMN_NAME} en ordre croissant");
+injectString("fr-FR", "Sort by {COLUMN_NAME} ascending", "Trier par {COLUMN_NAME} croissant");
+injectString("hu-HU", "Sort by {COLUMN_NAME} ascending", "Rendezd n\xF6vekv\u0151 sorrendben a(z) {COLUMN_NAME} szerint.");
+injectString("id", "Sort by {COLUMN_NAME} ascending", "Urutkan menurut {COLUMN_NAME} ke atas");
+injectString("it", "Sort by {COLUMN_NAME} ascending", "Consente di ordinare per {COLUMN_NAME} in ordine crescente");
+injectString("ja", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} \u3092\u6607\u9806\u3067\u30BD\u30FC\u30C8");
+injectString("ko-KR", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} \uC5F4\uC744 \uC624\uB984\uCC28\uC21C\uC73C\uB85C \uC815\uB82C");
+injectString("ms", "Sort by {COLUMN_NAME} ascending", "Isih mengikut {COLUMN_NAME} secara menaik");
+injectString("nb-NO", "Sort by {COLUMN_NAME} ascending", "Sorter etter {COLUMN_NAME} stigende");
+injectString("nl", "Sort by {COLUMN_NAME} ascending", "Sorteren op {COLUMN_NAME}, oplopend");
+injectString("pl", "Sort by {COLUMN_NAME} ascending", "Sortuj wed\u0142ug {COLUMN_NAME} rosn\u0105co");
+injectString("pt-BR", "Sort by {COLUMN_NAME} ascending", "Classificar por {COLUMN_NAME} em ordem ascendente");
+injectString("sk-SK", "Sort by {COLUMN_NAME} ascending", "Zoradi\u0165 pod\u013Ea {COLUMN_NAME} vzostupne");
+injectString("sv", "Sort by {COLUMN_NAME} ascending", "Sortera efter {COLUMN_NAME} i stigande ordning");
+injectString("th", "Sort by {COLUMN_NAME} ascending", "\u0E40\u0E23\u0E35\u0E22\u0E07\u0E15\u0E32\u0E21 {COLUMN_NAME} \u0E08\u0E32\u0E01\u0E19\u0E49\u0E2D\u0E22\u0E44\u0E1B\u0E2B\u0E32\u0E21\u0E32\u0E01");
+injectString("tr", "Sort by {COLUMN_NAME} ascending", "{COLUMN_NAME} s\xFCtununa g\xF6re artan s\u0131rada g\xF6ster");
+injectString("zh-Hans", "Sort by {COLUMN_NAME} ascending", "\u6309 {COLUMN_NAME} \u5347\u5E8F\u6392\u5E8F");
+injectString("zh-TW", "Sort by {COLUMN_NAME} ascending", "\u4F9D\u300C{COLUMN_NAME}\u300D\u905E\u589E\u6392\u5E8F");
 const getSortButtonTitle = (sortDirection, title, translate) => {
-    const titleTemplate = sortDirection === ColumnSortDirection.Descending ? "Sort by {COLUMN_NAME} descending" : "Sort by {COLUMN_NAME} ascending";
-    return translate(titleTemplate).replace("{COLUMN_NAME}", title);
+  const titleTemplate = sortDirection === ColumnSortDirection.Descending ? translate("Sort by {COLUMN_NAME} descending") : translate("Sort by {COLUMN_NAME} ascending");
+  return titleTemplate.replace("{COLUMN_NAME}", title);
 };
-export const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false, initialSortDirection = ColumnSortDirection.Ascending }) => {
-    const { translate } = useLanguage();
-    const [isHovered, setIsHovered] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
-    const isActive = isHovered || isFocused;
-    const iconTitleText = useMemo(() => {
-        switch (sortDirection) {
-            case ColumnSortDirection.Ascending: {
-                return ColumnSortDirection.Descending;
-            }
-            case ColumnSortDirection.Descending: {
-                return ColumnSortDirection.Ascending;
-            }
-            case undefined:
-            default:
-                return initialSortDirection;
+export const SortableHeaderCell = ({
+  columnName,
+  isSortedBy,
+  sortDirection,
+  title,
+  tooltip,
+  onSortChange,
+  isMobile = false,
+  initialSortDirection = ColumnSortDirection.Ascending
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const isActive = isHovered || isFocused;
+  const iconTitleText = useMemo(() => {
+    switch (sortDirection) {
+      case ColumnSortDirection.Ascending:
+        {
+          return ColumnSortDirection.Descending;
         }
-    }, [sortDirection, initialSortDirection]);
-    const iconTitle = getSortButtonTitle(iconTitleText, tooltip, translate);
-    const icon = useMemo(() => {
-        switch (sortDirection) {
-            case ColumnSortDirection.Ascending: {
-                return isActive ? IconFilter3Desc : IconFilter3Asc;
-            }
-            case ColumnSortDirection.Descending:
-                return isActive ? IconFilter3Asc : IconFilter3Desc;
-            case undefined:
-            default: {
-                return initialSortDirection === ColumnSortDirection.Ascending ? IconFilter3Asc : IconFilter3Desc;
-            }
+      case ColumnSortDirection.Descending:
+        {
+          return ColumnSortDirection.Ascending;
         }
-    }, [sortDirection, isActive, initialSortDirection]);
-    const iconButton = (_jsx(TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? ButtonIconPosition.Start : ButtonIconPosition.End, type: ButtonType.TertiaryBlack, title: iconTitle }));
-    return (_jsx("div", { className: classNames([
-            "zen-sortable-column",
-            isSortedBy ? `zen-sortable-column--active` : "",
-            isMobile ? `zen-sortable-column--mobile` : ""
-        ]), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), children: _jsx("div", { className: classNames([
-                "zen-caption",
-                "zen-sortable-column__button",
-                "zen-sortable-column-button",
-                isSortedBy ? `zen-sortable-column-button--active` : "",
-                sortDirection === ColumnSortDirection.Ascending
-                    ? "zen-sortable-column-button--dir-asc"
-                    : "zen-sortable-column-button--dir-desc"
-            ]), title: iconTitle, "aria-label": iconTitle, onClick: () => {
-                onSortChange({
-                    sortColumn: columnName,
-                    sortDirection: sortDirection === ColumnSortDirection.None ? initialSortDirection :
-                        sortDirection === ColumnSortDirection.Ascending
-                            ? ColumnSortDirection.Descending
-                            : ColumnSortDirection.Ascending
-                });
-            }, children: _jsxs(_Fragment, { children: [isMobile ? iconButton : null, _jsx("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) }));
-};
-export class SortableColumnWrapper {
-    constructor(columnName, options, columnTitle, onSort) {
-        Object.defineProperty(this, "columnName", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: columnName
-        });
-        Object.defineProperty(this, "options", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: options
-        });
-        Object.defineProperty(this, "columnTitle", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: columnTitle
-        });
-        Object.defineProperty(this, "onSort", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: onSort
-        });
+      case undefined:
+      default:
+        return initialSortDirection;
     }
-    renderHeader(title) {
-        return _jsx(SortableHeaderCell, { columnName: this.columnName, isSortedBy: this.options.isSortedBy === undefined ? false : this.options.isSortedBy, sortDirection: this.options.sortDirection || ColumnSortDirection.None, title: title, tooltip: this.columnTitle, onSortChange: this.onSort, initialSortDirection: this.options.initialSortDirection });
-    }
-    render(value, _) {
-        return value;
+  }, [sortDirection, initialSortDirection]);
+  const iconTitle = getSortButtonTitle(iconTitleText, tooltip, translate);
+  const icon = useMemo(() => {
+    switch (sortDirection) {
+      case ColumnSortDirection.Ascending:
+        {
+          return isActive ? IconFilter3Desc : IconFilter3Asc;
+        }
+      case ColumnSortDirection.Descending:
+        return isActive ? IconFilter3Asc : IconFilter3Desc;
+      case undefined:
+      default:
+        {
+          return initialSortDirection === ColumnSortDirection.Ascending ? IconFilter3Asc : IconFilter3Desc;
+        }
     }
+  }, [sortDirection, isActive, initialSortDirection]);
+  const iconButton = _jsx(TextIconButton, {
+    className: "zen-sortable-column-button__dir-icon zen-caption__post-icon",
+    icon: icon,
+    iconPosition: isMobile ? ButtonIconPosition.Start : ButtonIconPosition.End,
+    type: ButtonType.TertiaryBlack,
+    title: iconTitle
+  });
+  return _jsx("div", {
+    className: classNames(["zen-sortable-column", isSortedBy ? `zen-sortable-column--active` : "", isMobile ? `zen-sortable-column--mobile` : ""]),
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    children: _jsx("div", {
+      className: classNames(["zen-caption", "zen-sortable-column__button", "zen-sortable-column-button", isSortedBy ? `zen-sortable-column-button--active` : "", sortDirection === ColumnSortDirection.Ascending ? "zen-sortable-column-button--dir-asc" : "zen-sortable-column-button--dir-desc"]),
+      title: iconTitle,
+      "aria-label": iconTitle,
+      onClick: () => {
+        onSortChange({
+          sortColumn: columnName,
+          sortDirection: sortDirection === ColumnSortDirection.None ? initialSortDirection : sortDirection === ColumnSortDirection.Ascending ? ColumnSortDirection.Descending : ColumnSortDirection.Ascending
+        });
+      },
+      children: _jsxs(_Fragment, {
+        children: [isMobile ? iconButton : null, _jsx("div", {
+          className: "zen-sortable-column-button__content zen-caption__content",
+          children: title
+        }), isMobile ? null : iconButton]
+      })
+    })
+  });
+};
+export class SortableColumnWrapper {
+  constructor(columnName, options, columnTitle, onSort) {
+    Object.defineProperty(this, "columnName", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: columnName
+    });
+    Object.defineProperty(this, "options", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: options
+    });
+    Object.defineProperty(this, "columnTitle", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: columnTitle
+    });
+    Object.defineProperty(this, "onSort", {
+      enumerable: true,
+      configurable: true,
+      writable: true,
+      value: onSort
+    });
+  }
+  renderHeader(title) {
+    return _jsx(SortableHeaderCell, {
+      columnName: this.columnName,
+      isSortedBy: this.options.isSortedBy === undefined ? false : this.options.isSortedBy,
+      sortDirection: this.options.sortDirection || ColumnSortDirection.None,
+      title: title,
+      tooltip: this.columnTitle,
+      onSortChange: this.onSort,
+      initialSortDirection: this.options.initialSortDirection
+    });
+  }
+  render(value, _) {
+    return value;
+  }
 }
 Object.defineProperty(SortableColumnWrapper, "translations", {
-    enumerable: true,
-    configurable: true,
-    writable: true,
-    value: [
-        "Sort by {COLUMN_NAME} ascending",
-        "Sort by {COLUMN_NAME} descending"
-    ]
-});
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value: ["Sort by {COLUMN_NAME} ascending", "Sort by {COLUMN_NAME} descending"]
+});