Community › Forge › Assets list › iMask Js
imask-js
Reactive icon

iMask Js

Stable version 2.2.0 (Compatible with OutSystems 11)
Uploaded
 on 18 November 2024
 by 
5.0
 (8 ratings)
imask-js

iMask Js

Documentation
2.2.0

To use the widgets on this component, simply place one of the available Blocks on a Page of Block, and set the input parameters accordingly :

Number Masks

  • CurrencyMask
    • Input Parameters
      • Currency - Currency code or symbol
      • ShowCurrencyAsSuffix - When True, the currency will be shown on the right of the amount; otherwise, it will be shown on the left of the amount (defaults to '€')
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
      • PadFractionalZeros - Pads the decimal part of a number with zeros up to the precision length (defaults to False)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • DecimalMask
    • Input Parameters
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
      • PadFractionalZeros - Pads the decimal part of a number with zeros up to the precision length (defaults to False)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • IntegerMask
    • Input Parameters
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • LongIntegerMask
    • Input Parameters
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • NumberMask
    • Input Parameters
      • Currency - Currency code or symbol
      • ShowCurrencyAsSuffix - When True, the currency will be shown on the right of the amount; otherwise, it will be shown on the left of the amount (defaults to '€')
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
      • PadFractionalZeros - Pads the decimal part of a number with zeros up to the precision length (defaults to False)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus


Text Masks

  • CreditCard
    • Input Parameters
      • CreditCardMask - Credit Card Mask (defaults to '0000 0000 0000 0000'; check input parameter description for more details)
    • Events
      • (none)
  • France_RIB
    • Input Parameters
      • (none)
    • Events
      • (none)
  • IBAN
    • Input Parameters
      • IBANMask - IBAN Mask to apply (defaults to 'aa00 **** **** **** **** **** **** **** *'; check input parameter description for more details)
    • Events
      • (none)
  • Portugal_NIB
    • Input Parameters
      • (none)
    • Events
      • (none)
  • ZipCode
    • Input Parameters
      • ZipCodeMask - Country ZIP Code Mask to apply (defaults to '0000-000'; check input parameter description for more details)
    • Events
      • (none)
  • CustomMask
    • Input Parameters
      • CustomMask - Custom Mask to apply (defaults to ''; check input parameter description for more details)
    • Events
      • (none)


The Demo allows you to view detailed information about each widget, how to use it and a brief preview / demo of it. You can play with each one of the available patterns, setting the available input parameters and seeing the pattern in action immediately.


2.1.0

To use the widgets on this component, simply place one of the available Blocks on a Page of Block, and set the input parameters accordingly :

Number Masks

  • CurrencyMask
    • Input Parameters
      • Currency - Currency code or symbol
      • ShowCurrencyAsSuffix - When True, the currency will be shown on the right of the amount; otherwise, it will be shown on the left of the amount (defaults to '€')
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • DecimalMask
    • Input Parameters
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • IntegerMask
    • Input Parameters
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • LongIntegerMask
    • Input Parameters
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • NumberMask
    • Input Parameters
      • Currency - Currency code or symbol
      • ShowCurrencyAsSuffix - When True, the currency will be shown on the right of the amount; otherwise, it will be shown on the left of the amount (defaults to '€')
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus


Text Masks

  • CreditCard
    • Input Parameters
      • CreditCardMask - Credit Card Mask (defaults to '0000 0000 0000 0000'; check input parameter description for more details)
    • Events
      • (none)
  • France_RIB
    • Input Parameters
      • (none)
    • Events
      • (none)
  • IBAN
    • Input Parameters
      • IBANMask - IBAN Mask to apply (defaults to 'aa00 **** **** **** **** **** **** **** *'; check input parameter description for more details)
    • Events
      • (none)
  • Portugal_NIB
    • Input Parameters
      • (none)
    • Events
      • (none)
  • ZipCode
    • Input Parameters
      • ZipCodeMask - Country ZIP Code Mask to apply (defaults to '0000-000'; check input parameter description for more details)
    • Events
      • (none)
  • CustomMask
    • Input Parameters
      • CustomMask - Custom Mask to apply (defaults to ''; check input parameter description for more details)
    • Events
      • (none)


The Demo allows you to view detailed information about each widget, how to use it and a brief preview / demo of it. You can play with each one of the available patterns, setting the available input parameters and seeing the pattern in action immediately.


2.0.0

To use the widgets on this component, simply place one of the available Blocks on a Page of Block, and set the input parameters accordingly :

Number Masks

  • CurrencyMask
    • Input Parameters
      • Currency - Currency code or symbol
      • ShowCurrencyAsSuffix - When True, the currency will be shown on the right of the amount; otherwise, it will be shown on the left of the amount (defaults to '€')
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • DecimalMask
    • Input Parameters
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • IntegerMask
    • Input Parameters
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • LongIntegerMask
    • Input Parameters
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus
  • NumberMask
    • Input Parameters
      • Currency - Currency code or symbol
      • ShowCurrencyAsSuffix - When True, the currency will be shown on the right of the amount; otherwise, it will be shown on the left of the amount (defaults to '€')
      • DecimalDigits - Number of decimal digits (defaults to 2)
      • AllowNegative - Allow the input of negative numbers? (defaults to False)
      • ThousandsSeparator - Thousands separator symbol (defaults to ' ')
      • DecimalSeparator - Decimal separator symbol (defaults to ',')
      • MinValue - Minimum value (defaults to Number.MIN_SAFE_INTEGER)
      • MaxValue - Maximum value (defaults to Number.MAX_SAFE_INTEGER)
      • ShowInitialValueIfZero - Show the initial value if zero ? (defaults to True)
    • Events
      • OnBlur - Triggered when the masked input is blur
      • OnChange - Triggered when the masked input is changed
      • OnFocus - Triggered when the masked input has focus


Text Masks

  • CreditCard
    • Input Parameters
      • CreditCardMask - Credit Card Mask (defaults to '0000 0000 0000 0000'; check input parameter description for more details)
    • Events
      • (none)
  • France_RIB
    • Input Parameters
      • (none)
    • Events
      • (none)
  • IBAN
    • Input Parameters
      • IBANMask - IBAN Mask to apply (defaults to 'aa00 **** **** **** **** **** **** **** *'; check input parameter description for more details)
    • Events
      • (none)
  • Portugal_NIB
    • Input Parameters
      • (none)
    • Events
      • (none)
  • ZipCode
    • Input Parameters
      • ZipCodeMask - Country ZIP Code Mask to apply (defaults to '0000-000'; check input parameter description for more details)
    • Events
      • (none)


The Demo allows you to view detailed information about each widget, how to use it and a brief preview / demo of it. You can play with each one of the available patterns, setting the available input parameters and seeing the pattern in action immediately.


1.0.7

The iMask Js Forge Component was updated to version 1.0.7.

On this new version, you will find:

  • Added paste functionality on Credit Card, IBAN, Portugal NIB and Zip Code.
  • Solved issue with rendering the components OnParametersChange.
  • The Demo package references were also updated with the changes.


The Credit Card, IBAN, Portugal NIB and Zip Code widgets were changed with a new OnPaste event.


1.0.6

The iMask Js Forge Component was updated to version 1.0.6.

On this new version, you will find:

  • Updated references for Outsystems UI version 2.11.0
  • The Demo package references were also updated:
    • Outsystems UI version 2.11.0
    • Removed reference to the Custom UI Patterns forge component


No changes were made to the widgets available.


1.0.5

The iMask Js Forge Component was updated to version 1.0.5.

On this new version, you will find:

  • Updated references for Outsystems UI version 2.10.0
  • A Demo package is now included on the Forge Component


No changes were made to the widgets available.


1.0.3

This component consists of a set of custom input masks, based on the iMask Js Javascript component (https://imask.js.org/).

The set of masks available are grouped according to their purpose, in the following sections: 

  • Number Masks
    • Integer Number - applies an integer mask to a number input widget 
    • Decimal Number - applies a decimal mask to a number input widget 
    • Currency Number - applies a currency mask to a number input widget 
  • Text Masks
    • IBAN - applies an IBAN (International Bank Account Number) mask to a text input widget 
    • Portugal NIB - applies a Portugal NIB (Bank Identification Number) mask to a text input widget 
    • Credit Card - applies a Credit Card mask to a text input widget 
    • Zip Code - applies a Country Zip Code mask to a text input widget 


The Demo allows you to view detailed information about each widget, how to use it and a brief preview / demo of it. You can play with each one of the available patterns, setting the available input parameters and seeing the pattern in action immediately.