@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/resizer/Resizer.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const HORIZONTAL = 'x';
+const VERTICAL = 'y';
+const LEFT = 'left';
+const RIGHT = 'right';
+const TOP = 'top';
+const BOTTOM = 'bottom';
+const createListeners = (targetNode, onEnd, onMove) => {
+    if (!targetNode) {
+        return;
+    }
+    // The read-only ownerDocument property of the Node interface returns
+    // the top-level document object of the node.
+    const ownerDocument = targetNode.ownerDocument;
+    ownerDocument.addEventListener('mouseup', onEnd);
+    ownerDocument.addEventListener('mousemove', onMove);
+    ownerDocument.addEventListener('touchend', onEnd);
+    ownerDocument.addEventListener('touchmove', onMove);
+    return {
+        remove: () => {
+            ownerDocument.removeEventListener('mouseup', onEnd);
+            ownerDocument.removeEventListener('mousemove', onMove);
+            ownerDocument.removeEventListener('touchend', onEnd);
+            ownerDocument.removeEventListener('touchmove', onMove);
+        },
+    };
+};
+const Resizer = (props) => {
+    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop_1.default, onResize = noop_1.default, onResizeEnd = noop_1.default, children, ...remainingProps } = props;
+    const eventsRef = (0, react_1.useRef)(null);
+    // Use refs here instead of local state as the move event listener fired before the state is set
+    // and then it would work with outdated state at that time.
+    const elementRef = (0, react_1.useRef)(null);
+    const isDragRef = (0, react_1.useRef)(false);
+    const startPositionRef = (0, react_1.useRef)({ x: 0, y: 0 });
+    (0, react_1.useEffect)(() => {
+        return () => {
+            removeListeners();
+        };
+    }, []);
+    const getClientX = (event) => {
+        // Note: some browsers don't provide the global "TouchEvent" constructor!
+        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
+            return event.touches[0].clientX;
+        }
+        if (event instanceof MouseEvent) {
+            return event.clientX;
+        }
+        throw new Error('Unsupported event type');
+    };
+    const getClientY = (event) => {
+        // Note: some browsers don't provide the global "TouchEvent" constructor!
+        if (!!window.TouchEvent && event instanceof window.TouchEvent) {
+            return event.touches[0].clientY;
+        }
+        if (event instanceof MouseEvent) {
+            return event.clientY;
+        }
+        throw new Error('Unsupported event type');
+    };
+    const handleMouseStart = (event) => {
+        isDragRef.current = true;
+        // Use the native event to check for the event type. Otherwise the type check
+        // fails and the start position would be { x: 0, y: 0 }.
+        const mouseEvent = event.nativeEvent;
+        const { clientX, clientY } = mouseEvent;
+        startPositionRef.current = {
+            x: clientX,
+            y: clientY,
+        };
+        onResizeStart(event);
+        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
+    };
+    const handleTouchStart = (event) => {
+        isDragRef.current = true;
+        // Use the native event to check for the event type. Otherwise the type check
+        // fails and the start position would be { x: 0, y: 0 }.
+        const touchEvent = event.nativeEvent;
+        const firstTouch = touchEvent.touches[0];
+        startPositionRef.current = {
+            x: firstTouch.clientX,
+            y: firstTouch.clientY,
+        };
+        onResizeStart(event);
+        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);
+    };
+    const handleMove = (event) => {
+        if (!isDragRef.current) {
+            return;
+        }
+        if (direction === Resizer.HORIZONTAL) {
+            const diff = startPositionRef.current.x - getClientX(event);
+            if (diff !== 0) {
+                onResize(diff);
+            }
+        }
+        if (direction === Resizer.VERTICAL) {
+            const diff = startPositionRef.current.y - getClientY(event);
+            if (diff !== 0) {
+                onResize(diff);
+            }
+        }
+        startPositionRef.current = {
+            x: getClientX(event),
+            y: getClientY(event),
+        };
+    };
+    const handleEnd = (event) => {
+        isDragRef.current = false;
+        onResizeEnd(event);
+        removeListeners();
+    };
+    const removeListeners = () => {
+        if (eventsRef.current) {
+            eventsRef.current.remove();
+        }
+    };
+    const wrapperClasses = (0, classnames_1.default)('Resizer', direction === 'x' && 'resize-horizontal', direction === 'y' && 'resize-vertical', position === 'left' && 'resize-left', position === 'right' && 'resize-right', position === 'top' && 'resize-top', position === 'bottom' && 'resize-bottom', className && className);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart, ...remainingProps, children: children }));
+};
+Resizer.HORIZONTAL = HORIZONTAL;
+Resizer.VERTICAL = VERTICAL;
+Resizer.LEFT = LEFT;
+Resizer.RIGHT = RIGHT;
+Resizer.TOP = TOP;
+Resizer.BOTTOM = BOTTOM;
+exports.default = Resizer;

package/lib/es/src/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -0,0 +1,81 @@
+import React, { type ReactHTML } from 'react';
+export type ResponsiveColumnStripeProps = {
+    /**
+     * The minimum width in pixel of a single column.
+     *
+     * This value determines how many columns are shown per page depending on the parent width.
+     *
+     * @default 300
+     */
+    minColumnWith?: number;
+    /**
+     * The minimum amount of columns that should be shown per page.
+     *
+     * @default 1
+     */
+    minColumns?: number;
+    /**
+     * The maximum amount of columns that should be shown per page.
+     *
+     * @default 5
+     */
+    maxColumns?: number;
+    /**
+     * Defines whether the items on the last page are stretched out to fill the space.
+     *
+     * @default false
+     */
+    stretchLastItems?: boolean;
+    /**
+     * The page that shall be shown.
+     *
+     * This can be used to control the pages from outside.
+     *
+     * @default 0
+     */
+    activePage?: number;
+    /**
+     * The DOM element type of the wrapping column element.
+     *
+     * If you need a list, this might be set to "ul".
+     *
+     * @default 'div'
+     */
+    asType?: keyof ReactHTML;
+    /**
+     * Set to true to skip animating pages.
+     *
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * Callback function for when the previous page is clicked.
+     *
+     * @param pageNumber
+     * @param columnsPerPage
+     */
+    onPreviousClick?: (pageNumber: number, columnsPerPage: number) => void;
+    /**
+     * Callback function for when the next page is clicked.
+     *
+     * @param pageNumber
+     * @param columnsPerPage
+     */
+    onNextClick?: (pageNumber: number, columnsPerPage: number) => void;
+    /**
+     * Additional classes set to the navigation buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Additional classes set to the component wrapper element.
+     */
+    columnsWrapperClassName?: string;
+    /**
+     * Additional classes set to the column wrapper element.
+     */
+    className?: string;
+};
+declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default ResponsiveColumnStripe;

package/lib/es/src/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const findIndex_1 = tslib_1.__importDefault(require("lodash/fp/findIndex"));
+const chunk_1 = tslib_1.__importDefault(require("lodash/fp/chunk"));
+const framer_motion_1 = require("framer-motion");
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
+const useElementSize_1 = tslib_1.__importDefault(require("../../hooks/useElementSize"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
+const MIN_WITH_THRESHOLD = 10;
+const DEFAULT_TRANSITION = { duration: 0.2 };
+const ANIMATION_NEXT = 'page';
+const ANIMATION_BACK = 'pageBack';
+const COLUMN_ITEM_CLASSNAME = 'ColumnItem';
+const variants = {
+    pageEnter: pageDirection => ({
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0,
+    }),
+    pageCenter: () => ({ x: 0, opacity: 1 }),
+};
+const getFirstColumnItem = (node) => {
+    if ([...node.classList].includes(COLUMN_ITEM_CLASSNAME)) {
+        return node;
+    }
+    return getFirstColumnItem(node.children[0]);
+};
+const ResponsiveColumnStripe = (0, react_1.forwardRef)((props, ref) => {
+    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop_1.default, onNextClick = noop_1.default, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children, ...remainingProps } = props;
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(activePage);
+    const [columnsPerPage, setColumnsPerPage] = (0, react_1.useState)(maxColumns);
+    const [enableInitialAnimation, setEnableInitialAnimation] = (0, react_1.useState)(false);
+    const [isResizePage, setIsResizePage] = (0, react_1.useState)(false);
+    // The base for reacting on changing width of the wrapping element.
+    // It uses a ResizeObserver under the hood.
+    const columnWrapperRef = (0, react_1.useRef)(null);
+    const [columnWrapperWidth] = (0, useElementSize_1.default)(columnWrapperRef);
+    const previousPage = (0, usePrevious_1.default)(currentPage);
+    const animationDirection = currentPage > previousPage ? ANIMATION_NEXT : ANIMATION_BACK;
+    (0, useAfterMount_1.default)(() => {
+        setEnableInitialAnimation(true);
+    });
+    // Update active page from outside to be used as controlled component
+    const [previousActivePage, setPreviousActivePage] = (0, react_1.useState)(activePage);
+    if (Number.isFinite(activePage) && activePage !== previousActivePage) {
+        setCurrentPage(activePage);
+        setPreviousActivePage(activePage);
+    }
+    const updatePageOnColumnsSizeChange = (firstItem, perPage) => {
+        // Split children in page chunks
+        const pages = (0, chunk_1.default)(perPage)(children);
+        // find the currently rendered first item inside the chunks.
+        // The found chunk index is the new page to render.
+        // example of chunks => [['a', 'b', 'c'], ['d']]
+        const targetPage = (0, findIndex_1.default)((page) => page.some(pageItem => pageItem.key === firstItem.dataset['key']))(pages);
+        if (targetPage !== currentPage) {
+            setCurrentPage(targetPage);
+        }
+    };
+    // When the container size changes, adapt the amount of columns to be rendered according
+    // to the given min width of a single item. The new amount of columns also has to respect
+    // the lower and upper limit. When updating the amount, the current page hse to be updated as well.
+    (0, react_1.useEffect)(() => {
+        if (!columnWrapperRef.current) {
+            return;
+        }
+        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
+        if (!firstItem) {
+            return;
+        }
+        // Get the width of the first column to calculate how many columns fit in one page
+        // according to the given minWidth per column
+        const columnWidth = firstItem.getBoundingClientRect().width;
+        // Limit columns per page for given min and max values
+        const allowForLessColumns = columnsPerPage - 1 >= minColumns;
+        const allowForMoreColumns = columnsPerPage + 1 <= maxColumns;
+        // The threshold is required to avoid jumping between bigger and smaller after the columns per page
+        // has changed, and it continues to resize
+        const goSmaller = allowForLessColumns && columnWidth + MIN_WITH_THRESHOLD <= minColumnWith;
+        const goBigger = allowForMoreColumns && (columnsPerPage + 1) * minColumnWith <= columnWrapperWidth;
+        // During resizing, we don't want any animation
+        setIsResizePage(true);
+        if (goBigger) {
+            const newValue = columnsPerPage + 1;
+            setColumnsPerPage(newValue);
+            updatePageOnColumnsSizeChange(firstItem, newValue);
+            return;
+        }
+        if (goSmaller) {
+            const newValue = columnsPerPage - 1;
+            setColumnsPerPage(newValue);
+            updatePageOnColumnsSizeChange(firstItem, newValue);
+            return;
+        }
+    }, [columnWrapperWidth, columnWrapperRef.current, children, columnsPerPage]);
+    const handlePrevClick = () => {
+        setIsResizePage(false);
+        const pageNumber = currentPage - 1;
+        setCurrentPage(pageNumber);
+        onPreviousClick(pageNumber, columnsPerPage);
+    };
+    const handleNextClick = () => {
+        setIsResizePage(false);
+        const pageNumber = currentPage + 1;
+        setCurrentPage(pageNumber);
+        onNextClick(pageNumber, columnsPerPage);
+    };
+    if (!children) {
+        return null;
+    }
+    // Split the children/columns in chunks according to the current columns per page size
+    // and get the current page chunk for rendering
+    const columnsToDisplay = (0, chunk_1.default)(columnsPerPage)(children)[currentPage];
+    const showPageButtons = minColumns < children.length;
+    const disablePreviousPage = currentPage === 0;
+    const disableNextPage = currentPage === Math.ceil(children.length / columnsPerPage) - 1;
+    const wrapperClassName = (0, classnames_1.default)('ResponsiveColumnStripe', 'display-flex align-items-center', 'overflow-hidden', className);
+    const baseButtonClassName = (0, classnames_1.default)('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12');
+    const disabledButtonClassName = 'pointer-events-none opacity-30';
+    const previousButtonClassName = (0, classnames_1.default)('PreviousButton', baseButtonClassName, disablePreviousPage && disabledButtonClassName);
+    const nextButtonClassName = (0, classnames_1.default)('NextButton', baseButtonClassName, disableNextPage && disabledButtonClassName);
+    const mergedColumnsWrapperClassName = (0, classnames_1.default)('ColumnWrapper', 'flex-1-1', 'display-flex', columnsWrapperClassName);
+    const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
+    // Use the given custom component type "div" or any other. Clone the children to inject certain
+    // properties that are required to stretch the items and deal with their size.
+    const columns = ((0, jsx_runtime_1.jsx)(ComponentType, { className: mergedColumnsWrapperClassName, children: react_1.Children.map(columnsToDisplay, column => (0, react_1.cloneElement)(column, {
+            className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,
+            // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
+            'data-key': column.key,
+        })) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, ref: ref, className: wrapperClassName, children: [showPageButtons && ((0, jsx_runtime_1.jsx)("div", { className: previousButtonClassName, onClick: handlePrevClick, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef, children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
+                    // @ts-ignore-next-line
+                    (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION, children: columns }, currentPage) }))] }), showPageButtons && ((0, jsx_runtime_1.jsx)("div", { className: nextButtonClassName, onClick: handleNextClick, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] }));
+});
+exports.default = ResponsiveColumnStripe;

package/lib/es/src/components/rioglyph/Rioglyph.d.ts

@@ -0,0 +1,34 @@
+import type rioglyphMetaData from '../../../rioglyph/rioglyphMetaData.json';
+export type IconType = keyof typeof rioglyphMetaData;
+export type RioglyphProps = {
+    /**
+     * The icon class to display.
+     */
+    icon: IconType;
+    /**
+     * Additional classes set to the icon span.
+     */
+    iconClassName?: string;
+    /**
+     * The size (text-size) of the icon
+     */
+    size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '10' | '11' | '12' | '14' | '16' | '18' | '20';
+    /**
+     * Spinning animation
+     */
+    spinning?: boolean;
+    /**
+     * Pulsing animation
+     */
+    pulsing?: boolean;
+    /**
+     * The icon class to display as a pair (optional).
+     */
+    pairIcon?: IconType;
+    /**
+     * Additional classes set to the pairIcon span.
+     */
+    pairIconClassName?: string;
+};
+declare const Rioglyph: (props: RioglyphProps) => import("react/jsx-runtime").JSX.Element;
+export default Rioglyph;

package/lib/es/src/components/rioglyph/Rioglyph.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Rioglyph = (props) => {
+    const { icon, iconClassName = '', pairIcon, pairIconClassName = '', size, spinning = false, pulsing = false, } = props;
+    const spinningClass = spinning ? 'spinning' : '';
+    const pulsingClass = pulsing ? 'pulsing' : '';
+    if (pairIcon) {
+        const wrapperClasses = (0, classnames_1.default)('rioglyph-icon-pair', size && `text-size-${size}`);
+        const iconClasses = (0, classnames_1.default)('rioglyph', icon, iconClassName);
+        const pairIconClasses = (0, classnames_1.default)('rioglyph', pairIcon, pairIconClassName, spinningClass, pulsingClass);
+        return ((0, jsx_runtime_1.jsxs)("span", { className: wrapperClasses, children: [(0, jsx_runtime_1.jsx)("span", { className: iconClasses }), (0, jsx_runtime_1.jsx)("span", { className: pairIconClasses })] }));
+    }
+    const iconClasses = (0, classnames_1.default)('rioglyph', icon, size && `text-size-${size}`, iconClassName, spinningClass, pulsingClass);
+    return (0, jsx_runtime_1.jsx)("span", { className: iconClasses });
+};
+exports.default = Rioglyph;

package/lib/es/src/components/rioglyph/getFuelIcon.d.ts

@@ -0,0 +1,38 @@
+import type { IconType } from './types';
+declare const fuelMap: {
+    unknown: string;
+    diesel: string;
+    hydrogen: string;
+    gas: string;
+    electric: string;
+    cng: string;
+    meth: string;
+    eth: string;
+    dsl: string;
+    lpg: string;
+    prop: string;
+    elec: string;
+    bi_gas: string;
+    bi_meth: string;
+    bi_eth: string;
+    bi_lpg: string;
+    bi_cng: string;
+    bi_prop: string;
+    bi_elec: string;
+    bi_mix: string;
+    hyb_gas: string;
+    hyb_eth: string;
+    hyb_dsl: string;
+    hyb_elec: string;
+    hyb_mix: string;
+    hyb_reg: string;
+    ng: string;
+    bi_ng: string;
+    bi_dsl: string;
+    ng2: string;
+    df_dsl_cng: string;
+    df_dsl_lng: string;
+};
+export type FuelType = keyof typeof fuelMap;
+export declare const getFuelIcon: (fuelType?: FuelType) => IconType;
+export {};

package/lib/es/src/components/rioglyph/getFuelIcon.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFuelIcon = void 0;
+const fuelMap = {
+    unknown: 'rioglyph-question',
+    // RIO custom defined values
+    diesel: 'rioglyph-fuel-liquid', // (liquid)
+    hydrogen: 'rioglyph-fuel-hydrogen', // (hydrogen)
+    // Official values
+    gas: 'rioglyph-fuel-liquid', // Gasoline/petrol (liquid)
+    electric: 'rioglyph-fuel-electric', // (electric)
+    cng: 'rioglyph-fuel-gas', // Compressed Natural Gas (CNG) (gaseous)
+    meth: 'rioglyph-fuel-liquid', // Methanol (liquid)
+    eth: 'rioglyph-fuel-liquid', // Ethanol (liquid)
+    dsl: 'rioglyph-fuel-liquid', // Diesel (liquid)
+    lpg: 'rioglyph-fuel-gas', // Liquefied Petroleum Gas (LPG) (gaseous)
+    prop: 'rioglyph-fuel-gas', // Propane (gaseous)
+    elec: 'rioglyph-fuel-electric', // Battery/electric (electric)
+    bi_gas: 'rioglyph-fuel-liquid', // Bi-fuel vehicle using gasoline (liquid)
+    bi_meth: 'rioglyph-fuel-liquid', // Bi-fuel vehicle using methanol (liquid)
+    bi_eth: 'rioglyph-fuel-liquid', // Bi-fuel vehicle using ethanol (liquid)
+    bi_lpg: 'rioglyph-fuel-gas', // Bi-fuel vehicle using LPG (gaseous)
+    bi_cng: 'rioglyph-fuel-gas', // Bi-fuel vehicle using CNG (gaseous)
+    bi_prop: 'rioglyph-fuel-gas', // Bi-fuel vehicle using propane (gaseous)
+    bi_elec: 'rioglyph-fuel-electric', // Bi-fuel vehicle using battery (electric)
+    bi_mix: 'rioglyph-plus', // Bi-fuel vehicle using battery and combustion engine (electric + liquid/gaseous)
+    hyb_gas: 'rioglyph-fuel-liquid', // Hybrid vehicle using gasoline engine (liquid)
+    hyb_eth: 'rioglyph-fuel-liquid', // Hybrid vehicle using gasoline engine on ethanol (liquid)
+    hyb_dsl: 'rioglyph-fuel-liquid', // Hybrid vehicle using diesel engine (liquid)
+    hyb_elec: 'rioglyph-fuel-electric', // Hybrid vehicle using battery (electric)
+    hyb_mix: 'rioglyph-plus', // Hybrid vehicle using battery and combustion engine (electric + liquid/gaseous)
+    hyb_reg: 'rioglyph-plus', // Hybrid vehicle in regeneration mode (other)
+    ng: 'rioglyph-fuel-gas', // Natural Gas (NG) (gaseous)
+    bi_ng: 'rioglyph-fuel-gas', // Bi-fuel vehicle using NG (gaseous)
+    bi_dsl: 'rioglyph-fuel-liquid', // Bi-fuel using diesel (liquid)
+    ng2: 'rioglyph-fuel-gas', // Natural Gas (Compressed or Liquefied Natural Gas) (gaseous)
+    df_dsl_cng: 'rioglyph-plus', // Dual Fuel – Diesel and CNG (liquid + gaseous)
+    df_dsl_lng: 'rioglyph-plus', // Dual Fuel – Diesel and LNG (liquid + gaseous)
+};
+const getFuelIcon = (fuelType = 'unknown') => {
+    const icon = fuelMap[fuelType] ?? fuelMap.unknown;
+    return icon;
+};
+exports.getFuelIcon = getFuelIcon;

package/lib/es/src/components/rioglyph/types.d.ts

@@ -0,0 +1,2 @@
+import type rioglyphMetaData from '../../../rioglyph/rioglyphMetaData.json';
+export type IconType = keyof typeof rioglyphMetaData;

package/lib/es/src/components/rioglyph/types.js

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

package/lib/es/src/components/rules/RuleConnector.d.ts

@@ -0,0 +1,62 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type RuleConnectorProps = {
+    /**
+     * The placement for the connector.
+     *
+     * Possible values are `start`, `center` and `end`.
+     *
+     * @default 'center'
+     */
+    placement?: 'start' | 'center' | 'end';
+    /**
+     * The rioglyph icon name.
+     *
+     * @default 'rioglyph-plus'
+     */
+    icon?: string;
+    /**
+     * Defines whether the connector is shown.
+     *
+     * @default false
+     */
+    hidden?: boolean;
+    /**
+     * Background color of the connector itself.
+     *
+     * @default 'bg-lightest'
+     */
+    background?: string;
+    /**
+     * Background color of the surrounding area where the rule containers are placed.
+     *
+     * @default 'bg-white'
+     */
+    pageBackground?: string;
+    /**
+     * Classes to be set on the connector content.
+     *
+     * @default 'text-color-light'
+     */
+    contentClassName?: string;
+    /**
+     * Defines whether the connector has a border.
+     *
+     * @default false
+     */
+    hasBorder?: boolean;
+    /**
+     * The border color class name.
+     */
+    borderColor?: string;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const RuleConnector: {
+    (props: PropsWithChildren<RuleConnectorProps>): import("react/jsx-runtime").JSX.Element;
+    START: string;
+    CENTER: string;
+    END: string;
+};
+export default RuleConnector;

package/lib/es/src/components/rules/RuleConnector.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const getBorderColorFromBg = (bg) => bg.replace('bg', 'border-color');
+const commonRoundedClasses = (0, classnames_1.default)('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
+const commonRoundedBorderClippingClasses = (0, classnames_1.default)('position-relative', 'width-20', 'height-20');
+const RuleConnector = (props) => {
+    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children, ...remainingProps } = props;
+    const wrapperClassNames = (0, classnames_1.default)('RuleConnector', 'height-20', 'display-flex', `justify-content-${placement}`, 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
+    const leftRoundedBox = (0, classnames_1.default)('margin-right--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
+    const leftRoundedBoxBorderClipping = (0, classnames_1.default)('right-50pct', commonRoundedBorderClippingClasses, pageBackground);
+    const contentWrapperClassNames = (0, classnames_1.default)('padding-left-20 padding-right-20', 'z-index-1', background, hasBorder && `border ${getBorderColorFromBg(background)}`);
+    const rightRoundedBox = (0, classnames_1.default)('margin-left--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
+    const rightRoundedBoxBorderClipping = (0, classnames_1.default)('left-50pct', commonRoundedBorderClippingClasses, pageBackground);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": 'ruleConnector', ...remainingProps, className: wrapperClassNames, children: [(0, jsx_runtime_1.jsx)("div", { className: leftRoundedBox, children: (0, jsx_runtime_1.jsx)("div", { className: leftRoundedBoxBorderClipping }) }), (0, jsx_runtime_1.jsx)("span", { className: contentWrapperClassNames, children: (0, jsx_runtime_1.jsx)("span", { className: contentClassName, children: children ? children : (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${icon}`, "data-testid": 'ruleConnectorIcon' }) }) }), (0, jsx_runtime_1.jsx)("div", { className: rightRoundedBox, children: (0, jsx_runtime_1.jsx)("div", { className: rightRoundedBoxBorderClipping }) })] }));
+};
+RuleConnector.START = 'start';
+RuleConnector.CENTER = 'center';
+RuleConnector.END = 'end';
+exports.default = RuleConnector;

package/lib/es/src/components/rules/RuleContainer.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes, type JSX, type PropsWithChildren } from 'react';
+export type RuleContainerProps = {
+    /**
+     * Defines whether the container is shown.
+     *
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * Determines the container style for when no rule option is selected.
+     *
+     * It also hides the connector in this case.
+     *
+     * @default false
+     */
+    unchecked?: boolean;
+    /**
+     * The box background class name.
+     *
+     * @default 'bg-lightest'
+     */
+    background?: string;
+    /**
+     * The border color class name.
+     */
+    borderColor?: string;
+    /**
+     * Defines whether the connector is shown.
+     *
+     * @default false
+     */
+    hideConnector?: boolean;
+    /**
+     * Overwrites the default connector.
+     */
+    customConnector?: string | JSX.Element;
+    /**
+     * Additional classes for the wrapper element.
+     */
+    className?: string;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+declare const RuleContainer: (props: PropsWithChildren<RuleContainerProps>) => import("react/jsx-runtime").JSX.Element | null;
+export default RuleContainer;

package/lib/es/src/components/rules/RuleContainer.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const RuleConnector_1 = tslib_1.__importDefault(require("./RuleConnector"));
+const RuleContainer = (props) => {
+    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children, ...remainingProps } = props;
+    if (!show) {
+        return null;
+    }
+    const boxClassNames = (0, classnames_1.default)('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: 'RuleContainer', ...remainingProps, children: [(0, jsx_runtime_1.jsx)("div", { className: boxClassNames, "data-testid": 'ruleContainerBox', children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { exitBeforeEnter: true, children: react_1.Children.map(children, child => {
+                        if (!child) {
+                            return null;
+                        }
+                        // just bending the type system a bit so that it matches the existing implementation :)
+                        const childAsElement = child;
+                        // In case there are multiple children of RuleContainer, use the
+                        // type name or the type itself as a key to animate between the two children
+                        return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: child }, childAsElement.type?.name || childAsElement.type));
+                    }) }) }), customConnector ? customConnector : (0, jsx_runtime_1.jsx)(RuleConnector_1.default, { hidden: unchecked || hideConnector })] }));
+};
+exports.default = RuleContainer;