From db217993ead1311e92bb65d25b559536e1c3460f Mon Sep 17 00:00:00 2001 From: taiga-family-bot <140712314+taiga-family-bot@users.noreply.github.com> Date: Tue, 14 Nov 2023 22:59:37 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20taiga-fa?= =?UTF-8?q?mily/maskito@1e794976c600e8be4655131c30bc253dcc42b338=20?= =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/phone/index.html | 10 +++++----- browser-support/index.html | 4 ++-- changelog/index.html | 2 +- core-concepts/element-state/index.html | 2 +- core-concepts/mask-expression/index.html | 6 +++--- core-concepts/overview/index.html | 2 +- core-concepts/overwrite-mode/index.html | 10 +++++----- core-concepts/plugins/index.html | 6 +++--- core-concepts/processors/index.html | 2 +- core-concepts/transformer/index.html | 2 +- cypress/index.html | 4 ++-- frameworks/angular/Setup/index.html | 6 +++--- frameworks/angular/index.html | 16 ++++++++-------- frameworks/react/index.html | 2 +- frameworks/vue/index.html | 2 +- getting-started/maskito-libraries/index.html | 2 +- getting-started/what-is-maskito/index.html | 2 +- index.html | 2 +- kit/date-range/API/index.html | 2 +- kit/date-range/index.html | 8 ++++---- kit/date-time/API/index.html | 2 +- kit/date-time/index.html | 4 ++-- kit/date/API/index.html | 2 +- kit/date/index.html | 6 +++--- kit/number/API/index.html | 4 ++-- kit/number/index.html | 14 +++++++------- kit/time/API/index.html | 4 ++-- kit/time/index.html | 4 ++-- recipes/card/index.html | 4 ++-- recipes/phone/index.html | 4 ++-- recipes/placeholder/index.html | 6 +++--- recipes/postfix/index.html | 4 ++-- recipes/prefix/index.html | 4 ++-- recipes/textarea/index.html | 6 +++--- stackblitz/index.html | 2 +- 35 files changed, 81 insertions(+), 81 deletions(-) diff --git a/addons/phone/index.html b/addons/phone/index.html index 28df4f5b3..e818cdb10 100644 --- a/addons/phone/index.html +++ b/addons/phone/index.html @@ -20,9 +20,9 @@ +
-This mask is based on the libphonenumber-js package.
UsemaskitoPhoneOptionsGenerator
to create a mask for phone input. +
Phone
PHONEThis mask is based on the libphonenumber-js package.
UsemaskitoPhoneOptionsGenerator
to create a mask for phone input.Basic
Kazakhstan phone example
-@@ -47,7 +47,7 @@ Validation
For validating phone number you can use
isValidPhoneNumber
,isPossiblePhoneNumber
functions from libphonenumber-js package. Read moreBelow is an example of a Hungarian phone mask with an angular validator.
+
Validation
For validating phone number you can use
isValidPhoneNumber
,isPossiblePhoneNumber
functions from libphonenumber-js package. Read moreBelow is an example of a Hungarian phone mask with an angular validator.
-@@ -57,7 +57,7 @@ Non-strict mask
Setting the
strict
option tofalse
enables non-strict mask mode and allow user to type any country phone number.The
countryIsoCode
option is optional in that case, but if you specify it, the mask will try to add that country's calling code when you try to insert a phone number without a calling code.+
Non-strict mask
Setting the
strict
option tofalse
enables non-strict mask mode and allow user to type any country phone number.The
countryIsoCode
option is optional in that case, but if you specify it, the mask will try to add that country's calling code when you try to insert a phone number without a calling code.
-@@ -67,7 +67,7 @@ Lazy metadata
You can load metadata lazily, below is an example of how to do it in Angular.
You can also customize the metadata to reduce metadata size. See instructions here
+
Lazy metadata
You can load metadata lazily, below is an example of how to do it in Angular.
You can also customize the metadata to reduce metadata size. See instructions here
diff --git a/browser-support/index.html b/browser-support/index.html index b7ba56f62..ffac41a9e 100644 --- a/browser-support/index.html +++ b/browser-support/index.html @@ -20,9 +20,9 @@ + - + Browser support
Desktop
Browser Version Google Chrome 74+ Mozilla Firefox 55+ Safari 12.1+ Opera 62+ Edge (Chromium) 74+ Microsoft Internet Explorer Not supported Edge (EdgeHTML) Not supported Mobile
Browser Version Google Chrome 90+ Mozilla Firefox 99+ Safari 12.2+ Opera 64+ diff --git a/changelog/index.html b/changelog/index.html index ce851690c..33805ecc2 100644 --- a/changelog/index.html +++ b/changelog/index.html @@ -23,7 +23,7 @@ - Browser support
Desktop
Browser Version Google Chrome 74+ Mozilla Firefox 55+ Safari 12.1+ Opera 62+ Edge (Chromium) 74+ Microsoft Internet Explorer Not supported Edge (EdgeHTML) Not supported Mobile
Browser Version Google Chrome 90+ Mozilla Firefox 99+ Safari 12.2+ Opera 64+ Changelog
Changelog
+Changelog
Changelog
All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
1.8.1 (2023-10-19)
diff --git a/core-concepts/element-state/index.html b/core-concepts/element-state/index.html index b71264f60..41b7b3ee0 100644 --- a/core-concepts/element-state/index.html +++ b/core-concepts/element-state/index.html @@ -22,7 +22,7 @@ -Element state
Element state is a concept which describes the main properties of the masked element at the certain period of time.
It is an object which implements the following interface:
+
Element state
Element state is a concept which describes the main properties of the masked element at the certain period of time.
It is an object which implements the following interface:
diff --git a/core-concepts/mask-expression/index.html b/core-concepts/mask-expression/index.html index 6fb82a4aa..3f851740b 100644 --- a/core-concepts/mask-expression/index.html +++ b/core-concepts/mask-expression/index.html @@ -20,9 +20,9 @@ + - diff --git a/core-concepts/overview/index.html b/core-concepts/overview/index.html index 086cdaa9d..016b7d3f6 100644 --- a/core-concepts/overview/index.html +++ b/core-concepts/overview/index.html @@ -22,7 +22,7 @@ - Mask expression
Mask expression is the the main concept of Maskito core library. It provides the developer with opportunity to predefine format of user's input. For example, you can set mask expression to accept only digits, only Latin letters or you can configure more complex patterns like a date string.You can set mask expression using
mask
parameter ofMaskitoOptions
.Types of mask expression
- RegExp mask expression
The most basic and comprehensible type. The only required knowledge is understanding of native JavaScript Regular expression .
See the following example:
+
+ Mask expression
Mask expression is the the main concept of Maskito core library. It provides the developer with opportunity to predefine format of user's input. For example, you can set mask expression to accept only digits, only Latin letters or you can configure more complex patterns like a date string.You can set mask expression using
mask
parameter ofMaskitoOptions
.Types of mask expression
- RegExp mask expression
The most basic and comprehensible type. The only required knowledge is understanding of native JavaScript Regular expression .
See the following example:
-@@ -37,7 +37,7 @@ Be careful! It can be not performance-friendly to generate new mask expression on every input change.Think about optimization and memoization of the such function.
Next steps
The following sections are recommended to explore core concepts further:
Be careful! It can be not performance-friendly to generate new mask expression on every input change.Think about optimization and memoization of the such function.
Next steps
The following sections are recommended to explore core concepts further:
Core concepts
The main entity of Maskito core library is
Maskito
class which accepts 2 arguments in constructor:
- native
HTMLInputElement
orHTMLTextAreaElement
- set of configurable
MaskitoOptions
+
Core concepts
The main entity of Maskito core library is
Maskito
class which accepts 2 arguments in constructor:
- native
HTMLInputElement
orHTMLTextAreaElement
- set of configurable
MaskitoOptions
diff --git a/core-concepts/overwrite-mode/index.html b/core-concepts/overwrite-mode/index.html index c725c9768..ef360583f 100644 --- a/core-concepts/overwrite-mode/index.html +++ b/core-concepts/overwrite-mode/index.html @@ -20,9 +20,9 @@ + - diff --git a/core-concepts/plugins/index.html b/core-concepts/plugins/index.html index 441e08aeb..a39bf6574 100644 --- a/core-concepts/plugins/index.html +++ b/core-concepts/plugins/index.html @@ -20,9 +20,9 @@ + - Overwrite mode
Overwrite mode regulates behaviour of the mask when user inserts a new character somewhere in the middle of text field, overwriting the character at the current index.
overwriteMode
can be of a following type:
shift
(default)replace
- function that receives element state as an argument and returns
shift
orreplace
Shift mode
The classic mode that everyone is used to. Inserting a new character in the middle of the text field value shifts all following characters to the right.
+
+ Overwrite mode
Overwrite mode regulates behaviour of the mask when user inserts a new character somewhere in the middle of text field, overwriting the character at the current index.
overwriteMode
can be of a following type:
shift
(default)replace
- function that receives element state as an argument and returns
shift
orreplace
Shift mode
The classic mode that everyone is used to. Inserting a new character in the middle of the text field value shifts all following characters to the right.
-@@ -47,7 +47,7 @@ Replace mode
All new inserted characters replace the old characters at the same position. No character shifts. The length of the value remains the same after inserting new character somewhere in middle of the text field.
+
Replace mode
All new inserted characters replace the old characters at the same position. No character shifts. The length of the value remains the same after inserting new character somewhere in middle of the text field.
-@@ -72,7 +72,7 @@ Dynamically detected mode
Parameter
overwriteMode
also accepts function that will called before each insertion of new characters. This function has one argument — current element state (read more about it in the "Element state" section). And this function should return one of two possible values:shift
orreplace
.+
Dynamically detected mode
Parameter
overwriteMode
also accepts function that will called before each insertion of new characters. This function has one argument — current element state (read more about it in the "Element state" section). And this function should return one of two possible values:shift
orreplace
.
-@@ -97,7 +97,7 @@ Next steps
The following sections are recommended to explore core concepts further:
Next steps
The following sections are recommended to explore core concepts further:
diff --git a/core-concepts/processors/index.html b/core-concepts/processors/index.html index f200cefa5..1e971309c 100644 --- a/core-concepts/processors/index.html +++ b/core-concepts/processors/index.html @@ -22,7 +22,7 @@ - Plugins
Plugins are functions that are called with input/textarea element and mask options as arguments upon mask initialization. They can optionally return cleanup logic and allow you to extend mask with arbitrary additional behavior.
Visualize rejected characters
This plugin is available asmaskitoRejectEvent
in@maskito/kit
+
+ Plugins
Plugins are functions that are called with input/textarea element and mask options as arguments upon mask initialization. They can optionally return cleanup logic and allow you to extend mask with arbitrary additional behavior.
Visualize rejected characters
This plugin is available asmaskitoRejectEvent
in@maskito/kit
-@@ -47,7 +47,7 @@ Next steps
The following sections are recommended to explore core concepts further:
Next steps
The following sections are recommended to explore core concepts further:
Processors
MaskitoOptions
have optional parameterspreprocessors
andpostprocessors
. Both accept array of pure functions. These functions are triggered on every user's input ( beforeinput and input events). They provide an opportunity to modify value before / after the mask is applied.Preprocessors and postprocessors accept different types of arguments but they have two important similarities:
- The first argument always contains object with information that you can change. Object with the same properties and updated values can be returned from the processor. It means that you can keep all properties untouched or you can change any or all of these properties.
- The rest arguments contain information that can be useful to build some complex logic, but you cannot change it.
Before you learn more about processors, you should learn a single prerequisite — meaning of the term "Element state" .Preprocessors
Each preprocessor is a function that is called before mask is applied.
For example, if user types a new character, all preprocessors will be called first, and only then final value that they returned will be passed into the mask, and finally the mask will accept or reject new typed character and update actual value of the text field.
Preprocessor accepts two arguments:
- Object with two properties:
elementState
anddata
. Object of the same interface with updated or unchanged properties can be returned from the preprocessor.+
Processors
MaskitoOptions
have optional parameterspreprocessors
andpostprocessors
. Both accept array of pure functions. These functions are triggered on every user's input ( beforeinput and input events). They provide an opportunity to modify value before / after the mask is applied.Preprocessors and postprocessors accept different types of arguments but they have two important similarities:
- The first argument always contains object with information that you can change. Object with the same properties and updated values can be returned from the processor. It means that you can keep all properties untouched or you can change any or all of these properties.
- The rest arguments contain information that can be useful to build some complex logic, but you cannot change it.
Before you learn more about processors, you should learn a single prerequisite — meaning of the term "Element state" .Preprocessors
Each preprocessor is a function that is called before mask is applied.
For example, if user types a new character, all preprocessors will be called first, and only then final value that they returned will be passed into the mask, and finally the mask will accept or reject new typed character and update actual value of the text field.
Preprocessor accepts two arguments:
- Object with two properties:
elementState
anddata
. Object of the same interface with updated or unchanged properties can be returned from the preprocessor.
diff --git a/core-concepts/transformer/index.html b/core-concepts/transformer/index.html index aabfc3830..734380ce6 100644 --- a/core-concepts/transformer/index.html +++ b/core-concepts/transformer/index.html @@ -22,7 +22,7 @@ - Transformer
COREMaskito libraries were created to prevent user from typing invalid value.
Maskito listensbeforeinput
andinput
events. Programmatic (by developer) changes of input's value don't trigger these events! Maskito is based on the assumption that developer is capable to programmatically patch input with valid value!If you need to programmatically patch input's value but you are not sure that your value is valid (for example, you get it from the server), you should use
maskitoTransform
utility .+
Transformer
COREMaskito libraries were created to prevent user from typing invalid value.
Maskito listensbeforeinput
andinput
events. Programmatic (by developer) changes of input's value don't trigger these events! Maskito is based on the assumption that developer is capable to programmatically patch input with valid value!If you need to programmatically patch input's value but you are not sure that your value is valid (for example, you get it from the server), you should use
maskitoTransform
utility .
diff --git a/cypress/index.html b/cypress/index.html index 86f1eb17c..e6c882b67 100644 --- a/cypress/index.html +++ b/cypress/index.html @@ -20,9 +20,9 @@ + - + diff --git a/frameworks/angular/Setup/index.html b/frameworks/angular/Setup/index.html index 8d304a96f..c021857e1 100644 --- a/frameworks/angular/Setup/index.html +++ b/frameworks/angular/Setup/index.html @@ -20,15 +20,15 @@ + - Angular
- Install libraries
/your/project/path> +
Angular
- Install libraries
/your/project/path>
-- Import
MaskitoModule
to your moduleyour.module.ts +
- Import
MaskitoModule
to your moduleyour.module.ts
diff --git a/frameworks/angular/index.html b/frameworks/angular/index.html index f5eeb68e3..2de5ed7cb 100644 --- a/frameworks/angular/index.html +++ b/frameworks/angular/index.html @@ -20,23 +20,23 @@ + - Angular
@maskito/angular
is a light-weighted library to use Maskito in an Angular-way. PrerequisitesTo get the most out of this guide, you should review the topic "Core Concepts" first.
Write less code
- No need to query element from DOM. Just pass all required options to
[maskito]
directive.- No need to worry about clean-ups. All created event listeners are automatically removed after element is detached from DOM.
Basic directive approach
Use it when you have direct access to native input element.
your.component.ts +
Angular
@maskito/angular
is a light-weighted library to use Maskito in an Angular-way. PrerequisitesTo get the most out of this guide, you should review the topic "Core Concepts" first.
Write less code
- No need to query element from DOM. Just pass all required options to
[maskito]
directive.- No need to worry about clean-ups. All created event listeners are automatically removed after element is detached from DOM.
Basic directive approach
Use it when you have direct access to native input element.
your.component.ts
-Nested input element
Pass a predicate to maskito to find input element for you, if you do not have a direct access to it.
By default maskito will try to find input/textarea by querying its host:host.querySelector('input,textarea')
so that might be sufficient. Use custom predicate if you need custom logic.your.component.ts +
Nested input element
Pass a predicate to maskito to find input element for you, if you do not have a direct access to it.
By default maskito will try to find input/textarea by querying its host:host.querySelector('input,textarea')
so that might be sufficient. Use custom predicate if you need custom logic.your.component.ts
-Custom input
See querying nested input in action
Default behavior is enough for Taiga UI inputs Custom predicate is required if target input is not the first on in the DOM