funda-ui 4.7.620 → 4.7.624

package/publish/lib/esm/Utils/libs/formdata.ts

@@ -0,0 +1,93 @@
+interface FormField {
+    name: string;
+    value: string | string[];
+}
+
+type FieldType = 'input' | 'textarea' | 'select' | 'checkbox' | 'progress' | 'datalist';
+
+/**
+ * Serialize form values
+ * @param form - HTMLFormElement or HTMLDivElement to serialize
+ * @param types - An array of field types to include in serialization
+ * @returns Array of form fields with their values
+ */
+function serializeArray(
+    form: HTMLFormElement | HTMLDivElement | null,
+    types: FieldType[] = ['input', 'textarea', 'select', 'checkbox', 'progress', 'datalist']
+): FormField[] {
+    if (form === null) return [];
+
+
+    const objects: FormField[] = [];
+    const fieldsTypes = types;
+    
+    fieldsTypes.forEach((item) => {
+        const fields = form.getElementsByTagName(item);
+        for (let i = 0; i < fields.length; i++) {
+            const field = fields[i] as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLProgressElement | HTMLDataListElement;
+            const _name = field.getAttribute("name");
+            let _value: string | string[] = '';
+
+            // Get value based on element type
+            if (field instanceof HTMLInputElement) {
+                _value = field.value;
+            } else if (field instanceof HTMLTextAreaElement) {
+                _value = field.value;
+            } else if (field instanceof HTMLSelectElement) {
+                _value = field.value;
+            } else if (field instanceof HTMLProgressElement) {
+                _value = field.value.toString();
+            } else if (field instanceof HTMLDataListElement) {
+                _value = ''; // DataList elements don't have a value property
+            }
+
+            // if field is Array
+            if (_name !== null && _name.match(/(\[.*?\])/gi)) {
+                const inputs = form.querySelectorAll<HTMLInputElement>(`[name='${_name}']`);
+                const _arrFieldValue: string[] = [];
+                
+                for (let j = 0; j < inputs.length; j++) {
+                    const _arrField = inputs[j];
+                    //if checkbox or radio
+                    if (_arrField.type === "radio" || _arrField.type === "checkbox") {
+                        if (_arrField.checked === true) {
+                            _arrFieldValue.push(_arrField.value);
+                        } else {
+                            _arrFieldValue.push("");
+                        }
+                    } else {
+                        _arrFieldValue.push(_arrField.value);
+                    }
+                }
+
+                _value = _arrFieldValue;
+            }
+
+            //if checkbox or radio
+            if (field instanceof HTMLInputElement && (field.type === 'radio' || field.type === 'checkbox')) {
+                if (field.checked === true) {
+                    objects.push({
+                        name: _name || '',
+                        value: _value
+                    });
+                }
+            } else {
+                objects.push({
+                    name: _name || '',
+                    value: _value
+                });
+            }
+        }
+    });
+
+    // remove Duplicate objects from JSON Array
+    const clean = objects.filter((item, index, self) => 
+        index === self.findIndex((t) => (t.name === item.name))
+    );
+
+    return clean;
+}
+
+export {
+    serializeArray
+};

package/publish/lib/esm/Utils/libs/getElementProperty.ts

@@ -0,0 +1,150 @@
+/**
+ * Get the -webkit-transition-duration property
+ *
+ * @param {HTMLElement} el - A DOM node containing one selector to match against.
+ * @return {number}    - Returns a pure number.
+ */
+function getTransitionDuration(el: HTMLElement): number {
+
+    if (typeof el === typeof undefined) {
+        return 0;
+    }
+
+
+    let style: CSSStyleDeclaration = window.getComputedStyle(el),
+        duration: any = style.webkitTransitionDuration,
+        delay: any = style.webkitTransitionDelay;
+
+    if (typeof duration != typeof undefined) {
+        // fix miliseconds vs seconds
+        duration = (duration.indexOf("ms") > -1) ? parseFloat(duration) : parseFloat(duration) * 1000;
+        delay = (delay.indexOf("ms") > -1) ? parseFloat(delay) : parseFloat(delay) * 1000;
+
+        return duration;
+    } else {
+        return 0;
+    }
+
+}
+
+
+
+/**
+ * Get an object's absolute position on the page
+ *
+ * @param {HTMLElement} el - A DOM node containing one selector to match against.
+ * @return {Json}    - An object containing the properties top and left. 
+ */
+function getAbsoluteCoordinates(el: HTMLElement): { top: number, left: number } {
+
+    let windowWidth: number = window.innerWidth,
+        leftPos: any = null,
+        topPos: any = null;
+
+    const pEl: any = el.parentElement;
+    if (!document.getElementsByTagName('body')[0].className.match(/rtl/)) {
+        leftPos = (el.offsetLeft == 0) ? pEl.offsetLeft : el.offsetLeft;
+        topPos = (el.offsetTop == 0) ?pEl.offsetTop : el.offsetTop;
+    } else {
+
+        // width and height in pixels, including padding and border
+        // Corresponds to outerWidth(), outerHeight()
+        leftPos = (el.offsetLeft == 0) ? (windowWidth - (pEl.offsetLeft + pEl.offsetWidth)) : (windowWidth - (el.offsetLeft + el.offsetWidth));
+        topPos = (el.offsetTop == 0) ? (windowWidth - (pEl.offsetTop + pEl.offsetHeight)) : (windowWidth - (el.offsetTop + el.offsetHeight));
+    }
+
+
+    return {
+        'left': leftPos,
+        'top': topPos
+    };
+
+}
+
+
+/**
+ * Get the current coordinates of the first element in the set of matched elements, relative to the document.
+ *
+ * @param {Element} el - A DOM node containing one selector to match against.
+ * @return {Json}      - An object containing the properties top and left. 
+ */
+function getOffset(el: Element): { top: number, left: number } {
+    let res: { top: number, left: number } = { top: 0, left: 0 };
+
+    const box: DOMRect = el.getBoundingClientRect();
+    let top: number = 0,
+        left: number = 0;
+
+    //Include scrollbar and border
+    top = box.top + window.pageYOffset - document.documentElement.clientTop;
+    left = box.left + window.pageXOffset - document.documentElement.clientLeft;
+
+    res = { top: top, left: left };
+    return res;
+
+}
+
+
+/**
+ * Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
+ *
+ * @param {HTMLElement} el - A DOM node containing one selector to match against.
+ * @return {Json}      - An object containing the properties top and left.
+ */
+function getPosition(el: HTMLElement): { top: number, left: number } {
+    let res: any = { top: 0, left: 0 };
+
+    let top: number = el.offsetTop ? el.offsetTop : 0,
+        left: number = el.offsetLeft ? el.offsetLeft : 0;
+
+    res = { top: top, left: left };
+
+    return res;
+}
+
+/**
+ * Get the absolute position of the stage element
+ * 
+ * @param {HTMLElement} domElement  - A DOM node
+ * @param {Number | string} left     - left offset
+ * @param {Number | string} top      - top offset
+ * @returns 
+ */
+function getAbsolutePositionOfStage(domElement: HTMLElement, left: number | string = 0, top: number | string = 0): { x: number, y: number, width: number, height: number } {
+    if (!parseInt(left as never)) {
+        left = 0;
+    } else {
+        left = parseInt(left as never);
+    }
+    if (!parseInt(top as never)) {
+        top = 0;
+    } else {
+        top = parseInt(top as never);
+    }
+
+    const box: DOMRect = domElement.getBoundingClientRect();
+    const body: HTMLElement = document.body;
+    const docElem: HTMLElement = document.documentElement;
+    const scrollTop: number = window.pageYOffset || docElem.scrollTop || body.scrollTop;
+    const scrollLeft: number = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
+
+    const clientTop: number = docElem.clientTop || body.clientTop || 0;
+    const clientLeft: number = docElem.clientLeft || body.clientLeft ||0;
+
+    const attr: any = {};
+    attr.y = box.top +  scrollTop - clientTop + top; 
+    attr.x = box.left + scrollLeft - clientLeft + left;
+    attr.width = box.width;
+    attr.height = box.height;
+
+    return attr;
+}
+
+
+export { 
+    getTransitionDuration, 
+    getAbsoluteCoordinates, 
+    getOffset, 
+    getPosition,
+    getAbsolutePositionOfStage
+}

package/publish/lib/esm/Utils/libs/guid.ts

@@ -0,0 +1,16 @@
+
+/**
+ * Create GUID
+ *
+ * @returns {String}   - The globally-unique identifiers.
+ */
+function guid() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = Math.random() * 16 | 0,
+                v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    }).toLocaleUpperCase();
+}
+
+export default guid;
+

package/publish/lib/esm/Utils/libs/initDefaultOptions.ts

@@ -0,0 +1,43 @@
+import { isJSON, isValidNumeric } from "./validate";
+
+/**
+ *  Set a default JSON format configuration
+ *
+ * @param  {*} props         - Set some default keys and values.
+ * @param  {*} options       - A JSON variable passed in from outside, including key and value.
+ * @return {JSON}            - Merge the new and old values.
+ */
+function setDefaultOptions(props: any, options: any): any {
+    if (typeof options === typeof undefined || options === null || options === false) options = {};
+    //Set a default configuration
+    if (isJSON(props)) {
+
+        const defaultConfigValues = Object.values(props);
+        Object.keys(props).forEach(function (prop: string, index: number) {
+
+            // Well-formed string type
+            Object.keys(options).forEach(function (prop2: string, index2: number) {
+                if (prop2 === prop) {
+                    let _v = options[prop2];
+                    if (_v == 'true') _v = true;
+                    if (_v == 'false') _v = false;
+                    if (isValidNumeric(_v)) _v = parseFloat(_v);
+                    if (isJSON(_v)) _v = Object.prototype.toString.call(_v) === '[object Object]' ? _v : JSON.parse(_v);
+
+                    options[prop2] = _v;
+                }
+
+            });
+
+            //
+            if (typeof options[prop] === typeof undefined || options[prop] === null) options[prop] = defaultConfigValues[index];
+        });
+    }
+    return options;
+}
+
+export {
+    setDefaultOptions,
+    isJSON,
+    isValidNumeric
+};

package/publish/lib/esm/Utils/libs/inputsCalculation.ts

@@ -0,0 +1,160 @@
+
+
+/**
+ * Gets the relative upside of the text
+ * @param {Element} el    - A DOM node containing one selector to match against.
+ * @returns {Number}      - Returns a pure number.
+ */
+function getTextTop(el: HTMLElement) {
+    const styles = window.getComputedStyle(el);
+    const fontSize = parseFloat(styles.fontSize);
+    const lineHeight = parseFloat(styles.lineHeight) || fontSize;
+    const paddingTop = parseFloat(styles.paddingTop);
+    const borderWidth = parseFloat(styles.borderWidth);
+
+    const textTop = paddingTop + (lineHeight - fontSize) / 2 - borderWidth*2;
+    return textTop;
+}
+
+/**
+* Get the actual value with user specific methed
+* it can be 'width', 'height', 'outerWidth', 'outerHeight'
+* @private
+* @param {Element} el           - A DOM node containing one selector to match against.
+* @param {String} prop          - A string naming the property of style.
+* @param {?Json} config         - Whether or not margin is included. The key `includeMargin` 
+                                    takes effect when set to true
+* @return {Number}              - Returns a pure number.
+*/
+function actualPropertyValue(el: any, prop: string, config: any = undefined) {
+    if (el === null) return 0;
+
+    const style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle,
+        display = style.display,
+        position = style.position,
+        visibility = style.visibility;
+
+    let marginWidth = 0;
+    let marginHeight = 0;
+
+    let maxVal: number;
+    let actualVal: any;
+
+
+    if (config && config.includeMargin === true) {
+        marginWidth = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
+        marginHeight = parseFloat(style.marginTop) + parseFloat(style.marginBottom);
+    }
+
+    if (prop === 'fontSize') {
+        actualVal = parseFloat(style.fontSize);
+    }
+
+    if (prop === 'fontFamily') {
+        actualVal = style.fontFamily;
+    }
+
+    if (prop === 'letterSpacing') {
+        actualVal = style.letterSpacing;
+    }
+    if (prop === 'width') {
+        maxVal = parseFloat(style.maxWidth);
+
+        // if its not hidden we just return normal height
+        if (display !== 'none' && maxVal !== 0) {
+            return el.clientWidth;
+        }
+    }
+    if (prop === 'height') {
+        maxVal = parseFloat(style.maxHeight);
+        if (display !== 'none' && maxVal !== 0) {
+            return el.clientHeight;
+        }
+    }
+
+    if (prop === 'outerWidth') {
+        maxVal = parseFloat(style.maxWidth);
+        if (display !== 'none' && maxVal !== 0) {
+            return el.offsetWidth + marginWidth;
+        }
+    }
+    if (prop === 'outerHeight') {
+        maxVal = parseFloat(style.maxHeight);
+        if (display !== 'none' && maxVal !== 0) {
+            return el.offsetHeight + marginHeight;
+        }
+    }
+
+    // the element is hidden so:
+    // making the el block so we can meassure its height but still be hidden
+    el.style.position = 'absolute';
+    el.style.visibility = 'hidden';
+    el.style.display = 'block';
+
+
+    if (prop === 'width') actualVal = el.clientWidth;
+    if (prop === 'height') actualVal = el.clientHeight;
+    if (prop === 'outerWidth') actualVal = el.offsetWidth + marginWidth;
+    if (prop === 'outerHeight') actualVal = el.offsetHeight + marginHeight;
+
+    // reverting to the original values
+    el.style.display = display;
+    el.style.position = position;
+    el.style.visibility = visibility;
+
+    return actualVal;
+}
+
+function getElCSS(input: HTMLElement, prop: any, isNumber: boolean) {
+    const val: any = document.defaultView?.getComputedStyle(input, null).getPropertyValue(prop);
+    return isNumber ? (isNaN(parseFloat(val)) ? 0 : parseFloat(val)) : val;
+}
+
+/**
+ * Get cursor or text position in pixels for input element
+ * 
+ * @param {HTMLInputElement} input  Required HTMLElement with `value` attribute
+ * @param {HTMLSpanElement} fauxContainer  Container of faux.
+     * @param {HTMLElement} rawTextContainer  The raw text container for the comparison
+ * @returns {Number}
+ */
+
+
+function getTextWidth(input: HTMLInputElement, fauxContainer: HTMLSpanElement, rawTextContainer: HTMLElement) {
+    if (input === null || fauxContainer === null || rawTextContainer === null) return 0;
+
+    const _off: any = input.selectionStart;
+    const _faux = fauxContainer;
+    const _fauxContainer = rawTextContainer;
+    if (_faux && _fauxContainer) {
+
+        // Styles to simulate a node in an input field
+        // use pre-wrap instead of wrap for white-space to support wrapping in textareas
+        const listOfModifiers = ['direction', 'font-family', 'font-size', 'font-size-adjust', 'font-variant', 'font-weight', 'font-style', 'letter-spacing', 'line-height', 'text-align', 'text-indent', 'text-transform', 'word-wrap', 'word-spacing'];
+
+        // default styles
+        _faux.style.setProperty('white-space', 'pre-wrap');
+        _faux.style.setProperty('padding', '0');
+        _faux.style.setProperty('margin', '0');
+        _faux.style.setProperty('display', 'none');
+
+        for (let i = 0; i < listOfModifiers.length; i++) {
+            const propertyValue = getElCSS(_fauxContainer, listOfModifiers[i], false);
+            _faux.style.setProperty(listOfModifiers[i], propertyValue);
+        }
+
+        _faux.textContent = input.value.substring(0, _off).replace(/\s/g, "\u00a0");
+        return actualPropertyValue(_faux, 'outerWidth');
+    }
+
+}
+
+
+export {
+    getElCSS,
+    getTextTop,
+    actualPropertyValue,
+    getTextWidth
+};
+
+