\n \n
\n );\n case TeaserHeadingType.h4:\n return (\n\n \n
\n );\n default:\n return (\n\n \n
\n );\n }\n};\n","import { EntityType, ISearchResult } from \"types\";\nimport { HorizontalTeaserProps, LabelProps } from \"components\";\nimport { convertMinutesToDate, getToolTypeIcon } from \"utils\";\nimport { i18nService } from \"services\";\n\nconst getMeta = (result: ISearchResult) => {\n const publishedOn = i18nService.copy[\"siteSearch.publishedOn\"];\n const publishedDate = convertMinutesToDate(+result.document.created);\n\n switch (result.document.bundle) {\n case EntityType.article:\n return `${publishedOn} ${publishedDate}`;\n case EntityType.event: {\n const timestamps = result.document.event_timestamps;\n\n if (!timestamps) return undefined;\n\n let days = timestamps.slice().sort();\n const nbDays = days.length;\n\n if (!nbDays) return undefined;\n\n const firstDay = convertMinutesToDate(+days[0]);\n const lastDay = convertMinutesToDate(+days[nbDays - 1]);\n\n const till = i18nService.copy[\"siteSearch.eventTill\"];\n const startsOn = i18nService.copy[\"siteSearch.eventStartsOn\"];\n\n switch (result.document.event_type) {\n case \"one-day-event\":\n return firstDay;\n case \"multi-day-event\":\n return `${firstDay} ${till} ${lastDay}`;\n case \"multi-day-event-non-consecutive\":\n return `${startsOn} ${firstDay}`;\n default:\n return undefined;\n }\n }\n default:\n return undefined;\n }\n};\n\nconst getMediaLabel = (result: ISearchResult): LabelProps | undefined => {\n switch (result.document.bundle) {\n case EntityType.tool:\n if (!result.document.toolType) return undefined;\n\n const { key, label } = result.document.toolType;\n\n if (!label) return undefined;\n\n return {\n Icon: getToolTypeIcon(key),\n text: label,\n };\n default:\n return undefined;\n }\n};\n\nconst getTeaserType = (result: ISearchResult): string | undefined => {\n switch (result.document.bundle) {\n case EntityType.tool:\n return result.document.toolType?.key || undefined;\n default:\n return undefined;\n }\n};\n\nconst getBundleType = (result: ISearchResult): string | undefined => {\n switch (result.document.bundle) {\n case EntityType.tool:\n return '(tool)';\n case EntityType.dossier:\n return '(dossier)';\n default:\n return undefined;\n }\n};\n\nexport const normalizeSearchResult = (\n result: ISearchResult\n): HorizontalTeaserProps => {\n return {\n url: result.document.url,\n title: result.document.title,\n intro: result.highlights.intro || result.document.intro,\n meta: getMeta(result),\n image: result.document.metaImage,\n breadcrumbs: result.document.breadcrumbs,\n mediaLabel: getMediaLabel(result),\n teaserType: getTeaserType(result),\n bundle: getBundleType(result),\n };\n};\n","import React from \"react\";\nimport { ToolType } from \"types\";\n\nimport {\n File as FileIcon,\n Cube,\n Book,\n Cursor,\n Verified,\n Video,\n Globe,\n Policy,\n} from \"assets/icons\";\n\nexport const getToolTypeIcon = (\n toolType: ToolType\n): React.ComponentType\n {media}\n
\n );\n};\n","import React from \"react\";\nimport { IImage } from \"types\";\nimport { GallerySlide, SlideProps } from \"components\";\n\ninterface ImageSlideProps extends IImage, SlideProps {}\n\nexport const ImageSlide: React.FC\n {(title || description) && (\n
\n \n
\n )}\n {totalSlides && totalSlides > 1 && (\n \n {title && {title}}\n {description && (\n
\n \n {handlePrevClick && (\n
\n )}\n \n {preview && (\n
\n );\n\n return \n {iframe ? (\n handlePlayerReady()}\n controls\n onPlay={() => setPlaying(true)}\n onPause={() => setPlaying(false)}\n config={{\n youtube: {\n embedOptions: {\n host: \"https://www.youtube-nocookie.com\",\n },\n },\n }}\n width=\"100%\"\n height=\"100%\"\n />\n )}\n
\n );\n\n return \n
\n \n );\n};\n","import { useEffect } from \"react\";\n\nexport const useCloseOnEscape = (handleClose?: () => void) => {\n useEffect(() => {\n if (!handleClose) {\n return;\n }\n\n const closeOnEscape = (event: KeyboardEvent) => {\n if (event.code === \"Escape\") {\n handleClose();\n }\n };\n\n document.addEventListener(\"keydown\", closeOnEscape);\n\n return () => document.removeEventListener(\"keydown\", closeOnEscape);\n }, [handleClose]);\n};\n","import React, { useEffect, useMemo } from \"react\";\nimport parse from \"html-react-parser\";\n\ninterface EmbedCodeProps {\n embed: string;\n}\n\nexport const EmbedCode: React.FC\n {children}\n
\n);\n","import classNames from \"classnames\";\nimport React from \"react\";\n\ninterface LoaderProps {\n size?: \"s\" | \"m\" | \"l\";\n theme?: \"default\" | \"light\" | \"dark\";\n}\n\nexport const Loader: React.FC\n
\n);\n","import React from \"react\";\n\nimport { IActiveFacet } from \"types\";\nimport { Close } from \"assets/icons\";\nimport { i18nService } from \"services\";\n\ninterface ActiveFacetProps {\n activeFacet: IActiveFacet;\n}\n\nexport const ActiveFacet: React.FC- \n {breadcrumbs.map((breadcrumb) => (\n
- \n {breadcrumb.isMultiLink && breadcrumb.links ? (\n <>\n {breadcrumb.links?.map((item, index) => (\n \n {item.text}\n {index < (breadcrumb.links?.length || 0) - 1 && \",\"}\n \n ))}\n \n ) : (\n {breadcrumb.text}\n )}\n\n \n
\n \n \n ))}\n
\n {activeFacet.label}: \n {activeFacet.activeOptions?.map((option) => (\n \n \n {i18nService.copy[\"a11y.remove\"]}\n \n\n {option.label}\n
\n);\n","import React from \"react\";\n\nimport { IActiveFacet } from \"types\";\nimport { i18nService } from \"services\";\n\nimport { ActiveFacet } from \"./ActiveFacet\";\n\ninterface ActiveFacetsProps {\n activeFacets: IActiveFacet[];\n clearAllFacets: () => void;\n}\n\nexport const ActiveFacets: React.FC\n \n {i18nService.copy[\"facets.removeAllFacets\"]}\n \n
\n);\n","import React, { useState } from \"react\";\n\nimport { BreakpointSize, IActiveFacet, IFormSchema } from \"types\";\nimport { FormBuilder } from \"components\";\nimport { i18nService } from \"services\";\nimport { useBreakpoint } from \"utils\";\n\nimport { ActiveFacets, FacetsTrigger, MobileFacets } from \".\";\n\ninterface FacetsProps extends IFormSchema {\n activeFacets?: IActiveFacet[];\n clearAllFacets: () => void;\n mobileTitle?: string;\n nbResults?: number;\n isLoading?: boolean;\n}\n\nexport const Facets: React.FC{i18nService.copy[\"facets.selectedFacets\"]}
\n- \n {activeFacets.map((activeFacet) => (\n
- \n
\n \n ))}\n
\n {!!activeFacets?.length && (\n {}} // dummy handler, effects are added onChange of fields\n />\n
\n );\n\n if (isMobile) {\n return (\n \n {i18nService.copy[\"facets.selectFacets\"]}\n
\n\n setMobileOpen(true)}\n />\n {isMobileOpen && (\n setMobileOpen(false)}\n mobileTitle={mobileTitle}\n isLoading={isLoading}\n nbResults={nbResults}\n />\n )}\n
\n );\n }\n\n return <>{renderFacets()};\n};\n","import { useState, useEffect } from \"react\";\nimport { BreakpointSize } from \"types\";\n\nexport const useBreakpoint = (\n breakpoint: BreakpointSize = BreakpointSize.m\n) => {\n const breakpointMatches = () =>\n window.matchMedia(`(max-width: ${breakpoint}px)`).matches;\n\n const [matches, setMatches] = useState(breakpointMatches());\n\n useEffect(() => {\n const updateMatches = () => {\n setMatches(breakpointMatches());\n };\n\n window.addEventListener(\"resize\", updateMatches);\n\n // remove listener on unmount\n return () => {\n window.removeEventListener(\"resize\", updateMatches);\n };\n });\n\n return { matches };\n};\n","import React, { MouseEventHandler, useMemo } from \"react\";\n\nimport { i18nService } from \"services\";\nimport { Button } from \"components\";\nimport { Filter } from \"assets/icons\";\n\ninterface FacetsTriggerProps {\n onClick: MouseEventHandler\n {mobileTitle && (\n
\n {mobileTitle}
\n )}\n {renderFacets()}\n\n
\n \n {i18nService.copy[\"languageSwitch.chooseLanguage\"]}:\n
\n \n );\n};\n","import { RefObject, useEffect } from \"react\";\n\n// pass handler in a useCallback to prevent unneeded rerenders\nexport const useOnClickOutside = (\n ref: RefObject\n setOpen(!isOpen)}\n >\n \n
\n - \n {items.map((item) => (\n
- \n {item.active ? (\n \n \n {i18nService.copy[\"languageSwitch.chosenLanguage\"]}\n {\": \"}\n \n {item.language}\n \n ) : (\n \n {item.language}\n \n )}\n \n ))}\n
\n \n {error?.message && (\n \n {error?.message}\n \n )}\n
\n );\n});\n","import React from \"react\";\n\nimport { i18nService } from \"services\";\n\ninterface FormRequiredProps {}\n\nexport const FormRequired: React.FC\n \n {error?.message && (\n \n {error?.message}\n \n )}\n
\n );\n});\n","import React from \"react\";\nimport {\n Control,\n Controller,\n FieldError,\n RegisterOptions,\n} from \"react-hook-form\";\n\nimport { ICheckboxField, ICheckboxGroup } from \"types\";\nimport { FormLabel } from \"components\";\n\nimport { CheckboxField } from \"./CheckboxField\";\nimport { useExpandableOptions } from \"../hooks\";\n\ninterface CheckboxGroupProps extends ICheckboxGroup {\n options: ICheckboxField[];\n control: Control;\n validation?: RegisterOptions;\n value?: string[];\n error?: FieldError | null;\n}\n\nexport const CheckboxGroup: React.FC<\n CheckboxGroupProps & React.InputHTMLAttributes\n {expandableMoreText && isExpanded === false && (\n setExpanded(true)}\n >\n \n \n {expandableMoreText?.replace(\"@number\", String(nbHiddenOptions))}\n \n setExpanded(false)}\n >\n \n \n {expandableLessText?.replace(\"@number\", String(nbHiddenOptions))}\n \n
\n );\n\n return {\n isExpanded,\n setExpanded,\n visibleOptions,\n nbHiddenOptions,\n hiddenOptionIsActive,\n renderExpandableButton,\n };\n};\n","import React, { ChangeEvent, forwardRef, useEffect, useState } from \"react\";\nimport { FieldError } from \"react-hook-form\";\nimport classNames from \"classnames\";\n\nimport { ISelectField } from \"types\";\nimport { FormLabel } from \"components\";\nimport { useOnPersistedPageShow } from \"utils\";\nimport { ChevronDown } from \"assets/icons\";\n\nimport { FormText } from \"../components\";\n\ninterface SelectFieldProps extends ISelectField {\n error?: FieldError | null;\n}\n\nexport const SelectField = forwardRef<\n HTMLSelectElement,\n SelectFieldProps & React.InputHTMLAttributes\n {prefixText &&
\n \n );\n }\n);\n","import React, { useEffect, useMemo } from \"react\";\nimport { SubmitHandler, useForm } from \"react-hook-form\";\n\nimport {\n ICheckboxField,\n ICheckboxGroup,\n IField,\n IFieldType,\n IFormSchema,\n IInputField,\n ISelectField,\n} from \"types\";\nimport { i18nService } from \"services\";\nimport { useOnPersistedPageShow } from \"utils\";\n\nimport {\n CheckboxField,\n CheckboxGroup,\n InputField,\n SelectField,\n} from \"./fields\";\nimport { FormText, SubmitButton } from \"./components\";\n\ninterface FormBuilderProps extends IFormSchema {\n submitLabel?: string;\n onFormSubmit?: SubmitHandler\n
\n \n {error?.message && (\n \n {error?.message}\n \n )}\n \n
\n \n );\n};\n","import { i18nService } from \"services\";\nimport { IFieldType, IFormSchema } from \"types\";\n\nimport { INewsletterOption } from \"types\";\n\nexport const makeSchema = (\n id: string,\n newsletters: INewsletterOption[]\n): IFormSchema => ({\n disableAfterSubmit: true,\n fields: [\n {\n name: `email_${id}`,\n label: i18nService.copy[\"newsletter.email\"],\n type: IFieldType.text,\n validation: {\n required: i18nService.copy[\"form.required\"],\n pattern: {\n value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i,\n message: i18nService.copy[\"form.invalidEmail\"],\n },\n },\n },\n {\n name: `audiences_${id}`,\n type: IFieldType.checkboxGroup,\n label: i18nService.copy[\"newsletter.audiencesLabel\"],\n options: newsletters.map(({ title, id }) => ({\n type: IFieldType.checkbox,\n name: id,\n label: title,\n value: id,\n })),\n validation: {\n required: i18nService.copy[\"form.requiredCheckbox\"],\n },\n },\n {\n name: `optin_${id}`,\n type: IFieldType.checkbox,\n label: i18nService.copy[\"newsletter.optin\"],\n validation: {\n required: i18nService.copy[\"form.required\"],\n },\n },\n ],\n});\n","import { FormBuilder } from \"components/form/FormBuilder\";\nimport React from \"react\";\nimport { SerializedError } from \"@reduxjs/toolkit\";\n\nimport { i18nService } from \"services\";\nimport { IAPIState, INewsletterSubmitData, MessageTheme } from \"types\";\nimport { FormRequired, Message } from \"components\";\n\nimport { NewsletterFormContainerProps } from \"../containers\";\nimport { makeSchema } from \"./formSchema\";\n\ninterface NewsletterFormProps extends NewsletterFormContainerProps {\n onSubmit: (data: INewsletterSubmitData) => void;\n status: IAPIState;\n clearState: () => void;\n error?: SerializedError | string | null;\n successMessage?: string | null;\n}\n\nexport const NewsletterForm: React.FC\n {submitLabel && (\n \n \n \n {resetLabel || i18nService.copy[\"general.reset\"]}\n \n \n \n )}\n
\n \n {error} }\n {successMessage && (\n {successMessage} \n )}\n
\n );\n};\n","import React, {\n FormEvent,\n useEffect,\n useState,\n ChangeEvent,\n useMemo,\n} from \"react\";\nimport classNames from \"classnames\";\nimport { debounce } from \"lodash-es\";\n\nimport { i18nService } from \"services\";\nimport { Search } from \"assets/icons\";\n\nconst SEARCH_RATE_LIMIT = 500;\n\ninterface SearchFieldProps {\n id: string;\n searchType?: \"onSubmit\" | \"onChange\";\n initSearchValue?: string;\n isSubmitting?: boolean;\n onSubmit?: (data: any) => void;\n onChange?: (data: any) => void;\n menuOverlayOpen?: boolean;\n isOpen?: boolean;\n onInputFocus?: () => void;\n onInputBlur?: () => void;\n onInputClick?: () => void;\n showFocusShadow?: boolean;\n}\n\nexport const SearchField: React.FC\n
{message}
;\n};\n","import React from \"react\";\n\nimport { ISearchResult } from \"types\";\n\nimport { normalizeSearchResult } from \"utils\";\nimport { HorizontalTeaser } from \"components\";\n\ninterface SearchResultsProps {\n results: ISearchResult[];\n currentPage?: number;\n}\n\nexport const SearchResults: React.FC- \n {results.map((result, index) => (\n
- \n
\n
\n);\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { SerializedError } from \"@reduxjs/toolkit\";\nimport FocusTrap from \"focus-trap-react\";\nimport classnames from \"classnames\";\n\nimport { SearchFilterDropdown, SearchField } from \"components\";\nimport {\n IAPIState,\n IAutosuggest,\n ISearchResult,\n ISearchSubmitData,\n} from \"types\";\n\ninterface SearchFilterProps {\n id: string;\n clearState: () => void;\n onSearch: (data: ISearchSubmitData) => void;\n status: IAPIState;\n error?: SerializedError | null;\n results?: ISearchResult[];\n autosuggest?: IAutosuggest[];\n hasSearched?: boolean;\n}\n\nexport const SearchFilter: React.FC\n
\n {results && !!results.length && (\n \n {i18nService.copy[\"siteSearch.error\"]}\n
\n )}\n\n
\n )}\n \n
\n \n \n {isFocus && }\n \n );\n};\n","import React from \"react\";\n\nexport interface SearchFilterItemProps {\n url: string;\n title: string;\n bundle: string | undefined;\n}\n\nexport const SearchFilterItem: React.FC\n
\n )}\n {isDropdownOpen && !hasSearched && !!autosuggest?.length && (\n \n
\n )}\n \n
\n );\n }\n\n if (results?.length === 0) {\n return (\n \n {i18nService.copy[\"siteSearch.noResults\"]}\n
\n );\n }\n\n return (\n- \n {results.map((result: IAutosuggest | ISearchResult, index: number) => {\n // ISearchResult\n if (\"document\" in result) {\n return (\n
- \n
- \n
\n \n );\n })}\n
\n
\n );\n};\n","import React from \"react\";\n\nimport { ISearchResult } from \"types\";\n\nimport { normalizeSearchResult } from \"utils\";\nimport { DefaultTeaser } from \"components\";\nimport classNames from \"classnames\";\n\ninterface ToolSearchResultsProps {\n results: ISearchResult[];\n currentPage?: number;\n isLoading?: boolean;\n}\n\nexport const ToolSearchResults: React.FC{renderInner()}
\n - \n {results.map((result, index) => (\n
- \n
\n \n ))}\n
\n
\n );\n};\n","import { capitalize } from \"lodash\";\nimport { keyBy, mapValues } from \"lodash-es\";\nimport { i18nService } from \"services\";\nimport {\n IFieldType,\n IFormSchema,\n IToolboxFacet,\n ToolboxFacetType,\n} from \"types\";\n\nexport const makeSchema = (facets: IToolboxFacet[]): IFormSchema => {\n return {\n layout: \"inline\",\n submitMode: \"onDirty\",\n fields: [\n {\n name: \"lookingFor\", // used as key\n type: IFieldType.staticText,\n label: i18nService.copy[\"toolboxQuickSearch.lookingFor\"],\n },\n ...facets.map(({ key, slug, label, options, ...rest }) => ({\n ...rest,\n name: slug,\n type: IFieldType.select,\n label: capitalize(label.split(\" \")[label.split(\" \").length - 1]),\n hideLabel: true,\n prefixText: key === ToolboxFacetType.type ? \"\" : rest.prefixText,\n labelIcon:\n key === ToolboxFacetType.type\n ? `\n `\n : `\n `,\n options: [\n {\n label: i18nService.copy[\"toolQuickSearch.choose\"]?.replace(\n \"@filter\",\n label.toLowerCase()\n ),\n value: \"\", // placeholder value\n },\n ...options.map((option) => ({\n label: option.label,\n value: option.id,\n })),\n ],\n })),\n ],\n defaultValues: mapValues(keyBy(facets, \"slug\"), \"\"), // set to placeholder value\n resetDefaultValues: false,\n };\n};\n","import { FormBuilder } from \"components/form/FormBuilder\";\nimport React from \"react\";\n\nimport { i18nService } from \"services\";\nimport { ActiveToolboxFacetType, IToolboxFacet } from \"types\";\n\nimport { makeSchema } from \"./formSchema\";\n\ninterface ToolboxQuickSearchFormProps {\n facets: IToolboxFacet[];\n onSubmit: (data: ActiveToolboxFacetType) => void;\n isLoading?: boolean;\n}\n\nexport const ToolboxQuickSearchForm: React.FC\n
\n );\n};\n","import {\n Eye,\n Farseer,\n MethodSubtool,\n Phase,\n Squares,\n TheorySubtool,\n} from \"assets/icons\";\nimport { SelectField } from \"components/form/fields\";\nimport { Message } from \"components/message/Message\";\nimport { SearchField } from \"components/search/components\";\nimport { FC, useCallback, useEffect, useState } from \"react\";\nimport { i18nService, SearchService } from \"services\";\nimport { EntityType, IFieldType, IOption, ISearchResult } from \"types\";\nimport { StringParam, useQueryParam } from \"use-query-params\";\n\nexport interface IToolboxSearchData {\n subToolTypeOptions: IOption[];\n phaseOptions: IOption[];\n}\n\ninterface Props {\n toolboxSearchData: IToolboxSearchData;\n parentToolId: string;\n}\n\nexport const ToolboxSearch: FC\n
\n \n
\n \n );\n};\n","import ReactDOM from \"react-dom\";\n\nimport { BrowserRouter, Route } from \"react-router-dom\";\nimport { ToolboxSearch } from \"./ToolboxSearch\";\nimport { i18nService } from \"services\";\nimport {\n QueryParamProvider,\n transformSearchStringJsonSafe,\n} from \"use-query-params\";\n\n(() => {\n const toolboxSearchContainers = document.querySelectorAll\n {!!results.length ? (\n {i18nService.copy[\"siteSearch.noResults\"]} \n )}\n
\n - \n {results?.map((result) => (\n
- \n \n \n\n\n\n \n
\n {result.document.title}\n
\n\n\n {result.document.intro\n .split(\". \")\n .slice(0, 3)\n .join(\". \")}\n {result.document.intro.split(\". \").length > 3 && \" ...\"}\n
\n \n ))}\n
\n 
\n {isVideo &&
\n )}\n\n \n {getTeaserTitle(title, headingType, [\"teaser__title\"])}\n\n {label &&
\n \n);\n","import React from \"react\";\n\nimport { IBreadcrumb, TeaserHeadingType } from \"types\";\nimport { Breadcrumbs } from \"components\";\nimport { getTeaserTitle } from \"utils\";\nimport { Label } from \"components/label/Label\";\n\nimport { TeaserProps } from \"../default-teaser/DefaultTeaser\";\nimport classNames from \"classnames\";\n\nexport interface HorizontalTeaserProps extends TeaserProps {\n meta?: string;\n breadcrumbs: IBreadcrumb[];\n theme?: \"light\" | \"dark\";\n bundle: string | undefined;\n}\n\nexport const HorizontalTeaser: React.FC{label}
}\n\n {intro && (\n \n
\n {image && (\n \n
\n\n {getTeaserTitle(title, headingType, [\"horizontal-teaser__title\"])}\n\n {intro && (\n \n \n
\n )}\n {meta && {meta}
}\n \n \n {mediaLabel && (\n \n \n \n )}\n
\n )}\n \n);\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { IImage } from \"types\";\nimport { GalleryModal } from \"components\";\nimport { getRenderRoot, RenderRoot } from \"utils\";\n\nconst imageBlocks = document.querySelectorAll\n
\n );\n};\n","import { useState, useEffect, useRef } from \"react\";\nimport { CookieCategories } from \"types\";\n\nexport const useCheckCookieConsent = (category: CookieCategories): boolean => {\n let timer = useRef\n
\n \n {i18nService.copy[\"embedBlock.message\"]}\n
\n \n window?.Cookiebot?.show()}\n />\n
\n \n handleSearch(data.search, 1)}\n status={status}\n error={error}\n results={results}\n pager={pager}\n total={pagination?.total}\n hasSearched={hasSearched}\n menuOverlayOpen={menuOverlayOpen}\n />\n
\n );\n};\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Provider } from \"react-redux\";\nimport { BrowserRouter, Route, Switch } from \"react-router-dom\";\n\nimport { store } from \"state\";\nimport { hideMenuButtons, openMenu } from \"components/header\";\n\nimport { SiteSearchContainer } from \"./containers\";\nimport { urlService } from \"services\";\nimport { Single } from \"types\";\n\n(() => {\n const searchContainer = document.querySelector\n {\n // reset page if not page 1\n if (queryPage && queryPage > 1) {\n setQueryPage(undefined);\n }\n\n setQueryFacets(activeFacet);\n }}\n setQueryTerm={(term: string) => {\n // reset page if not page 1\n if (queryPage && queryPage > 1) {\n setQueryPage(undefined);\n }\n\n // set undefined to remove from URL if empty\n setQueryTerm(term || undefined);\n }}\n clearAllFacets={clearAllFacets}\n />\n
\n );\n};\n","import { useCallback, useMemo } from \"react\";\nimport { keyBy, mapValues } from \"lodash-es\";\n\nimport {\n ActiveToolFacetType,\n IActiveFacet,\n IActiveFacetOption,\n IToolFacet,\n ToolFacetType,\n} from \"types\";\nimport { i18nService } from \"services\";\n\nimport { mapFacetSlugToKey } from \"../\";\n\ninterface useActiveFacetsProps {\n queryTerm: string | null | undefined;\n facets: IToolFacet[];\n queryFacets: { [key: string]: any };\n setQueryFacets: (activeFacet: ActiveToolFacetType) => void;\n resetTerm: () => void;\n}\n\nexport const useActiveFacets = ({\n facets,\n queryTerm,\n queryFacets,\n setQueryFacets,\n resetTerm,\n}: useActiveFacetsProps) => {\n // default values for facets form\n // eg. { term: \"test\", theme: [\"id1\" ,\"id2\" , \"id3\"]: type: [] }\n const activeFacetsMap: ActiveToolFacetType = useMemo(\n () => ({\n [ToolFacetType.term]: queryTerm, // hardcode term\n ...mapFacetSlugToKey(facets, queryFacets),\n }),\n [facets, queryTerm, queryFacets]\n );\n\n // lookup table for facet option labels\n // eg. { theme: { id1: \"Cyberpesten\" } }\n const facetOptionLabels = useMemo(\n () =>\n mapValues(keyBy(facets, \"key\"), (value) =>\n mapValues(keyBy(value.options, \"id\"), (value) => value.label)\n ),\n [facets]\n );\n\n // get active facet options\n // with an onClick handler to remove the active option\n // eg. [{ label:\"Cyberpesten\", onClick: () => void }]\n const getActiveOptions = useCallback(\n (\n activeFacet: string | string[] | null | undefined,\n key: string,\n slug: string\n ): IActiveFacetOption[] | undefined => {\n if (!activeFacet) return undefined;\n\n // term has custom code\n if (typeof activeFacet === \"string\") return undefined;\n\n return (\n activeFacet\n .map(\n (option: string): IActiveFacetOption => ({\n label: facetOptionLabels[key][option],\n onClick: () =>\n // remove current option from query string\n setQueryFacets({\n [slug]: activeFacet?.filter(\n (item: string) => item !== option\n ),\n }),\n })\n )\n // if we can't find a label for given key, remove that option\n .filter((activeOption) => !!activeOption.label)\n );\n },\n [facetOptionLabels, setQueryFacets]\n );\n\n const activeTerm: IActiveFacet | undefined = useMemo(\n () =>\n queryTerm\n ? {\n label: i18nService.copy[\"toolSearch.keyword\"],\n activeOptions: [\n {\n label: queryTerm,\n onClick: resetTerm,\n },\n ],\n }\n : undefined,\n [queryTerm, resetTerm]\n );\n\n // array of all active facets with their active options\n const activeFacets: IActiveFacet[] = useMemo(\n () => [\n ...(activeTerm ? [activeTerm] : []), // hardcode term\n ...facets\n .map(({ key, label, slug }) => ({\n label,\n activeOptions: getActiveOptions(activeFacetsMap?.[key], key, slug),\n }))\n // if active options has length 0, remove the active facet\n .filter((activeFacet) => !!activeFacet.activeOptions?.length),\n ],\n [facets, activeFacetsMap, getActiveOptions, activeTerm]\n );\n\n return { activeFacetsMap, activeFacets };\n};\n","import { ChangeEvent } from \"react\";\nimport { i18nService } from \"services\";\nimport {\n IToolFacet,\n IFieldType,\n IFormSchema,\n ActiveToolFacetType,\n ToolFacetType,\n} from \"types\";\n\nexport const makeSchema = (\n facets: IToolFacet[],\n handleChangeTerm: (term: string) => void,\n handleChangeFacet: (facet: ActiveToolFacetType) => void\n): IFormSchema => ({\n fields: [\n {\n name: ToolFacetType.term,\n label: i18nService.copy[\"toolSearch.keyword\"],\n placeholder: i18nService.copy[\"toolSearch.keywordPlaceholder\"],\n type: IFieldType.text,\n onChange: (e: ChangeEvent\n
\n );\n};\n","import React, {\n createRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useSelector } from \"react-redux\";\n\nimport { IAPIState, IPager } from \"types\";\nimport { ToolSearchResults, Pager } from \"components\";\n\nimport { toolSearchDataSelector, toolSearchMetaSelector } from \"../state\";\nimport { ToolSearchMessage } from \"../components\";\nimport { Loader } from \"components/loader/Loader\";\n\ninterface ToolSearchResultsContainerProps {\n setQueryPage: (page: number) => void;\n clearAllFacets?: () => void;\n noResultMessage: string;\n}\n\nexport const ToolSearchResultsContainer: React.FC\n
\n );\n};\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Provider } from \"react-redux\";\nimport { BrowserRouter, Route } from \"react-router-dom\";\nimport {\n QueryParamProvider,\n transformSearchStringJsonSafe,\n} from \"use-query-params\";\n\nimport { store } from \"state\";\nimport { IToolFacet } from \"types\";\n\nimport { ToolSearchContainer } from \"./containers\";\n\n(() => {\n const searchContainer = document.querySelector\n
\n )}\n\n \n {status === IAPIState.pending &&
\n \n
\n );\n};\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport { IToolFacet } from \"types\";\n\nimport { ToolQuickSearchContainer } from \"./containers\";\n\n(() => {\n const toolQuickSearchContainers = document.querySelectorAll\n
\n \n {description}\n\n
\n {image && \n {cta_attachment?.map((url: string, i: number) => (\n window.open(url)}\n outline\n />\n ))}\n {cta_tool && (\n window.open(cta_tool)}\n outline\n />\n )}\n
\n {}
}\n \n
\n \n {description}\n\n
\n \n
\n\n \n
\n\n \n
\n \n
\n \n Doel\n
\n {goals?.join(\", \")}\n\n
\n \n
\n \n
\n \n Leergebied\n
\n {learning_areas?.join(\", \")}\n\n
\n \n
\n \n
\n \n Sleutelcompetentie\n
\n {key_competencies?.join(\", \")}\n\n {cta_link && (\n {\n window.open(addProtocolToUrl(cta_link));\n }}\n />\n )}\n
\n \n
\n \n
\n\n \n
\n \n
\n \n Doel\n
\n {goals?.join(\", \")}\n\n
\n \n
\n \n
\n \n Leergebied\n
\n {learning_areas?.join(\", \")}\n\n
\n \n
\n \n
\n \n Sleutelcompetentie\n
\n {key_competencies?.join(\", \")}\n| \n {Object.keys(tableHeaders).map((key) => (\n |
|---|
\n
\n );\n};\n","import { SearchField } from \"components/search/components\";\nimport { FC } from \"react\";\n\ninterface Props {\n setSearch?: ({ search }: { search: string }) => void;\n}\n\nexport const TableSearch: FC\n
\n \n );\n};\n","import ReactDOM from \"react-dom\";\nimport { TableWrapper } from \"./components/TableWrapper\";\n\n(() => {\n const containers = document.querySelectorAll\n
\n );\n};\n","import { FC } from \"react\";\nimport { useTussendoortjes } from \"../useTussendoortjes\";\nimport { ITussendoortjesRow } from \"../types\";\nimport { TABLE_TYPES } from \"components/inclusion/tableTypes\";\nimport { TableFilters } from \"./TableFIlters\";\nimport { TableSearch } from \"components/inclusion/components/TableSearch\";\nimport { TableContent } from \"components/inclusion/components/TableContent\";\n\ninterface Props {\n rows: ITussendoortjesRow[];\n}\n\nconst tableHeaders: { [key: string]: string } = {\n title: \"Titel\",\n themes: \"Thema\",\n difficulty: \"Moeilijkheidsgraad\",\n};\n\nexport const TableWrapper: FC\n
\n \n );\n};\n","import ReactDOM from \"react-dom\";\nimport { TableWrapper } from \"./components/TableWrapper\";\n\n(() => {\n const containers = document.querySelectorAll\n
\n );\n};\n","import ReactDOM from \"react-dom\";\n\nimport { IToolboxFacet } from \"types\";\n\nimport { ToolboxQuickSearchContainer } from \"./containers\";\nimport { BrowserRouter } from \"react-router-dom\";\n\n(() => {\n const toolboxQuickSearchContainers = document.querySelectorAll