@sme.up/ketchup 11.0.0-SNAPSHOT-20241120170010 → 11.0.0-SNAPSHOT-20241125085638

package/dist/ketchup/p-22f4d21b.js.map

@@ -1 +1 @@
-{"version":3,"names":["dom","document","documentElement","FTextField","props","children","classObj","danger","fullHeight","fullWidth","info","lightMode","secondary","shaped","success","warning","wrapperClass","h","Object","assign","class","dataSet","id","title","leadingLabel","trailingLabel","setContent","setHelper","label","isOutlined","textArea","outlined","labelEl","iconEl","minusEl","plusEl","htmlFor","maxLength","showCounter","value","length","undefined","icon","iconStyle","iconClass","values","KupThemeIconValues","indexOf","replace","svg","getAssetPath","mask","webkitMask","style","onClick","onIconClick","quantityButtons","minusSvg","plusSvg","minusStyle","plusStyle","propsFImage","color","error","resource","sizeX","sizeY","classContainerObj","disabled","isClearable","readOnly","trailingIcon","Boolean","alert","sizing","inputType","_a","persManageForNumberFormat","decimals","group","options","allowNegative","_b","decimal","integer","integers","formatValue","maxlength","onBlur","onChange","onFocus","onInput","onKeyDown","inputmode","inputMode","type","step","min","max","name","placeholder","size","e","target","parseFloat","toString","onKeyPress","ctrlKey","key","component","beginVal","substring","selectionStart","endVal","selectionEnd","val","ketchup","math","matchNumericValueWithOptions","preventDefault","helperIcon","FImage","onMinusClick","onPlusClick","CLEAR","onClearIconClick","helperEnabled","helper","helperWhenFocused","inputIsLocalized","formatedValue","format","createFormatPattern"],"sources":["src/f-components/f-text-field/f-text-field.tsx"],"sourcesContent":["import type { FTextFieldProps } from './f-text-field-declarations';\nimport { FunctionalComponent, getAssetPath, h, VNode } from '@stencil/core';\nimport { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarations';\nimport { KupDom } from '../../managers/kup-manager/kup-manager-declarations';\nimport { NumericFieldFormatOptions } from '../../managers/kup-math/kup-math-declarations';\nimport { FImage } from '../f-image/f-image';\nimport { FImageProps } from '../f-image/f-image-declarations';\nimport { KupComponentSizing } from '../../types/GenericTypes';\n\nconst dom: KupDom = document.documentElement as KupDom;\n\n/*-------------------------------------------------*/\n/*                C o m p o n e n t                */\n/*-------------------------------------------------*/\n\nexport const FTextField: FunctionalComponent<FTextFieldProps> = (\n    props: FTextFieldProps,\n    children: VNode[]\n) => {\n    const classObj: Record<string, boolean> = {\n        'f-text-field': true,\n        'kup-danger': props.danger,\n        'kup-full-height': props.fullHeight,\n        'kup-full-width': props.fullWidth,\n        'kup-info': props.info,\n        'kup-light-mode': props.lightMode,\n        'kup-secondary': props.secondary,\n        'kup-shaped': props.shaped,\n        'kup-success': props.success,\n        'kup-warning': props.warning,\n        [props.wrapperClass]: !!props.wrapperClass,\n    };\n    return (\n        <div\n            class={classObj}\n            {...props.dataSet}\n            id={props.id}\n            title={props.title}\n        >\n            {props.leadingLabel || props.trailingLabel ? (\n                <div\n                    class={`mdc-form-field ${\n                        props.leadingLabel ? 'mdc-form-field--align-end' : ''\n                    }`}\n                >\n                    {[\n                        setContent(props),\n                        setHelper(props),\n                        <label>{props.label}</label>,\n                    ]}\n                </div>\n            ) : (\n                [setContent(props), setHelper(props)]\n            )}\n            {children}\n        </div>\n    );\n};\n\n/*-------------------------------------------------*/\n/*                  M e t h o d s                  */\n/*-------------------------------------------------*/\n\nfunction setContent(props: FTextFieldProps): HTMLDivElement {\n    const isOutlined: boolean = props.textArea || props.outlined;\n    let labelEl: HTMLElement;\n    let iconEl: HTMLElement;\n    let minusEl: HTMLElement;\n    let plusEl: HTMLElement;\n\n    if (props.label && !props.leadingLabel && !props.trailingLabel) {\n        labelEl = (\n            <div class=\"mdc-text-field__label-container\">\n                <label class=\"mdc-label\" htmlFor=\"kup-input\">\n                    {props.label}\n                </label>\n                {props.maxLength && props.showCounter ? (\n                    <div class=\"mdc-text-field__label-character-counter\">\n                        {props.value.length} / {props.maxLength}\n                    </div>\n                ) : undefined}\n            </div>\n        );\n    }\n\n    if (props.icon) {\n        let iconStyle: {\n            [key: string]: string;\n        };\n        let iconClass: string = '';\n        if (\n            Object.values(KupThemeIconValues).indexOf(\n                props.icon as KupThemeIconValues\n            ) > -1\n        ) {\n            iconClass = props.icon.replace('--', '');\n        } else {\n            let svg: string = `url('${getAssetPath(\n                `./assets/svg/${props.icon}.svg`\n            )}') no-repeat center`;\n            iconStyle = {\n                mask: svg,\n                webkitMask: svg,\n            };\n        }\n        iconEl = (\n            <span\n                style={iconStyle}\n                onClick={props.onIconClick}\n                class={`mdc-text-field__icon kup-icon action ${iconClass}`}\n            ></span>\n        );\n    }\n\n    if (props.quantityButtons) {\n        const minusSvg: string = `url('${getAssetPath(\n            `./assets/svg/minus.svg`\n        )}') no-repeat center`;\n        const plusSvg: string = `url('${getAssetPath(\n            `./assets/svg/plus.svg`\n        )}') no-repeat center`;\n\n        const minusStyle = {\n            mask: minusSvg,\n            webkitMask: minusSvg,\n        };\n        const plusStyle = {\n            mask: plusSvg,\n            webkitMask: plusSvg,\n        };\n\n        minusEl = (\n            <span\n                style={minusStyle}\n                class={`mdc-text-field__icon kup-icon action`}\n            ></span>\n        );\n        plusEl = (\n            <span\n                style={plusStyle}\n                class={`mdc-text-field__icon kup-icon action`}\n            ></span>\n        );\n    }\n\n    const propsFImage: FImageProps = {\n        color: props.error\n            ? `var(--kup-danger-color-60)`\n            : `var(--kup-warning-color-50)`,\n        resource: props.error ? 'error' : 'warning',\n        sizeX: '1.25em',\n        sizeY: '1.25em',\n        wrapperClass: 'kup-icon',\n    };\n\n    const classContainerObj: Record<string, boolean> = {\n        'mdc-text-field-container': true,\n        'mdc-text-field-container--disabled': props.disabled,\n    };\n\n    const classObj: Record<string, boolean> = {\n        'is-clearable': props.isClearable,\n        'mdc-text-field': true,\n        'mdc-text-field--disabled': props.disabled,\n        'mdc-text-field--read-only': props.readOnly,\n        'mdc-text-field--filled': !props.fullWidth && !isOutlined,\n        'mdc-text-field--no-label': !props.label,\n        'mdc-text-field--fullwidth': props.fullWidth,\n        'mdc-text-field--lightmode': props.lightMode,\n        'mdc-text-field--outlined': isOutlined,\n        'mdc-text-field--textarea': props.textArea,\n        'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,\n        'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,\n        'mdc-text-field--with-quantity-buttons': props.quantityButtons,\n        'mdc-text-field--error': Boolean(props.error),\n        'mdc-text-field--alert': Boolean(props.alert),\n        ...(!props.textArea && {\n            [`mdc-text-field--${props.sizing || 'small'}`]: true,\n        }),\n    };\n\n    let value = props.value;\n    let inputType = props.quantityButtons\n        ? 'number'\n        : props.inputType ?? 'text';\n    let persManageForNumberFormat = false;\n    if (\n        props.inputType === 'number' &&\n        ((props.decimals && props.decimals > 0) || props.group)\n    ) {\n        inputType = 'text';\n        persManageForNumberFormat = true;\n    }\n    if (props.inputType === 'number') {\n        const options: NumericFieldFormatOptions = {\n            allowNegative: props.allowNegative ?? true,\n            decimal: props.decimals,\n            group: props.group,\n            integer: props.integers,\n        };\n        value = formatValue(value, options, false);\n    }\n\n    return (\n        <div class={classContainerObj}>\n            {!props.fullWidth ? labelEl : undefined}\n            <div class={classObj}>\n                {!props.trailingIcon ? iconEl : undefined}\n                {props.textArea ? (\n                    <span class=\"mdc-text-field__resizer\">\n                        <textarea\n                            class=\"mdc-text-field__input\"\n                            disabled={props.disabled}\n                            maxlength={props.maxLength}\n                            value={value}\n                            onBlur={props.onBlur}\n                            onClick={props.onClick}\n                            onChange={props.onChange}\n                            onFocus={props.onFocus}\n                            onInput={props.onInput}\n                            onKeyDown={props.onKeyDown}\n                        ></textarea>\n                    </span>\n                ) : (\n                    <input\n                        inputmode={\n                            props.inputMode ? props.inputMode : undefined\n                        }\n                        type={inputType}\n                        step={props.step}\n                        min={props.min}\n                        max={props.max}\n                        name={props.name}\n                        class=\"mdc-text-field__input\"\n                        disabled={props.disabled}\n                        placeholder={props.placeholder}\n                        maxlength={props.maxLength}\n                        size={props.size}\n                        value={value}\n                        onBlur={(e: FocusEvent) => {\n                            if (persManageForNumberFormat) {\n                                const options: NumericFieldFormatOptions = {\n                                    allowNegative: props.allowNegative ?? true,\n                                    decimal: props.decimals,\n                                    group: props.group,\n                                    integer: props.integers,\n                                };\n                                (e.target as HTMLInputElement).value =\n                                    formatValue(\n                                        (e.target as HTMLInputElement).value,\n                                        options,\n                                        true\n                                    );\n                            }\n                            if (props.onBlur) {\n                                props.onBlur(e);\n                            }\n                        }}\n                        onChange={(e: InputEvent) => {\n                            if (persManageForNumberFormat) {\n                                const options: NumericFieldFormatOptions = {\n                                    allowNegative: props.allowNegative ?? true,\n                                    decimal: props.decimals,\n                                    group: props.group,\n                                    integer: props.integers,\n                                };\n                                if (\n                                    props.min !== undefined &&\n                                    props.min !== null &&\n                                    props.min >\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        formatValue(\n                                            props.min.toString(),\n                                            options,\n                                            true\n                                        );\n                                } else if (\n                                    props.max !== undefined &&\n                                    props.max !== null &&\n                                    props.max <\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        formatValue(\n                                            props.max.toString(),\n                                            options,\n                                            true\n                                        );\n                                } else {\n                                    (e.target as HTMLInputElement).value =\n                                        formatValue(\n                                            (e.target as HTMLInputElement)\n                                                .value,\n                                            options,\n                                            true\n                                        );\n                                }\n                            } else {\n                                if (\n                                    props.min !== undefined &&\n                                    props.min !== null &&\n                                    props.min >\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        props.min.toString();\n                                } else if (\n                                    props.max !== undefined &&\n                                    props.max !== null &&\n                                    props.max <\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        props.max.toString();\n                                }\n                            }\n                            if (props.onChange) {\n                                props.onChange(e);\n                            }\n                        }}\n                        onClick={props.onClick}\n                        onFocus={props.onFocus}\n                        onInput={props.onInput}\n                        onKeyDown={props.onKeyDown}\n                        onKeyPress={(e: KeyboardEvent) => {\n                            if (!persManageForNumberFormat) {\n                                return;\n                            }\n                            if (e.ctrlKey) {\n                                return;\n                            }\n\n                            if (e.key.length > 1) {\n                                return;\n                            }\n\n                            const options: NumericFieldFormatOptions = {\n                                allowNegative: props.allowNegative ?? true,\n                                decimal: props.decimals,\n                                group: props.group,\n                                integer: props.integers,\n                            };\n                            let component = e.target as HTMLInputElement;\n                            let value = component.value;\n\n                            let beginVal = value.substring(\n                                0,\n                                component.selectionStart\n                            );\n                            let endVal = value.substring(\n                                component.selectionEnd,\n                                component.selectionEnd + value.length - 1\n                            );\n                            let val = beginVal + e.key + endVal;\n                            if (\n                                !dom.ketchup.math.matchNumericValueWithOptions(\n                                    val,\n                                    options\n                                )\n                            ) {\n                                e.preventDefault();\n                                return;\n                            }\n                        }}\n                    ></input>\n                )}\n\n                {props.trailingIcon ? iconEl : undefined}\n\n                {/* {isOutlined ? (\n                    <div class=\"mdc-notched-outline\">\n                        <div class=\"mdc-notched-outline__leading\"></div>\n                        <div class=\"mdc-notched-outline__trailing\"></div>\n                    </div>\n                ) : (\n                    <span class=\"mdc-line-ripple\"></span>\n                )} */}\n\n                {props.helperIcon && props.error ? (\n                    <div class=\"mdc-error-icon\">\n                        <FImage {...propsFImage} />\n                    </div>\n                ) : props.helperIcon && props.alert ? (\n                    <div class=\"mdc-alert-icon\">\n                        <FImage {...propsFImage} />\n                    </div>\n                ) : undefined}\n\n                {props.quantityButtons && (\n                    <div class=\"mdc-quantity-buttons\">\n                        <button onClick={props.onMinusClick}>{minusEl}</button>\n                        <button onClick={props.onPlusClick}>{plusEl}</button>\n                    </div>\n                )}\n                {props.isClearable ? (\n                    <span\n                        class={`mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace(\n                            '--',\n                            ''\n                        )}`}\n                        onClick={props.onClearIconClick}\n                    ></span>\n                ) : undefined}\n            </div>\n        </div>\n    );\n}\n\nfunction setHelper(props: FTextFieldProps): HTMLDivElement {\n    if (props.error || props.alert) {\n        return (\n            <div class=\"mdc-text-field-helper-line\">\n                {props.error ? (\n                    <span class=\"mdc-error-message\">{props.error}</span>\n                ) : props.alert ? (\n                    <span class=\"mdc-alert-message\">{props.alert}</span>\n                ) : undefined}\n            </div>\n        );\n    } else if (props.helperEnabled !== false) {\n        if (props.helper) {\n            const classObj: Record<string, boolean> = {\n                'mdc-text-field-helper-text': true,\n                'mdc-text-field-helper-text--persistent':\n                    !props.helperWhenFocused,\n            };\n            return (\n                <div class=\"mdc-text-field-helper-line\">\n                    <div class={classObj}>{props.helper}</div>\n                </div>\n            );\n        }\n    }\n}\n\nconst formatValue = function (\n    value: string,\n    options: NumericFieldFormatOptions,\n    inputIsLocalized: boolean\n): string {\n    let formatedValue = value;\n\n    if (!formatedValue) {\n        return formatedValue;\n    }\n\n    if (formatedValue == '-') {\n        return '';\n    }\n\n    return dom.ketchup.math.format(\n        formatedValue,\n        dom.ketchup.math.createFormatPattern(options.group, options.decimal),\n        inputIsLocalized\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["dom","document","documentElement","FTextField","props","children","classObj","danger","fullHeight","fullWidth","info","lightMode","secondary","shaped","success","warning","wrapperClass","h","Object","assign","class","dataSet","id","title","leadingLabel","trailingLabel","setContent","setHelper","label","isOutlined","textArea","outlined","labelEl","iconEl","minusEl","plusEl","htmlFor","maxLength","showCounter","value","length","undefined","icon","iconStyle","iconClass","values","KupThemeIconValues","indexOf","replace","svg","getAssetPath","mask","webkitMask","style","onClick","onIconClick","quantityButtons","minusSvg","plusSvg","minusStyle","plusStyle","propsFImage","color","error","resource","sizeX","sizeY","classContainerObj","disabled","isClearable","readOnly","trailingIcon","Boolean","alert","sizing","inputType","_a","persManageForNumberFormat","decimals","group","options","allowNegative","_b","decimal","integer","integers","formatValue","maxlength","onBlur","onChange","onFocus","onInput","onKeyDown","inputmode","inputMode","type","step","min","max","name","placeholder","size","e","target","parseFloat","toString","onKeyPress","ctrlKey","key","component","beginVal","substring","selectionStart","endVal","selectionEnd","val","ketchup","math","matchNumericValueWithOptions","preventDefault","helperIcon","FImage","onMinusClick","onPlusClick","CLEAR","onClearIconClick","helperEnabled","helper","helperWhenFocused","inputIsLocalized","formatedValue","format","createFormatPattern"],"sources":["src/f-components/f-text-field/f-text-field.tsx"],"sourcesContent":["import type { FTextFieldProps } from './f-text-field-declarations';\nimport { FunctionalComponent, getAssetPath, h, VNode } from '@stencil/core';\nimport { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarations';\nimport { KupDom } from '../../managers/kup-manager/kup-manager-declarations';\nimport { NumericFieldFormatOptions } from '../../managers/kup-math/kup-math-declarations';\nimport { FImage } from '../f-image/f-image';\nimport { FImageProps } from '../f-image/f-image-declarations';\n\nconst dom: KupDom = document.documentElement as KupDom;\n\n/*-------------------------------------------------*/\n/*                C o m p o n e n t                */\n/*-------------------------------------------------*/\n\nexport const FTextField: FunctionalComponent<FTextFieldProps> = (\n    props: FTextFieldProps,\n    children: VNode[]\n) => {\n    const classObj: Record<string, boolean> = {\n        'f-text-field': true,\n        'kup-danger': props.danger,\n        'kup-full-height': props.fullHeight,\n        'kup-full-width': props.fullWidth,\n        'kup-info': props.info,\n        'kup-light-mode': props.lightMode,\n        'kup-secondary': props.secondary,\n        'kup-shaped': props.shaped,\n        'kup-success': props.success,\n        'kup-warning': props.warning,\n        [props.wrapperClass]: !!props.wrapperClass,\n    };\n    return (\n        <div\n            class={classObj}\n            {...props.dataSet}\n            id={props.id}\n            title={props.title}\n        >\n            {props.leadingLabel || props.trailingLabel ? (\n                <div\n                    class={`mdc-form-field ${\n                        props.leadingLabel ? 'mdc-form-field--align-end' : ''\n                    }`}\n                >\n                    {[\n                        setContent(props),\n                        setHelper(props),\n                        <label>{props.label}</label>,\n                    ]}\n                </div>\n            ) : (\n                [setContent(props), setHelper(props)]\n            )}\n            {children}\n        </div>\n    );\n};\n\n/*-------------------------------------------------*/\n/*                  M e t h o d s                  */\n/*-------------------------------------------------*/\n\nfunction setContent(props: FTextFieldProps): HTMLDivElement {\n    const isOutlined: boolean = props.textArea || props.outlined;\n    let labelEl: HTMLElement;\n    let iconEl: HTMLElement;\n    let minusEl: HTMLElement;\n    let plusEl: HTMLElement;\n\n    if (props.label && !props.leadingLabel && !props.trailingLabel) {\n        labelEl = (\n            <div class=\"mdc-text-field__label-container\">\n                <label class=\"mdc-label\" htmlFor=\"kup-input\">\n                    {props.label}\n                </label>\n                {props.maxLength && props.showCounter ? (\n                    <div class=\"mdc-text-field__label-character-counter\">\n                        {props.value.length} / {props.maxLength}\n                    </div>\n                ) : undefined}\n            </div>\n        );\n    }\n\n    if (props.icon) {\n        let iconStyle: {\n            [key: string]: string;\n        };\n        let iconClass: string = '';\n        if (\n            Object.values(KupThemeIconValues).indexOf(\n                props.icon as KupThemeIconValues\n            ) > -1\n        ) {\n            iconClass = props.icon.replace('--', '');\n        } else {\n            let svg: string = `url('${getAssetPath(\n                `./assets/svg/${props.icon}.svg`\n            )}') no-repeat center`;\n            iconStyle = {\n                mask: svg,\n                webkitMask: svg,\n            };\n        }\n        iconEl = (\n            <span\n                style={iconStyle}\n                onClick={props.onIconClick}\n                class={`mdc-text-field__icon kup-icon action ${iconClass}`}\n            ></span>\n        );\n    }\n\n    if (props.quantityButtons) {\n        const minusSvg: string = `url('${getAssetPath(\n            `./assets/svg/minus.svg`\n        )}') no-repeat center`;\n        const plusSvg: string = `url('${getAssetPath(\n            `./assets/svg/plus.svg`\n        )}') no-repeat center`;\n\n        const minusStyle = {\n            mask: minusSvg,\n            webkitMask: minusSvg,\n        };\n        const plusStyle = {\n            mask: plusSvg,\n            webkitMask: plusSvg,\n        };\n\n        minusEl = (\n            <span\n                style={minusStyle}\n                class={`mdc-text-field__icon kup-icon action`}\n            ></span>\n        );\n        plusEl = (\n            <span\n                style={plusStyle}\n                class={`mdc-text-field__icon kup-icon action`}\n            ></span>\n        );\n    }\n\n    const propsFImage: FImageProps = {\n        color: props.error\n            ? `var(--kup-danger-color-60)`\n            : `var(--kup-warning-color-50)`,\n        resource: props.error ? 'error' : 'warning',\n        sizeX: '1.25em',\n        sizeY: '1.25em',\n        wrapperClass: 'kup-icon',\n    };\n\n    const classContainerObj: Record<string, boolean> = {\n        'mdc-text-field-container': true,\n        'mdc-text-field-container--disabled': props.disabled,\n    };\n\n    const classObj: Record<string, boolean> = {\n        'is-clearable': props.isClearable,\n        'mdc-text-field': true,\n        'mdc-text-field--disabled': props.disabled,\n        'mdc-text-field--read-only': props.readOnly,\n        'mdc-text-field--filled': !props.fullWidth && !isOutlined,\n        'mdc-text-field--no-label': !props.label,\n        'mdc-text-field--fullwidth': props.fullWidth,\n        'mdc-text-field--lightmode': props.lightMode,\n        'mdc-text-field--outlined': isOutlined,\n        'mdc-text-field--textarea': props.textArea,\n        'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,\n        'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,\n        'mdc-text-field--with-quantity-buttons': props.quantityButtons,\n        'mdc-text-field--error': Boolean(props.error),\n        'mdc-text-field--alert': Boolean(props.alert),\n        ...(!props.textArea && {\n            [`mdc-text-field--${props.sizing || 'small'}`]: true,\n        }),\n    };\n\n    let value = props.value;\n    let inputType = props.quantityButtons\n        ? 'number'\n        : props.inputType ?? 'text';\n    let persManageForNumberFormat = false;\n    if (\n        props.inputType === 'number' &&\n        ((props.decimals && props.decimals > 0) || props.group)\n    ) {\n        inputType = 'text';\n        persManageForNumberFormat = true;\n    }\n    if (props.inputType === 'number') {\n        const options: NumericFieldFormatOptions = {\n            allowNegative: props.allowNegative ?? true,\n            decimal: props.decimals,\n            group: props.group,\n            integer: props.integers,\n        };\n        value = formatValue(value, options, false);\n    }\n\n    return (\n        <div class={classContainerObj}>\n            {!props.fullWidth ? labelEl : undefined}\n            <div class={classObj}>\n                {!props.trailingIcon ? iconEl : undefined}\n                {props.textArea ? (\n                    <span class=\"mdc-text-field__resizer\">\n                        <textarea\n                            class=\"mdc-text-field__input\"\n                            disabled={props.disabled}\n                            maxlength={props.maxLength}\n                            value={value}\n                            onBlur={props.onBlur}\n                            onClick={props.onClick}\n                            onChange={props.onChange}\n                            onFocus={props.onFocus}\n                            onInput={props.onInput}\n                            onKeyDown={props.onKeyDown}\n                        ></textarea>\n                    </span>\n                ) : (\n                    <input\n                        inputmode={\n                            props.inputMode ? props.inputMode : undefined\n                        }\n                        type={inputType}\n                        step={props.step}\n                        min={props.min}\n                        max={props.max}\n                        name={props.name}\n                        class=\"mdc-text-field__input\"\n                        disabled={props.disabled}\n                        placeholder={props.placeholder}\n                        maxlength={props.maxLength}\n                        size={props.size}\n                        value={value}\n                        onBlur={(e: FocusEvent) => {\n                            if (persManageForNumberFormat) {\n                                const options: NumericFieldFormatOptions = {\n                                    allowNegative: props.allowNegative ?? true,\n                                    decimal: props.decimals,\n                                    group: props.group,\n                                    integer: props.integers,\n                                };\n                                (e.target as HTMLInputElement).value =\n                                    formatValue(\n                                        (e.target as HTMLInputElement).value,\n                                        options,\n                                        true\n                                    );\n                            }\n                            if (props.onBlur) {\n                                props.onBlur(e);\n                            }\n                        }}\n                        onChange={(e: InputEvent) => {\n                            if (persManageForNumberFormat) {\n                                const options: NumericFieldFormatOptions = {\n                                    allowNegative: props.allowNegative ?? true,\n                                    decimal: props.decimals,\n                                    group: props.group,\n                                    integer: props.integers,\n                                };\n                                if (\n                                    props.min !== undefined &&\n                                    props.min !== null &&\n                                    props.min >\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        formatValue(\n                                            props.min.toString(),\n                                            options,\n                                            true\n                                        );\n                                } else if (\n                                    props.max !== undefined &&\n                                    props.max !== null &&\n                                    props.max <\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        formatValue(\n                                            props.max.toString(),\n                                            options,\n                                            true\n                                        );\n                                } else {\n                                    (e.target as HTMLInputElement).value =\n                                        formatValue(\n                                            (e.target as HTMLInputElement)\n                                                .value,\n                                            options,\n                                            true\n                                        );\n                                }\n                            } else {\n                                if (\n                                    props.min !== undefined &&\n                                    props.min !== null &&\n                                    props.min >\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        props.min.toString();\n                                } else if (\n                                    props.max !== undefined &&\n                                    props.max !== null &&\n                                    props.max <\n                                        parseFloat(\n                                            (e.target as HTMLInputElement).value\n                                        )\n                                ) {\n                                    (e.target as HTMLInputElement).value =\n                                        props.max.toString();\n                                }\n                            }\n                            if (props.onChange) {\n                                props.onChange(e);\n                            }\n                        }}\n                        onClick={props.onClick}\n                        onFocus={props.onFocus}\n                        onInput={props.onInput}\n                        onKeyDown={props.onKeyDown}\n                        onKeyPress={(e: KeyboardEvent) => {\n                            if (!persManageForNumberFormat) {\n                                return;\n                            }\n                            if (e.ctrlKey) {\n                                return;\n                            }\n\n                            if (e.key.length > 1) {\n                                return;\n                            }\n\n                            const options: NumericFieldFormatOptions = {\n                                allowNegative: props.allowNegative ?? true,\n                                decimal: props.decimals,\n                                group: props.group,\n                                integer: props.integers,\n                            };\n                            let component = e.target as HTMLInputElement;\n                            let value = component.value;\n\n                            let beginVal = value.substring(\n                                0,\n                                component.selectionStart\n                            );\n                            let endVal = value.substring(\n                                component.selectionEnd,\n                                component.selectionEnd + value.length - 1\n                            );\n                            let val = beginVal + e.key + endVal;\n                            if (\n                                !dom.ketchup.math.matchNumericValueWithOptions(\n                                    val,\n                                    options\n                                )\n                            ) {\n                                e.preventDefault();\n                                return;\n                            }\n                        }}\n                    ></input>\n                )}\n\n                {props.trailingIcon ? iconEl : undefined}\n\n                {/* {isOutlined ? (\n                    <div class=\"mdc-notched-outline\">\n                        <div class=\"mdc-notched-outline__leading\"></div>\n                        <div class=\"mdc-notched-outline__trailing\"></div>\n                    </div>\n                ) : (\n                    <span class=\"mdc-line-ripple\"></span>\n                )} */}\n\n                {props.helperIcon && props.error ? (\n                    <div class=\"mdc-error-icon\">\n                        <FImage {...propsFImage} />\n                    </div>\n                ) : props.helperIcon && props.alert ? (\n                    <div class=\"mdc-alert-icon\">\n                        <FImage {...propsFImage} />\n                    </div>\n                ) : undefined}\n\n                {props.quantityButtons && (\n                    <div class=\"mdc-quantity-buttons\">\n                        <button onClick={props.onMinusClick}>{minusEl}</button>\n                        <button onClick={props.onPlusClick}>{plusEl}</button>\n                    </div>\n                )}\n                {props.isClearable ? (\n                    <span\n                        class={`mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace(\n                            '--',\n                            ''\n                        )}`}\n                        onClick={props.onClearIconClick}\n                    ></span>\n                ) : undefined}\n            </div>\n        </div>\n    );\n}\n\nfunction setHelper(props: FTextFieldProps): HTMLDivElement {\n    if (props.error || props.alert) {\n        return (\n            <div class=\"mdc-text-field-helper-line\">\n                {props.error ? (\n                    <span class=\"mdc-error-message\">{props.error}</span>\n                ) : props.alert ? (\n                    <span class=\"mdc-alert-message\">{props.alert}</span>\n                ) : undefined}\n            </div>\n        );\n    } else if (props.helperEnabled !== false) {\n        if (props.helper) {\n            const classObj: Record<string, boolean> = {\n                'mdc-text-field-helper-text': true,\n                'mdc-text-field-helper-text--persistent':\n                    !props.helperWhenFocused,\n            };\n            return (\n                <div class=\"mdc-text-field-helper-line\">\n                    <div class={classObj}>{props.helper}</div>\n                </div>\n            );\n        }\n    }\n}\n\nconst formatValue = function (\n    value: string,\n    options: NumericFieldFormatOptions,\n    inputIsLocalized: boolean\n): string {\n    let formatedValue = value;\n\n    if (!formatedValue) {\n        return formatedValue;\n    }\n\n    if (formatedValue == '-') {\n        return '';\n    }\n\n    return dom.ketchup.math.format(\n        formatedValue,\n        dom.ketchup.math.createFormatPattern(options.group, options.decimal),\n        inputIsLocalized\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/types/components/kup-input-panel/kup-input-panel-declarations.d.ts

@@ -1,4 +1,4 @@
-import { GenericObject } from '../../components';
+import { GenericObject, KupEventPayload } from '../../components';
 import { KupDataCell, KupDataColumn, KupDataCommand } from '../../managers/kup-data/kup-data-declarations';
 import { KupObj } from '../../managers/kup-objects/kup-objects-declarations';
 export interface KupInputPanelSubmit {
@@ -122,3 +122,12 @@ export declare enum KupInputPanelProps {
     submitCb = "Sets the callback function on submit form",
     optionsHandler = "Sets the callback function to recieve options"
 }
+export interface KupInputPanelEventHandlerDetails {
+    anchor: HTMLElement;
+    cell: KupDataCell;
+    column: KupDataColumn;
+    originalEvent: PointerEvent;
+}
+export interface KupInputPanelClickEventPayload extends KupEventPayload {
+    details: KupInputPanelEventHandlerDetails;
+}

package/dist/types/components/kup-input-panel/kup-input-panel.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { GenericObject, KupEventPayload } from '../../types/GenericTypes';
-import { InputPanelButtonClickHandler, InputPanelCheckValidObjCallback, InputPanelCheckValidValueCallback, InputPanelOptionsHandler, KupInputPanelData, KupInputPanelSubmit } from './kup-input-panel-declarations';
+import { InputPanelButtonClickHandler, InputPanelCheckValidObjCallback, InputPanelCheckValidValueCallback, InputPanelOptionsHandler, KupInputPanelClickEventPayload, KupInputPanelData, KupInputPanelSubmit } from './kup-input-panel-declarations';
 export declare class KupInputPanel {
     #private;
     /**
@@ -88,6 +88,10 @@ export declare class KupInputPanel {
      * When component load is complete
      */
     kupReady: EventEmitter<KupEventPayload>;
+    /**
+     * Generic right click event on input panel.
+     */
+    kupDataTableContextMenu: EventEmitter<KupInputPanelClickEventPayload>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;

package/dist/types/components.d.ts

@@ -46,7 +46,7 @@ import { FImageData } from "./f-components/f-image/f-image-declarations";
 import { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
 import { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
 import { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
-import { InputPanelButtonClickHandler, InputPanelCheckValidObjCallback, InputPanelCheckValidValueCallback, InputPanelOptionsHandler, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations";
+import { InputPanelButtonClickHandler, InputPanelCheckValidObjCallback, InputPanelCheckValidValueCallback, InputPanelOptionsHandler, KupInputPanelClickEventPayload, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations";
 import { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
 import { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
 import { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
@@ -104,7 +104,7 @@ export { FImageData } from "./f-components/f-image/f-image-declarations";
 export { KupImageClickEventPayload } from "./components/kup-image/kup-image-declarations";
 export { KupImageListDataNode, KupImageListEventPayload } from "./components/kup-image-list/kup-image-list-declarations";
 export { KupTreeColumnMenuEventPayload, KupTreeColumnRemoveEventPayload, KupTreeContextMenuEventPayload, KupTreeDynamicMassExpansionEventPayload, KupTreeExpansionMode, KupTreeNode, KupTreeNodeButtonClickEventPayload, KupTreeNodeCollapseEventPayload, KupTreeNodeExpandEventPayload, KupTreeNodeSelectedEventPayload, TreeNodePath } from "./components/kup-tree/kup-tree-declarations";
-export { InputPanelButtonClickHandler, InputPanelCheckValidObjCallback, InputPanelCheckValidValueCallback, InputPanelOptionsHandler, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations";
+export { InputPanelButtonClickHandler, InputPanelCheckValidObjCallback, InputPanelCheckValidValueCallback, InputPanelOptionsHandler, KupInputPanelClickEventPayload, KupInputPanelData, KupInputPanelSubmit } from "./components/kup-input-panel/kup-input-panel-declarations";
 export { KupLazyRender } from "./components/kup-lazy/kup-lazy-declarations";
 export { KupNavBarStyling } from "./components/kup-nav-bar/kup-nav-bar-declarations";
 export { KupNumericPickerEventPayload } from "./components/kup-numeric-picker/kup-numeric-picker-declarations";
@@ -5430,6 +5430,7 @@ declare global {
     };
     interface HTMLKupInputPanelElementEventMap {
         "kup-input-panel-ready": KupEventPayload;
+        "kup-inputpanel-contextmenu": KupInputPanelClickEventPayload;
     }
     interface HTMLKupInputPanelElement extends Components.KupInputPanel, HTMLStencilElement {
         addEventListener<K extends keyof HTMLKupInputPanelElementEventMap>(type: K, listener: (this: HTMLKupInputPanelElement, ev: KupInputPanelCustomEvent<HTMLKupInputPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -8285,6 +8286,10 @@ declare namespace LocalJSX {
           * When component load is complete
          */
         "onKup-input-panel-ready"?: (event: KupInputPanelCustomEvent<KupEventPayload>) => void;
+        /**
+          * Generic right click event on input panel.
+         */
+        "onKup-inputpanel-contextmenu"?: (event: KupInputPanelCustomEvent<KupInputPanelClickEventPayload>) => void;
         /**
           * Sets the callback function on loading options via FUN
           * @default null

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup",
-    "version": "11.0.0-SNAPSHOT-20241120170010",
+    "version": "11.0.0-SNAPSHOT-20241125085638",
     "keywords": [
         "smeup",
         "KetchUP",