@mrfylke/contact-form 0.1.3

package/lib/modules/logging/log-page-access.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logPageAccess = logPageAccess;
+exports.limitedStringify = limitedStringify;
+const logger_1 = require("./logger");
+/**
+ * Fire-and-forget function for access logging.
+ *
+ * The exported function itself is not async since there is no promise to ever wait for from the outside.
+ * But since it does access the propsResult.props which can be a promise it needs to be async internally.
+ */
+function logPageAccess({ duration, url, method, requestHeaders, statusCode, propsResult, }) {
+    (async () => {
+        const stringifiedProps = propsResult && 'props' in propsResult
+            ? limitedStringify(await propsResult.props)
+            : 'No resolved props';
+        const ct = {
+            method,
+            url,
+            duration,
+            severity: 'INFO',
+            message: 'page access',
+            time: new Date().toISOString(),
+            requestId: requestHeaders?.['requestId'],
+            code: statusCode,
+            clientIpAddress: requestHeaders?.['client-ip-address'],
+            resolvedProps: stringifiedProps,
+        };
+        logger_1.logger.info(ct);
+    })();
+}
+function limitedStringify(obj, maxDepth = 2) {
+    const seen = new WeakSet();
+    function _trunc(val, depth) {
+        if (val !== null && typeof val === 'object') {
+            if (seen.has(val))
+                return '[Circular]';
+            if (depth > maxDepth)
+                return '[TruncatedObject, maxDepth: ' + maxDepth + ' exceeded]';
+            seen.add(val);
+            if (Array.isArray(val)) {
+                return val.map((item) => _trunc(item, depth + 1));
+            }
+            const out = {};
+            for (const k in val) {
+                if (Object.prototype.hasOwnProperty.call(val, k)) {
+                    out[k] = _trunc(val[k], depth + 1);
+                }
+            }
+            return out;
+        }
+        return val;
+    }
+    try {
+        return JSON.stringify(_trunc(obj, 0), null, 2);
+    }
+    catch (e) {
+        return `[Unserializable: ${e.message}]`;
+    }
+}

package/lib/modules/logging/logger.d.ts

@@ -0,0 +1,3 @@
+import bunyan from 'bunyan';
+export declare const logger: bunyan;
+//# sourceMappingURL=logger.d.ts.map

package/lib/modules/logging/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../src/modules/logging/logger.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,eAAO,MAAM,MAAM,QAwBjB,CAAC"}

package/lib/modules/logging/logger.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.logger = void 0;
+const bunyan_1 = __importDefault(require("bunyan"));
+exports.logger = bunyan_1.default.createLogger({
+    name: 'planner-web',
+    streams: [{ stream: process.stdout, level: 'info' }],
+    serializers: {
+        req: (req) => {
+            return {
+                method: req.method,
+                url: req.url,
+                headers: {
+                    ...req.headers,
+                    cookie: null,
+                },
+            };
+        },
+        res: bunyan_1.default.stdSerializers.res,
+        upstream: (up) => {
+            return {
+                statusCode: up.status,
+                url: up.url,
+                statusText: up.statusText,
+            };
+        },
+        err: bunyan_1.default.stdSerializers.err,
+    },
+});

package/lib/modules/logging/timer.d.ts

@@ -0,0 +1,6 @@
+export declare class Timer {
+    start: Date;
+    constructor(start?: Date);
+    getElapsedMs(): number;
+}
+//# sourceMappingURL=timer.d.ts.map

package/lib/modules/logging/timer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timer.d.ts","sourceRoot":"","sources":["../../../src/modules/logging/timer.ts"],"names":[],"mappings":"AAAA,qBAAa,KAAK;IACd,KAAK,EAAE,IAAI,CAAC;gBAEA,KAAK,CAAC,EAAE,IAAI;IAIxB,YAAY;CAIf"}

package/lib/modules/logging/timer.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timer = void 0;
+class Timer {
+    constructor(start) {
+        this.start = start ?? new Date();
+    }
+    getElapsedMs() {
+        const now = new Date();
+        return now.valueOf() - this.start.valueOf();
+    }
+}
+exports.Timer = Timer;

package/lib/modules/logging/with-access-logging.d.ts

@@ -0,0 +1,5 @@
+import { ParsedUrlQuery } from 'querystring';
+import { GetServerSideProps, GetServerSidePropsContext } from 'next';
+import { GetServerSidePropsResult } from 'next/types';
+export declare function withAccessLogging<P extends {} = {}, Params extends ParsedUrlQuery = ParsedUrlQuery>(propGetter?: GetServerSideProps<P, Params>): (ctx: GetServerSidePropsContext<Params>) => Promise<GetServerSidePropsResult<P>>;
+//# sourceMappingURL=with-access-logging.d.ts.map

package/lib/modules/logging/with-access-logging.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-access-logging.d.ts","sourceRoot":"","sources":["../../../src/modules/logging/with-access-logging.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAC,kBAAkB,EAAE,yBAAyB,EAAC,MAAM,MAAM,CAAC;AACnE,OAAO,EAAC,wBAAwB,EAAC,MAAM,YAAY,CAAC;AAIpD,wBAAgB,iBAAiB,CAC7B,CAAC,SAAS,EAAE,GAAG,EAAE,EACjB,MAAM,SAAS,cAAc,GAAG,cAAc,EAChD,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,MAAM,CAAC,IAEpC,KAAK,yBAAyB,CAAC,MAAM,CAAC,KACvC,OAAO,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC,CAc1C"}

package/lib/modules/logging/with-access-logging.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withAccessLogging = withAccessLogging;
+const timer_1 = require("./timer");
+const log_page_access_1 = require("./log-page-access");
+function withAccessLogging(propGetter) {
+    return async function inside(ctx) {
+        const timer = new timer_1.Timer();
+        const propsResult = await propGetter?.(ctx);
+        (0, log_page_access_1.logPageAccess)({
+            url: ctx.resolvedUrl,
+            method: ctx.req?.method,
+            requestHeaders: ctx.req?.headers,
+            duration: timer.getElapsedMs(),
+            statusCode: ctx.res?.statusCode,
+            propsResult,
+        });
+        return propsResult ?? { props: {} };
+    };
+}

package/lib/modules/org-data/compat-layer.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @deprecated This module is deprecated. Use @contact/modules/config instead.
+ *
+ * Compatibility layer for legacy org-data exports.
+ * This file exists to prevent import errors but should not be used in new code.
+ */
+export {};
+//# sourceMappingURL=compat-layer.d.ts.map

package/lib/modules/org-data/compat-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat-layer.d.ts","sourceRoot":"","sources":["../../../src/modules/org-data/compat-layer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,CAAC"}

package/lib/modules/org-data/compat-layer.js

@@ -0,0 +1,8 @@
+"use strict";
+/**
+ * @deprecated This module is deprecated. Use @contact/modules/config instead.
+ *
+ * Compatibility layer for legacy org-data exports.
+ * This file exists to prevent import errors but should not be used in new code.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/modules/org-data/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @deprecated This module is deprecated. Use @contact/modules/config instead.
+ *
+ * Old usage:
+ *   const { supportEmail, orgId } = getOrgData();
+ *
+ * New usage:
+ *   const org = useOrgConfig();
+ *   const email = org.supportEmail;
+ */
+export * from './compat-layer';
+//# sourceMappingURL=index.d.ts.map

package/lib/modules/org-data/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modules/org-data/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,cAAc,gBAAgB,CAAC"}

package/lib/modules/org-data/index.js

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * @deprecated This module is deprecated. Use @contact/modules/config instead.
+ *
+ * Old usage:
+ *   const { supportEmail, orgId } = getOrgData();
+ *
+ * New usage:
+ *   const org = useOrgConfig();
+ *   const email = org.supportEmail;
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./compat-layer"), exports);

package/lib/modules/theme/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider, useTheme, useDarkMode, useHtmlDarkMode, } from './theme-context';
+export type { ThemeColors, InteractiveColor, InteractiveState, StatusColors, TransportColors, ContrastColor, TextColorType, } from './theme-context';
+//# sourceMappingURL=index.d.ts.map

package/lib/modules/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modules/theme/index.ts"],"names":[],"mappings":"AACA,OAAO,EACH,aAAa,EACb,QAAQ,EACR,WAAW,EACX,eAAe,GAClB,MAAM,iBAAiB,CAAC;AAGzB,YAAY,EACR,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,GAChB,MAAM,iBAAiB,CAAC"}

package/lib/modules/theme/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHtmlDarkMode = exports.useDarkMode = exports.useTheme = exports.ThemeProvider = void 0;
+// Export the new theme system
+var theme_context_1 = require("./theme-context");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_context_1.ThemeProvider; } });
+Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return theme_context_1.useTheme; } });
+Object.defineProperty(exports, "useDarkMode", { enumerable: true, get: function () { return theme_context_1.useDarkMode; } });
+Object.defineProperty(exports, "useHtmlDarkMode", { enumerable: true, get: function () { return theme_context_1.useHtmlDarkMode; } });

package/lib/modules/theme/theme-context.d.ts

@@ -0,0 +1,43 @@
+import { PropsWithChildren } from 'react';
+import type { InteractiveColor, InteractiveState, TextColorType, ThemeColors } from '../config';
+/**
+ * Context for theme state (light/dark mode)
+ */
+type ThemeContextValue = {
+    isDarkMode: boolean;
+    toggleDarkmode: (value: boolean) => void;
+    theme: ThemeColors;
+    isThemeForced: boolean;
+};
+export type ThemeProviderProps = PropsWithChildren<{
+    /** Optional: force a specific theme mode */
+    forceTheme?: 'light' | 'dark';
+    /** Initial dark mode when not forced. Theme is supplied by host/design-system via ContactFormConfig. */
+    defaultDarkMode?: boolean;
+    /** Called when user toggles dark mode. Host can persist (e.g. cookie) if needed. */
+    onDarkModeChange?: (value: boolean) => void;
+}>;
+/**
+ * Theme provider that manages dark/light mode state.
+ * Uses the theme from ContactFormConfig (from design-system) and manages the active variant.
+ * Dark mode state is local or supplied by the host via defaultDarkMode/onDarkModeChange.
+ */
+export declare function ThemeProvider({ children, forceTheme, defaultDarkMode, onDarkModeChange }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the current theme and dark mode state.
+ * @throws Error if used outside of ThemeProvider
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Hook to access dark mode state.
+ * Returns [isDarkMode, setDarkMode]
+ */
+export declare function useDarkMode(): [boolean, (value: boolean) => void];
+/**
+ * Hook that sets the data-theme attribute on the document element.
+ * Call this in your root layout/component.
+ */
+export declare function useHtmlDarkMode(): void;
+export type { ThemeColors, InteractiveColor, InteractiveState, TextColorType };
+export type { TransportColors, ContrastColor, StatusColors, } from '../../modules/config';
+//# sourceMappingURL=theme-context.d.ts.map

package/lib/modules/theme/theme-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-context.d.ts","sourceRoot":"","sources":["../../../src/modules/theme/theme-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAC,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,WAAW,EAAC,MAAM,WAAW,CAAC;AAG9F;;GAEG;AACH,KAAK,iBAAiB,GAAG;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,KAAK,EAAE,WAAW,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;CAC1B,CAAC;AAIF,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC;IAC/C,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,wGAAwG;IACxG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C,CAAC,CAAC;AAEH;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAAC,QAAQ,EAAE,UAAU,EAAE,eAAuB,EAAE,gBAAgB,EAAC,EAAE,kBAAkB,2CAgClH;AAED;;;GAGG;AACH,wBAAgB,QAAQ,sBASvB;AAED;;;GAGG;AACH,wBAAgB,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,CAGjE;AAED;;;GAGG;AACH,wBAAgB,eAAe,SAO9B;AAGD,YAAY,EAAC,WAAW,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAC,CAAC;AAC7E,YAAY,EACR,eAAe,EACf,aAAa,EACb,YAAY,GACf,MAAM,sBAAsB,CAAC"}

package/lib/modules/theme/theme-context.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+exports.useDarkMode = useDarkMode;
+exports.useHtmlDarkMode = useHtmlDarkMode;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const config_1 = require("../config");
+const ThemeContext = (0, react_1.createContext)(null);
+/**
+ * Theme provider that manages dark/light mode state.
+ * Uses the theme from ContactFormConfig (from design-system) and manages the active variant.
+ * Dark mode state is local or supplied by the host via defaultDarkMode/onDarkModeChange.
+ */
+function ThemeProvider({ children, forceTheme, defaultDarkMode = false, onDarkModeChange }) {
+    const [enabledState, setEnabledState] = (0, react_1.useState)(defaultDarkMode);
+    const themeConfig = (0, config_1.useThemeConfig)();
+    const { features } = (0, config_1.useContactFormConfig)();
+    // Determine if dark mode is enabled
+    let isDarkMode;
+    let toggleDarkmode;
+    if (forceTheme) {
+        isDarkMode = forceTheme === 'dark';
+        toggleDarkmode = () => {
+        }; // No-op if theme is forced
+    }
+    else if (features?.enableDarkMode === false) {
+        isDarkMode = false;
+        toggleDarkmode = () => {
+        }; // No-op if dark mode is disabled
+    }
+    else {
+        isDarkMode = enabledState ?? false;
+        toggleDarkmode = (value) => {
+            setEnabledState(value);
+            onDarkModeChange?.(value);
+        };
+    }
+    const activeTheme = isDarkMode ? themeConfig.dark : themeConfig.light;
+    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: { isDarkMode, toggleDarkmode, theme: activeTheme, isThemeForced: !!forceTheme }, children: children }));
+}
+/**
+ * Hook to access the current theme and dark mode state.
+ * @throws Error if used outside of ThemeProvider
+ */
+function useTheme() {
+    const context = (0, react_1.useContext)(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within ThemeProvider. ' +
+            'Make sure to wrap your component tree with <ThemeProvider>.');
+    }
+    return context;
+}
+/**
+ * Hook to access dark mode state.
+ * Returns [isDarkMode, setDarkMode]
+ */
+function useDarkMode() {
+    const { isDarkMode, toggleDarkmode } = useTheme();
+    return [isDarkMode, toggleDarkmode];
+}
+/**
+ * Hook that sets the data-theme attribute on the document element.
+ * Call this in your root layout/component.
+ */
+function useHtmlDarkMode() {
+    const { isDarkMode } = useTheme();
+    if (typeof window !== 'undefined') {
+        const theme = isDarkMode ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-theme', theme);
+    }
+}

package/lib/modules/transport-mode/filter/filter.d.ts

@@ -0,0 +1,9 @@
+import { TransportModeFilterOptionType } from '@atb-as/config-specs';
+type TransportModeFilterProps = {
+    filterState: string[] | null;
+    onChange: (transportModeFilter: string[] | null) => void;
+    data?: TransportModeFilterOptionType[];
+};
+export default function TransportModeFilter({ filterState, onChange, data, }: TransportModeFilterProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=filter.d.ts.map

package/lib/modules/transport-mode/filter/filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../src/modules/transport-mode/filter/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,6BAA6B,EAAC,MAAM,sBAAsB,CAAC;AAMnE,KAAK,wBAAwB,GAAG;IAC5B,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,CAAC,mBAAmB,EAAE,MAAM,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACzD,IAAI,CAAC,EAAE,6BAA6B,EAAE,CAAC;CAC1C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EACI,WAAW,EACX,QAAQ,EACR,IAAI,GACP,EAAE,wBAAwB,kDAyGtE"}

package/lib/modules/transport-mode/filter/filter.js

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TransportModeFilter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const filter_module_css_1 = __importDefault(require("./filter.module.css"));
+const icon_1 = require("../icon");
+const react_1 = require("react");
+const translations_1 = require("../../../translations");
+const typography_1 = require("../../../components/typography");
+const icon_2 = require("../../../components/icon");
+function TransportModeFilter({ filterState, onChange, data, }) {
+    const { t, language } = (0, translations_1.useTranslation)();
+    const isFlexibleTransportEnabled = false; //remove when AtB-bestill will be enabled in tripPatterns
+    // Local filter state used for updating the checkbox states before the URL
+    // state is updated to reflect the changed filters.
+    const [localFilterState, setLocalFilterState] = (0, react_1.useState)(filterState);
+    const onChangeWrapper = (transportModeFilter) => {
+        setLocalFilterState(transportModeFilter);
+        onChange(transportModeFilter);
+    };
+    if (!data) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(typography_1.Typo.h3, { textType: "body__m", className: filter_module_css_1.default.heading, children: t(translations_1.ComponentText.TransportModeFilter.label) }), (0, jsx_runtime_1.jsxs)("ul", { className: filter_module_css_1.default.filter, children: [(0, jsx_runtime_1.jsx)("li", { className: [filter_module_css_1.default.transportMode, filter_module_css_1.default.allTransportModes].join(' '), children: (0, jsx_runtime_1.jsxs)("div", { className: filter_module_css_1.default.transportModeContainer, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "all", name: "all", value: "all", "aria-label": t(translations_1.ComponentText.TransportModeFilter.allA11y), checked: !localFilterState || localFilterState.length === data.length, onChange: (event) => {
+                                        onChangeWrapper(event.target.checked ? data?.map((option) => option.id) : []);
+                                    } }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "all", "aria-hidden": true, className: filter_module_css_1.default.transportModeElement, children: [(0, jsx_runtime_1.jsx)(icon_2.CheckBoxIcon, { checked: !localFilterState || localFilterState.length === data.length }), (0, jsx_runtime_1.jsx)("span", { children: t(translations_1.ComponentText.TransportModeFilter.all) })] })] }) }), data
+                        .filter((option) => isFlexibleTransportEnabled
+                        ? true
+                        : option.id !== 'flexibleTransport')
+                        .map((option) => {
+                        return ((0, jsx_runtime_1.jsxs)("li", { className: filter_module_css_1.default.transportMode, children: [(0, jsx_runtime_1.jsx)(FilterOption, { option: option, selected: !localFilterState ||
+                                        (localFilterState?.includes(option.id) ?? false), onChange: (event) => {
+                                        // No filter is applied when filterState is `null`, same
+                                        // as "All" being checked.
+                                        if (!localFilterState) {
+                                            // Only set the clicked filter as filter.
+                                            onChangeWrapper([option.id]);
+                                        }
+                                        else {
+                                            if (event.target.checked) {
+                                                // Add the checked filter to the filter state.
+                                                onChangeWrapper([...localFilterState, option.id]);
+                                            }
+                                            else {
+                                                // Remove the unchecked filter from the filter state.
+                                                onChangeWrapper(localFilterState.filter((id) => id !== option.id));
+                                            }
+                                        }
+                                    } }), option.description && ((0, jsx_runtime_1.jsx)(typography_1.Typo.p, { textType: "body__xs", className: filter_module_css_1.default.infoText, children: (0, translations_1.getTextForLanguage)(option.description, language) ?? '' }))] }, option.id));
+                    })] })] }));
+}
+function FilterOption({ option, selected, onChange }) {
+    const { language } = (0, translations_1.useTranslation)();
+    const text = (0, translations_1.getTextForLanguage)(option.text, language);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: filter_module_css_1.default.transportModeContainer, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: option.id, name: option.id, value: option.id, checked: selected, onChange: onChange, "aria-labelledby": `label-${option.id}` }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: option.id, "aria-hidden": true, className: filter_module_css_1.default.transportModeElement, children: [(0, jsx_runtime_1.jsx)(icon_2.CheckBoxIcon, { checked: selected }), (0, jsx_runtime_1.jsx)(icon_1.TransportIcon, { mode: {
+                            transportMode: option.icon.transportMode,
+                            transportSubModes: option.icon?.transportSubMode
+                                ? [option.icon.transportSubMode]
+                                : [],
+                        }, isFlexible: option.id == 'flexibleTransport', size: "small" }), (0, jsx_runtime_1.jsx)("span", { id: `label-${option.id}`, children: text })] })] }));
+}

package/lib/modules/transport-mode/filter/filter.module.css

@@ -0,0 +1,98 @@
+.heading {
+    color: token('color.background.accent.0.foreground.primary');
+    margin-bottom: token('spacing.medium');
+}
+
+.filter {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(12.5rem, 1fr));
+    gap: token('spacing.small');
+}
+
+.transportMode {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: token('spacing.xSmall');
+}
+
+.allTransportModes {
+    grid-column: 1 / -1;
+}
+
+.allTransportModes .transportModeElement {
+    max-width: calc(33.333% - (2 * token('spacing.small') / 3));
+    /* for 'alle transportmidler' element (1/3 of filter's width - (2 * gap_width_in_grid)/num_of_columns) */
+}
+
+@media (max-width: 650px) {
+    .filter {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .allTransportModes .transportModeElement {
+        max-width: 100%;
+    }
+}
+
+.transportModeContainer {
+    width: 100%;
+}
+
+.transportModeElement {
+    padding: token('spacing.small') token('spacing.medium');
+    border-radius: token('border.radius.regular');
+    background-color: token('color.interactive.2.default.background');
+    color: token('color.foreground.dynamic.primary');
+    transition: border-color 150ms,
+    background-color 150ms;
+    cursor: pointer;
+    display: flex;
+    gap: token('spacing.small');
+    align-items: center;
+    border: 1px solid token('color.background.neutral.3.background');
+    height: 2.25rem;
+}
+
+.transportMode input {
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+    display: block;
+}
+
+.infoText {
+    color: token('color.foreground.dynamic.disabled');
+    opacity: 0.75;
+    max-width: 10rem;
+}
+
+.transportMode input:focus-visible ~ label {
+    box-shadow: inset 0 0 0 token('border.width.medium') token('color.status.info.primary.background');
+}
+
+.transportMode input:hover ~ label {
+    background-color: token('color.interactive.2.hover.background');
+}
+
+.transportMode input[type='checkbox']:checked ~ label {
+    background-color: token('color.interactive.2.active.background');
+    border: 1px solid token('color.interactive.2.outline.background');
+}
+
+.transportMode input:hover ~ label .checkboxBackground {
+    background-color: token('color.interactive.2.default.background');
+}
+
+.transportMode input[type='checkbox']:checked:hover ~ label {
+    background-color: token('color.interactive.2.hover.background');
+}
+
+.transportMode input[type='checkbox']:checked ~ label .checkboxBackground {
+    background-color: token('color.interactive.2.active.background');
+}

package/lib/modules/transport-mode/filter/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TransportModeFilter } from './filter';
+export { getAllTransportModesFromFilterOptions, parseFilterQuery, } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/lib/modules/transport-mode/filter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/modules/transport-mode/filter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,mBAAmB,EAAC,MAAM,UAAU,CAAC;AAExD,OAAO,EACH,qCAAqC,EACrC,gBAAgB,GACnB,MAAM,SAAS,CAAC"}

package/lib/modules/transport-mode/filter/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseFilterQuery = exports.getAllTransportModesFromFilterOptions = exports.TransportModeFilter = void 0;
+var filter_1 = require("./filter");
+Object.defineProperty(exports, "TransportModeFilter", { enumerable: true, get: function () { return __importDefault(filter_1).default; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getAllTransportModesFromFilterOptions", { enumerable: true, get: function () { return utils_1.getAllTransportModesFromFilterOptions; } });
+Object.defineProperty(exports, "parseFilterQuery", { enumerable: true, get: function () { return utils_1.parseFilterQuery; } });

package/lib/modules/transport-mode/filter/types.d.ts

@@ -0,0 +1,2 @@
+export type { TransportModeFilterOptionType } from '@atb-as/config-specs';
+//# sourceMappingURL=types.d.ts.map

package/lib/modules/transport-mode/filter/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/modules/transport-mode/filter/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,6BAA6B,EAAC,MAAM,sBAAsB,CAAC"}

package/lib/modules/transport-mode/filter/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/modules/transport-mode/filter/utils.d.ts

@@ -0,0 +1,9 @@
+import type { TransportModeGroup } from '../types';
+import type { TransportModeFilterOptionType } from './types';
+export declare function parseFilterQuery(filterQuery: string | string[] | undefined): string[] | null;
+/**
+ * Resolves filter option IDs to transport mode groups.
+ * The transport mode filter must be supplied by the host (e.g. from planner-web).
+ */
+export declare function getAllTransportModesFromFilterOptions(filterOptions: string[] | null, transportModeFilter: TransportModeFilterOptionType[] | null | undefined): TransportModeGroup[] | undefined;
+//# sourceMappingURL=utils.d.ts.map

package/lib/modules/transport-mode/filter/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/modules/transport-mode/filter/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,UAAU,CAAC;AACjD,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,SAAS,CAAC;AAE3D,wBAAgB,gBAAgB,CAC5B,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,GAC3C,MAAM,EAAE,GAAG,IAAI,CAIjB;AAED;;;GAGG;AACH,wBAAgB,qCAAqC,CACjD,aAAa,EAAE,MAAM,EAAE,GAAG,IAAI,EAC9B,mBAAmB,EAAE,6BAA6B,EAAE,GAAG,IAAI,GAAG,SAAS,GACxE,kBAAkB,EAAE,GAAG,SAAS,CAQlC"}

package/lib/modules/transport-mode/filter/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseFilterQuery = parseFilterQuery;
+exports.getAllTransportModesFromFilterOptions = getAllTransportModesFromFilterOptions;
+function parseFilterQuery(filterQuery) {
+    if (!filterQuery)
+        return null;
+    return filterQuery.toString().split(',');
+}
+/**
+ * Resolves filter option IDs to transport mode groups.
+ * The transport mode filter must be supplied by the host (e.g. from planner-web).
+ */
+function getAllTransportModesFromFilterOptions(filterOptions, transportModeFilter) {
+    if (!transportModeFilter)
+        return undefined;
+    const transportModes = transportModeFilter
+        .filter((option) => !filterOptions || filterOptions.includes(option.id))
+        .flatMap((option) => option.modes ?? []);
+    return Array.from(new Set(transportModes));
+}