@progress/kendo-angular-inputs/esm2022/form/utils.mjs

Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { isDocumentAvailable, processCssValue } from '@progress/kendo-angular-common';
/**
 * @hidden
 */
export const DEFAULT_FORM_GUTTERS = { rows: '0px', cols: '32px' };
/**
 * @hidden
 */
export const DEFAULT_FORMFIELDSET_GUTTERS = { rows: '0px', cols: '16px' };
/**
 * @hidden
 */
export function innerWidth(element) {
    if (!isDocumentAvailable()) {
        return;
    }
    let width = element.clientWidth;
    const style = getComputedStyle(element);
    width -= (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.borderLeftWidth) || 0);
    width -= (parseFloat(style.paddingRight) || 0) + (parseFloat(style.borderRightWidth) || 0);
    return width;
}
/**
 * @hidden
 */
export function processBreakpoints(breakpoints, containerWidth) {
    if (!breakpoints?.length || containerWidth === null) {
        return '';
    }
    for (const [index, breakpoint] of breakpoints.entries()) {
        const minBreakpointWidth = breakpoint.minWidth || breakpoints[index - 1]?.maxWidth + 1 || 0;
        const maxBreakpointWidth = breakpoint.maxWidth || breakpoints[index + 1]?.minWidth - 1 || Infinity;
        if (containerWidth >= minBreakpointWidth && containerWidth <= maxBreakpointWidth) {
            return breakpoint.value;
        }
    }
    return '';
}
/**
 * @hidden
 */
export const calculateColumns = (cols, containerWidth) => {
    if (!cols) {
        return null;
    }
    if (Array.isArray(cols) && cols.length > 0) {
        const processedCols = processBreakpoints(cols, containerWidth) || null;
        return typeof processedCols === 'string' ? parseInt(processedCols, 10) : processedCols;
    }
    else if (typeof cols === 'number') {
        return cols;
    }
    return null;
};
/**
 * @hidden
 *
 * Calculates gutters for rows and columns based on responsive breakpoints or fixed values
 */
export const calculateGutters = (gutters, containerWidth) => {
    if (!gutters) {
        return null;
    }
    if (typeof gutters === 'number' || typeof gutters === 'string') {
        return { cols: gutters, rows: gutters };
    }
    else if (Array.isArray(gutters)) {
        const processedGutters = processBreakpoints(gutters, containerWidth) || null;
        return processedGutters !== null ? { cols: processedGutters, rows: processedGutters } : null;
    }
    else if (typeof gutters === 'object') {
        const gutterObject = gutters;
        const result = { rows: null, cols: null };
        if (gutterObject.cols !== undefined && gutterObject.cols !== null) {
            if (typeof gutterObject.cols === 'number' || typeof gutterObject.cols === 'string') {
                result.cols = gutterObject.cols;
            }
            else if (Array.isArray(gutterObject.cols)) {
                result.cols = processBreakpoints(gutterObject.cols, containerWidth) || null;
            }
        }
        else {
            result.cols = null;
        }
        if (gutterObject.rows !== undefined) {
            if (typeof gutterObject.rows === 'number' || typeof gutterObject.rows === 'string') {
                result.rows = gutterObject.rows;
            }
            else if (Array.isArray(gutterObject.rows)) {
                result.rows = processBreakpoints(gutterObject.rows, containerWidth) || null;
            }
        }
        else {
            result.rows = null;
        }
        return result;
    }
    return null;
};
/**
 * @hidden
 *
 * Calculates column span value based on responsive breakpoints or fixed number
 */
export const calculateColSpan = (colSpan, containerWidth) => {
    if (!colSpan) {
        return null;
    }
    if (typeof colSpan === 'number') {
        return colSpan;
    }
    else if (Array.isArray(colSpan) && colSpan.length > 0) {
        const processedColSpan = processBreakpoints(colSpan, containerWidth) || null;
        return typeof processedColSpan === 'string' ? parseInt(processedColSpan, 10) : processedColSpan;
    }
    return null;
};
/**
 * @hidden
 *
 * Generates CSS class names for columns
 */
export const generateColumnClass = (columnsNumber) => {
    return columnsNumber && columnsNumber > 0 ? `k-grid-cols-${columnsNumber}` : '';
};
/**
 * @hidden
 *
 * Generates CSS styles for gutters based on the provided gutters object.
 */
export const generateGuttersStyling = (gutters, defaultGutters = DEFAULT_FORM_GUTTERS) => {
    const rows = processCssValue(gutters?.rows);
    const cols = processCssValue(gutters?.cols);
    return `${rows ?? defaultGutters.rows} ${cols ?? defaultGutters.cols}`;
};
/**
 * @hidden
 *
 * Generates CSS class name for column span
 */
export const generateColSpanClass = (colSpan) => {
    return colSpan ? `k-col-span-${colSpan}` : '';
};