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

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

@@ -1,28 +1,15 @@
 /**
  * Calculates the left position of the thumb icon based on the given slider value.
+ * Uses percentage positioning to align with marks.
  *
- * @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.
+ * @returns {string} The calculated left position of the thumb icon as a CSS percentage 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`;
+export const getPositionBasedOnValue = (maxValue, minValue, value) => {
+    const percentage = valueToPercentage(minValue, maxValue, value);
+    return `${percentage}%`;
 };
 /**
  * Calculates the CSS linear gradient for the slider track fill based on the given value and maximum value.
@@ -43,18 +30,176 @@ export const getTrackFillBasedOnValue = (value, maxValue, minValue) => {
  * @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.
+ * @param {number} step - The step increment (optional).
  */
-export const logWarnings = (value, maxValue, minValue) => {
+export const logWarnings = (value, maxValue, minValue, step) => {
     if (maxValue < minValue || maxValue === minValue) {
-        console.warn("[VdsSlider] - maxValue must be greater than minValue");
+        console.warn('[VdsSlider] - maxValue must be greater than minValue');
+    }
+    if (typeof value === 'number' && (value < minValue || 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 || value.start > maxValue || value.end < minValue || value.end > maxValue)) {
+        console.warn('[VdsSliderRange] - values must be inside the range created by the max value and min value');
+    }
+    if (step !== undefined && step !== null) {
+        const range = maxValue - minValue;
+        if (step > range) {
+            console.warn('[VdsSlider] - step value is larger than the range.');
+        }
+        if (typeof value === 'number' && value >= minValue && value <= maxValue) {
+            const normalizedValue = normalizeValue(value, minValue, maxValue, step);
+            if (normalizedValue !== value) {
+                console.warn(`[VdsSlider] - initial value (${value}) is not aligned with step (${step}). It will be snapped to ${normalizedValue}.`);
+            }
+        }
+        if (typeof value === 'object') {
+            const normalized = normalizeRangeValues(value.start, value.end, minValue, maxValue, step);
+            if (normalized.startValue !== value.start) {
+                console.warn(`[VdsSliderRange] - initial startValue (${value.start}) is not aligned with step (${step}). It will be snapped to ${normalized.startValue}.`);
+            }
+            if (normalized.endValue !== value.end) {
+                console.warn(`[VdsSliderRange] - initial endValue (${value.end}) is not aligned with step (${step}). It will be snapped to ${normalized.endValue}.`);
+            }
+        }
+    }
+};
+/**
+ * Clamp a numeric value within [min, max].
+ */
+export const clamp = (min, max, value) => {
+    return Math.min(max, Math.max(min, value));
+};
+/**
+ * Normalizes range values (start and end) with proper defaults and step snapping.
+ *
+ * @param {number} startValue - The start value to normalize
+ * @param {number} endValue - The end value to normalize
+ * @param {number} minValue - The minimum value
+ * @param {number} maxValue - The maximum value
+ * @param {number} step - The step increment
+ * @returns {{ startValue: number; endValue: number }} The normalized start and end values
+ */
+export const normalizeRangeValues = (startValue, endValue, minValue, maxValue, step) => {
+    const normalizedStart = normalizeValue(startValue, minValue, maxValue, step);
+    let normalizedEnd;
+    if (endValue === undefined || endValue === null || isNaN(endValue)) {
+        normalizedEnd = maxValue;
+    }
+    else {
+        normalizedEnd = normalizeValue(endValue, minValue, maxValue, step);
+    }
+    return {
+        startValue: normalizedStart,
+        endValue: normalizedEnd,
+    };
+};
+/**
+ * Normalizes a value to fit within min/max bounds and snap to step increments.
+ *
+ * @param {number} value - The value to normalize
+ * @param {number} minValue - The minimum value
+ * @param {number} maxValue - The maximum value
+ * @param {number} step - The step increment
+ * @returns {number} The normalized value
+ */
+export const normalizeValue = (value, minValue, maxValue, step) => {
+    var _a, _b;
+    if (value === null || value === undefined || isNaN(value)) {
+        return 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");
+    let normalizedValue = clamp(minValue, maxValue, value);
+    if (step !== undefined && step !== null && step > 0) {
+        const range = maxValue - minValue;
+        if (step > range)
+            return minValue;
+        // Snap to nearest step
+        const steps = Math.round((normalizedValue - minValue) / step);
+        normalizedValue = minValue + steps * step;
+        const decimals = (_b = (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+        normalizedValue = Number(normalizedValue.toFixed(decimals));
+        // If snapped value exceeds bounds, clamp to valid step
+        if (normalizedValue > maxValue) {
+            normalizedValue = minValue + Math.floor((maxValue - minValue) / step) * step;
+        }
+        else if (normalizedValue < minValue) {
+            normalizedValue = minValue;
+        }
     }
-    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");
+    return normalizedValue;
+};
+/**
+ * Convert a value within [min, max] to a percentage (0-100).
+ */
+export const valueToPercentage = (minValue, maxValue, value) => {
+    const range = maxValue - minValue;
+    if (range <= 0)
+        return 0;
+    const clamped = clamp(minValue, maxValue, value);
+    return ((clamped - minValue) / range) * 100;
+};
+/**
+ * Build step-based marks excluding min and max edge values.
+ */
+export const buildStepMarks = (minValue, maxValue, step) => {
+    if (step === undefined || step === null || step <= 0) {
+        return [];
+    }
+    const marks = [];
+    for (let currentValue = minValue + step; currentValue < maxValue; currentValue += step) {
+        marks.push({ value: currentValue });
+    }
+    return marks;
+};
+/**
+ * Helper function to normalize marks from string or array into a Marks array.
+ */
+const normalizeMarks = (marks) => {
+    if (!marks)
+        return [];
+    if (typeof marks === 'string') {
+        try {
+            const parsed = JSON.parse(marks);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    return Array.isArray(marks) ? marks : [];
+};
+/**
+ * Parse marks from an array or JSON string; returns numeric marks only, excluding min/max edges, duplicates,
+ * and values outside the valid range.
+ */
+export const parseMarks = (marks, minValue, maxValue) => {
+    const marksArray = normalizeMarks(marks);
+    const filtered = marksArray
+        .filter(mark => typeof (mark === null || mark === void 0 ? void 0 : mark.value) === 'number')
+        .filter(mark => mark.value !== minValue && mark.value !== maxValue)
+        .filter(mark => mark.value >= minValue && mark.value <= maxValue);
+    // Remove duplicates based on value
+    const seenValues = new Set();
+    return filtered.filter(mark => {
+        if (seenValues.has(mark.value)) {
+            return false;
+        }
+        seenValues.add(mark.value);
+        return true;
+    });
+};
+/**
+ * Get labels for min/max values from marks array if provided, otherwise return the numeric values.
+ */
+export const getLimitLabels = (marks, minValue, maxValue) => {
+    const marksArray = normalizeMarks(marks);
+    if (marksArray.length === 0) {
+        return { minLabel: minValue, maxLabel: maxValue };
     }
+    const minMark = marksArray.find(mark => mark.value === minValue);
+    const maxMark = marksArray.find(mark => mark.value === maxValue);
+    return {
+        minLabel: (minMark === null || minMark === void 0 ? void 0 : minMark.label) && minMark.label.trim() !== '' ? minMark.label : minValue,
+        maxLabel: (maxMark === null || maxMark === void 0 ? void 0 : maxMark.label) && maxMark.label.trim() !== '' ? maxMark.label : maxValue,
+    };
 };
-//# sourceMappingURL=slider.utils.js.map

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

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

package/dist/collection/utils/utils.js

@@ -21,4 +21,3 @@ export const handleRefClick = (linkRef, linkTarget = "_self", linkRel) => {
         document.body.removeChild(link);
     }
 };
-//# sourceMappingURL=utils.js.map

package/dist/components/array-utils.js

@@ -0,0 +1 @@
+const r=(r,n)=>{if(r===n)return!0;if(null==r||null==n)return!1;if(r.length!==n.length)return!1;for(var t=0;t<r.length;++t)if(r[t]!==n[t])return!1;return!0};export{r as a}

package/dist/components/attribute-sync.js

@@ -0,0 +1 @@
+const e=["class","style","label","size","type","value","placeholder","disabled","readonly","is-readonly","error","required","is-required","informative-icon","formatter","allowed-styles"],t=new Set(["autofocus","multiple","spellcheck"]),r=(r,s,n=[])=>{const o=[...e,...n];t.forEach((e=>{Object.getOwnPropertyDescriptor(r,e)||Object.defineProperty(r,e,{get(){return this.hasAttribute(e)},set(t){t?this.setAttribute(e,""):this.removeAttribute(e)},configurable:!0})}));const l=()=>{const e=s();e&&(Array.from(r.attributes).forEach((s=>{const n=s.name;if(o.includes(n))return;const l=s.value;if(t.has(n)){const t=r.hasAttribute(n)&&(""===l||"true"===l);if("spellcheck"===n){const r=t?"true":"false";e.getAttribute(n)!==r&&e.setAttribute(n,r)}else{const r="";t&&!e.hasAttribute(n)?e.setAttribute(n,r):!t&&e.hasAttribute(n)&&e.removeAttribute(n)}}else e.getAttribute(n)!==l&&e.setAttribute(n,l)})),Array.from(e.attributes).forEach((t=>{o.includes(t.name)||r.hasAttribute(t.name)||e.removeAttribute(t.name)})))};if("undefined"==typeof MutationObserver)return()=>{};const i=new MutationObserver((()=>{l()}));return i.observe(r,{attributes:!0}),l(),()=>i.disconnect()};export{r as s}

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

@@ -1,19 +1 @@
-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
+import{h as s}from"@stencil/core/internal/client";import{c as e}from"./combine-classes.js";const a=(a,r)=>s("div",{class:e("vds-base-group-header",`vds-base-group-header--${a}`)},s("span",{class:e("vds-base-group-header__label",`vds-base-group-header__label--${a}`)},r||s("slot",null)));export{a as g}

package/dist/components/base-item.js

@@ -1,111 +1 @@
-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
+import{h as e}from"@stencil/core/internal/client";import{c as s}from"./combine-classes.js";const c=(e,s,c=!1,i=!1)=>{switch(!0){case e:return"color-icon-disabled";case c:return"color-icon-danger";case s:return i?"color-icon-brand-default":"color-icon-brand-press";default:return"color-icon-high"}},i=e=>"medium"===e?"1rem":"small"===e?"0.75rem":"1.25rem",a=(s,a,o,l,n)=>s?e("div",{class:"vds-base-item__checkmark-icon"},e("vds-icon",{"svg-icon":"good",size:i(a),color:c(o,s||l,n),alt:"Selected Item"})):e("div",{class:`vds-base-item__checkmark-icon--empty-${a}`}),o=(s,a,o,l,n,t)=>e("div",{class:"vds-base-item__informative-icon"},e("vds-icon",{"svg-icon":s,size:i(o),color:c(l,n,t),alt:a})),l=(a,o,l,n,t)=>e("div",{class:`vds-base-item__checkbox-icon-${o}`},e("vds-icon",{"svg-icon":a?"checked":"unchecked",class:s(a?"checkbox-icon-checked":"",`checkbox-item-${o}`),size:i(o),color:c(l,a||n,t,!0),alt:"checkbox-element"})),n=(c,i,a,o,l,n)=>{let t=e("slot",null);return c&&(t=((s,c)=>{if(!c||!s)return[s];const i=[],a=new RegExp(`(${c.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})`,"gi");return s.split(a).forEach((s=>{s&&s.toLowerCase()===c.toLowerCase()?i.push(e("span",{class:"highlighted-text"},s)):s&&i.push(s)})),i})(c,n||"")),e("span",{class:s("vds-base-item__label",`vds-base-item__label--size-${i}`,a?"vds-base-item__label--disabled":"",o?"vds-base-item__label--active":"",l?"vds-base-item__label--danger":"")},t)},t=(s,a,o,l)=>e("div",{class:"vds-base-item__has-children-icon"},e("vds-icon",{"svg-icon":"chevron-right",size:i(s),color:c(a,o,l),alt:"Open menu"}));export{l as a,o as b,n as c,t as d,a as g}

package/dist/components/clone-attributes.js

@@ -1,13 +1 @@
-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
+const e=(e,...c)=>Object.values(e.attributes).filter((({name:e})=>!(null==c?void 0:c.some((c=>c===e))))).reduce(((e,c)=>Object.assign(Object.assign({},e),{[c.name]:c.value})),{}),c=(e,...c)=>Object.values(e.attributes).filter((({name:e})=>null==c?void 0:c.some((c=>c===e)))).reduce(((e,c)=>Object.assign(Object.assign({},e),{[c.name]:c.value})),{});export{c as a,e as c}

package/dist/components/combine-classes.js

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