@onewelcome/react-lib-components 8.16.0 → 9.1.0

package/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.tsx

@@ -24,6 +24,7 @@ import { DataGridFilterValueSelect } from "./DataGridFilterValueSelect";
 import {
   DataGridColumnMetadata,
   DefaultOperators,
+  FilterOperator,
   PopoverTranslations
 } from "./DataGridFilters.interfaces";
 import { useRepeatFocus } from "../../../hooks/useRepeatFocus";
@@ -36,14 +37,14 @@ export type Props = {
   columnsMetadata: DataGridColumnMetadata[];
   values: string[];
   pickedValues: string[];
-  operator: string;
-  operators: string[];
+  operator: FilterOperator | null;
+  operators: FilterOperator[];
   onFilterSubmit: () => void;
   resetFields: () => void;
   setFilterOpen: (value: React.SetStateAction<boolean>) => void;
   setColumn: (column: React.SetStateAction<string>) => void;
-  setOperator: (operator: React.SetStateAction<string>) => void;
-  setOperators: (operators: React.SetStateAction<string[]>) => void;
+  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;
+  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;
   setValues: (values: React.SetStateAction<string[]>) => void;
   setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
   translations?: PopoverTranslations;
@@ -77,6 +78,9 @@ export const DataGridFilterPopover = ({
   } = translations || {};
   useRepeatFocus(popoverRef);
 
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);
+
   useEffect(() => {
     if (isOpen) {
       popoverRef.current?.focus();
@@ -92,74 +96,82 @@ export const DataGridFilterPopover = ({
       placement={{ horizontal: "left", vertical: "bottom" }}
       transformOrigin={{ horizontal: "left", vertical: "top" }}
     >
-      <div className={classes["popover"]}>
-        <div className={classes["controls"]}>
-          <SelectWrapper
-            label={columnSelectLabel}
-            value={column}
-            name={"column"}
-            onChange={e => {
-              setColumn(e.target.value);
-              const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);
+      {isOpen && (
+        <div className={classes["popover"]}>
+          <div className={classes["controls"]}>
+            <SelectWrapper
+              label={columnSelectLabel}
+              value={column}
+              name={"column"}
+              onChange={e => {
+                setColumn(e.target.value);
+                const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);
 
-              if (columnMetadata?.operators) {
-                setOperator(columnMetadata.operators[0]);
-                setOperators(columnMetadata.operators);
-              } else {
-                setOperator(Object.values(DefaultOperators)[0]);
-                setOperators(Object.values(DefaultOperators));
-              }
+                if (columnMetadata?.operators) {
+                  setOperator(columnMetadata.operators[0]);
+                  setOperators(columnMetadata.operators);
+                } else {
+                  setOperator(Object.values(DefaultOperators)[0]);
+                  setOperators(Object.values(DefaultOperators));
+                }
 
-              if (columnMetadata?.defaultValues) {
-                setPickedValues([]);
-                setValues(columnMetadata.defaultValues);
-              } else {
-                setPickedValues([]);
-                setValues([]);
-              }
-            }}
-          >
-            {columnsMetadata.map(({ name, headline }) => (
-              <Option className={classes["column-select-option"]} key={name} value={name}>
-                {headline}
-              </Option>
-            ))}
-          </SelectWrapper>
-          <SelectWrapper
-            label={operatorSelectLabel}
-            value={operator}
-            name={"operator"}
-            onChange={e => setOperator(e.target.value)}
-          >
-            {operators.map(operator => (
-              <Option key={operator} value={operator}>
-                {operator}
-              </Option>
-            ))}
-          </SelectWrapper>
-          <DataGridFilterValueSelect
-            column={column}
-            columnsMetadata={columnsMetadata}
-            values={values}
-            pickedValues={pickedValues}
-            setValues={setValues}
-            setPickedValues={setPickedValues}
-            translations={translations}
-          />
-        </div>
-        <div className={classes["actions"]}>
-          <Button onClick={onFilterSubmit}>{submitButtonTitle}</Button>
-          <Button
-            variant="text"
-            onClick={() => {
-              resetFields();
-              setFilterOpen(false);
-            }}
-          >
-            {cancelButtonTitle}
-          </Button>
+                if (columnMetadata?.defaultValues) {
+                  setPickedValues([]);
+                  setValues(columnMetadata.defaultValues);
+                } else {
+                  setPickedValues([]);
+                  setValues([]);
+                }
+              }}
+            >
+              {columnsMetadata.map(({ name, headline }) => (
+                <Option className={classes["column-select-option"]} key={name} value={name}>
+                  {headline}
+                </Option>
+              ))}
+            </SelectWrapper>
+            <SelectWrapper
+              label={operatorSelectLabel}
+              value={operator?.name || ""}
+              name={"operator"}
+              onChange={e => {
+                const selectedOperator = operators.find(op => op.name === e.target.value);
+                setOperator(selectedOperator || null);
+              }}
+            >
+              {operators.map(operator => (
+                <Option key={operator.name} value={operator.name}>
+                  {operator.name}
+                </Option>
+              ))}
+            </SelectWrapper>
+            <DataGridFilterValueSelect
+              column={column}
+              columnsMetadata={columnsMetadata}
+              values={values}
+              pickedValues={pickedValues}
+              setValues={setValues}
+              setPickedValues={setPickedValues}
+              translations={translations}
+              operator={operator}
+            />
+          </div>
+          <div className={classes["actions"]}>
+            <Button onClick={onFilterSubmit} disabled={hasValidationError}>
+              {submitButtonTitle}
+            </Button>
+            <Button
+              variant="text"
+              onClick={() => {
+                resetFields();
+                setFilterOpen(false);
+              }}
+            >
+              {cancelButtonTitle}
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
     </Popover>
   );
 };

package/src/components/DataGrid/DataGridFilters/DataGridFilterService.ts

@@ -20,6 +20,7 @@ import {
   DefaultOperators,
   Filter,
   FilterEditorMode,
+  FilterOperator,
   FiltersState
 } from "./DataGridFilters.interfaces";
 
@@ -29,8 +30,8 @@ export const useDataGridFilter = (
   filterState: FiltersState
 ) => {
   const [column, setColumn] = useState("");
-  const [operator, setOperator] = useState("");
-  const [operators, setOperators] = useState<string[]>(Object.values(DefaultOperators));
+  const [operator, setOperator] = useState<FilterOperator | null>(null);
+  const [operators, setOperators] = useState<FilterOperator[]>(Object.values(DefaultOperators));
   const [values, setValues] = useState<string[]>([]);
   const [pickedValues, setPickedValues] = useState<string[]>([]);
   const [allowedColumnsMetaData, setAllowedColumnsMetaData] = useState<DataGridColumnMetadata[]>(
@@ -44,7 +45,7 @@ export const useDataGridFilter = (
 
   const resetFields = () => {
     setColumn("");
-    setOperator("");
+    setOperator(null);
     setValues([]);
     setPickedValues([]);
   };

package/src/components/DataGrid/DataGridFilters/DataGridFilterTag.tsx

@@ -19,7 +19,12 @@ import { Icon, Icons } from "../../Icon/Icon";
 import { RemoveButton } from "../../Tag/RemoveButton";
 import { Typography } from "../../Typography/Typography";
 import classes from "./DataGridFilter.module.scss";
-import { Filter, FilterEditorMode, TagTranslations } from "./DataGridFilters.interfaces";
+import {
+  Filter,
+  FilterEditorMode,
+  TagTranslations,
+  DataGridColumnMetadata
+} from "./DataGridFilters.interfaces";
 
 export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
   customEditTagContent?: React.ReactElement;
@@ -30,14 +35,27 @@ export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
   onFilterOpen: () => void;
   translations?: TagTranslations;
   dateTagCaption?: string;
+  columnsMetadata?: DataGridColumnMetadata[];
 }
 
-const EditTagContent = ({ filter, or, other }: { filter: Filter; or: string; other: string }) => {
+const EditTagContent = ({
+  filter,
+  or,
+  other,
+  columnsMetadata
+}: {
+  filter: Filter;
+  or: string;
+  other: string;
+  columnsMetadata?: DataGridColumnMetadata[];
+}) => {
   const { column, operator, value } = filter;
+  const columnHeadlineWithFallback =
+    columnsMetadata?.find(meta => meta.name === column)?.headline || column;
 
   return (
     <Fragment>
-      {column} {operator} {value.length > 0 && <b>{value[0]}</b>}
+      {columnHeadlineWithFallback} {operator?.name} {value.length > 0 && <b>{value[0]}</b>}
       {value.length >= 2 && (
         <>
           {" "}
@@ -64,6 +82,7 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
     translations,
     dateTagCaption,
     customEditTagContent,
+    columnsMetadata,
     ...rest
   }: DataGridFilterTagProps,
   ref
@@ -99,7 +118,12 @@ export const DataGridFilterTagComponent: ForwardRefRenderFunction<
             {customEditTagContent ? (
               React.cloneElement(customEditTagContent, { filter })
             ) : (
-              <EditTagContent filter={filter} or={or} other={other} />
+              <EditTagContent
+                filter={filter}
+                or={or}
+                other={other}
+                columnsMetadata={columnsMetadata}
+              />
             )}
           </Typography>
         )}

package/src/components/DataGrid/DataGridFilters/DataGridFilterValueSelect.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { Option } from "../../Form/Select/SingleSelect/Option";
 import { MultiOption } from "../../Form/Select/MultiSelect/MultiOption";
 import { MultiSelectWrapper } from "../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
@@ -33,6 +33,7 @@ export type Props = {
   setValues: (values: React.SetStateAction<string[]>) => void;
   setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
   translations?: PopoverTranslations;
+  operator?: { allowEmptyValues: boolean } | null;
 };
 
 export const DataGridFilterValueSelect = ({
@@ -42,8 +43,11 @@ export const DataGridFilterValueSelect = ({
   pickedValues,
   setValues,
   setPickedValues,
-  translations
+  translations,
+  operator
 }: Props) => {
+  const [touched, setTouched] = useState(false);
+
   const {
     valueSelectLabel = "Value",
     addNewValueLabel = "Create new",
@@ -54,18 +58,30 @@ export const DataGridFilterValueSelect = ({
   const disableAddNew = columnMetadata?.disableAddNew;
   const valueSelectType = columnMetadata?.valueSelectType;
 
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0 && touched);
+
   const addNewBtnProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
     title: addNewValueButtonTitle,
     type: "button"
   };
 
-  const onChangeHandler = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setPickedValues(
-      [...Array.from(e.target.options)]
-        .filter(option => option.selected)
-        .map(option => option.value)
-    );
-  };
+  const onChangeHandler = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      const { selectedOptions, value } = e.target;
+
+      let newValues: string[];
+
+      if (valueSelectType === ValueSelectType.single) {
+        newValues = value ? [value] : [];
+      } else {
+        newValues = Array.from(selectedOptions, option => option.value);
+      }
+      setPickedValues(newValues);
+      setTouched(true);
+    },
+    [valueSelectType]
+  );
 
   const selectProps = {
     addNew: disableAddNew
@@ -93,6 +109,7 @@ export const DataGridFilterValueSelect = ({
       value={pickedValues[0]}
       onChange={onChangeHandler}
       selectProps={selectProps}
+      error={hasValidationError}
     >
       {values.map(value => (
         <Option key={value} value={value}>
@@ -107,6 +124,7 @@ export const DataGridFilterValueSelect = ({
       value={pickedValues}
       onChange={onChangeHandler}
       selectProps={selectProps}
+      error={hasValidationError}
     >
       {values.map(value => (
         <MultiOption key={value} value={value}>

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -14,10 +14,15 @@
  *    limitations under the License.
  */
 
+export interface FilterOperator {
+  name: string;
+  allowEmptyValues: boolean;
+}
+
 export interface Filter {
   id: string;
   column: string;
-  operator: string;
+  operator: FilterOperator | null;
   value: string[];
 }
 
@@ -48,18 +53,18 @@ export type FiltersState = {
 
 export type FilterEditorMode = "ADD" | "EDIT" | "ADD_DATE";
 
-export enum DefaultOperators {
-  is = "is",
-  isNot = "is not",
-  contains = "contains",
-  doesNotContain = "does not contain",
-  isEmpty = "is empty"
-}
+export const DefaultOperators: Record<string, FilterOperator> = {
+  is: { name: "is", allowEmptyValues: false },
+  isNot: { name: "is not", allowEmptyValues: false },
+  contains: { name: "contains", allowEmptyValues: false },
+  doesNotContain: { name: "does not contain", allowEmptyValues: false },
+  isEmpty: { name: "is empty", allowEmptyValues: true }
+};
 
 export interface DataGridColumnMetadata {
   name: string;
   headline: string;
-  operators?: string[];
+  operators?: FilterOperator[];
   defaultValues?: string[];
   disableAddNew?: boolean;
   allowSingleFilterOnly?: boolean;

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.tsx

@@ -70,6 +70,12 @@ export const DataGridToolbar = ({
   const { clearButtonCaption = "Clear all filters" } = translations?.toolbar || {};
   return (
     <Fragment>
+      {dateFilterValue && (
+        <DataGridDateFilter
+          dateFilterValue={dateFilterValue}
+          onDateFilterValueChange={onDateFilterValueChange}
+        />
+      )}
       {columnsMetadata &&
         state.filters.map(filter => (
           <DataGridFilter
@@ -120,13 +126,6 @@ export const DataGridToolbar = ({
             </Typography>
           </button>
         )}
-
-        {dateFilterValue && (
-          <DataGridDateFilter
-            dateFilterValue={dateFilterValue}
-            onDateFilterValueChange={onDateFilterValueChange}
-          />
-        )}
       </div>
     </Fragment>
   );

package/src/components/DataGrid/testUtils.ts

@@ -51,8 +51,8 @@ export const useMockFilteringLogic = <T extends { [k: string]: string }>(
   const filterRow = (row: T) => {
     let shouldBeDiscarded: boolean[] = [];
     state.filters.forEach(filter => {
-      const reduce = filter.operator == "is" ? reduceDisjunction : reduceConjunction;
-      const operatorPredicate = operatorPredicateMap[filter.operator];
+      const reduce = filter.operator?.name == "is" ? reduceDisjunction : reduceConjunction;
+      const operatorPredicate = operatorPredicateMap[filter.operator?.name || ""];
       shouldBeDiscarded = [
         ...shouldBeDiscarded,
         !reduce(filter.value, val => operatorPredicate(row[filter.column], val))

package/src/components/Form/FileUpload/FileUpload.tsx

@@ -45,10 +45,6 @@ export interface Props extends FileUploadType {
   maxFileSizeInBytes?: number;
   selectButtonText?: string;
   dragAndDropText?: string;
-  /**
-   * @deprecated use the `helperText` prop instead
-   */
-  subText?: string;
   onDragOver?: DragEventHandler;
   onDragEnter?: DragEventHandler;
   onDragLeave?: DragEventHandler;
@@ -84,7 +80,6 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     onDragLeave,
     wrapperProps,
     onDrop,
-    subText, // @deprecated
     onRequestedFileAction,
     exceedingMaxSizeErrorText,
     fileList,
@@ -93,7 +88,7 @@ const FileUploadComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
     isRequired = true,
     invalidDropErrorMessage = "Invalid file format. Supported formats are: $accept.",
     noMultipleFileDropErrorMessage = "You can upload only a single file.",
-    helperText = subText,
+    helperText,
     ...rest
   }: Props,
   ref

package/src/components/Icon/Icon.module.scss

@@ -393,3 +393,27 @@
   content: "\e953";
   @include fontProperties();
 }
+.icon-arrow-right:before {
+  content: "\e95a";
+  @include fontProperties();
+}
+.icon-perm-identity:before {
+  content: "\e955";
+  @include fontProperties();
+}
+.icon-cable:before {
+  content: "\e956";
+  @include fontProperties();
+}
+.icon-dashboard:before {
+  content: "\e957";
+  @include fontProperties();
+}
+.icon-fido-device:before {
+  content: "\e958";
+  @include fontProperties();
+}
+.icon-security:before {
+  content: "\e959";
+  @include fontProperties();
+}

package/src/components/Icon/Icon.tsx

@@ -104,7 +104,13 @@ export enum Icons {
   ExternalLink = "external-link",
   SideSheetHandle = "sidesheet-handle",
   PendingCircle = "pending-circle",
-  MinusCircle = "minus-circle"
+  MinusCircle = "minus-circle",
+  ArrowRight = "arrow-right",
+  PermIdentity = "perm-identity",
+  Cable = "cable",
+  Dashboard = "dashboard",
+  FidoDevice = "fido-device",
+  Security = "security"
 }
 
 type Tag = "span" | "div" | "i";

package/src/font/README.md

@@ -42,4 +42,6 @@ Click on the `Generate Font` button on the bottom part of the page and then `Dow
 
 ## Merging fonts
 
-Please respect the current content of the `Icon.module.scss` and replace it with the new content provided in the downloaded zip package. Also, don't forget to replace current fonts and `selection.json` in the `/font` directory.
+Please respect the current content of the `Icon.module.scss` and replace it with the new content provided in the downloaded zip package. 
+Also, don't forget to replace current fonts and `selection.json` in the `/font` directory.
+Finally, make sure to add any new icons to the `Icon.tsx` list so they are available for use.

package/src/font/icomoon.svg

@@ -92,5 +92,11 @@
 <glyph unicode="&#xe952;" glyph-name="pending-circle" d="M511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-226.302 0-409.598 183.294-409.598 409.598s183.295 409.6 409.598 409.6c226.308 0 409.601-183.296 409.601-409.6s-183.294-409.598-409.601-409.598zM255.999 371.203c42.415 0 76.8 34.382 76.8 76.796s-34.385 76.8-76.8 76.8c-42.415 0-76.8-34.385-76.8-76.8s34.385-76.796 76.8-76.796zM511.997 371.203c42.418 0 76.8 34.382 76.8 76.796s-34.382 76.8-76.8 76.8c-42.414 0-76.797-34.385-76.797-76.8s34.385-76.796 76.797-76.796zM767.998 371.203c42.412 0 76.8 34.382 76.8 76.796s-34.388 76.8-76.8 76.8c-42.418 0-76.8-34.385-76.8-76.8s34.382-76.796 76.8-76.796z" />
 <glyph unicode="&#xe953;" glyph-name="minus-circle" d="M255.999 499.2v-102.401h511.999v102.401h-511.999zM511.997 959.999c-282.621 0-511.997-229.375-511.997-511.998 0-282.62 229.376-512.001 511.997-512.001 282.623 0 512.003 229.38 512.003 512.001 0 282.623-229.38 511.998-512.003 511.998zM511.997 38.402c-225.789 0-409.598 183.81-409.598 409.598 0 225.792 183.808 409.6 409.598 409.6 225.792 0 409.601-183.808 409.601-409.6 0-225.788-183.81-409.598-409.601-409.598z" />
 <glyph unicode="&#xe954;" glyph-name="arrow-left" d="M511.997-63.999l90.24 90.24-357.117 357.76h778.879v128.002h-778.879l357.762 357.12-90.885 90.877-511.996-512.002 511.996-511.996z" />
+<glyph unicode="&#xe955;" glyph-name="perm-identity" d="M511.999 832c70.399 0 127.999-57.6 127.999-127.999s-57.6-127.999-127.999-127.999c-70.399 0-127.999 57.6-127.999 127.999s57.6 127.999 127.999 127.999zM511.999 256c172.8 0 371.2-82.56 384-127.999v-64h-768v63.36c12.799 46.080 211.2 128.64 384 128.64zM511.999 959.999c-141.439 0-256-114.559-256-256s114.559-256 256-256c141.439 0 256 114.559 256 256s-114.559 256-256 256zM511.999 384c-170.88 0-511.999-85.759-511.999-256v-192h1024v192c0 170.239-341.119 256-511.999 256z" />
+<glyph unicode="&#xe956;" glyph-name="cable" d="M967.111 846.221v56.889c0 31.288-25.6 56.888-56.893 56.888h-113.773c-31.293 0-56.893-25.6-56.893-56.888v-56.889h-56.887v-227.555c0-31.288 25.6-56.888 56.887-56.888h56.893v-398.225c0-62.573-51.2-113.773-113.78-113.773s-113.78 51.2-113.78 113.773v568.892c0 125.724-101.828 227.555-227.553 227.555s-227.555-101.832-227.555-227.555v-398.225h-56.889c-31.288 0-56.888-25.6-56.888-56.887v-227.553h56.888v-56.893c0-31.287 25.6-56.887 56.889-56.887h113.777c31.289 0 56.889 25.6 56.889 56.887v56.893h56.888v227.553c0 31.287-25.6 56.887-56.888 56.887h-56.889v398.225c0 62.577 51.2 113.777 113.779 113.777s113.779-51.2 113.779-113.777v-568.892c0-125.72 101.828-227.553 227.555-227.553s227.553 101.833 227.553 227.553v398.225h56.893c31.287 0 56.887 25.6 56.887 56.888v227.555h-56.887z" />
+<glyph unicode="&#xe957;" glyph-name="dashboard" d="M910.223 846.223v-113.777h-227.556v113.777h227.556zM341.333 846.223v-341.333h-227.556v341.333h227.556zM910.223 391.111v-341.333h-227.556v341.333h227.556zM341.333 163.556v-113.777h-227.556v113.777h227.556zM1024 960h-455.111v-341.333h455.111v341.333zM455.111 960h-455.111v-568.889h455.111v568.889zM1024 504.889h-455.111v-568.889h455.111v568.889zM455.111 277.333h-455.111v-341.333h455.111v341.333z" />
+<glyph unicode="&#xe958;" glyph-name="fido-device" d="M995.681 762.379c42.496-42.502 36.477-117.432-13.457-167.363l-452.042-452.040c-19.971-19.977-49.944-22.384-66.944-5.384l-15.388 15.42-216.983-217.012-230.865 230.868 216.983 217.012-15.394 15.359c-17 17.001-14.592 46.975 5.382 66.945l452.043 452.043c49.928 49.931 124.862 55.955 167.365 13.453l169.3-169.301zM203.528 216.481l-46.173 46.176-36.164-36.162 46.173-46.176 36.164 36.162zM326.655 93.357l-46.173 46.17-36.163-36.162 46.173-46.17 36.163 36.162zM908.932 704.475l-140.457 140.456c-24.967 24.966-65.444 24.966-90.411 0s-24.967-65.443 0-90.408l140.457-140.456c24.967-24.966 65.444-24.966 90.411 0 24.961 24.965 24.961 65.443 0 90.408z" />
+<glyph unicode="&#xe959;" glyph-name="security" d="M512 960l-418.909-186.182v-279.273c0-258.327 178.734-499.898 418.909-558.545 240.174 58.647 418.909 300.218 418.909 558.545v279.273l-418.909 186.182zM512 448.467h325.818c-24.669-191.768-152.669-362.589-325.818-416.116v415.65h-325.818v265.309l325.818 144.756v-409.6z" />
+<glyph unicode="&#xe95a;" glyph-name="arrow-right" d="M511.997 960l-90.237-90.24 357.116-357.758h-778.874v-127.998h778.874l-357.116-357.764 90.237-90.24 512.001 512.001-512.001 511.999z" />
 <glyph unicode="&#xe9d1;" glyph-name="eye-blocked" d="M945.942 945.942c-18.746 18.744-49.136 18.744-67.882 0l-202.164-202.164c-51.938 15.754-106.948 24.222-163.896 24.222-223.318 0-416.882-130.042-512-320 41.122-82.124 100.648-153.040 173.022-207.096l-158.962-158.962c-18.746-18.746-18.746-49.136 0-67.882 9.372-9.374 21.656-14.060 33.94-14.060s24.568 4.686 33.942 14.058l864 864c18.744 18.746 18.744 49.138 0 67.884zM416 640c42.24 0 78.082-27.294 90.92-65.196l-121.724-121.724c-37.902 12.838-65.196 48.68-65.196 90.92 0 53.020 42.98 96 96 96zM110.116 448c38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.862 7.3-9.962-27.328-15.412-56.822-15.412-87.596 0-54.89 17.286-105.738 46.7-147.418l-60.924-60.924c-52.446 36.842-97.202 83.882-131.66 138.342zM768 518c0 27.166-4.256 53.334-12.102 77.898l-321.808-321.808c24.568-7.842 50.742-12.090 77.91-12.090 141.382 0 256 114.618 256 256zM830.026 670.026l-69.362-69.362c1.264-0.786 2.53-1.568 3.786-2.368 60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-38.664 0-76.902 4.76-113.962 14.040l-76.894-76.894c59.718-21.462 123.95-33.146 190.856-33.146 223.31 0 416.876 130.042 512 320-45.022 89.916-112.118 166.396-193.974 222.026z" />
 </font></defs></svg>