@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/PasswordInput/PasswordInput.js

@@ -14,12 +14,14 @@
   limitations under the License.
 */ import React from 'react';
 import { Input } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 import useRunAfterUpdate from '../../useRunAfterUpdate.js';
-const PasswordInput = ({ blockId, components, events, loading, methods, properties, required, validation, value })=>{
+const PasswordInput = ({ blockId, classNames = {}, components, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: components,
         events: events,
         properties: {
@@ -28,14 +30,16 @@ const PasswordInput = ({ blockId, components, events, loading, methods, properti
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
             content: ()=>{
                 const runAfterUpdate = useRunAfterUpdate();
                 return /*#__PURE__*/ React.createElement(Input.Password, {
                     id: `${blockId}_input`,
-                    bordered: properties.bordered,
-                    className: methods.makeCssClass(properties.inputStyle),
+                    variant: properties.bordered === false ? 'borderless' : properties.variant,
+                    className: classNames.element,
+                    style: styles.element,
                     autoFocus: properties.autoFocus,
                     disabled: properties.disabled || loading,
                     onChange: (event)=>{
@@ -77,15 +81,4 @@ const PasswordInput = ({ blockId, components, events, loading, methods, properti
         }
     });
 };
-PasswordInput.defaultProps = blockDefaultProps;
-PasswordInput.meta = {
-    valueType: 'string',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/PasswordInput/style.less'
-    ]
-};
-export default PasswordInput;
+export default withTheme('Input', withBlockDefaults(PasswordInput));

package/dist/blocks/PasswordInput/meta.js

@@ -0,0 +1,195 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import { disabled, placeholder, inputTitle, autoFocus, variant, bordered, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'string',
+    cssKeys: {
+        element: 'The PasswordInput element.',
+        label: 'The PasswordInput label.',
+        extra: 'The PasswordInput extra content.',
+        feedback: 'The PasswordInput validation feedback.'
+    },
+    events: {
+        onBlur: 'Trigger action event occurs when text input loses focus.',
+        onChange: {
+            description: 'Trigger action when text input is changed.',
+            event: {
+                value: 'The current input value.'
+            }
+        },
+        onFocus: 'Trigger action when text input gets focus.',
+        onPressEnter: 'Trigger action when enter is pressed while text input is focused.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            autoFocus,
+            bordered,
+            disabled,
+            placeholder,
+            label,
+            size: sizeSmallDefaultLarge,
+            title: inputTitle,
+            variant,
+            visibilityToggle: {
+                type: 'boolean',
+                default: true,
+                description: 'Show password visibility toggle button.'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/input#design-token'
+                },
+                properties: {
+                    activeBorderColor: {
+                        type: 'string',
+                        default: '#1677ff',
+                        description: 'Border color when the input is active (focused).'
+                    },
+                    activeShadow: {
+                        type: 'string',
+                        default: '0 0 0 2px rgba(5, 145, 255, 0.1)',
+                        description: 'Shadow effect when the input is active (focused).'
+                    },
+                    addonBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.02)',
+                        description: 'Background color for input addon elements.'
+                    },
+                    borderRadius: {
+                        type: 'number',
+                        default: 6,
+                        description: 'Border radius of the input.'
+                    },
+                    borderRadiusLG: {
+                        type: 'number',
+                        default: 8,
+                        description: 'Border radius for large inputs.'
+                    },
+                    borderRadiusSM: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Border radius for small inputs.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color of the input.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the input.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color inside the input.'
+                    },
+                    colorTextPlaceholder: {
+                        type: 'string',
+                        description: 'Placeholder text color.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Text color when the input is disabled.'
+                    },
+                    colorBgContainerDisabled: {
+                        type: 'string',
+                        description: 'Background color when the input is disabled.'
+                    },
+                    errorActiveShadow: {
+                        type: 'string',
+                        default: '0 0 0 2px rgba(255, 38, 5, 0.06)',
+                        description: 'Shadow effect for error state when the input is active.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the input text.'
+                    },
+                    fontSizeLG: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size for large inputs.'
+                    },
+                    fontSizeSM: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size for small inputs.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        default: '#4096ff',
+                        description: 'Border color when hovering over the input.'
+                    },
+                    hoverBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color when hovering over the input.'
+                    },
+                    activeBg: {
+                        type: 'string',
+                        default: '#ffffff',
+                        description: 'Background color when the input is active (focused).'
+                    },
+                    paddingBlock: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Vertical padding of the input.'
+                    },
+                    paddingBlockLG: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Vertical padding for large inputs.'
+                    },
+                    paddingBlockSM: {
+                        type: 'number',
+                        default: 0,
+                        description: 'Vertical padding for small inputs.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding of the input.'
+                    },
+                    paddingInlineLG: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding for large inputs.'
+                    },
+                    paddingInlineSM: {
+                        type: 'number',
+                        default: 7,
+                        description: 'Horizontal padding for small inputs.'
+                    },
+                    warningActiveShadow: {
+                        type: 'string',
+                        default: '0 0 0 2px rgba(255, 215, 5, 0.1)',
+                        description: 'Shadow effect for warning state when the input is active.'
+                    }
+                }
+            }
+        }
+    }
+};

package/dist/blocks/PhoneNumberInput/PhoneNumberInput.js

@@ -14,11 +14,13 @@
   limitations under the License.
 */ import React from 'react';
 import { Input, Select } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import regions from './regions.js';
+import { withBlockDefaults } from '@lowdefy/block-utils';
 import Label from '../Label/Label.js';
+import withTheme from '../withTheme.js';
 import getValueIndex from '../../getValueIndex.js';
 import getUniqueValues from '../../getUniqueValues.js';
+import formatPhoneNumber from './formatPhoneNumber.js';
 const Option = Select.Option;
 function getAllowedRegions({ allowedRegions, regions }) {
     if (!allowedRegions || allowedRegions.length === 0) {
@@ -36,16 +38,14 @@ function getDefaultRegion({ allowedRegions, defaultRegion, uniqueValueOptions })
     }
     return getValueIndex(allowedRegions[index], uniqueValueOptions);
 }
-function AddOnSelect({ blockId, defaultValue, loading, methods, properties, uniqueValueOptions, value }) {
+function AddOnSelect({ blockId, classNames = {}, defaultValue, loading, methods, properties, styles, uniqueValueOptions, value }) {
     return /*#__PURE__*/ React.createElement(Select, {
         id: `${blockId}_select_input`,
-        bordered: properties.bordered,
-        className: methods.makeCssClass([
-            {
-                minWidth: 100
-            },
-            methods.makeCssClass(properties.selectStyle)
-        ]),
+        variant: properties.bordered === false ? 'borderless' : properties.variant,
+        style: {
+            minWidth: 100,
+            ...styles.select
+        },
         defaultValue: defaultValue,
         disabled: properties.disabled || loading,
         dropdownMatchSelectWidth: false,
@@ -55,7 +55,7 @@ function AddOnSelect({ blockId, defaultValue, loading, methods, properties, uniq
         onChange: (newVal)=>{
             const input = value?.input ?? '';
             const region = uniqueValueOptions[newVal]?.value ?? {};
-            const phone_number = `${region?.dial_code ?? ''}${input}`;
+            const phone_number = formatPhoneNumber(region?.dial_code, input);
             methods.setValue({
                 input,
                 region,
@@ -95,9 +95,8 @@ function AddOnSelect({ blockId, defaultValue, loading, methods, properties, uniq
     }, uniqueValueOptions.map((opt, i)=>{
         const displayLabel = properties.showFlags === false ? `${opt.value.name} ${opt.value.dial_code}` : `${opt.value.flag} ${opt.value.name} ${opt.value.dial_code}`;
         return /*#__PURE__*/ React.createElement(Option, {
-            className: methods.makeCssClass([
-                properties.optionsStyle
-            ]),
+            style: styles.options,
+            className: classNames.options,
             filterString: displayLabel,
             id: `${blockId}_${i}`,
             key: `${i}`,
@@ -106,7 +105,7 @@ function AddOnSelect({ blockId, defaultValue, loading, methods, properties, uniq
         }, displayLabel);
     }));
 }
-const PhoneNumberInput = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
+const PhoneNumberInput = ({ blockId, classNames = {}, components: { Icon, Link }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
     const allowedRegions = getAllowedRegions({
         allowedRegions: properties.allowedRegions,
         regions
@@ -126,12 +125,12 @@ const PhoneNumberInput = ({ blockId, components: { Icon, Link }, events, loading
     if (value === null) {
         methods.setValue({
             input: '',
-            region: allowedRegions[defaultValue],
-            phone_number: allowedRegions[defaultValue].dial_code
+            region: allowedRegions[defaultValue]
         });
     }
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        classNames: classNames,
         components: {
             Icon,
             Link
@@ -143,6 +142,7 @@ const PhoneNumberInput = ({ blockId, components: { Icon, Link }, events, loading
             ...properties.label
         },
         required: required,
+        styles: styles,
         validation: validation,
         content: {
             content: ()=>{
@@ -150,17 +150,20 @@ const PhoneNumberInput = ({ blockId, components: { Icon, Link }, events, loading
                     id: `${blockId}_input`,
                     addonBefore: /*#__PURE__*/ React.createElement(AddOnSelect, {
                         blockId: blockId,
+                        classNames: classNames,
                         defaultValue: defaultValue,
                         loading: loading,
                         methods: methods,
                         properties: properties,
+                        styles: styles,
                         uniqueValueOptions: uniqueValueOptions,
                         value: value
                     }),
                     allowClear: properties.allowClear,
                     autoFocus: properties.autoFocus,
-                    bordered: properties.bordered,
-                    className: `ldf-phone-number-input ${methods.makeCssClass(properties.inputStyle)}`,
+                    variant: properties.bordered === false ? 'borderless' : properties.variant,
+                    className: `ldf-phone-number-input${classNames.element ? ` ${classNames.element}` : ''}`,
+                    style: styles.element,
                     disabled: properties.disabled || loading,
                     maxLength: properties.maxLength,
                     placeholder: properties.placeholder,
@@ -174,7 +177,7 @@ const PhoneNumberInput = ({ blockId, components: { Icon, Link }, events, loading
                             input = input.replace(regex, properties.replaceInput.replacement ?? '');
                         }
                         const region = value?.region ?? {};
-                        const phone_number = `${region?.dial_code ?? ''}${input}`;
+                        const phone_number = formatPhoneNumber(region?.dial_code, input);
                         methods.setValue({
                             input,
                             region,
@@ -211,28 +214,29 @@ const PhoneNumberInput = ({ blockId, components: { Icon, Link }, events, loading
                     },
                     prefix: properties.prefix || properties.prefixIcon && /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_prefixIcon`,
+                        classNames: {
+                            element: classNames.prefixIcon
+                        },
                         events: events,
-                        properties: properties.prefixIcon
+                        properties: properties.prefixIcon,
+                        styles: {
+                            element: styles.prefixIcon
+                        }
                     }),
                     suffix: (properties.suffix || properties.suffixIcon) && /*#__PURE__*/ React.createElement(React.Fragment, null, properties.suffix && properties.suffix, properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
                         blockId: `${blockId}_suffixIcon`,
+                        classNames: {
+                            element: classNames.suffixIcon
+                        },
                         events: events,
-                        properties: properties.suffixIcon
+                        properties: properties.suffixIcon,
+                        styles: {
+                            element: styles.suffixIcon
+                        }
                     }))
                 });
             }
         }
     });
 };
-PhoneNumberInput.defaultProps = blockDefaultProps;
-PhoneNumberInput.meta = {
-    valueType: 'object',
-    category: 'input',
-    icons: [
-        ...Label.meta.icons
-    ],
-    styles: [
-        'blocks/PhoneNumberInput/style.less'
-    ]
-};
-export default PhoneNumberInput;
+export default withTheme('Input', withBlockDefaults(PhoneNumberInput));

package/dist/blocks/PhoneNumberInput/formatPhoneNumber.js

@@ -0,0 +1,25 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ const formatPhoneNumber = (dialCode = '', input)=>{
+    // Strip all non-digit characters from input, then strip leading zeros
+    const cleanInput = (input || '').replace(/\D/g, '').replace(/^0+/, '');
+    // If the cleaned input is empty, return an empty string
+    if (cleanInput.length === 0) {
+        return '';
+    }
+    // Concatenate the cleaned dial code and input
+    return `${dialCode}${cleanInput}`;
+};
+export default formatPhoneNumber;

package/dist/blocks/PhoneNumberInput/meta.js

@@ -0,0 +1,225 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import icon from '../../schemas/icon.js';
+import { disabled, placeholder, inputTitle, autoFocus, variant, bordered, allowClear, sizeSmallMiddleLarge } from '../../schemas/inputProperties.js';
+export default {
+    category: 'input',
+    icons: [
+        ...LabelMeta.icons
+    ],
+    valueType: 'object',
+    cssKeys: {
+        element: 'The PhoneNumberInput element.',
+        label: 'The PhoneNumberInput label.',
+        extra: 'The PhoneNumberInput extra content.',
+        feedback: 'The PhoneNumberInput validation feedback.',
+        options: 'The PhoneNumberInput options.',
+        prefixIcon: 'The prefix icon in the PhoneNumberInput.',
+        select: 'The PhoneNumberInput select.',
+        suffixIcon: 'The suffix icon in the PhoneNumberInput.'
+    },
+    events: {
+        onInputChange: 'Trigger action when text input is changed.',
+        onCodeChange: 'Trigger action when the selector is changed.',
+        onChange: {
+            description: 'Trigger action when the number is changed.',
+            event: {
+                value: 'The phone number value object with input, region, and phone_number fields.'
+            }
+        },
+        onBlur: 'Trigger action event occurs when input loses focus.',
+        onFocus: 'Trigger action when input gets focus.',
+        onPressEnter: 'Trigger action when enter is pressed while text input is focused.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            allowClear: {
+                ...allowClear,
+                default: false
+            },
+            allowedRegions: {
+                type: 'array',
+                description: 'List of allowed ISO 3166-1 alpha-2 region codes. If allowedRegions is [] or null, the default list of all regions is used.',
+                items: {
+                    type: 'string'
+                }
+            },
+            autoFocus,
+            bordered: {
+                ...bordered,
+                description: 'Whether or not the text input has a border style. Deprecated, use variant instead.'
+            },
+            defaultRegion: {
+                type: 'string',
+                description: 'The dial code of the default region to be used.'
+            },
+            disabled,
+            maxLength: {
+                type: 'integer',
+                description: 'The max number of input characters.'
+            },
+            placeholder,
+            prefix: {
+                type: 'string',
+                description: 'Prefix text for the block, priority over $prefix_con.'
+            },
+            prefixIcon: {
+                ...icon,
+                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize icon to prefix the text input."
+            },
+            label,
+            replaceInput: {
+                type: 'object',
+                description: 'Regex used to sanitize input.',
+                properties: {
+                    pattern: {
+                        type: 'string',
+                        description: 'The regular expression pattern to use to sanitize input.'
+                    },
+                    flags: {
+                        type: 'string',
+                        description: "The regex flags to use. The default value is 'gm'."
+                    },
+                    replacement: {
+                        type: 'string',
+                        description: "The string used to replace the input that matches the pattern. The default value is ''."
+                    }
+                },
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            showArrow: {
+                type: 'boolean',
+                default: true,
+                description: 'Show the suffix icon at the drop-down position of the selector.'
+            },
+            size: sizeSmallMiddleLarge,
+            suffix: {
+                type: 'string',
+                description: 'Suffix text for the block, priority over suffixIcon.'
+            },
+            suffixIcon: {
+                ...icon,
+                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block to customize icon to suffix the text input."
+            },
+            title: inputTitle,
+            variant,
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/input#design-token'
+                },
+                properties: {
+                    activeBorderColor: {
+                        type: 'string',
+                        description: 'Border color when the input is focused.'
+                    },
+                    activeShadow: {
+                        type: 'string',
+                        description: 'Box shadow when the input is focused.'
+                    },
+                    addonBg: {
+                        type: 'string',
+                        default: 'rgba(0, 0, 0, 0.02)',
+                        description: 'Background color of addon elements.'
+                    },
+                    colorBgContainer: {
+                        type: 'string',
+                        description: 'Background color of the input.'
+                    },
+                    colorBorder: {
+                        type: 'string',
+                        description: 'Border color of the input.'
+                    },
+                    colorError: {
+                        type: 'string',
+                        description: 'Color used for error status.'
+                    },
+                    colorPrimary: {
+                        type: 'string',
+                        description: 'Primary color override.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Text color of the input value.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Text color when input is disabled.'
+                    },
+                    colorTextPlaceholder: {
+                        type: 'string',
+                        description: 'Color of the placeholder text.'
+                    },
+                    colorWarning: {
+                        type: 'string',
+                        description: 'Color used for warning status.'
+                    },
+                    controlHeight: {
+                        type: 'number',
+                        default: 32,
+                        description: 'Height of the input.'
+                    },
+                    controlHeightLG: {
+                        type: 'number',
+                        default: 40,
+                        description: 'Height for large inputs.'
+                    },
+                    controlHeightSM: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Height for small inputs.'
+                    },
+                    errorActiveShadow: {
+                        type: 'string',
+                        default: '0 0 0 2px rgba(255, 38, 5, 0.06)',
+                        description: 'Box shadow when the input has error status and is focused.'
+                    },
+                    fontSize: {
+                        type: 'number',
+                        default: 14,
+                        description: 'Font size of the input.'
+                    },
+                    hoverBorderColor: {
+                        type: 'string',
+                        description: 'Border color when the input is hovered.'
+                    },
+                    paddingBlock: {
+                        type: 'number',
+                        default: 4,
+                        description: 'Vertical padding.'
+                    },
+                    paddingInline: {
+                        type: 'number',
+                        default: 11,
+                        description: 'Horizontal padding.'
+                    },
+                    warningActiveShadow: {
+                        type: 'string',
+                        default: '0 0 0 2px rgba(255, 215, 5, 0.1)',
+                        description: 'Box shadow when the input has warning status and is focused.'
+                    }
+                }
+            }
+        }
+    }
+};