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

package/dist/components/vds-basic-dropdown.utils.js

@@ -1,239 +1 @@
-/**
- * Toggles the display style of an HTML element.
- *
- * @param {HTMLElement} contentBox The HTML element to toggle the display for.
- * @param {boolean} toggle A boolean value to control the display.
- *  - True: Sets the display to "block".
- *  - False: Sets the display to "none".
- * @returns {void}
- */
-const toggleContainerDisplay = (contentBox, toggle) => {
-    if (!contentBox) {
-        return;
-    }
-    contentBox.style.display = toggle ? "block" : "none";
-};
-/**
- * Unselects non-selected items in a dropdown.
- *
- * @param {HTMLElement} dropdownContent The dropdown content element.
- * @param {string[]|string} value The selected value or an array of selected values.
- */
-const unselectNonSelectedItems = (dropdownContent, value) => {
-    if (!dropdownContent) {
-        return;
-    }
-    const container = dropdownContent.querySelector("slot");
-    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-    Array.from(dropdownItems || []).forEach(item => {
-        if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") !== value) {
-            item.setAttribute("is-selected", "false");
-            item.setAttribute("is-active", "false");
-        }
-        if (Array.isArray(value) && item.tagName.toLowerCase() === "vds-dropdown-item" && value.some(v => v !== item.getAttribute("value"))) {
-            item.setAttribute("is-selected", "false");
-            item.setAttribute("is-active", "false");
-        }
-    });
-};
-/**
- * Selects selected items in a dropdown.
- *
- * @param {HTMLElement} dropdownContent The dropdown content element.
- * @param {string[]|string} value The selected value or an array of selected values.
- */
-const selectSelectedItems = (dropdownContent, value) => {
-    if (!dropdownContent) {
-        return;
-    }
-    try {
-        const container = dropdownContent.querySelector("slot");
-        const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-        Array.from(dropdownItems || []).forEach(item => {
-            if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value) {
-                item.setAttribute("is-selected", "true");
-                item.setAttribute("is-active", "true");
-            }
-            if (Array.isArray(value) && item.tagName.toLowerCase() === "vds-dropdown-item" && value.some(v => v === item.getAttribute("value"))) {
-                item.setAttribute("is-selected", "true");
-                item.setAttribute("is-active", "true");
-            }
-        });
-    }
-    catch (error) {
-        console.warn("[selectSelectedItems]", error);
-    }
-};
-/**
- * Gets selected label in single dropdown using value
- *
- * @param {HTMLElement} dropdownContent The dropdown content element.
- * @param {string[]|string} value The selected value or an array of selected values.
- */
-const getSelectedLabel = (dropdownContent, value) => {
-    if (!dropdownContent) {
-        return;
-    }
-    try {
-        let response = "";
-        const container = dropdownContent.querySelector("slot");
-        const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-        Array.from(dropdownItems || []).forEach(item => {
-            if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value) {
-                response = (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.textContent);
-            }
-        });
-        return response;
-    }
-    catch (error) {
-        console.warn("[getSelectedLabel]", error);
-    }
-};
-const scrollToSelectedValue = (dropdownContent, value) => {
-    if (!dropdownContent) {
-        return;
-    }
-    try {
-        const container = dropdownContent.querySelector("slot");
-        const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-        let selectedItem = null;
-        Array.from(dropdownItems || []).forEach(item => {
-            if (typeof value === "string" && item.tagName.toLowerCase() === "vds-dropdown-item" && item.getAttribute("value") === value) {
-                selectedItem = item;
-            }
-        });
-        // Scroll to option when is single value
-        if (typeof value === "string" && selectedItem) {
-            selectedItem.scrollIntoView({
-                behavior: "instant",
-                block: "center",
-                inline: "center",
-            });
-        }
-    }
-    catch (error) {
-        console.warn("[ScrollToSelectedValue]", error);
-    }
-};
-/**
- * Gets thje selected text items in a dropdown.
- *
- * @param {HTMLElement} dropdownContent The dropdown content element.
- * @param {string[]|string} value The selected value or an array of selected values.
- */
-const getSelectedItemsText = (dropdownContent, value) => {
-    if (!dropdownContent) {
-        return [];
-    }
-    const container = dropdownContent.querySelector("slot");
-    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-    return Array.from(dropdownItems || [])
-        .filter(ditem => ditem.tagName.toLowerCase() === "vds-dropdown-item" && value.some(v => v === ditem.getAttribute("value")))
-        .map(item => item.getAttribute("label"));
-};
-/**
- * Unselects all items in a dropdown.
- *
- * @param {HTMLElement} dropdownContent The dropdown content element.
- * @param {string[]|string} value The selected value or an array of selected values.
- */
-const unselectAllItems = (dropdownContent) => {
-    if (!dropdownContent) {
-        return;
-    }
-    const container = dropdownContent.querySelector("slot");
-    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-    Array.from(dropdownItems || []).forEach(item => {
-        item.setAttribute("is-selected", "false");
-        item.setAttribute("is-active", "false");
-    });
-};
-/**
- * Emits a native "input" event on the specified host element.
- *
- * @param {HTMLElement} hostEl The host element to emit the event on.
- */
-const emitNativeInputEvent = (hostEl) => {
-    if (!hostEl) {
-        return;
-    }
-    const inputEvent = new InputEvent("input");
-    hostEl.dispatchEvent(inputEvent);
-};
-/**
- * Checks if a given value is a valid option within a dropdown content element.
- *
- * @param {HTMLElement} dropdownContent The dropdown content element.
- * @param {string} value The value to check for validity.
- * @returns {boolean} True if the value is a valid option, false otherwise.
- *
- * **Validity criteria:**
- * - The value must match the `value` attribute of at least one `vds-dropdown-item` element within the dropdown content.
- */
-const isValidOption = (dropdownContent, value) => {
-    if (!dropdownContent) {
-        return;
-    }
-    const container = dropdownContent.querySelector("slot");
-    const dropdownItems = container && typeof (container === null || container === void 0 ? void 0 : container.assignedElements) === "function" ? container.assignedElements() : null;
-    return Array.from(dropdownItems || []).some(item => item.getAttribute("value") === value);
-};
-/**
- * Filters a list of options to only include those that are valid within a specified host element.
- *
- * @param {HTMLElement} hostEl The host element to validate options against.
- * @param {string[]} options The list of options to filter.
- * @returns {string[]} A new array containing only the valid options from the input list.
- *
- * **Validity criteria:**
- * - An option is considered valid if it matches the `value` attribute of at least one `vds-dropdown-item` element within the host element's dropdown content.
- */
-const getValidOptions = (hostEl, options) => {
-    const validOptions = [];
-    options.forEach(nv => {
-        if (isValidOption(hostEl, nv)) {
-            validOptions.push(nv);
-        }
-    });
-    return validOptions;
-};
-/**
- * Sets dropdown styles for JSX.style property
- *
- * @param maxHeight string
- * @returns { [key: string]: string }
- */
-const setDropdownStyles = (maxHeight) => {
-    let styles = {};
-    styles = {
-        maxHeight: maxHeight ? maxHeight : undefined,
-    };
-    return styles;
-};
-/**
- * Updates the container width to match the trigger width when matchWidth is true.
- *
- * @param {HTMLElement} dropdownTrigger - The HTML button element that triggers the dropdown.
- * @param {boolean} matchWidth - A flag indicating whether to match the width of the dropdown content to the trigger.
- * @param {HTMLDivElement} dropdownContent - The dropdown content element whose width is to be updated.
- */
-const updateContainerWidth = (dropdownTrigger, matchWidth, dropdownContent) => {
-    try {
-        if (matchWidth && dropdownTrigger && dropdownContent) {
-            const triggerWidth = dropdownTrigger.offsetWidth;
-            dropdownContent.style.setProperty('--trigger-width', `${triggerWidth}px`);
-            dropdownContent.classList.add('match-width');
-        }
-        else if (dropdownContent) {
-            dropdownContent.classList.remove('match-width');
-        }
-    }
-    catch (error) {
-        console.warn("[updateContainerWidth]", error);
-    }
-};
-
-export { updateContainerWidth as a, unselectNonSelectedItems as b, selectSelectedItems as c, setDropdownStyles as d, getValidOptions as e, emitNativeInputEvent as f, getSelectedLabel as g, getSelectedItemsText as h, scrollToSelectedValue as s, toggleContainerDisplay as t, unselectAllItems as u };
-//# sourceMappingURL=vds-basic-dropdown.utils.js.map
-
-//# sourceMappingURL=vds-basic-dropdown.utils.js.map
+const t=(t,e)=>{t&&(t.style.display=e?"block":"none")},e=(t,e)=>{if(!t)return;const o=t.querySelector("slot"),n=o&&"function"==typeof(null==o?void 0:o.assignedElements)?o.assignedElements():null;Array.from(n||[]).forEach((t=>{"string"==typeof e&&"vds-dropdown-item"===t.tagName.toLowerCase()&&t.getAttribute("value")!==e&&(t.setAttribute("is-selected","false"),t.setAttribute("is-active","false")),Array.isArray(e)&&"vds-dropdown-item"===t.tagName.toLowerCase()&&e.some((e=>e!==t.getAttribute("value")))&&(t.setAttribute("is-selected","false"),t.setAttribute("is-active","false"))}))},o=(t,e)=>{if(t)try{const o=t.querySelector("slot"),n=o&&"function"==typeof(null==o?void 0:o.assignedElements)?o.assignedElements():null;Array.from(n||[]).forEach((t=>{"string"==typeof e&&"vds-dropdown-item"===t.tagName.toLowerCase()&&t.getAttribute("value")===e&&(t.setAttribute("is-selected","true"),t.setAttribute("is-active","true")),Array.isArray(e)&&"vds-dropdown-item"===t.tagName.toLowerCase()&&e.some((e=>e===t.getAttribute("value")))&&(t.setAttribute("is-selected","true"),t.setAttribute("is-active","true"))}))}catch(t){console.warn("[selectSelectedItems]",t)}},n=(t,e)=>{if(t)try{let o="";const n=t.querySelector("slot"),l=n&&"function"==typeof(null==n?void 0:n.assignedElements)?n.assignedElements():null;return Array.from(l||[]).forEach((t=>{"string"==typeof e&&"vds-dropdown-item"===t.tagName.toLowerCase()&&t.getAttribute("value")===e&&(o=(null==t?void 0:t.label)||(null==t?void 0:t.textContent))})),o}catch(t){console.warn("[getSelectedLabel]",t)}},l=(t,e)=>{if(t&&"string"==typeof e)try{const o=t.querySelector("slot"),n=o&&"function"==typeof o.assignedElements?o.assignedElements():[],l=Array.from(n).find((t=>"vds-dropdown-item"===t.tagName.toLowerCase()&&t.getAttribute("value")===e));if(l){const e=t.querySelector(".vds-dropdown__content")||t;if(e&&"function"==typeof e.getBoundingClientRect&&"function"==typeof l.getBoundingClientRect){const t=e.getBoundingClientRect(),o=l.getBoundingClientRect(),n=Math.max(0,o.top-t.top+e.scrollTop-e.clientHeight/2+o.height/2);e.scrollTop=n}else try{l.scrollIntoView({block:"nearest",inline:"nearest"})}catch(t){console.warn("[ScrollToSelectedValue] scrollIntoView failed",t)}}}catch(t){console.warn("[ScrollToSelectedValue]",t)}},s=(t,e)=>{if(!t)return[];const o=t.querySelector("slot"),n=o&&"function"==typeof(null==o?void 0:o.assignedElements)?o.assignedElements():null;return Array.from(n||[]).filter((t=>"vds-dropdown-item"===t.tagName.toLowerCase()&&e.some((e=>e===t.getAttribute("value"))))).map((t=>t.getAttribute("label")))},r=t=>{if(!t)return;const e=t.querySelector("slot"),o=e&&"function"==typeof(null==e?void 0:e.assignedElements)?e.assignedElements():null;Array.from(o||[]).forEach((t=>{t.setAttribute("is-selected","false"),t.setAttribute("is-active","false")}))},i=t=>{if(!t)return;const e=new InputEvent("input");t.dispatchEvent(e)},a=(t,e)=>{const o=[];return e.forEach((e=>{((t,e)=>{if(!t)return;const o=t.querySelector("slot"),n=o&&"function"==typeof(null==o?void 0:o.assignedElements)?o.assignedElements():null;return Array.from(n||[]).some((t=>t.getAttribute("value")===e))})(t,e)&&o.push(e)})),o},c=t=>{let e={};return e={maxHeight:t||void 0},e},d=(t,e,o)=>{try{e&&t&&o?(o.style.setProperty("--trigger-width",`${t.offsetWidth}px`),o.classList.add("match-width")):o&&o.classList.remove("match-width")}catch(t){console.warn("[updateContainerWidth]",t)}},u=t=>Array.from(t.querySelectorAll("vds-dropdown-item:not([disabled])")).map((t=>{var e,o;return null!==(o=null===(e=null==t?void 0:t.shadowRoot)||void 0===e?void 0:e.querySelector("button"))&&void 0!==o?o:null})).filter((t=>null!==t));export{d as a,e as b,o as c,u as d,c as e,a as f,n as g,i as h,s as i,l as s,t,r as u}

package/dist/components/vds-basic-input.js

@@ -1,9 +1 @@
-import { V as VdsBasicInput$1, d as defineCustomElement$1 } from './vds-basic-input2.js';
-
-const VdsBasicInput = VdsBasicInput$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { VdsBasicInput, defineCustomElement };
-//# sourceMappingURL=vds-basic-input.js.map
-
-//# sourceMappingURL=vds-basic-input.js.map
+import{V as s,d as o}from"./vds-basic-input2.js";const t=s,a=o;export{t as VdsBasicInput,a as defineCustomElement}

package/dist/components/vds-basic-input.utils.js

@@ -1,137 +1 @@
-import { i as iconSprint } from './icon-sprite.js';
-
-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;
-        }
-    });
-};
-
-/**
- * Validates whether an icon is valid or not by comparing with sprite file.
- *
- * @param icon string
- * @returns boolean
- */
-const isValidIcon = (icon) => {
-    const ICON_LIST = getIconsFromSpriteFile();
-    return icon && ICON_LIST.some(ico => ico === icon);
-};
-/**
- * Toggle class [vds__input__container--focus] in focus/blur input's event
- *
- * @param divEl HTMLElement
- * @returns void
- */
-const toggleFocusClass = (divEl, target = "input") => {
-    const classed = `vds__${target}__container--focus`;
-    if (divEl.classList.contains(classed)) {
-        divEl.classList.remove(classed);
-    }
-    else {
-        divEl.classList.add(classed);
-    }
-};
-/**
- * Add class touched in focus event
- *
- * @param input HTMLElement
- * @returns void
- */
-const setTouchedClass = (input) => {
-    const classed = "touched";
-    if (!input.classList.contains(classed)) {
-        input.classList.add(classed);
-    }
-};
-/**
- * Add class touched in input event
- *
- * @param input HTMLElement
- * @returns void
- */
-const setDirtyClass = (input) => {
-    const classed = "dirty";
-    if (!input.classList.contains(classed)) {
-        input.classList.add(classed);
-    }
-};
-/**
- * Get icon color according to input state.
- *
- * @param divEl HTMLElement
- * @returns IconColors
- */
-const getIconColor = (inputState) => {
-    switch (inputState) {
-        case "normal":
-            return "color-icon-high";
-        case "disabled":
-            return "color-icon-disabled";
-        case "readonly":
-            return "color-icon-medium";
-    }
-};
-/**
- * Validates whether the style is valid or not.
- *
- * @param input { [key: string]: string }
- * @returns boolean
- */
-const isValidInputStyle = (input) => {
-    const VALID_STYLES = [
-        "direction",
-        "text-align",
-        "textAlign",
-        "text-transform",
-        "textTransform",
-        "unicode-bidi",
-        "unicodeBidi"
-    ];
-    const style = Object.keys(input);
-    return style.length > 0 && VALID_STYLES.some(st => st === style[0]);
-};
-/**
- * Sets input styles so they can be pass to JSX.style property
- *
- * @param input { [key: string]: string }
- * @returns { [key: string]: string }
- */
-const setInputStyles = (allowedStyles) => {
-    if (allowedStyles) {
-        let response = {};
-        for (const style of allowedStyles) {
-            if (isValidInputStyle(style)) {
-                response = Object.assign(Object.assign({}, response), style);
-            }
-        }
-        return response;
-    }
-    return {};
-};
-/**
- * Executes Formatter Function in order to mask value inside input.
- *
- * @param formatter Function
- * @param input string
- * @param currentValue string
- * @param eventData string
- * @param element HTMLInputElement | HTMLTextAreaElement
- * @param fullEvent InputEvent
- *
- * @returns string
- */
-const maskInput = (formatter, input, currentValue, eventData, element, fullEvent) => {
-    return formatter(input, currentValue, eventData, element, fullEvent);
-};
-
-export { setInputStyles as a, setTouchedClass as b, getIconColor as g, isValidIcon as i, maskInput as m, setDirtyClass as s, toggleFocusClass as t };
-//# sourceMappingURL=vds-basic-input.utils.js.map
-
-//# sourceMappingURL=vds-basic-input.utils.js.map
+import{g as t}from"./icon-utils.js";const r=r=>{if(!r)return!1;if(r.trim().startsWith("<svg"))return!0;try{return new URL(r),!0}catch(n){return t().some((t=>t===r))}},n=(t,r="input")=>{const n=`vds__${r}__container--focus`;t.classList.contains(n)?t.classList.remove(n):t.classList.add(n)},e=t=>{const r="touched";t.classList.contains(r)||t.classList.add(r)},o=t=>{const r="dirty";t.classList.contains(r)||t.classList.add(r)},c=t=>{switch(t){case"normal":return"color-icon-high";case"disabled":return"color-icon-disabled";case"readonly":return"color-icon-medium"}},i=t=>{const r=Object.keys(t);return r.length>0&&["direction","text-align","textAlign","text-transform","textTransform","unicode-bidi","unicodeBidi"].some((t=>t===r[0]))},s=t=>{if(t){let r={};for(const n of t)i(n)&&(r=Object.assign(Object.assign({},r),n));return r}return{}},a=(t,r,n,e,o,c)=>t(r,n,e,o,c);export{s as a,e as b,c as g,r as i,a as m,o as s,n as t}