wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/constants/shadow-vars.js

@@ -7,4 +7,3 @@ export default {
     "elevation-shadow-8": "(0 0 8px var(--box-shadow-color-01)), (0 14px 28px var(--box-shadow-color-02))",
     "elevation-shadow-17": "(0 0 8px var(--box-shadow-color-01)), (0 32px 64px var(--box-shadow-color-02))",
 };
-//# sourceMappingURL=shadow-vars.js.map

package/dist/collection/constants/spacing-vars.js

@@ -20,5 +20,5 @@ export default {
     "spacing-18": "4.25rem",
     "spacing-19": "4.5rem",
     "spacing-20": "4.75rem",
+    "spacing-21": "5rem",
 };
-//# sourceMappingURL=spacing-vars.js.map

package/dist/collection/constants/thickness-vars.js

@@ -9,4 +9,3 @@ export default {
     "border-thickness-08": "0.171875rem",
     "border-thickness-09": "0.1875rem",
 };
-//# sourceMappingURL=thickness-vars.js.map

package/dist/collection/constants/typography-vars.js

@@ -14,4 +14,3 @@ export default {
     'body-medium': 'body-medium',
     'body-small': 'body-small',
 };
-//# sourceMappingURL=typography-vars.js.map

package/dist/collection/definitions/colors.js

@@ -2,4 +2,3 @@ import variables from "../constants/color-vars";
 export function isColorFromPalette(color) {
     return !!variables.palette.all[color] || !!variables.icons[color];
 }
-//# sourceMappingURL=colors.js.map

package/dist/collection/definitions/shadows.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=shadows.js.map

package/dist/collection/definitions/spacing.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=spacing.js.map

package/dist/collection/definitions/thickness.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=thickness.js.map

package/dist/collection/definitions/typography.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=typography.js.map

package/dist/collection/index.js

@@ -1,4 +1,26 @@
-export * from "./components";
 import { unselectAllItems } from "./components/basic-dropdown/vds-basic-dropdown.utils";
 export const unselectAllItemsUtil = unselectAllItems;
-//# sourceMappingURL=index.js.map
+// Export all utility functions
+export * from "./utils/array-utils";
+export * from "./utils/device-detection";
+export * from "./utils/attribute-sync";
+export * from "./utils/clone-attributes";
+export * from "./utils/combine-classes";
+export * from "./utils/floating-engine";
+export * from "./utils/floating-engine-utils";
+export * from "./utils/form";
+export * from "./utils/get-deep-active-element";
+export * from "./utils/get-random-id";
+export * from "./utils/icon-attr.utils";
+export * from "./utils/icon-generation.utils";
+export * from "./utils/icon-utils";
+export * from "./utils/is-key-event";
+export * from "./utils/is-of-type";
+export * from "./utils/keyboard-navigation";
+export * from "./utils/node-utils";
+export * from "./utils/number-utils";
+export * from "./utils/parentHasClass";
+export * from "./utils/rems-to-px";
+export * from "./utils/slider.utils";
+export * from "./utils/spacing-utils";
+export * from "./utils/utils";

package/dist/collection/scripts/sass-export.js

@@ -0,0 +1,469 @@
+/**
+ * Sass Export - Standalone Implementation
+ * 
+ * Exports Sass variables to JSON format by parsing and compiling Sass files.
+ * This is a self-contained implementation adapted from the sass-export package,
+ * allowing for maintenance and updates without external dependencies.
+ * 
+ * Key Features:
+ * - Parses Sass variable declarations
+ * - Handles map variables with nested values
+ * - Compiles variables to their final CSS values
+ * - Supports structured output with sections
+ * - Supports mixin extraction
+ */
+
+const fs = require('fs');
+const sass = require('sass');
+const glob = require('glob');
+
+// Constants
+const VARIABLE_PATTERN = '(?!\\d)[\\w_-][\\w\\d_-]*';
+const MAP_KEY_PATTERN = '[\\w-]+';
+const VALUE_PATTERN = '[^;]+|"(?:[^"]+|(?:\\\\"|[^"])*)"';
+// Updated regex to handle nested parentheses and function calls with dots (like map.get)
+const MAP_DECLARATION_REGEX = /['"]?([\w_-][\w\d_-]*)['"]?\s*:\s*([a-z\-\.]+\([^)]+\)|\((?:[^()]|\([^()]*\))*\)|[^\)\(,\/]+)/gi;
+const QUOTES_PATTERN = /^(['"]).*\1$/;
+const QUOTES_REPLACE = /^(['"])|(['"])$/g;
+const SECTION_TAG = 'sass-export-section';
+const SECTION_PATTERN = `(@${SECTION_TAG}=)(".+")`;
+const END_SECTION_PATTERN = `(@end-${SECTION_TAG})`;
+const DEFAULT_SECTION = 'variables';
+const WRAPPER_CSS_ID = '#sass-export-id';
+const UNWRAPPER_PATTERN = `${WRAPPER_CSS_ID}\\.(.+)\\s*\\{\\s*content:\\s*["'](.+)["']`;
+const LINE_BREAK = '\n';
+
+/**
+ * Utils Class
+ * Provides helper methods for wrapping/unwrapping CSS and manipulating content
+ */
+class Utils {
+  /**
+   * Get declaration by name from an array of declarations
+   */
+  static getDeclarationByName(declarations = [], name) {
+    const filtered = declarations.filter((declaration) => declaration.name === name);
+    return filtered[0];
+  }
+
+  /**
+   * Wrap CSS declaration for Sass compilation
+   * Uses meta.inspect() for maps to get proper output
+   */
+  static wrapCss(cssDeclaration, useInspect) {
+    if (useInspect) {
+      return `${WRAPPER_CSS_ID}._${cssDeclaration.name}{content:"#{meta.inspect(${cssDeclaration.value})}";}`;
+    }
+    return `${WRAPPER_CSS_ID}._${cssDeclaration.name}{content:"#{${cssDeclaration.value}}";}`;
+  }
+
+  /**
+   * Remove double quotes from wrapped content
+   */
+  static removeDoubleQuotes(wrappedContent) {
+    return wrappedContent.replace(/"([^'"]+(?="'))"/, '$1');
+  }
+
+  /**
+   * Extract value from wrapped CSS content
+   */
+  static unWrapValue(wrappedContent) {
+    wrappedContent = wrappedContent.replace(/\n/g, '');
+    const matches = wrappedContent.match(UNWRAPPER_PATTERN);
+    if (matches && matches.length > 2) {
+      return matches[2].trim();
+    }
+    return '';
+  }
+}
+
+/**
+ * Parser Class
+ * Parses Sass content to extract variable declarations
+ */
+class Parser {
+  constructor(rawContent) {
+    this.rawContent = rawContent;
+  }
+
+  /**
+   * Parse all variable declarations into a flat array
+   */
+  parse() {
+    const matches = this.extractDeclarations(this.rawContent);
+    const declarations = [];
+
+    for (const match of matches) {
+      if (!this.checkIsSectionStart(match) && !this.checkIsSectionEnd(match)) {
+        const parsed = this.parseSingleDeclaration(match);
+        if (parsed) {
+          this.parseMapDeclarations(parsed);
+          declarations.push(parsed);
+        }
+      }
+    }
+
+    return declarations;
+  }
+
+  /**
+   * Parse variable declarations into structured sections
+   */
+  parseStructured() {
+    const matches = this.extractDeclarationsStructured(this.rawContent);
+    let currentSection = DEFAULT_SECTION;
+    const declarations = {};
+
+    if (!matches || !matches.length) {
+      return {};
+    }
+
+    declarations[currentSection] = [];
+
+    for (const match of matches) {
+      if (this.checkIsSectionStart(match)) {
+        const sectionMatch = new RegExp(SECTION_PATTERN, 'gi').exec(match);
+        if (sectionMatch && sectionMatch[2]) {
+          currentSection = sectionMatch[2].replace(/"/g, '');
+          declarations[currentSection] = declarations[currentSection] || [];
+        }
+      } else if (this.checkIsSectionEnd(match)) {
+        currentSection = DEFAULT_SECTION;
+      } else {
+        const parsed = this.parseSingleDeclaration(match);
+        if (parsed) {
+          this.parseMapDeclarations(parsed);
+          declarations[currentSection].push(parsed);
+        }
+      }
+    }
+
+    return declarations;
+  }
+
+  /**
+   * Extract all declarations including section markers
+   */
+  extractDeclarationsStructured(content) {
+    const pattern = `${this.getDeclarationPattern()}|${SECTION_PATTERN}|${END_SECTION_PATTERN}`;
+    const matches = content.match(new RegExp(pattern, 'g'));
+    return matches || [];
+  }
+
+  /**
+   * Extract only variable declarations
+   */
+  extractDeclarations(content) {
+    const matches = content.match(new RegExp(this.getDeclarationPattern(), 'g'));
+    return matches || [];
+  }
+
+  /**
+   * Extract map key-value pairs from content
+   */
+  extractMapDeclarations(content) {
+    const matches = content.match(new RegExp(MAP_DECLARATION_REGEX, 'g'));
+    return matches || [];
+  }
+
+  /**
+   * Parse a single variable declaration
+   */
+  parseSingleDeclaration(matchDeclaration, isMap = false) {
+    const matches = matchDeclaration
+      .replace(/\s*!(default|global)\s*;/, ';')
+      .match(new RegExp(this.getDeclarationPattern(isMap)));
+
+    if (!matches) {
+      return null;
+    }
+
+    const name = matches[1].trim();
+    let value = matches[2].trim().replace(/\s*\n+\s*/g, ' ');
+
+    if (value.match(QUOTES_PATTERN)) {
+      value = value.replace(QUOTES_REPLACE, '');
+    }
+
+    return { name, value };
+  }
+
+  /**
+   * Parse map declarations recursively
+   */
+  parseMapDeclarations(parsedDeclaration) {
+    const map = this.extractMapDeclarations(parsedDeclaration.value);
+    if (map.length) {
+      parsedDeclaration.mapValue = map.map((declaration) => {
+        const singleDeclaration = this.parseSingleDeclaration(`$${declaration};`, true);
+        if (singleDeclaration) {
+          this.parseMapDeclarations(singleDeclaration);
+        }
+        return singleDeclaration;
+      }).filter(Boolean);
+    }
+  }
+
+  /**
+   * Check if content is a section start marker
+   */
+  checkIsSectionStart(content) {
+    return new RegExp(SECTION_PATTERN, 'gi').test(content);
+  }
+
+  /**
+   * Check if content is a section end marker
+   */
+  checkIsSectionEnd(content) {
+    return new RegExp(END_SECTION_PATTERN, 'gi').test(content);
+  }
+
+  /**
+   * Get the regex pattern for matching variable declarations
+   */
+  getDeclarationPattern(isMap = false) {
+    const varPattern = isMap ? MAP_KEY_PATTERN : VARIABLE_PATTERN;
+    return `\\$['"]?(${varPattern})['"]?\\s*:\\s*(${VALUE_PATTERN})(?:\\s*!(global|default)\\s*;|\\s*;(?![^\\{]*\\}))`;
+  }
+}
+
+/**
+ * Mixins Parser Class
+ * Parses Sass mixins from content
+ */
+class Mixins {
+  constructor(rawContent) {
+    this.rawContent = rawContent;
+  }
+
+  /**
+   * Parse all mixin declarations
+   */
+  parse() {
+    const MIXIN_PATTERN = /@mixin\s+([\w-]+)\s*\(([^)]*)\)\s*\{/g;
+    const mixins = [];
+    let match;
+
+    while ((match = MIXIN_PATTERN.exec(this.rawContent)) !== null) {
+      mixins.push({
+        name: match[1],
+        parameters: match[2].split(',').map(p => p.trim()).filter(Boolean)
+      });
+    }
+
+    return mixins;
+  }
+}
+
+/**
+ * Converter Class
+ * Converts Sass variables to compiled CSS values
+ */
+class Converter {
+  constructor(options) {
+    this.options = options || {};
+  }
+
+  /**
+   * Get all declarations as a flat array
+   */
+  getArray() {
+    const content = this.getContent();
+    const parsedDeclarations = new Parser(content).parse();
+
+    return parsedDeclarations.map((declaration) => {
+      let isMap = false;
+      if (declaration.mapValue) {
+        isMap = true;
+      }
+
+      declaration.compiledValue = this.renderPropertyValue(content, declaration, isMap);
+      declaration.name = `$${declaration.name}`;
+
+      if (declaration.mapValue) {
+        declaration.mapValue = declaration.mapValue.map((mapDeclaration) => {
+          mapDeclaration.compiledValue = this.renderPropertyValue(content, mapDeclaration, true);
+          return mapDeclaration;
+        });
+      }
+
+      return declaration;
+    });
+  }
+
+  /**
+   * Get declarations organized by sections
+   */
+  getStructured() {
+    const content = this.getContent();
+    let structuredDeclaration = new Parser(content).parseStructured();
+    structuredDeclaration = this.compileStructure(structuredDeclaration);
+    return structuredDeclaration;
+  }
+
+  /**
+   * Compile all declarations in a structured format
+   */
+  compileStructure(structuredDeclaration) {
+    const groups = Object.keys(structuredDeclaration);
+
+    groups.forEach((group) => {
+      const content = this.getContent();
+
+      structuredDeclaration[group] = structuredDeclaration[group].map((declaration) => {
+        let isMap = false;
+        if (declaration.mapValue) {
+          isMap = true;
+        }
+
+        declaration.compiledValue = this.renderPropertyValue(content, declaration, isMap);
+        declaration.name = `$${declaration.name}`;
+
+        if (declaration.mapValue) {
+          declaration.mapValue = declaration.mapValue.map((mapDeclaration) => {
+            mapDeclaration.compiledValue = this.renderPropertyValue(content, mapDeclaration, true);
+            return mapDeclaration;
+          });
+        }
+
+        return declaration;
+      });
+    });
+
+    return this.checkForMixins(structuredDeclaration);
+  }
+
+  /**
+   * Read and concatenate all input files
+   */
+  getContent() {
+    let inputFiles = [];
+    const inputs = [];
+
+    if (!Array.isArray(this.options.inputFiles)) {
+      inputFiles.push(this.options.inputFiles);
+    } else {
+      inputFiles = this.options.inputFiles;
+    }
+
+    inputFiles.forEach((path) => {
+      const files = glob.sync(String(path));
+      inputs.push(...files);
+    });
+
+    const contents = inputs.map((filePath) => fs.readFileSync(String(filePath), 'utf8'));
+    return contents.join(LINE_BREAK);
+  }
+
+  /**
+   * Check for mixins and add them to the structured output
+   */
+  checkForMixins(structuredDeclaration) {
+    const mixinsGroup = 'mixins';
+    const parsedMixins = new Mixins(this.getContent()).parse();
+
+    if (parsedMixins && parsedMixins.length) {
+      structuredDeclaration[mixinsGroup] = parsedMixins;
+    }
+
+    return structuredDeclaration;
+  }
+
+  /**
+   * Render a property value by compiling it with Sass
+   */
+  renderPropertyValue(content, declaration, isMap) {
+    try {
+      // Add @use "sass:meta" if not already present for meta.inspect() support
+      let sassContent = content;
+      if (!content.includes('@use "sass:meta"') && !content.includes("@use 'sass:meta'")) {
+        // Find the position after the last @use statement
+        const useStatements = content.match(/@use\s+["'][^"']+["'];?\s*\n?/g);
+        if (useStatements && useStatements.length > 0) {
+          // Find the last @use statement position
+          const lastUse = useStatements[useStatements.length - 1];
+          const lastUseIndex = content.lastIndexOf(lastUse);
+          const lastUseEnd = lastUseIndex + lastUse.length;
+          // Insert @use "sass:meta" right after the last @use statement
+          sassContent = content.slice(0, lastUseEnd) + '@use "sass:meta";' + LINE_BREAK + content.slice(lastUseEnd);
+        } else {
+          // No @use statements found, add at the beginning
+          sassContent = '@use "sass:meta";' + LINE_BREAK + content;
+        }
+      }
+
+      // Use compileString instead of deprecated renderSync
+      const result = sass.compileString(
+        sassContent + LINE_BREAK + Utils.wrapCss(declaration, isMap),
+        {
+          loadPaths: this.options.includePaths || [],
+          style: 'compressed'
+        }
+      );
+
+      let wrappedRendered = String(result.css);
+      wrappedRendered = Utils.removeDoubleQuotes(wrappedRendered);
+      return Utils.unWrapValue(wrappedRendered);
+    } catch (err) {
+      console.error('Error rendering property value:', err.message);
+      return '';
+    }
+  }
+}
+
+/**
+ * ConverterBuffer Class
+ * Converts Sass content from a string buffer instead of files
+ */
+class ConverterBuffer extends Converter {
+  constructor(input, options) {
+    super(options);
+    this.input = input;
+  }
+
+  /**
+   * Get content from buffer instead of files
+   */
+  getContent() {
+    return this.input;
+  }
+
+  /**
+   * Get compiled data from buffer
+   */
+  getData() {
+    return this.getArray();
+  }
+}
+
+/**
+ * Main exporter function
+ * Creates a new Converter instance with the given options
+ * 
+ * @param {Object} options - Configuration options
+ * @param {string|string[]} options.inputFiles - File path(s) to parse
+ * @param {string[]} options.includePaths - Additional include paths for Sass compiler
+ * @returns {Converter} Converter instance with getArray() and getStructured() methods
+ */
+function exporter(options) {
+  return new Converter(options);
+}
+
+/**
+ * Buffer exporter function
+ * Converts Sass content from a string buffer
+ * 
+ * @param {string} input - Sass content as string
+ * @param {Object} options - Configuration options
+ * @returns {Array} Compiled declarations array
+ */
+function bufferExporter(input, options) {
+  const converter = new ConverterBuffer(input, options);
+  return converter.getData();
+}
+
+// Export functions
+module.exports = {
+  exporter,
+  buffer: bufferExporter
+};

package/dist/collection/scripts/sass-to-json-script.js

@@ -1,5 +1,5 @@
 const fs = require("fs");
-const scssExporter = require("sass-export").exporter;
+const scssExporter = require("./sass-export").exporter;
 const path = require("path");
 
 const options = {
@@ -128,7 +128,7 @@ const spacingVars = styleObject.variables.find(element =>
 const spacingKeyValuePairs = spacingVars.replace(/[()]/g, '').split(','); 
 
 let spacingOutput = "export default {\n";
-spacingKeyValuePairs.forEach(pair => {
+spacingKeyValuePairs?.forEach(pair => {
   const [key, value] = pair.split(':').map(entry => entry.trim()); 
   const formattedKey = key.replace(/"/g, ''); 
   spacingOutput += `\t"spacing-${formattedKey}": "${value}rem",\n`;

package/dist/collection/scripts/svg-adaptation.js

@@ -7,30 +7,30 @@ function readFiles(dirname, onFileContent, onFinish, onError) {
 			onError(err);
 			return;
 		}
-		var syncronuous = new Promise(resolve => {
-			filenames.forEach(function(filename, index) {
-				fs.readFile(dirname + filename, "utf-8", function(err, content) {
+		const readPromises = filenames.map(function(filename) {
+			return new Promise((resolve, reject) => {
+				const filePath = path.join(dirname, filename);
+				fs.readFile(filePath, "utf-8", function(err, content) {
 					if (err) {
-						onError(err);
+						reject(err);
 						return;
 					}
 					onFileContent(filename, content);
-					if (index === filenames.length - 1) {
-						resolve();
-					}
+					resolve();
 				});
 			});
 		});
-		syncronuous.then(() => {
-			onFinish();
-		});
+
+		Promise.all(readPromises)
+			.then(() => onFinish())
+			.catch(err => onError(err));
 	});
 }
 
 var data = {};
 var sprite = {};
 var names = [];
-var allowedSizes = ["switch-off.svg", "switch-on.svg", "Thumb.svg"];
+var allowedSizes = ["switch-off.svg", "switch-on.svg", "Thumb.svg", "battery.svg"];
 readFiles(
 	path.join(__dirname, "../../node_modules/wabtec-internal-volt-foundations/dist/collection/assets/icons/"),
 	function(filename, content) {
@@ -54,13 +54,40 @@ readFiles(
         }
 	},
 	function() {
+		const uniqueNames = Array.from(new Set(names));
+		uniqueNames.sort((a, b) => a.localeCompare(b));
+
+		const sortedSprite = {};
+
+		const lookup = {};
+		Object.keys(sprite).forEach(k => {
+			lookup[k.toLowerCase()] = k;
+		});
+
+		uniqueNames.forEach(name => {
+			const key = `${name}.svg`;
+			if (Object.prototype.hasOwnProperty.call(sprite, key)) {
+				sortedSprite[key] = sprite[key];
+			} else {
+				const foundKey = lookup[key.toLowerCase()];
+				if (foundKey) {
+					if (foundKey !== key) {
+						console.warn(`svg-adaptation: case mismatch - using "${foundKey}" for "${key}"`);
+					}
+					sortedSprite[key] = sprite[foundKey];
+				} else {
+					console.warn(`svg-adaptation: icon not found for "${key}"`);
+				}
+			}
+		});
+
 		fs.writeFileSync(
 			path.join(__dirname, "../constants/icon-sprite.ts"),
-			`export default ${JSON.stringify(sprite)}`
+			`export default ${JSON.stringify(sortedSprite)}`
 		);
 		fs.writeFileSync(
 			path.join(__dirname, "../components/icon/utils/icons-list.ts"),
-			`export const iconsList = ${JSON.stringify(names)}`
+			`export const iconsList = ${JSON.stringify(uniqueNames)}`
 		);
 	},
 	function(err) {

package/dist/collection/utils/array-utils.js

@@ -24,4 +24,3 @@ export const arrayIsEqual = (a, b) => {
     }
     return true;
 };
-//# sourceMappingURL=array-utils.js.map