@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/utils/deviceUtils.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toggleZoomOnMobile = exports.inIframe = exports.isRetinaDevice = exports.isMac = exports.isDesktop = exports.isMobile = exports.isMobileScreen = exports.SCREEN_XL = exports.SCREEN_LG = exports.SCREEN_MD = exports.SCREEN_SM = exports.MOBILE_SCREEN = exports.hasTouch = void 0;
+const cssuseragent_1 = require("./cssuseragent");
+// As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not,
+// we need to initialize only when html really exists. This avoids issues when running the UIKIT in a web-worker
+if (document?.documentElement) {
+    (0, cssuseragent_1.cssua)(document.documentElement, navigator.userAgent, navigator.standalone);
+}
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const isDefined = (val) => val !== undefined && val !== null;
+// see https://patrickhlauke.github.io/touch/touchscreen-detection/ for reference
+const hasTouch = () => {
+    if (window.PointerEvent && isDefined(navigator.maxTouchPoints)) {
+        // if Pointer Events are supported, just check maxTouchPoints
+        if (navigator.maxTouchPoints > 0) {
+            return true;
+        }
+    }
+    else if (window.matchMedia?.('(any-pointer:coarse)').matches) {
+        // no Pointer Events...
+        // check for any-pointer:coarse which mostly means touchscreen
+        return true;
+    }
+    else if (window.TouchEvent || isDefined(window.ontouchstart)) {
+        // last resort - check for exposed touch events API / event handler
+        return true;
+    }
+    return false;
+};
+exports.hasTouch = hasTouch;
+// Screen sizes
+exports.MOBILE_SCREEN = 480;
+exports.SCREEN_SM = 768;
+exports.SCREEN_MD = 992;
+exports.SCREEN_LG = 1200;
+exports.SCREEN_XL = 1700;
+const isMobileScreen = () => window.matchMedia(`(max-width: ${exports.MOBILE_SCREEN}px)`).matches;
+exports.isMobileScreen = isMobileScreen;
+const isMobile = () => document?.documentElement.classList.contains('ua-mobile');
+exports.isMobile = isMobile;
+const isDesktop = () => document?.documentElement.classList.contains('ua-desktop');
+exports.isDesktop = isDesktop;
+const isMac = () => document?.documentElement.classList.contains('ua-desktop-macintosh');
+exports.isMac = isMac;
+const isRetinaDevice = () => window.devicePixelRatio > 1;
+exports.isRetinaDevice = isRetinaDevice;
+const inIframe = () => {
+    try {
+        return window.self !== window.top;
+    }
+    catch (_) {
+        return true;
+    }
+};
+exports.inIframe = inIframe;
+// Disables the Zoom for the mobile devices.
+// This is not good for accessibility but makes the webpage feel more like a native app.
+// <meta name="viewport" content="user-scalable=0 ..." />
+const USER_SCALABLE = 'user-scalable=0 maximum-scale=1';
+const toggleZoomOnMobile = () => {
+    if (!document) {
+        return;
+    }
+    const viewportMeta = document.head.querySelector('[name="viewport"]');
+    if (!viewportMeta) {
+        return;
+    }
+    const isScalable = viewportMeta.content.includes(USER_SCALABLE);
+    // Restrict the zoom for mobile if not yet set
+    if ((0, exports.isMobile)() && !isScalable) {
+        viewportMeta.content += ` ${USER_SCALABLE}`;
+        return;
+    }
+    // Remove the setting, for non mobile cases
+    if (!(0, exports.isMobile)() && isScalable) {
+        viewportMeta.content = viewportMeta.content.replace(USER_SCALABLE, '').trim();
+        return;
+    }
+};
+exports.toggleZoomOnMobile = toggleZoomOnMobile;

package/lib/es/src/utils/formatUtils.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Helper to extract a number from a string that may have units or grouping delimiters. It take localization into account.
+ *
+ * @param value
+ * @param locale
+ * @returns parsed number
+ */
+export declare const parseNumberFromValue: (value: unknown, locale: string) => number;
+/**
+ * Retrieves a nested property value from an object using dot-notation.
+ *
+ * @param obj - The object to retrieve the value from.
+ * @param path - Dot-separated path to the desired property (e.g. "price.amount").
+ * @returns The value at the given path or undefined if not found.
+ */
+export declare const getValueByPath: (obj: unknown, path: string) => unknown;

package/lib/es/src/utils/formatUtils.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getValueByPath = exports.parseNumberFromValue = void 0;
+const tslib_1 = require("tslib");
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+/**
+ * Helper to extract a number from a string that may have units or grouping delimiters. It take localization into account.
+ *
+ * @param value
+ * @param locale
+ * @returns parsed number
+ */
+const parseNumberFromValue = (value, locale) => {
+    if ((0, isNil_1.default)(value)) {
+        return 0;
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (typeof value !== 'string') {
+        return 0;
+    }
+    const example = 1234567.89;
+    const parts = new Intl.NumberFormat(locale).formatToParts(example);
+    const groupSymbol = parts.find(p => p.type === 'group')?.value ?? ',';
+    const decimalSymbol = parts.find(p => p.type === 'decimal')?.value ?? '.';
+    // Extract numeric part only (up to last digit or decimal), ignore units
+    const match = value.match(/[-\d.,'\u00A0\s]+/);
+    if (!match) {
+        return 0;
+    }
+    let numeric = match[0].trim();
+    // Normalize: remove group symbols (thousand delimiter)
+    if (groupSymbol !== decimalSymbol) {
+        numeric = numeric.replaceAll(groupSymbol, '');
+    }
+    // Replace decimal with dot for number parsing
+    if (decimalSymbol !== '.') {
+        numeric = numeric.replace(decimalSymbol, '.');
+    }
+    const parsed = Number.parseFloat(numeric);
+    return Number.isNaN(parsed) ? Number.NaN : parsed;
+};
+exports.parseNumberFromValue = parseNumberFromValue;
+/**
+ * Retrieves a nested property value from an object using dot-notation.
+ *
+ * @param obj - The object to retrieve the value from.
+ * @param path - Dot-separated path to the desired property (e.g. "price.amount").
+ * @returns The value at the given path or undefined if not found.
+ */
+const getValueByPath = (obj, path) => {
+    return path.split('.').reduce((acc, key) => (acc && typeof acc === 'object' ? acc[key] : undefined), obj);
+};
+exports.getValueByPath = getValueByPath;

package/lib/es/src/utils/fuelTypeUtils.d.ts

@@ -0,0 +1,62 @@
+import type { IconType } from '../components/rioglyph/Rioglyph';
+export type FuelType = 'unknown' | 'gas' | 'diesel' | 'kerosene' | 'heavy_fuel_oil' | 'methanol' | 'ethanol' | 'lpg' | 'cng' | 'propane' | 'ng' | 'ng_compressed' | 'electric' | 'bi_fuel_gas' | 'bi_fuel_methanol' | 'bi_fuel_ethanol' | 'bi_fuel_lpg' | 'bi_fuel_cng' | 'bi_fuel_ng' | 'bi_fuel_diesel' | 'bi_fuel_propane' | 'bi_fuel_battery' | 'bi_fuel_battery_combustion' | 'hybrid_gas' | 'hybrid_gas_ethanol' | 'hybrid_diesel' | 'hybrid_battery' | 'hybrid_battery_combustion' | 'hybrid_regeneration_mode' | 'dual_fuel_diesel_cng' | 'dual_fuel_diesel_lng' | 'hydrogen' | 'fuel_cell_hydrogen';
+export type FuelTypeGroup = 'liquid' | 'gas' | 'electric' | 'hydrogen' | 'hybrid' | 'unknown';
+/**
+ * Maps each fuel type group to its representative icon.
+ *
+ * This icon can be used to visually identify the group in the UI,
+ * such as in filter buttons or labels.
+ */
+export declare const fuelTypeGroupIcons: Record<FuelTypeGroup, IconType>;
+/**
+ * List of all defined fuel type groups (excluding "unknown").
+ *
+ * Used to render UI elements like filter buttons or fuel group selectors.
+ */
+export declare const fuelTypeGroups: FuelTypeGroup[];
+/**
+ * Returns the icon for a given fuel type group.
+ *
+ * @param fuelTypeGroup - The fuel group to get the icon for.
+ * @returns The corresponding icon for the group.
+ *
+ * @example
+ * getFuelTypeGroupIcon('gas') // → 'rioglyph-fuel-gas'
+ */
+export declare const getFuelTypeGroupIcon: (fuelTypeGroup: FuelTypeGroup) => "rioglyph-status-available" | "rioglyph-status-working" | "rioglyph-status-driving" | "rioglyph-status-resting" | "rioglyph-arrow-left" | "rioglyph-remove" | "rioglyph-arrow-right" | "rioglyph-empty" | "rioglyph-truck-breakdown" | "rioglyph-chevron-down" | "rioglyph-ban-circle" | "rioglyph-wrench" | "rioglyph-stars" | "rioglyph-looking-glass-man" | "rioglyph-academic-cap" | "rioglyph-addressbook" | "rioglyph-air-pay" | "rioglyph-am" | "rioglyph-angle-double-down" | "rioglyph-angle-double-left" | "rioglyph-angle-double-right" | "rioglyph-angle-double-up" | "rioglyph-antenna" | "rioglyph-api" | "rioglyph-archive" | "rioglyph-area-chart" | "rioglyph-area-in" | "rioglyph-area-out" | "rioglyph-arrow-down" | "rioglyph-arrow-up" | "rioglyph-axle" | "rioglyph-battery-level-empty" | "rioglyph-battery-level-full" | "rioglyph-battery-level-low" | "rioglyph-beacon" | "rioglyph-book" | "rioglyph-bookable-poi" | "rioglyph-bookmark-square" | "rioglyph-bookmark" | "rioglyph-border-crossing" | "rioglyph-brake" | "rioglyph-building" | "rioglyph-bus-baseline" | "rioglyph-bus-breakdown" | "rioglyph-bus" | "rioglyph-businessman" | "rioglyph-calendar-parking" | "rioglyph-calendar-plus" | "rioglyph-calendar-today" | "rioglyph-calendar" | "rioglyph-camera" | "rioglyph-car-baseline" | "rioglyph-car-wash" | "rioglyph-car" | "rioglyph-card-hotel" | "rioglyph-card-reader" | "rioglyph-cards-add" | "rioglyph-cards-grid" | "rioglyph-cards-list" | "rioglyph-cards-table" | "rioglyph-cargo" | "rioglyph-carrier" | "rioglyph-chat" | "rioglyph-check-badge" | "rioglyph-check-shield" | "rioglyph-checkbox-checked" | "rioglyph-checkbox" | "rioglyph-checkboxes" | "rioglyph-chevron-left" | "rioglyph-chevron-right" | "rioglyph-chevron-up" | "rioglyph-circle-stack" | "rioglyph-click" | "rioglyph-climate-control" | "rioglyph-clipboard" | "rioglyph-cloud-download" | "rioglyph-cloud-not-saved" | "rioglyph-cloud-upload" | "rioglyph-cloud" | "rioglyph-coasting" | "rioglyph-code-braces" | "rioglyph-code-brackets" | "rioglyph-cog" | "rioglyph-color-swatch" | "rioglyph-comment" | "rioglyph-compare" | "rioglyph-component-custom-recurrent" | "rioglyph-component-custom" | "rioglyph-component" | "rioglyph-construction" | "rioglyph-cookie" | "rioglyph-cooling" | "rioglyph-cost-efficency" | "rioglyph-cruise-control" | "rioglyph-csv" | "rioglyph-currency-euro" | "rioglyph-damages" | "rioglyph-dangerousgoods" | "rioglyph-dashboard" | "rioglyph-delivery-completed" | "rioglyph-delivery-error" | "rioglyph-delivery-late" | "rioglyph-delivery-on-track" | "rioglyph-delivery-warning" | "rioglyph-delivery" | "rioglyph-design" | "rioglyph-desktop" | "rioglyph-detail-view-info" | "rioglyph-detail-view" | "rioglyph-direction" | "rioglyph-document-out" | "rioglyph-document" | "rioglyph-download" | "rioglyph-drag-n-drop" | "rioglyph-drive-history" | "rioglyph-driver-card" | "rioglyph-driver" | "rioglyph-drivercard-in" | "rioglyph-drivercard-out" | "rioglyph-duplicate" | "rioglyph-earphone" | "rioglyph-engine" | "rioglyph-envelope-indicator" | "rioglyph-envelope-open" | "rioglyph-envelope" | "rioglyph-erase" | "rioglyph-error-sign" | "rioglyph-euro-note" | "rioglyph-exclamation-sign" | "rioglyph-exclamation" | "rioglyph-eye-close" | "rioglyph-eye-option" | "rioglyph-face-frown" | "rioglyph-face-neutral" | "rioglyph-face-smile" | "rioglyph-facetime-video" | "rioglyph-factory" | "rioglyph-file-signature" | "rioglyph-files" | "rioglyph-fill" | "rioglyph-filling-e-station" | "rioglyph-filling-station" | "rioglyph-filter-active" | "rioglyph-filter" | "rioglyph-fingerprint" | "rioglyph-finish" | "rioglyph-fire" | "rioglyph-flag" | "rioglyph-flash" | "rioglyph-folder-closed" | "rioglyph-folder-open" | "rioglyph-fuel-diesel" | "rioglyph-fuel-electric" | "rioglyph-fuel-gas" | "rioglyph-fuel-hydrogen" | "rioglyph-fuel-liquid" | "rioglyph-fuel-mix" | "rioglyph-fullscreen" | "rioglyph-geofence" | "rioglyph-globe" | "rioglyph-group" | "rioglyph-hand-down" | "rioglyph-hand-left" | "rioglyph-hand-right" | "rioglyph-hand-up" | "rioglyph-handshake" | "rioglyph-hash" | "rioglyph-heart" | "rioglyph-heating" | "rioglyph-home-sign" | "rioglyph-home" | "rioglyph-hour-glass" | "rioglyph-id" | "rioglyph-inbox-in" | "rioglyph-inbox-out" | "rioglyph-inbox-stack" | "rioglyph-inbox" | "rioglyph-info-sign" | "rioglyph-info" | "rioglyph-key" | "rioglyph-kickdown" | "rioglyph-language" | "rioglyph-layer-pois" | "rioglyph-layer" | "rioglyph-light-bulb" | "rioglyph-line-chart" | "rioglyph-link" | "rioglyph-load-unload" | "rioglyph-load" | "rioglyph-location-arrow" | "rioglyph-lock-open" | "rioglyph-lock" | "rioglyph-log-in" | "rioglyph-logout" | "rioglyph-looking-glass" | "rioglyph-maintenance-components" | "rioglyph-map-location" | "rioglyph-map-marker" | "rioglyph-map" | "rioglyph-megaphone" | "rioglyph-menu-hamburger" | "rioglyph-merge" | "rioglyph-milage" | "rioglyph-minus-light" | "rioglyph-minus-sign" | "rioglyph-minus" | "rioglyph-missing" | "rioglyph-mode-dark-light" | "rioglyph-more" | "rioglyph-new-window" | "rioglyph-newspaper" | "rioglyph-notification" | "rioglyph-number-1" | "rioglyph-number-2" | "rioglyph-number-3" | "rioglyph-off" | "rioglyph-oil-can" | "rioglyph-ok-circle" | "rioglyph-ok-sign" | "rioglyph-ok" | "rioglyph-onboarding" | "rioglyph-ongoing" | "rioglyph-option-horizontal" | "rioglyph-option-vertical" | "rioglyph-order" | "rioglyph-palette-broken" | "rioglyph-palette" | "rioglyph-paper-clip" | "rioglyph-parcel-broken" | "rioglyph-parcel" | "rioglyph-parking" | "rioglyph-pause-circle" | "rioglyph-pause" | "rioglyph-pdf-file" | "rioglyph-pencil-square" | "rioglyph-pencil" | "rioglyph-phone" | "rioglyph-pictures" | "rioglyph-pin-range" | "rioglyph-pin" | "rioglyph-play-circle" | "rioglyph-play" | "rioglyph-plugged-off" | "rioglyph-plugged-on" | "rioglyph-plus-light" | "rioglyph-plus-sign" | "rioglyph-plus" | "rioglyph-pm" | "rioglyph-poi" | "rioglyph-polygon" | "rioglyph-position" | "rioglyph-print" | "rioglyph-progress-ongoing" | "rioglyph-progress-remaining" | "rioglyph-pto-off" | "rioglyph-pto-on" | "rioglyph-pushpin" | "rioglyph-puzzle" | "rioglyph-pylon" | "rioglyph-qr-code" | "rioglyph-question-sign" | "rioglyph-question" | "rioglyph-record" | "rioglyph-refresh" | "rioglyph-remove-circle" | "rioglyph-remove-sign" | "rioglyph-repeat" | "rioglyph-resize-full" | "rioglyph-resize-horizontal" | "rioglyph-resize-small" | "rioglyph-resize-vertical" | "rioglyph-retrofit" | "rioglyph-retweet" | "rioglyph-revert" | "rioglyph-rio-marker" | "rioglyph-rio" | "rioglyph-road-restrictions" | "rioglyph-road" | "rioglyph-robot" | "rioglyph-rocket" | "rioglyph-role-management" | "rioglyph-route-option" | "rioglyph-route-view" | "rioglyph-route" | "rioglyph-ruler" | "rioglyph-save" | "rioglyph-scale" | "rioglyph-scan" | "rioglyph-scissors" | "rioglyph-search-list" | "rioglyph-search-truck" | "rioglyph-search" | "rioglyph-send" | "rioglyph-series" | "rioglyph-server-stack" | "rioglyph-settings" | "rioglyph-share-alt" | "rioglyph-share-nodes" | "rioglyph-share" | "rioglyph-ship" | "rioglyph-shopping-bag" | "rioglyph-shopping-cart" | "rioglyph-signature" | "rioglyph-slope-down-max" | "rioglyph-slope-down-min" | "rioglyph-slope-up-max" | "rioglyph-slope-up-min" | "rioglyph-sort-by-attributes-alt" | "rioglyph-sort-by-attributes" | "rioglyph-sort" | "rioglyph-sparkles" | "rioglyph-speed" | "rioglyph-sphere" | "rioglyph-spinner" | "rioglyph-split-view" | "rioglyph-stack" | "rioglyph-star-empty" | "rioglyph-star" | "rioglyph-start" | "rioglyph-stats" | "rioglyph-steering-wheel" | "rioglyph-stopover" | "rioglyph-support" | "rioglyph-table-view" | "rioglyph-tachograph-download" | "rioglyph-tachograph" | "rioglyph-tag" | "rioglyph-tasks" | "rioglyph-temperature" | "rioglyph-th-list" | "rioglyph-thumbs-down" | "rioglyph-thumbs-up" | "rioglyph-tickets" | "rioglyph-time-alt" | "rioglyph-time-cancle" | "rioglyph-time" | "rioglyph-tire" | "rioglyph-tms" | "rioglyph-to-bottom" | "rioglyph-to-left" | "rioglyph-to-right" | "rioglyph-to-top" | "rioglyph-traffic-lights" | "rioglyph-trailer-baseline" | "rioglyph-trailer" | "rioglyph-trailerposition" | "rioglyph-train" | "rioglyph-transfer" | "rioglyph-trash" | "rioglyph-triangle-bottom" | "rioglyph-triangle-left" | "rioglyph-triangle-right" | "rioglyph-triangle-top" | "rioglyph-trophy" | "rioglyph-truck-baseline" | "rioglyph-truck-unit" | "rioglyph-truck" | "rioglyph-unlink" | "rioglyph-upload" | "rioglyph-user-add" | "rioglyph-user-group" | "rioglyph-user-ok" | "rioglyph-user-remove" | "rioglyph-user-sign-off" | "rioglyph-user-sign" | "rioglyph-user" | "rioglyph-van-baseline" | "rioglyph-van" | "rioglyph-volume" | "rioglyph-wallet" | "rioglyph-warning-sign" | "rioglyph-weather-cloudy" | "rioglyph-weather-icy" | "rioglyph-weather-overcast" | "rioglyph-weather-raining" | "rioglyph-weather-snowing" | "rioglyph-weather-stormy" | "rioglyph-weather-sunny" | "rioglyph-weather-thundering" | "rioglyph-weather-windy" | "rioglyph-weight" | "rioglyph-width" | "rioglyph-wifi-off" | "rioglyph-wifi" | "rioglyph-window" | "rioglyph-workshop" | "rioglyph-xmas-raindeer" | "rioglyph-xmas-santa" | "rioglyph-video-off" | "rioglyph-video";
+/**
+ * Returns the representative icon for a specific fuel type.
+ *
+ * This function maps a fuel type to its logical fuel group,
+ * and returns the icon associated with that group.
+ *
+ * @param fuelType - The specific fuel type of the item. Default is 'unknown'.
+ * @returns The icon associated with the resolved fuel group.
+ *
+ * @example
+ * getFuelIcon('cng') // → 'rioglyph-fuel-gas'
+ */
+export declare const getFuelIcon: (fuelType?: FuelType) => IconType;
+/**
+ * Filters a list of items by fuel group.
+ *
+ * @param items - The list of items to filter.
+ * @param activeGroups - The selected fuel type groups to include in the result.
+ * @param getFuelType - Function to extract the fuel type from an item.
+ * @returns The filtered list containing only items that belong to one of the specified fuel groups.
+ *
+ * @example
+ * filterByFuelTypeGroup(vehicles, ['electric'], v => v.fuelType);
+ */
+export declare const filterByFuelTypeGroup: <T>(items: T[], activeGroups: FuelTypeGroup[], getFuelType: (item: T) => FuelType | undefined) => T[];
+/**
+ * Counts how many items belong to each fuel type group.
+ *
+ * @param items - The list of items to count.
+ * @param getFuelType - Function to extract the fuel type from an item.
+ * @returns An object mapping each fuel type group to its count.
+ *
+ * @example
+ * countFuelTypeGroups(vehicles, v => v.fuelType);
+ */
+export declare const countFuelTypeGroups: <T>(items: T[], getFuelType: (item: T) => FuelType | undefined) => Record<FuelTypeGroup, number>;

package/lib/es/src/utils/fuelTypeUtils.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.countFuelTypeGroups = exports.filterByFuelTypeGroup = exports.getFuelIcon = exports.getFuelTypeGroupIcon = exports.fuelTypeGroups = exports.fuelTypeGroupIcons = void 0;
+const fuelGroupMap = {
+    unknown: 'unknown',
+    gas: 'liquid', // Gasoline/petrol
+    diesel: 'liquid', // Diesel
+    kerosene: 'liquid', // Kerosene
+    heavy_fuel_oil: 'liquid', // Heavy Fuel Oil
+    methanol: 'gas', // Methanol
+    ethanol: 'gas', // Ethanol
+    lpg: 'gas', // Liquefied Petroleum Gas (LPG)
+    cng: 'gas', // Compressed Natural Gas (CNG)
+    propane: 'gas', // Propane
+    ng: 'gas', // Natural Gas (NG)
+    ng_compressed: 'gas', // Natural Gas (Compressed or Liquefied Natural Gas)
+    electric: 'electric', // Battery/electric
+    bi_fuel_gas: 'hybrid', // Bi-fuel vehicle using gasoline
+    bi_fuel_methanol: 'hybrid', // Bi-fuel vehicle using methanol
+    bi_fuel_ethanol: 'hybrid', // Bi-fuel vehicle using ethanol
+    bi_fuel_lpg: 'hybrid', // Bi-fuel vehicle using LPG
+    bi_fuel_cng: 'hybrid', // Bi-fuel vehicle using CNG
+    bi_fuel_ng: 'hybrid', // Bi-fuel vehicle using NG
+    bi_fuel_diesel: 'hybrid', // Bi-fuel using diesel
+    bi_fuel_propane: 'hybrid', // Bi-fuel vehicle using propane
+    bi_fuel_battery: 'hybrid', // Bi-fuel vehicle using battery
+    bi_fuel_battery_combustion: 'hybrid', // Bi-fuel vehicle using battery and combustion
+    hybrid_gas: 'hybrid', // Hybrid vehicle using gasoline engine
+    hybrid_gas_ethanol: 'hybrid', // Hybrid vehicle using gasoline engine on ethanol
+    hybrid_diesel: 'hybrid', // Hybrid vehicle using diesel engine
+    hybrid_battery: 'hybrid', // Hybrid vehicle using battery
+    hybrid_battery_combustion: 'hybrid', // Hybrid vehicle using battery and combustion
+    hybrid_regeneration_mode: 'hybrid', // Hybrid vehicle in regeneration mode
+    dual_fuel_diesel_cng: 'hybrid', // Dual Fuel – Diesel and CNG
+    dual_fuel_diesel_lng: 'hybrid', // Dual Fuel – Diesel and LNG
+    hydrogen: 'hydrogen', // Hydrogen Internal Combustion
+    fuel_cell_hydrogen: 'hydrogen', // Fuel Cell Utilizing Hydrogen Engine
+};
+/**
+ * Maps each fuel type group to its representative icon.
+ *
+ * This icon can be used to visually identify the group in the UI,
+ * such as in filter buttons or labels.
+ */
+exports.fuelTypeGroupIcons = {
+    liquid: 'rioglyph-fuel-liquid',
+    gas: 'rioglyph-fuel-gas',
+    electric: 'rioglyph-fuel-electric',
+    hydrogen: 'rioglyph-fuel-hydrogen',
+    hybrid: 'rioglyph-fuel-mix',
+    unknown: 'rioglyph-question',
+};
+/**
+ * List of all defined fuel type groups (excluding "unknown").
+ *
+ * Used to render UI elements like filter buttons or fuel group selectors.
+ */
+exports.fuelTypeGroups = ['liquid', 'gas', 'electric', 'hydrogen', 'hybrid'];
+/**
+ * Returns the icon for a given fuel type group.
+ *
+ * @param fuelTypeGroup - The fuel group to get the icon for.
+ * @returns The corresponding icon for the group.
+ *
+ * @example
+ * getFuelTypeGroupIcon('gas') // → 'rioglyph-fuel-gas'
+ */
+const getFuelTypeGroupIcon = (fuelTypeGroup) => exports.fuelTypeGroupIcons[fuelTypeGroup];
+exports.getFuelTypeGroupIcon = getFuelTypeGroupIcon;
+/**
+ * Returns the representative icon for a specific fuel type.
+ *
+ * This function maps a fuel type to its logical fuel group,
+ * and returns the icon associated with that group.
+ *
+ * @param fuelType - The specific fuel type of the item. Default is 'unknown'.
+ * @returns The icon associated with the resolved fuel group.
+ *
+ * @example
+ * getFuelIcon('cng') // → 'rioglyph-fuel-gas'
+ */
+const getFuelIcon = (fuelType = 'unknown') => {
+    const group = fuelGroupMap[fuelType] ?? 'unknown';
+    return exports.fuelTypeGroupIcons[group] ?? exports.fuelTypeGroupIcons.unknown;
+};
+exports.getFuelIcon = getFuelIcon;
+/**
+ * Filters a list of items by fuel group.
+ *
+ * @param items - The list of items to filter.
+ * @param activeGroups - The selected fuel type groups to include in the result.
+ * @param getFuelType - Function to extract the fuel type from an item.
+ * @returns The filtered list containing only items that belong to one of the specified fuel groups.
+ *
+ * @example
+ * filterByFuelTypeGroup(vehicles, ['electric'], v => v.fuelType);
+ */
+const filterByFuelTypeGroup = (items, activeGroups, getFuelType) => {
+    if (activeGroups.length === 0) {
+        return items;
+    }
+    return items.filter(item => {
+        const fuelType = getFuelType(item);
+        const group = fuelType ? (fuelGroupMap[fuelType] ?? 'unknown') : 'unknown';
+        return activeGroups.includes(group);
+    });
+};
+exports.filterByFuelTypeGroup = filterByFuelTypeGroup;
+/**
+ * Counts how many items belong to each fuel type group.
+ *
+ * @param items - The list of items to count.
+ * @param getFuelType - Function to extract the fuel type from an item.
+ * @returns An object mapping each fuel type group to its count.
+ *
+ * @example
+ * countFuelTypeGroups(vehicles, v => v.fuelType);
+ */
+const countFuelTypeGroups = (items, getFuelType) => {
+    const counts = {
+        liquid: 0,
+        gas: 0,
+        electric: 0,
+        hydrogen: 0,
+        hybrid: 0,
+        unknown: 0,
+    };
+    for (const item of items) {
+        const fuelType = getFuelType(item);
+        const group = fuelType ? (fuelGroupMap[fuelType] ?? 'unknown') : 'unknown';
+        counts[group]++;
+    }
+    return counts;
+};
+exports.countFuelTypeGroups = countFuelTypeGroups;

package/lib/es/src/utils/getDropDirection.d.ts

@@ -0,0 +1,5 @@
+declare const getDropDirection: (toggleNode: HTMLElement | null, menuNode: HTMLElement | null) => {
+    dropup: boolean;
+    pullRight: boolean;
+};
+export default getDropDirection;

package/lib/es/src/utils/getDropDirection.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ADDITIONAL_SPACING_IN_PX = 10;
+// It requires the DOM node for the toggle (e.g. the dropdown button) and the DOM element
+// that shall be used to calculate remaining space (i.e. the dropdown menu)
+const getDropDirection = (toggleNode, menuNode) => {
+    if (!toggleNode || !menuNode) {
+        return {
+            dropup: false,
+            pullRight: false,
+        };
+    }
+    const clientRect = toggleNode.getBoundingClientRect();
+    const pageX = clientRect.x;
+    const pageY = clientRect.y;
+    const toggleHeight = toggleNode.offsetHeight;
+    // menu has its height and width already when closed because visibility is collapse
+    const menuWidth = menuNode.offsetWidth;
+    const menuHeight = menuNode.offsetHeight;
+    const spaceUp = pageY - toggleHeight - menuHeight - window.scrollY;
+    const spaceDown = window.innerHeight - (pageY + menuHeight + toggleHeight + ADDITIONAL_SPACING_IN_PX);
+    const spaceLeft = pageX - menuWidth - window.scrollX;
+    const spaceRight = window.innerWidth - (pageX + menuWidth);
+    const dropup = spaceDown < 0 && (spaceUp >= 0 || spaceUp > spaceDown);
+    const pullRight = spaceRight < 0 && (spaceLeft >= 0 || spaceLeft > spaceRight);
+    return {
+        dropup,
+        pullRight,
+    };
+};
+exports.default = getDropDirection;

package/lib/es/src/utils/getWidthInBoundaries.d.ts

@@ -0,0 +1,2 @@
+declare const getWidthInBoundaries: (minWidth: number, maxWidth: number, width: number) => number;
+export default getWidthInBoundaries;

package/lib/es/src/utils/getWidthInBoundaries.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const getWidthInBoundaries = (minWidth, maxWidth, width) => {
+    if (width > 0 && width < minWidth) {
+        return minWidth;
+    }
+    if (width > 0 && width > maxWidth) {
+        return maxWidth;
+    }
+    if (width > 0 && width > maxWidth) {
+        return maxWidth;
+    }
+    return width;
+};
+exports.default = getWidthInBoundaries;

package/lib/es/src/utils/hasUtilityClass.d.ts

@@ -0,0 +1,30 @@
+declare const hasAlignContentClass: (classes: string) => boolean;
+declare const hasAlignItemsClass: (classes: string) => boolean;
+declare const hasAlignSelfClass: (classes: string) => boolean;
+declare const hasBgClass: (classes: string) => boolean;
+declare const hasBorderClass: (classes: string) => boolean;
+declare const hasBorderStyleClass: (classes: string) => boolean;
+declare const hasBorderWidthClass: (classes: string) => boolean;
+declare const hasCursorClass: (classes: string) => boolean;
+declare const hasDisplayClass: (classes: string) => boolean;
+declare const hasFlexClass: (classes: string) => boolean;
+declare const hasGapClass: (classes: string) => boolean;
+declare const hasHeightClass: (classes: string) => boolean;
+declare const hasHoverBgClass: (classes: string) => boolean;
+declare const hasHoverOpacityClass: (classes: string) => boolean;
+declare const hasHoverScaleClass: (classes: string) => boolean;
+declare const hasHoverTextColorClass: (classes: string) => boolean;
+declare const hasMarginClass: (classes: string) => boolean;
+declare const hasMaxHeightClass: (classes: string) => boolean;
+declare const hasMinHeightClass: (classes: string) => boolean;
+declare const hasOpacityClass: (classes: string) => boolean;
+declare const hasOverflowClass: (classes: string) => boolean;
+declare const hasPaddingClass: (classes: string) => boolean;
+declare const hasRioglyphClass: (classes: string) => boolean;
+declare const hasRoundedClass: (classes: string) => boolean;
+declare const hasScaleClass: (classes: string) => boolean;
+declare const hasSpaceClass: (classes: string) => boolean;
+declare const hasTextColorClass: (classes: string) => boolean;
+declare const hasTextSizeClass: (classes: string) => boolean;
+declare const hasUserSelectClass: (classes: string) => boolean;
+export { hasAlignContentClass, hasAlignItemsClass, hasAlignSelfClass, hasBgClass, hasBorderClass, hasBorderStyleClass, hasBorderWidthClass, hasCursorClass, hasDisplayClass, hasFlexClass, hasGapClass, hasHeightClass, hasHoverBgClass, hasHoverOpacityClass, hasHoverScaleClass, hasHoverTextColorClass, hasMarginClass, hasMaxHeightClass, hasMinHeightClass, hasOpacityClass, hasOverflowClass, hasPaddingClass, hasRioglyphClass, hasRoundedClass, hasScaleClass, hasSpaceClass, hasTextColorClass, hasTextSizeClass, hasUserSelectClass, };

package/lib/es/src/utils/hasUtilityClass.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasUserSelectClass = exports.hasTextSizeClass = exports.hasTextColorClass = exports.hasSpaceClass = exports.hasScaleClass = exports.hasRoundedClass = exports.hasRioglyphClass = exports.hasPaddingClass = exports.hasOverflowClass = exports.hasOpacityClass = exports.hasMinHeightClass = exports.hasMaxHeightClass = exports.hasMarginClass = exports.hasHoverTextColorClass = exports.hasHoverScaleClass = exports.hasHoverOpacityClass = exports.hasHoverBgClass = exports.hasHeightClass = exports.hasGapClass = exports.hasFlexClass = exports.hasDisplayClass = exports.hasCursorClass = exports.hasBorderWidthClass = exports.hasBorderStyleClass = exports.hasBorderClass = exports.hasBgClass = exports.hasAlignSelfClass = exports.hasAlignItemsClass = exports.hasAlignContentClass = void 0;
+const hasClass = (utilityClass) => {
+    return (classes) => {
+        if (classes.includes(utilityClass)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    };
+};
+const hasAlignContentClass = hasClass('align-content-');
+exports.hasAlignContentClass = hasAlignContentClass;
+const hasAlignItemsClass = hasClass('align-items-');
+exports.hasAlignItemsClass = hasAlignItemsClass;
+const hasAlignSelfClass = hasClass('align-self');
+exports.hasAlignSelfClass = hasAlignSelfClass;
+const hasBgClass = hasClass('bg-');
+exports.hasBgClass = hasBgClass;
+const hasBorderClass = hasClass('border-');
+exports.hasBorderClass = hasBorderClass;
+const hasBorderStyleClass = hasClass('border-style-');
+exports.hasBorderStyleClass = hasBorderStyleClass;
+const hasBorderWidthClass = hasClass('border-width');
+exports.hasBorderWidthClass = hasBorderWidthClass;
+const hasCursorClass = hasClass('cursor-');
+exports.hasCursorClass = hasCursorClass;
+const hasDisplayClass = hasClass('display-');
+exports.hasDisplayClass = hasDisplayClass;
+const hasFlexClass = hasClass('flex-');
+exports.hasFlexClass = hasFlexClass;
+const hasGapClass = hasClass('gap-');
+exports.hasGapClass = hasGapClass;
+const hasHeightClass = hasClass('height-');
+exports.hasHeightClass = hasHeightClass;
+const hasHoverBgClass = hasClass('hover-bg-');
+exports.hasHoverBgClass = hasHoverBgClass;
+const hasHoverOpacityClass = hasClass('hover-opacity-');
+exports.hasHoverOpacityClass = hasHoverOpacityClass;
+const hasHoverScaleClass = hasClass('hover-scale-');
+exports.hasHoverScaleClass = hasHoverScaleClass;
+const hasHoverTextColorClass = hasClass('hover-text-color-');
+exports.hasHoverTextColorClass = hasHoverTextColorClass;
+const hasMarginClass = hasClass('margin-');
+exports.hasMarginClass = hasMarginClass;
+const hasMaxHeightClass = hasClass('max-height-');
+exports.hasMaxHeightClass = hasMaxHeightClass;
+const hasMinHeightClass = hasClass('min-height-');
+exports.hasMinHeightClass = hasMinHeightClass;
+const hasOpacityClass = hasClass('opacity-');
+exports.hasOpacityClass = hasOpacityClass;
+const hasOverflowClass = hasClass('overflow-');
+exports.hasOverflowClass = hasOverflowClass;
+const hasPaddingClass = hasClass('padding-');
+exports.hasPaddingClass = hasPaddingClass;
+const hasRioglyphClass = hasClass('rioglyph-');
+exports.hasRioglyphClass = hasRioglyphClass;
+const hasRoundedClass = hasClass('rounded-');
+exports.hasRoundedClass = hasRoundedClass;
+const hasScaleClass = hasClass('scale-');
+exports.hasScaleClass = hasScaleClass;
+const hasSpaceClass = hasClass('space-');
+exports.hasSpaceClass = hasSpaceClass;
+const hasTextColorClass = hasClass('text-color-');
+exports.hasTextColorClass = hasTextColorClass;
+const hasTextSizeClass = hasClass('text-size');
+exports.hasTextSizeClass = hasTextSizeClass;
+const hasUserSelectClass = hasClass('user-select-');
+exports.hasUserSelectClass = hasUserSelectClass;

package/lib/es/src/utils/init/checkForReleaseVersion.d.ts

@@ -0,0 +1 @@
+export declare const checkForReleaseVersion: () => Promise<void>;

package/lib/es/src/utils/init/checkForReleaseVersion.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkForReleaseVersion = void 0;
+const version_json_1 = require("../../version.json");
+const styledLogs_1 = require("./styledLogs");
+const versionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+const checkForReleaseVersion = async () => {
+    const logStyled = (message) => console.log('%c%s', (0, styledLogs_1.getConsoleStyle)(), message);
+    try {
+        const response = await fetch(versionsListUrl);
+        const { latest_release } = await response.json();
+        if (latest_release > version_json_1.version) {
+            logStyled(`🆕 You are using version ${version_json_1.version} of the UIKIT while the latest released version is ` +
+                `${latest_release}. Please consider updating asap.`);
+        }
+    }
+    catch (error) {
+        logStyled('Failed to fetch UIKIT version list.');
+    }
+};
+exports.checkForReleaseVersion = checkForReleaseVersion;

package/lib/es/src/utils/init/doNotUseTailwind.d.ts

@@ -0,0 +1 @@
+export declare const doNotUseTailwind: () => Promise<boolean>;

package/lib/es/src/utils/init/doNotUseTailwind.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.doNotUseTailwind = void 0;
+const styledLogs_1 = require("./styledLogs");
+const doNotUseTailwind = async () => {
+    // Detect Tailwind CSS in linked stylesheets
+    const links = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const link of links) {
+        try {
+            const response = await fetch(link.href);
+            const cssText = await response.text();
+            if (cssText.includes('--tw')) {
+                return true; // Tailwind detected
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to fetch CSS file: ${link.href}`, error);
+        }
+    }
+    // Detect Tailwind CSS in <style> tags
+    const styleTags = document.querySelectorAll('style');
+    for (const style of styleTags) {
+        if (style.textContent?.includes('--tw')) {
+            return true; // Tailwind detected
+        }
+    }
+    return false; // Tailwind not detected
+};
+exports.doNotUseTailwind = doNotUseTailwind;
+// Global flag to track if Tailwind has been detected
+let tailwindDetected = false;
+// Initial detection of Tailwind CSS
+(async () => {
+    try {
+        tailwindDetected = await (0, exports.doNotUseTailwind)();
+    }
+    catch (error) {
+        console.error('Error during Tailwind detection:', error);
+    }
+})();
+// Repeatedly log messages every 10 seconds if Tailwind was detected
+setInterval(() => {
+    if (tailwindDetected) {
+        const message = [
+            'TAILWIND DETECTED!!!',
+            'Using Tailwind CSS in combination with the RIO UIKIT is strongly discouraged because it can lead to significant design and development issues.',
+            'The RIO UIKIT is a component-driven design system with carefully crafted styles to ensure consistent branding and user experience.',
+            'Tailwind CSS, as a utility-first framework, introduces inline styling that can conflict with the RIO UIKIT’s predefined component styles.',
+            'This can result in overridden styles, broken layouts, inconsistent spacings, inconsistent design language, and increased maintenance complexity.',
+            'Tailwind’s global reset styles may also disrupt the base styles of the RIO UIKIT, causing unintended visual changes.',
+            'Furthermore, mixing the two systems creates unnecessary redundancy, increases CSS bundle size, and complicates debugging and future updates.',
+            'To ensure a cohesive, maintainable, and professional design system, it is essential to rely solely on the RIO UIKIT and its customization options rather than introducing conflicting styling frameworks.',
+            'WE MAY TECHNICALLY DISABLE TAILWIND FUNCTIONALITY IN THE FUTURE.\nPLEASE DO NOT USE TAILWIND!',
+        ].join('\n\n');
+        console.warn('%c%s', (0, styledLogs_1.getConsoleStyle)(), message);
+    }
+}, 10_000);

package/lib/es/src/utils/init/initCSS.d.ts

@@ -0,0 +1,2 @@
+export declare const initCSS: () => void;
+export declare const checkCSSVersion: () => void;