wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/utils/icon-attr.utils.js

@@ -0,0 +1,58 @@
+/** Gets the regular icon color.
+ *
+ * @returns string
+ */
+export const getIconColor = (disabled) => disabled ? "color-icon-disabled" : "color-icon-high";
+/** Gets the icon size in rems according to the inputed size
+ *
+ * @returns string
+ */
+export const getIconSize = (inputedSize) => {
+    let size = "1.5rem";
+    switch (inputedSize) {
+        case "2x-small":
+            size = "0.75rem";
+            break;
+        case "extra-small":
+            size = "1rem";
+            break;
+        case "small":
+            size = "0.75rem";
+            break;
+        case "medium":
+            size = "1.25rem";
+            break;
+        case "large":
+            size = "1.5rem";
+            break;
+    }
+    return size;
+};
+/** Gets the icon size in rems according to the inputed size
+ * Updated to match Figma design
+ * New method to prevent breaking existing usages
+ *
+ * @returns string
+ */
+export const getIconSizeUpdated = (inputedSize) => {
+    let size = "1.5rem";
+    switch (inputedSize) {
+        case "2x-small":
+            size = "0.75rem";
+            break;
+        case "extra-small":
+            size = "1rem";
+            break;
+        case "small":
+            size = "1.25rem";
+            break;
+        case "medium":
+            size = "1.5rem";
+            break;
+        case "large":
+            size = "1.75rem";
+            break;
+    }
+    return size;
+};
+//# sourceMappingURL=icon-attr.utils.js.map

package/dist/collection/utils/icon-attr.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-attr.utils.js","sourceRoot":"","sources":["../../src/utils/icon-attr.utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,QAAiB,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,CAAC;AAExG;;;GAGG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,WAAmB,EAAU,EAAE;IACzD,IAAI,IAAI,GAAG,QAAQ,CAAC;IAEpB,QAAO,WAAW,EAAE,CAAC;QACjB,KAAK,UAAU;YACb,IAAI,GAAG,SAAS,CAAC;YACjB,MAAM;QACR,KAAK,aAAa;YAChB,IAAI,GAAG,MAAM,CAAC;YACd,MAAM;QACR,KAAK,OAAO;YACV,IAAI,GAAG,SAAS,CAAC;YACjB,MAAM;QACR,KAAK,QAAQ;YACX,IAAI,GAAG,SAAS,CAAC;YACjB,MAAM;QACR,KAAK,OAAO;YACV,IAAI,GAAG,QAAQ,CAAC;YAChB,MAAM;IACZ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,WAAmB,EAAU,EAAE;IAChE,IAAI,IAAI,GAAG,QAAQ,CAAC;IAEpB,QAAO,WAAW,EAAE,CAAC;QACjB,KAAK,UAAU;YACb,IAAI,GAAG,SAAS,CAAC;YACjB,MAAM;QACR,KAAK,aAAa;YAChB,IAAI,GAAG,MAAM,CAAC;YACd,MAAM;QACR,KAAK,OAAO;YACV,IAAI,GAAG,SAAS,CAAC;YACjB,MAAM;QACR,KAAK,QAAQ;YACX,IAAI,GAAG,QAAQ,CAAC;YAChB,MAAM;QACR,KAAK,OAAO;YACV,IAAI,GAAG,SAAS,CAAC;YACjB,MAAM;IACZ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAA","sourcesContent":["/** Gets the regular icon color.\n * \n * @returns string\n */\nexport const getIconColor = (disabled: boolean) => disabled ? \"color-icon-disabled\" : \"color-icon-high\";\n\n/** Gets the icon size in rems according to the inputed size\n * \n * @returns string\n */\nexport const getIconSize = (inputedSize: string): string => {\n  let size = \"1.5rem\";\n\n  switch(inputedSize) {\n      case \"2x-small\":\n        size = \"0.75rem\";\n        break;\n      case \"extra-small\":\n        size = \"1rem\";\n        break;\n      case \"small\":\n        size = \"0.75rem\";\n        break;\n      case \"medium\":\n        size = \"1.25rem\";\n        break;\n      case \"large\":\n        size = \"1.5rem\";\n        break;\n  }\n\n  return size;\n}\n\n/** Gets the icon size in rems according to the inputed size\n * Updated to match Figma design\n * New method to prevent breaking existing usages\n * \n * @returns string\n */\nexport const getIconSizeUpdated = (inputedSize: string): string => {\n  let size = \"1.5rem\";\n\n  switch(inputedSize) {\n      case \"2x-small\":\n        size = \"0.75rem\";\n        break;\n      case \"extra-small\":\n        size = \"1rem\";\n        break;\n      case \"small\":\n        size = \"1.25rem\";\n        break;\n      case \"medium\":\n        size = \"1.5rem\";\n        break;\n      case \"large\":\n        size = \"1.75rem\";\n        break;\n  }\n\n  return size;\n}"]}

package/dist/collection/utils/icon-generation.utils.js

@@ -0,0 +1,34 @@
+/**
+ * Converts an SVG string to a base64-encoded string.
+ *
+ * @param {string} svgContent - The SVG content to convert.
+ * @returns {string} The base64-encoded SVG string.
+ */
+export const ConvertSvgStringToBase64 = (svgContent) => {
+    const strippedSvgContent = svgContent.replace(/"/g, "'");
+    const base64 = btoa(strippedSvgContent);
+    return `data:image/svg+xml;base64,${base64}`;
+};
+/**
+ * Generates a VDS SVG string by removing specified attributes.
+ *
+ * @param {string} svgContent - The original SVG content.
+ * @param {boolean} [removeSize=true] - Whether to remove width and height attributes.
+ * @param {boolean} [removeColors=true] - Whether to remove fill, background, and color attributes.
+ * @returns {string} The modified SVG content.
+ */
+export const GenerateVdsSvg = (svgContent, removeSize = true, removeColors = true) => {
+    const fill = new RegExp(/fill="[a-zA-Z0-9:;#\.\s\(\)\-\,]*"/g);
+    const width = new RegExp(/ width="[a-zA-Z0-9:;#\.\s\(\)\-\,]*"/g);
+    const height = new RegExp(/height="[a-zA-Z0-9:;#\.\s\(\)\-\,]*"/g);
+    const background = new RegExp(/background:[a-zA-Z0-9:;#\.\s\(\)\-\,]*/g);
+    let content = svgContent;
+    if (removeSize) {
+        content = content.replace(width, "").replace(height, "");
+    }
+    if (removeColors) {
+        content = content.replace(fill, "").replace(background, "");
+    }
+    return content;
+};
+//# sourceMappingURL=icon-generation.utils.js.map

package/dist/collection/utils/icon-generation.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-generation.utils.js","sourceRoot":"","sources":["../../src/utils/icon-generation.utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,UAAkB,EAAU,EAAE;IACnE,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,CAAC;IACxC,OAAO,6BAA6B,MAAM,EAAE,CAAC;AACjD,CAAC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,UAAU,GAAG,IAAI,EAAE,YAAY,GAAG,IAAI,EAAU,EAAE;IACjG,MAAM,IAAI,GAAG,IAAI,MAAM,CAAC,qCAAqC,CAAC,CAAC;IAC/D,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,uCAAuC,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,uCAAuC,CAAC,CAAC;IACnE,MAAM,UAAU,GAAG,IAAI,MAAM,CAAC,yCAAyC,CAAC,CAAC;IACzE,IAAI,OAAO,GAAG,UAAU,CAAC;IAEzB,IAAI,UAAU,EAAE,CAAC;QACb,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;IAC7D,CAAC;IAED,IAAI,YAAY,EAAE,CAAC;QACf,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC,CAAA","sourcesContent":["/**\n * Converts an SVG string to a base64-encoded string.\n *\n * @param {string} svgContent - The SVG content to convert.\n * @returns {string} The base64-encoded SVG string.\n */\nexport const ConvertSvgStringToBase64 = (svgContent: string): string => {\n    const strippedSvgContent = svgContent.replace(/\"/g, \"'\");\n    const base64 = btoa(strippedSvgContent);\n    return `data:image/svg+xml;base64,${base64}`;\n}\n\n/**\n * Generates a VDS SVG string by removing specified attributes.\n *\n * @param {string} svgContent - The original SVG content.\n * @param {boolean} [removeSize=true] - Whether to remove width and height attributes.\n * @param {boolean} [removeColors=true] - Whether to remove fill, background, and color attributes.\n * @returns {string} The modified SVG content.\n */\nexport const GenerateVdsSvg = (svgContent: string, removeSize = true, removeColors = true): string => {\n    const fill = new RegExp(/fill=\"[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*\"/g);\n    const width = new RegExp(/ width=\"[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*\"/g);\n    const height = new RegExp(/height=\"[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*\"/g);\n    const background = new RegExp(/background:[a-zA-Z0-9:;#\\.\\s\\(\\)\\-\\,]*/g);\n    let content = svgContent;\n\n    if (removeSize) {\n        content = content.replace(width, \"\").replace(height, \"\");\n    }\n\n    if (removeColors) {\n        content = content.replace(fill, \"\").replace(background, \"\");\n    }\n\n    return content;\n}"]}

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

@@ -0,0 +1,144 @@
+import iconSprint from "../constants/icon-sprite";
+export const getIconsFromSpriteFile = () => {
+    return Object.keys(iconSprint).map(icon => {
+        try {
+            // We split icons in two using the . in the extension and take the name part
+            // eg. iconName.extension
+            return icon.split('.')[0];
+        }
+        catch (_a) {
+            return icon;
+        }
+    });
+};
+export const NAVIGATION = [
+    'chevron-right',
+    'chevron-up',
+    'chevron-down',
+    'chevron-left',
+    'zoom-out',
+    'move',
+    'zoom-identity',
+    'map',
+    'zoom',
+    'overflow',
+    'zoom-generic-inv',
+    'zoom-generic',
+    'go-to-first-page-filled',
+    'go-to-last-page-filled',
+    'go-to-first-page',
+    'go-to-last-page',
+    'caret-down',
+    'caret-down-filled',
+    'caret-right-filled',
+    'arrow-right',
+    'arrow-down',
+    'arrow-up',
+    'arrow-left',
+    'zoom-in',
+    'zoom-less',
+    'tile-view',
+    'list-view',
+    'inbox-view',
+];
+export const FILES = ['document', 'excel', 'folder-closed', 'pdf', 'word', 'folder-open', 'copy', 'disabled-document', 'cases', 'templates'];
+export const STATUS = ['disable', 'not-found', 'caution', 'caution-2', 'failure', 'unknown', 'information', 'error', 'healthy', 'good'];
+export const DEVICE = ['camera', 'phone', 'desktop-computer', 'camera-video', 'tablet', 'disconnected', 'connected', 'usb', 'qr-code', 'scan-barcode'];
+export const USER = ['user', 'user-group'];
+export const ACTION = [
+    'trash',
+    'more-horizontal',
+    'more-vertical',
+    'edit',
+    'less',
+    'add',
+    'close',
+    'upload',
+    'download',
+    'link-open',
+    'link-closed',
+    'filter',
+    'swap',
+    'reset',
+    'history',
+    'drag',
+    'reverse',
+    'restart',
+    'share',
+    'back',
+    'hamburger',
+    'applications',
+];
+export const CONTROL = [
+    'skip-back-filled',
+    'play-page-filled',
+    'fast-forward-filled',
+    'play-page',
+    'fast-forward',
+    'skip-back',
+    'play',
+    'skip-forward',
+    'camera-video-filled',
+    'rewind',
+    'rewind-filled',
+    'pause',
+    'skip-forward-filled',
+    'mute',
+    'unmute',
+    'window',
+    'overlays',
+    'exit-full-screen',
+    'fit-vertical',
+    'multi-window',
+    'fit',
+    'full-screen',
+    'fit-horizontal',
+    'enter-full-screen',
+    'minimize-panel',
+    'power',
+    'refresh',
+    'system',
+];
+export const TIME = ['timer', 'timezone', 'time', 'calendar'];
+export const TOOL = [
+    'pick-color',
+    'paperclip',
+    'copy',
+    'module-settings',
+    'print',
+    'save',
+    'notes',
+    'calculation',
+    'summary',
+    'add-train',
+    'flag',
+    'formula',
+    'key',
+    'administration',
+    'payment',
+    'ptc',
+    'add-repair',
+    'deployments',
+    'attribute',
+    'tag',
+    'tag-group',
+];
+export const TRANSPORT = [
+    'vessel',
+    'train',
+    'automobile',
+    'locomotive',
+    'truck',
+    'local-containers',
+    'rail-containers',
+    'rail-yard',
+    'intermodal',
+    'tack',
+    'train-schedule',
+    'track',
+];
+export const TOGGLE = ['bell', 'star', 'favorite', 'lock-closed', 'show', 'hide', 'lock-open', 'lock-open-side'];
+export const DATA = ['analysis', 'analytics', 'database', 'dashboard'];
+export const INVENTORY = ['container', 'asset', 'empty-returns'];
+export const BRAND = ['wabtec-corporation-logo', 'white-wabtec-corporation-logo'];
+//# sourceMappingURL=icon-utils.js.map

package/dist/collection/utils/icon-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-utils.js","sourceRoot":"","sources":["../../src/utils/icon-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import iconSprint from '../constants/icon-sprite';\n\nexport const getIconsFromSpriteFile = () => {\n  return Object.keys(iconSprint).map(icon => {\n    try {\n      // We split icons in two using the . in the extension and take the name part\n      // eg. iconName.extension\n      return icon.split('.')[0];\n    } catch {\n      return icon;\n    }\n  });\n};\n\nexport const NAVIGATION = [\n  'chevron-right',\n  'chevron-up',\n  'chevron-down',\n  'chevron-left',\n  'zoom-out',\n  'move',\n  'zoom-identity',\n  'map',\n  'zoom',\n  'overflow',\n  'zoom-generic-inv',\n  'zoom-generic',\n  'go-to-first-page-filled',\n  'go-to-last-page-filled',\n  'go-to-first-page',\n  'go-to-last-page',\n  'caret-down',\n  'caret-down-filled',\n  'caret-right-filled',\n  'arrow-right',\n  'arrow-down',\n  'arrow-up',\n  'arrow-left',\n  'zoom-in',\n  'zoom-less',\n  'tile-view',\n  'list-view',\n  'inbox-view',\n];\n\nexport const FILES = ['document', 'excel', 'folder-closed', 'pdf', 'word', 'folder-open', 'copy', 'disabled-document', 'cases', 'templates'];\n\nexport const STATUS = ['disable', 'not-found', 'caution', 'caution-2', 'failure', 'unknown', 'information', 'error', 'healthy', 'good'];\n\nexport const DEVICE = ['camera', 'phone', 'desktop-computer', 'camera-video', 'tablet', 'disconnected', 'connected', 'usb', 'qr-code', 'scan-barcode'];\n\nexport const USER = ['user', 'user-group'];\n\nexport const ACTION = [\n  'trash',\n  'more-horizontal',\n  'more-vertical',\n  'edit',\n  'less',\n  'add',\n  'close',\n  'upload',\n  'download',\n  'link-open',\n  'link-closed',\n  'filter',\n  'swap',\n  'reset',\n  'history',\n  'drag',\n  'reverse',\n  'restart',\n  'share',\n  'back',\n  'hamburger',\n  'applications',\n];\n\nexport const CONTROL = [\n  'skip-back-filled',\n  'play-page-filled',\n  'fast-forward-filled',\n  'play-page',\n  'fast-forward',\n  'skip-back',\n  'play',\n  'skip-forward',\n  'camera-video-filled',\n  'rewind',\n  'rewind-filled',\n  'pause',\n  'skip-forward-filled',\n  'mute',\n  'unmute',\n  'window',\n  'overlays',\n  'exit-full-screen',\n  'fit-vertical',\n  'multi-window',\n  'fit',\n  'full-screen',\n  'fit-horizontal',\n  'enter-full-screen',\n  'minimize-panel',\n  'power',\n  'refresh',\n  'system',\n];\n\nexport const TIME = ['timer', 'timezone', 'time', 'calendar'];\n\nexport const TOOL = [\n  'pick-color',\n  'paperclip',\n  'copy',\n  'module-settings',\n  'print',\n  'save',\n  'notes',\n  'calculation',\n  'summary',\n  'add-train',\n  'flag',\n  'formula',\n  'key',\n  'administration',\n  'payment',\n  'ptc',\n  'add-repair',\n  'deployments',\n  'attribute',\n  'tag',\n  'tag-group',\n];\n\nexport const TRANSPORT = [\n  'vessel',\n  'train',\n  'automobile',\n  'locomotive',\n  'truck',\n  'local-containers',\n  'rail-containers',\n  'rail-yard',\n  'intermodal',\n  'tack',\n  'train-schedule',\n  'track',\n];\nexport const TOGGLE = ['bell', 'star', 'favorite', 'lock-closed', 'show', 'hide', 'lock-open', 'lock-open-side'];\n\nexport const DATA = ['analysis', 'analytics', 'database', 'dashboard'];\n\nexport const INVENTORY = ['container', 'asset', 'empty-returns'];\n\nexport const BRAND = ['wabtec-corporation-logo', 'white-wabtec-corporation-logo'];\n"]}

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

@@ -0,0 +1,17 @@
+import { forceUpdate } from "@stencil/core";
+export const setNodeObserver = (methodToExecuted, host, component) => {
+    const config = {
+        childList: true,
+        subtree: true
+    };
+    const observer = new MutationObserver(() => {
+        methodToExecuted();
+        forceUpdate(component);
+    });
+    observer.observe(host, config);
+    return observer;
+};
+export const queryElementFromShadowRoot = (hostEl, selector) => {
+    return hostEl.shadowRoot.querySelector(selector);
+};
+//# sourceMappingURL=node-utils.js.map

package/dist/collection/utils/node-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-utils.js","sourceRoot":"","sources":["../../src/utils/node-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,gBAA4B,EAAE,IAAU,EAAE,SAAc,EAAoB,EAAE;IAC1G,MAAM,MAAM,GAAG;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KAChB,CAAC;IAEF,MAAM,QAAQ,GAAqB,IAAI,gBAAgB,CAAC,GAAG,EAAE;QACzD,gBAAgB,EAAE,CAAC;QACnB,WAAW,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAE/B,OAAO,QAAQ,CAAC;AACpB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,MAAmB,EAAE,QAAgB,EAAe,EAAE;IAC7F,OAAO,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAgB,CAAC;AACpE,CAAC,CAAA","sourcesContent":["import { forceUpdate } from \"@stencil/core\";\n\nexport const setNodeObserver = (methodToExecuted: () => void, host: Node, component: any): MutationObserver => {\n    const config = {\n        childList: true,\n        subtree: true\n    };\n\n    const observer: MutationObserver = new MutationObserver(() => {\n        methodToExecuted();\n        forceUpdate(component);\n    });\n\n    observer.observe(host, config);\n\n    return observer;\n};\n\nexport const queryElementFromShadowRoot = (hostEl: HTMLElement, selector: string): HTMLElement => {\n    return hostEl.shadowRoot.querySelector(selector) as HTMLElement;\n}\n"]}

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

@@ -0,0 +1,8 @@
+export const hasDecimals = (val) => !Number.isInteger(val);
+export const countDecimalPlaces = (val) => {
+    if (!hasDecimals(val))
+        return 0;
+    const decimalPart = val.toString().split(".")[1];
+    return decimalPart ? decimalPart.length : 0;
+};
+//# sourceMappingURL=number-utils.js.map

package/dist/collection/utils/number-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-utils.js","sourceRoot":"","sources":["../../src/utils/number-utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,GAAW,EAAW,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAU,EAAE;IACtD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;QAAE,OAAO,CAAC,CAAC;IAEhC,MAAM,WAAW,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjD,OAAO,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAChD,CAAC,CAAC","sourcesContent":["export const hasDecimals = (val: number): boolean => !Number.isInteger(val);\n\nexport const countDecimalPlaces = (val: number): number => {\n    if (!hasDecimals(val)) return 0;\n\n    const decimalPart = val.toString().split(\".\")[1];\n\n    return decimalPart ? decimalPart.length : 0;\n};"]}

package/dist/collection/utils/slider.utils.js

@@ -0,0 +1,60 @@
+/**
+ * Calculates the left position of the thumb icon based on the given slider value.
+ *
+ * @param {HTMLInputElement} slider - The input range element representing the slider.
+ * @param {HTMLElement} host - The container element of the slider.
+ * @param {number} maxValue - The maximum value of the slider.
+ * @param {number} minValue - The minimum value of the slider.
+ * @param {number} value - The current value of the slider.
+ * @param {size} size - The size of the slider (medium | large).
+ * @returns {string} The calculated left position of the thumb icon as a CSS pixel value.
+ */
+export const getPositionBasedOnValue = (slider, host, maxValue, minValue, value, size) => {
+    const width = slider ? slider.clientWidth : host.clientWidth;
+    if (width === 0) {
+        return '0px';
+    }
+    const range = maxValue - minValue;
+    const percentage = ((value - minValue) / range) * 100;
+    const thumbSize = size === "medium" ? 20 : 24;
+    const percentageValue = percentage / 100;
+    const widthOffset = width - thumbSize;
+    const thumbHalf = thumbSize / 2;
+    const thumbSizeOffset = percentage === 0 ? thumbHalf - 2 : percentage === 100 ? thumbHalf + 2 : thumbHalf;
+    const leftPosition = (percentageValue * widthOffset) + thumbSizeOffset;
+    return `${leftPosition}px`;
+};
+/**
+ * Calculates the CSS linear gradient for the slider track fill based on the given value and maximum value.
+ *
+ * @param {number} value - The current value of the slider.
+ * @param {number} maxValue - The maximum value of the slider.
+ * @param {number} minValue - The minimum value of the slider.
+ * @returns {string} The CSS linear gradient for the slider track fill.
+ */
+export const getTrackFillBasedOnValue = (value, maxValue, minValue) => {
+    const range = maxValue - minValue;
+    const progress = ((value - minValue) / range) * 100;
+    return `linear-gradient(to right, var(--slider-track-fill) ${progress}%, var(--slider-track) ${progress}%)`;
+};
+/**
+ * logs warning for inconsistent inputs
+ *
+ * @param {number} value - The current value of the slider.
+ * @param {number} maxValue - The maximum value of the slider.
+ * @param {number} minValue - The minimum value of the slider.
+ * @returns {string} The CSS linear gradient for the slider track fill.
+ */
+export const logWarnings = (value, maxValue, minValue) => {
+    if (maxValue < minValue || maxValue === minValue) {
+        console.warn("[VdsSlider] - maxValue must be greater than minValue");
+    }
+    if (typeof value === "number" && value < minValue || typeof value === "number" && value > maxValue) {
+        console.warn("[VdsSlider] - value must be inside the range created by the max value and min value");
+    }
+    if ((typeof value === "object" && value.start < minValue || typeof value === "object" && value.start > maxValue) ||
+        (typeof value === "object" && value.end < minValue || typeof value === "object" && value.end > maxValue)) {
+        console.warn("[VdsSliderRange] - values must be inside the range created by the max value and min value");
+    }
+};
+//# sourceMappingURL=slider.utils.js.map

package/dist/collection/utils/slider.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.utils.js","sourceRoot":"","sources":["../../src/utils/slider.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACnC,MAAwB,EACxB,IAAiB,EACjB,QAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,IAAwB,EAClB,EAAE;IACR,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IAE7D,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QACd,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClC,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;IACtD,MAAM,SAAS,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAE9C,MAAM,eAAe,GAAG,UAAU,GAAG,GAAG,CAAC;IACzC,MAAM,WAAW,GAAG,KAAK,GAAG,SAAS,CAAC;IACtC,MAAM,SAAS,GAAG,SAAS,GAAG,CAAC,CAAC;IAChC,MAAM,eAAe,GAAG,UAAU,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1G,MAAM,YAAY,GAAG,CAAC,eAAe,GAAG,WAAW,CAAC,GAAG,eAAe,CAAC;IAEvE,OAAO,GAAG,YAAY,IAAI,CAAC;AAC/B,CAAC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,KAAa,EAAE,QAAgB,EAAE,QAAgB,EAAU,EAAE;IAClG,MAAM,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAClC,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;IAEpD,OAAO,sDAAsD,QAAQ,0BAA0B,QAAQ,IAAI,CAAC;AAChH,CAAC,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CACvB,KAA8C,EAC9C,QAAgB,EAChB,QAAgB,EACZ,EAAE;IACN,IAAI,QAAQ,GAAG,QAAQ,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;QAC/C,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;IACzE,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,QAAQ,EAAE,CAAC;QACjG,OAAO,CAAC,IAAI,CAAC,qFAAqF,CAAC,CAAC;IACxG,CAAC;IAED,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,GAAG,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,GAAG,QAAQ,CAAC;QAC5G,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,GAAG,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,EAAE,CAAC;QAC3G,OAAO,CAAC,IAAI,CAAC,2FAA2F,CAAC,CAAC;IAC9G,CAAC;AACL,CAAC,CAAA","sourcesContent":["/**\n * Calculates the left position of the thumb icon based on the given slider value.\n *\n * @param {HTMLInputElement} slider - The input range element representing the slider.\n * @param {HTMLElement} host - The container element of the slider.\n * @param {number} maxValue - The maximum value of the slider.\n * @param {number} minValue - The minimum value of the slider.\n * @param {number} value - The current value of the slider.\n * @param {size} size - The size of the slider (medium | large).\n * @returns {string} The calculated left position of the thumb icon as a CSS pixel value.\n */\nexport const getPositionBasedOnValue = (\n    slider: HTMLInputElement,\n    host: HTMLElement,\n    maxValue: number,\n    minValue: number,\n    value: number,\n    size: \"medium\" | \"large\"\n): string => {\n    const width = slider ? slider.clientWidth : host.clientWidth;\n\n    if (width === 0) {\n        return '0px';\n    }\n\n    const range = maxValue - minValue;\n    const percentage = ((value - minValue) / range) * 100;\n    const thumbSize = size === \"medium\" ? 20 : 24;\n\n    const percentageValue = percentage / 100;\n    const widthOffset = width - thumbSize;\n    const thumbHalf = thumbSize / 2;\n    const thumbSizeOffset = percentage === 0 ? thumbHalf - 2 : percentage === 100 ? thumbHalf + 2 : thumbHalf;\n\n    const leftPosition = (percentageValue * widthOffset) + thumbSizeOffset;\n\n    return `${leftPosition}px`;\n}\n\n/**\n * Calculates the CSS linear gradient for the slider track fill based on the given value and maximum value.\n *\n * @param {number} value - The current value of the slider.\n * @param {number} maxValue - The maximum value of the slider.\n * @param {number} minValue - The minimum value of the slider.\n * @returns {string} The CSS linear gradient for the slider track fill.\n */\nexport const getTrackFillBasedOnValue = (value: number, maxValue: number, minValue: number): string => {\n    const range = maxValue - minValue;\n    const progress = ((value - minValue) / range) * 100;\n\n    return `linear-gradient(to right, var(--slider-track-fill) ${progress}%, var(--slider-track) ${progress}%)`;\n}\n\n/**\n * logs warning for inconsistent inputs\n *\n * @param {number} value - The current value of the slider.\n * @param {number} maxValue - The maximum value of the slider.\n * @param {number} minValue - The minimum value of the slider.\n * @returns {string} The CSS linear gradient for the slider track fill.\n */\nexport const logWarnings = (\n    value: number | { start: number, end: number },\n    maxValue: number,\n    minValue: number\n): void => {\n    if (maxValue < minValue || maxValue === minValue) {\n        console.warn(\"[VdsSlider] - maxValue must be greater than minValue\");\n    }\n\n    if (typeof value === \"number\" && value < minValue || typeof value === \"number\" && value > maxValue) {\n        console.warn(\"[VdsSlider] - value must be inside the range created by the max value and min value\");\n    }\n\n    if ((typeof value === \"object\" && value.start < minValue || typeof value === \"object\" && value.start > maxValue) || \n        (typeof value === \"object\" && value.end < minValue || typeof value === \"object\" && value.end > maxValue)) {\n        console.warn(\"[VdsSliderRange] - values must be inside the range created by the max value and min value\");\n    }\n}\n\nexport type SliderRangeValueType = \"start\" | \"end\";"]}

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

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

package/dist/collection/utils/spacing-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing-utils.js","sourceRoot":"","sources":["../../src/utils/spacing-utils.ts"],"names":[],"mappings":"","sourcesContent":["export type VoltPaddingScale = \n    \"spacing-00\" |             // 0rem      - 0px \n    \"spacing-01\" |             // 0.125rem  - 2px\n    \"spacing-02\" |             // 0.25rem   - 4px\n    \"spacing-03\" |             // 0.5rem    - 8px\n    \"spacing-04\" |             // 0.75rem   - 12x\n    \"spacing-05\" |             // 1rem      - 16px\n    \"spacing-06\" |             // 1.25rem   - 20px\n    \"spacing-07\" |             // 1.5rem    - 24px\n    \"spacing-08\" |             // 1.75rem   - 28px\n    \"spacing-09\" |             // 2rem      - 32px\n    \"spacing-10\" |             // 2.25rem   - 36px\n    \"spacing-11\" |             // 2.5rem    - 40px\n    \"spacing-12\" |             // 2.75rem   - 44px\n    \"spacing-13\" |             // 3rem      - 48px\n    \"spacing-14\" |             // 3.25rem   - 52px\n    \"spacing-15\" |             // 3.5rem    - 56px\n    \"spacing-16\";              // 3.75rem   - 60px"]}

package/dist/collection/utils/utils.js

@@ -0,0 +1,24 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+/**
+ * Handles a click event on a reference element and opens a link in a new window.
+ *
+ * @param {string} linkRef - The reference string for the link to open. (Optional if no link action desired)
+ * @param {"_self" | "_blank" | "_parent" | "_top"} [linkTarget="_self"] - The target window for the link.
+ * @param {string} linkRel - The relationship type for the link.
+ *
+ * @returns {void}
+ */
+export const handleRefClick = (linkRef, linkTarget = "_self", linkRel) => {
+    if (linkRef) {
+        const link = document.createElement('a');
+        link.href = linkRef;
+        link.target = linkTarget;
+        link.rel = linkRel;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+};
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;IAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC1B,OAAe,EACf,aAAsD,OAAO,EAC7D,OAAe,EACX,EAAE;IACN,IAAI,OAAO,EAAE,CAAC;QACV,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QACzC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC;QACzB,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC;QACnB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAChC,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;AACL,CAAC,CAAA","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\n/**\n * Handles a click event on a reference element and opens a link in a new window.\n *\n * @param {string} linkRef - The reference string for the link to open. (Optional if no link action desired)\n * @param {\"_self\" | \"_blank\" | \"_parent\" | \"_top\"} [linkTarget=\"_self\"] - The target window for the link.\n * @param {string} linkRel - The relationship type for the link.\n * \n * @returns {void}\n */\nexport const handleRefClick = (\n    linkRef: string,\n    linkTarget: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\",\n    linkRel: string\n): void => {\n    if (linkRef) {\n        const link = document.createElement('a');\n        link.href = linkRef;\n        link.target = linkTarget;\n        link.rel = linkRel;\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n    }\n}"]}

package/dist/components/base-group-header.js

@@ -0,0 +1,20 @@
+import { h } from '@stencil/core/internal/client';
+import { c as combineClasses } from './combine-classes.js';
+
+/**
+ * Generates a group header container with a label.
+ *
+ * @param {GroupHeaderSize} size - The size of the group header.
+ * @param {string} value - The text value to display in the group header.
+ *
+ * @returns {HTMLStencilElement} The generated group header container.
+ */
+const generateGroupHeaderContainer = (size, value) => {
+    return (h("div", { class: combineClasses('vds-base-group-header', `vds-base-group-header--${size}`) },
+        h("span", { class: combineClasses('vds-base-group-header__label', `vds-base-group-header__label--${size}`) }, value ? value : h("slot", null))));
+};
+
+export { generateGroupHeaderContainer as g };
+//# sourceMappingURL=base-group-header.js.map
+
+//# sourceMappingURL=base-group-header.js.map

package/dist/components/base-group-header.js.map

@@ -0,0 +1 @@
+{"file":"base-group-header.js","mappings":";;;AAKA;;;;;;;AAOG;MACU,4BAA4B,GAAG,CAC1C,IAAqB,EACrB,KAAc,KACQ;IACtB,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,cAAc,CACxB,uBAAuB,EACvB,CAAA,uBAAA,EAA0B,IAAI,CAAA,CAAE,CACjC,EAAA;QACC,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,cAAc,CACzB,8BAA8B,EAC9B,CAAA,8BAAA,EAAiC,IAAI,CAAA,CAAE,CACxC,EAAA,EACE,KAAK,GAAG,KAAK,GAAG,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACzB,CACH;AAEV;;;;","names":[],"sources":["src/components/base-group-header/base-group-header.tsx"],"sourcesContent":["import { h, HTMLStencilElement } from '@stencil/core/internal';\nimport { combineClasses } from '../../utils/combine-classes';\n\nexport type GroupHeaderSize = 'small' | 'medium' | 'large';\n\n/**\n * Generates a group header container with a label.\n *\n * @param {GroupHeaderSize} size - The size of the group header.\n * @param {string} value - The text value to display in the group header.\n * \n * @returns {HTMLStencilElement} The generated group header container.\n */\nexport const generateGroupHeaderContainer = (\n  size: GroupHeaderSize,\n  value?: string\n): HTMLStencilElement => {\n  return (\n    <div class={combineClasses(\n      'vds-base-group-header',\n      `vds-base-group-header--${size}`\n    )}>\n      <span class={combineClasses(\n        'vds-base-group-header__label',\n        `vds-base-group-header__label--${size}`\n      )}>\n        {value ? value : <slot></slot>}\n      </span>\n    </div>\n  );\n};\n"],"version":3}

package/dist/components/base-item.js

@@ -0,0 +1,115 @@
+import { h } from '@stencil/core/internal/client';
+import { c as combineClasses } from './combine-classes.js';
+
+/**
+ * Gets the appropriate icon color based on the provided conditions.
+ *
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} [danger=false] - Whether the icon should indicate danger.
+ * @param {boolean} [isCheckbox=false] - Whether the icon is for a checkbox.
+ *
+ * @returns {IconColors} The CSS variable name for the icon color.
+ */
+const getIconColor = (disabled, isActive, danger = false, isCheckbox = false) => {
+    switch (true) {
+        case disabled:
+            return "color-icon-disabled";
+        case danger:
+            return "color-icon-danger";
+        case isActive:
+            return isCheckbox ? "color-icon-brand-default" : "color-icon-brand-press";
+        default:
+            return "color-icon-high";
+    }
+};
+/**
+ * Gets the appropriate icon size based on the provided size.
+ *
+ * @param {"small" | "medium" | "large"} size - The desired size of the icon.
+ *
+ * @returns {string} The CSS size value for the icon.
+ */
+const getIconSize = (size) => size === "medium" ? "1rem" : size === "small" ? "0.75rem" : "1.25rem";
+/**
+ * Generates a checkmark icon button based on the provided parameters.
+ *
+ * @param {boolean} isSelected - Whether the item is selected.
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated checkmark icon button.
+ */
+const generateCheckmarkIconButton = (isSelected, size, disabled, isActive, danger) => {
+    if (isSelected) {
+        return (h("div", { class: "vds-base-item__checkmark-icon" },
+            h("vds-icon", { "svg-icon": "good", size: getIconSize(size), color: getIconColor(disabled, isSelected || isActive, danger), alt: "Selected Item" })));
+    }
+    return (h("div", { class: `vds-base-item__checkmark-icon--empty-${size}` }));
+};
+/**
+ * Generates an informative icon based on the provided parameters.
+ *
+ * @param {string} icon - The name of the SVG icon to use.
+ * @param {string} value - The value associated with the icon.
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated informative icon.
+ */
+const generateInformativeIcon = (icon, value, size, disabled, isActive, danger) => {
+    return (h("div", { class: "vds-base-item__informative-icon" },
+        h("vds-icon", { "svg-icon": icon, size: getIconSize(size), color: getIconColor(disabled, isActive, danger), alt: value })));
+};
+/**
+ * Generates a checkbox icon based on the provided parameters.
+ *
+ * @param {boolean} isSelected - Whether the checkbox is selected.
+ * @param {"medium" | "large"} size - The desired size of the checkbox.
+ * @param {boolean} disabled - Whether the checkbox is disabled.
+ * @param {boolean} isActive - Whether the checkbox is active.
+ * @param {boolean} danger - Whether the checkbox should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated checkbox icon.
+ */
+const generateCheckbox = (isSelected, size, disabled, isActive, danger) => {
+    return (h("div", { class: `vds-base-item__checkbox-icon-${size}` },
+        h("vds-icon", { "svg-icon": isSelected ? "checked" : "unchecked", class: combineClasses(isSelected ? "checkbox-icon-checked" : "", `checkbox-item-${size}`), size: getIconSize(size), color: getIconColor(disabled, isSelected || isActive, danger, true), alt: "checkbox-element" })));
+};
+/**
+ * Generates a label element based on the provided parameters.
+
+ * @param {string} label - The text content of the label.
+ * @param {"medium" | "large"} size - The desired size of the label.
+ * @param {boolean} disabled - Whether the label is disabled.
+ * @param {boolean} isActive - Whether the label is active.
+ * @param {boolean} danger - Whether the label should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated label element.
+ */
+const generateLabel = (label, size, disabled, isActive, danger) => {
+    return (h("span", { class: combineClasses("vds-base-item__label", `vds-base-item__label--size-${size}`, disabled ? "vds-base-item__label--disabled" : "", isActive ? "vds-base-item__label--active" : "", danger ? "vds-base-item__label--danger" : "") }, label ? label : h("slot", null)));
+};
+/**
+ * Generates a children icon button based on the provided parameters.
+
+ * @param {"medium" | "large"} size - The desired size of the icon.
+ * @param {boolean} disabled - Whether the icon is disabled.
+ * @param {boolean} isActive - Whether the icon is active.
+ * @param {boolean} danger - Whether the icon should indicate danger.
+ *
+ * @returns {HTMLStencilElement} The generated children icon button.
+ */
+const generateChildrenIconButton = (size, disabled, isActive, danger) => {
+    return (h("div", { class: "vds-base-item__has-children-icon" },
+        h("vds-icon", { "svg-icon": "chevron-right", size: getIconSize(size), color: getIconColor(disabled, isActive, danger), alt: "Open menu" })));
+};
+
+export { generateCheckbox as a, generateInformativeIcon as b, generateLabel as c, generateChildrenIconButton as d, generateCheckmarkIconButton as g };
+//# sourceMappingURL=base-item.js.map
+
+//# sourceMappingURL=base-item.js.map

package/dist/components/base-item.js.map

@@ -0,0 +1 @@
+{"file":"base-item.js","mappings":"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","names":[],"sources":["src/components/base-item/base-item.tsx"],"sourcesContent":["import { h } from \"@stencil/core\";\nimport { HTMLStencilElement } from \"@stencil/core/internal\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { IconColors } from \"../../components\";\n\n/**\n * Gets the appropriate icon color based on the provided conditions.\n *\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} [danger=false] - Whether the icon should indicate danger.\n * @param {boolean} [isCheckbox=false] - Whether the icon is for a checkbox.\n * \n * @returns {IconColors} The CSS variable name for the icon color.\n */\nconst getIconColor = (\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean = false,\n    isCheckbox: boolean = false\n): IconColors => {\n    switch(true) {\n        case disabled:\n            return \"color-icon-disabled\";\n        case danger:\n            return \"color-icon-danger\";\n        case isActive:\n            return isCheckbox ? \"color-icon-brand-default\" : \"color-icon-brand-press\";\n        default: \n            return \"color-icon-high\";\n    }\n}\n\n/**\n * Gets the appropriate icon size based on the provided size.\n *\n * @param {\"small\" | \"medium\" | \"large\"} size - The desired size of the icon.\n * \n * @returns {string} The CSS size value for the icon.\n */\nconst getIconSize = (size: \"small\" | \"medium\" | \"large\"): string => size === \"medium\" ? \"1rem\" : size === \"small\" ? \"0.75rem\" : \"1.25rem\"\n\n/**\n * Generates a checkmark icon button based on the provided parameters.\n *\n * @param {boolean} isSelected - Whether the item is selected.\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated checkmark icon button.\n */\nexport const generateCheckmarkIconButton = (\n    isSelected: boolean,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    if (isSelected) {\n        return (\n            <div class=\"vds-base-item__checkmark-icon\">\n              <vds-icon\n                svg-icon=\"good\"\n                size={getIconSize(size)}\n                color={getIconColor(disabled, isSelected || isActive, danger)}\n                alt=\"Selected Item\"\n              />\n            </div>\n          );\n    }\n\n    return (\n        <div class={`vds-base-item__checkmark-icon--empty-${size}`}></div>\n    );\n}\n\n/**\n * Generates an informative icon based on the provided parameters.\n *\n * @param {string} icon - The name of the SVG icon to use.\n * @param {string} value - The value associated with the icon.\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated informative icon.\n */\nexport const generateInformativeIcon = (\n    icon: string,\n    value: string,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return (\n        <div class=\"vds-base-item__informative-icon\">            \n          <vds-icon\n            svg-icon={icon}\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isActive, danger)}\n            alt={value}\n          />\n        </div>\n      );\n}\n\n/**\n * Generates a checkbox icon based on the provided parameters.\n *\n * @param {boolean} isSelected - Whether the checkbox is selected.\n * @param {\"medium\" | \"large\"} size - The desired size of the checkbox.\n * @param {boolean} disabled - Whether the checkbox is disabled.\n * @param {boolean} isActive - Whether the checkbox is active.\n * @param {boolean} danger - Whether the checkbox should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated checkbox icon.\n */\nexport const generateCheckbox = (\n    isSelected: boolean,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement  => {\n    return (\n        <div class={`vds-base-item__checkbox-icon-${size}`}>\n          <vds-icon\n            svg-icon={isSelected ? \"checked\" : \"unchecked\"}\n            class={combineClasses(isSelected ? \"checkbox-icon-checked\" : \"\", `checkbox-item-${size}`)}\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isSelected || isActive, danger, true)}\n            alt={\"checkbox-element\"}\n          />\n        </div>\n    );\n}\n\n/**\n * Generates a label element based on the provided parameters.\n\n * @param {string} label - The text content of the label.\n * @param {\"medium\" | \"large\"} size - The desired size of the label.\n * @param {boolean} disabled - Whether the label is disabled.\n * @param {boolean} isActive - Whether the label is active.\n * @param {boolean} danger - Whether the label should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated label element.\n */\nexport const generateLabel = (\n    label: string,\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return (\n        <span\n            class={combineClasses(\n                \"vds-base-item__label\",\n                `vds-base-item__label--size-${size}`,\n                disabled ? \"vds-base-item__label--disabled\" : \"\",\n                isActive ? \"vds-base-item__label--active\" : \"\",\n                danger ? \"vds-base-item__label--danger\" : \"\",\n          )}\n        >\n          { label ? label :  <slot></slot> }\n        </span>\n    );\n}\n\n/**\n * Generates a children icon button based on the provided parameters.\n\n * @param {\"medium\" | \"large\"} size - The desired size of the icon.\n * @param {boolean} disabled - Whether the icon is disabled.\n * @param {boolean} isActive - Whether the icon is active.\n * @param {boolean} danger - Whether the icon should indicate danger.\n * \n * @returns {HTMLStencilElement} The generated children icon button.\n */\nexport const generateChildrenIconButton = (\n    size: \"small\" | \"medium\" | \"large\",\n    disabled: boolean,\n    isActive: boolean,\n    danger: boolean\n): HTMLStencilElement => {\n    return(\n        <div class=\"vds-base-item__has-children-icon\">\n          <vds-icon\n            svg-icon=\"chevron-right\"\n            size={getIconSize(size)}\n            color={getIconColor(disabled, isActive, danger)}\n            alt=\"Open menu\"\n          />\n        </div>\n    );\n}\n"],"version":3}

package/dist/components/clone-attributes.js

@@ -0,0 +1,13 @@
+const cloneAttributes = (el, ...excludedKeys) => {
+    return Object.values(el.attributes)
+        .filter(({ name: keyName }) => !(excludedKeys === null || excludedKeys === void 0 ? void 0 : excludedKeys.some(exKey => exKey === keyName)))
+        .reduce((acc, attr) => {
+        acc = Object.assign(Object.assign({}, acc), { [attr.name]: attr.value });
+        return acc;
+    }, {});
+};
+
+export { cloneAttributes as c };
+//# sourceMappingURL=clone-attributes.js.map
+
+//# sourceMappingURL=clone-attributes.js.map

package/dist/components/clone-attributes.js.map

@@ -0,0 +1 @@
+{"file":"clone-attributes.js","mappings":"AAEa,MAAA,eAAe,GAAG,CAI9B,EAAK,EACL,GAAG,YAAsB,KACK;AAC9B,IAAA,OAAO,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,UAAU;AAChC,SAAA,MAAM,CACN,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,MAAA,GAAA,MAAA,GAAZ,YAAY,CAAE,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,CAAA;AAEtE,SAAA,MAAM,CAAC,CAAC,GAA6B,EAAE,IAAU,KAAO;AACxD,QAAA,GAAG,GAAQ,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,GAAG,CAAE,EAAA,EAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAE;AACzC,QAAA,OAAO,GAAG;KACV,EAAE,EAAE,CAAC;AACR;;;;","names":[],"sources":["src/utils/clone-attributes.ts"],"sourcesContent":["import { JSXBase } from \"@stencil/core/internal\";\n\nexport const cloneAttributes = <\n\tX extends HTMLElement,\n\tT = JSXBase.HTMLAttributes | NamedNodeMap\n>(\n\tel: X,\n\t...excludedKeys: string[]\n): { [P in keyof T]?: T[P] } => {\n\treturn Object.values(el.attributes)\n\t\t.filter(\n\t\t\t({ name: keyName }) => !excludedKeys?.some(exKey => exKey === keyName)\n\t\t)\n\t\t.reduce((acc: { [P in keyof T]: T[P] }, attr: Attr): T => {\n\t\t\tacc = { ...acc, [attr.name]: attr.value };\n\t\t\treturn acc;\n\t\t}, {});\n};\n"],"version":3}

package/dist/components/combine-classes.js

@@ -0,0 +1,6 @@
+const combineClasses = (...classes) => classes.join(" ").trim();
+
+export { combineClasses as c };
+//# sourceMappingURL=combine-classes.js.map
+
+//# sourceMappingURL=combine-classes.js.map

package/dist/components/combine-classes.js.map

@@ -0,0 +1 @@
+{"file":"combine-classes.js","mappings":"AAAa,MAAA,cAAc,GAAG,CAAC,GAAG,OAAiB,KAClD,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI;;;;","names":[],"sources":["src/utils/combine-classes.ts"],"sourcesContent":["export const combineClasses = (...classes: string[]): string =>\n\tclasses.join(\" \").trim();\n"],"version":3}