https://maskito.dev/chunk-JCRDV3OG.js

1import{a as E}from"./chunk-6XYW53VW.js";import{o as f,u as g}from"./chunk-LSXWQTC3.js";import{g as d,ia as u,la as h}from"./chunk-VF5KTPML.js";import"./chunk-VK646FJK.js";import"./chunk-5S6T5LZS.js";import"./chunk-7YJOGRB6.js";import{a as x}from"./chunk-WX4VUYCL.js";import"./chunk-NBT5X4FN.js";import"./chunk-XDRRFE2U.js";import"./chunk-T7RZFQ27.js";import{Eb as c,Ub as o,ac as i,bc as t,cc as r,ob as n,uc as e,vc as l}from"./chunk-TD25X3N3.js";import"./chunk-TIC6Q35B.js";var a=class a{constructor(){this.elementStateDocPage=`/${x.ElementState}`;this.regExpMaskExpDemo=import("./chunk-G2AF2ROW.js");this.basicTimeDemo=import("./chunk-XU7FJCH5.js");this.dynamicMaskExpDemo=import("./chunk-7Q2WXKXC.js")}};a.\u0275fac=function(s){return new(s||a)},a.\u0275cmp=c({type:a,selectors:[["mask-expression-doc-page"]],decls:104,vars:6,consts:[["header","Mask expression"],["href","https://github.com/taiga-family/maskito/blob/main/projects/core/src/lib/types/mask-options.ts","rel","noreferrer","target","_blank","tuiLink",""],[1,"tui-space_top-8"],[1,"tui-list"],[1,"tui-list__item"],[1,"tui-space_top-0"],["href","https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions","rel","noreferrer","target","_blank","tuiLink",""],[3,"code"],["appearance","warning","size","m","tuiNotification","",1,"tui-space_top-3"],["appearance","info","size","m","tuiNotification",""],["appearance","info","size","m","tuiNotification","",1,"tui-space_bottom-3"],["tuiLink","",3,"routerLink"],["appearance","warning","size","m","tuiNotification","",1,"tui-space_top-6"],[1,"tui-space_bottom-0"]],template:function(s,m){s&1&&(i(0,"tui-doc-page",0)(1,"div")(2,"strong"),e(3,"Mask expression"),t(),e(4," 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. "),t(),i(5,"p"),e(6," You can set mask expression using "),i(7,"code"),e(8,"mask"),t(),e(9," parameter of "),i(10,"a",1)(11,"code"),e(12,"MaskitoOptions"),t()(),e(13," . "),t(),i(14,"section",2)(15,"h2"),e(16,"Types of mask expression"),t(),i(17,"ul",3)(18,"li",4)(19,"strong"),e(20,"RegExp mask expression"),t(),i(21,"p",5),e(22," The most basic and comprehensible type. The only required knowledge is understanding of native JavaScript "),i(23,"a",6),e(24," Regular\xA0expression "),t(),e(25," . "),t(),i(26,"p"),e(27,"See the following example:"),t(),r(28,"tui-doc-code",7),i(29,"div",8)(30,"div"),e(31," Make sure that mask expression works with any of intermediate states, not just the final value. "),i(32,"p"),e(33,"For example, imagine that you have to create mask for 4-digits PIN code."),t(),i(34,"p")(35,"code"),e(36),t(),e(37," is a wrong mask expression. It does not match intermediate states (you cannot complete 4-digit string without possibility to type 1-, 2- or 3-digit string). "),t(),i(38,"p")(39,"code"),e(40),t(),e(41," is the right solution for our example. "),t()()()(),i(42,"li",4)(43,"strong"),e(44,"Pattern mask expression"),t(),i(45,"p",5),e(46," It is a good choice for more complex masks that are fixed in size. This type of mask expression is presented as array. Each element in the array has to be either a string or a regular expression. Each string is a "),i(47,"em"),e(48,"fixed character"),t(),e(49," and each regular expression is validator of character at the same index. "),t(),i(50,"div",9)(51,"div")(52,"strong"),e(53,"Fixed character"),t(),e(54," \u2014 a predefined character at a certain position (the same as its index inside mask expression array). It is automatically added when user forgets to type it. It cannot be erased or replaced with another character. "),t()(),i(55,"p"),e(56," For example, imagine that you have to create mask for a time-string with "),i(57,"code"),e(58,"HH:MM"),t(),e(59," format. It consists of 4 digits and 1 fixed-character separator "),i(60,"code"),e(61,":"),t(),e(62," . "),t(),r(63,"tui-doc-code",7),i(64,"p"),e(65," This mask expression forbids anything excepts digits and limits length of the value to 5 characters. "),t(),i(66,"p"),e(67,"Also, it manages user interactions with fixed character."),t(),i(68,"p"),e(69," For example, user can just type four digits "),i(70,"code"),e(71,"1159"),t(),e(72," and the value becomes "),i(73,"code"),e(74,"11:59"),t()(),i(75,"p"),e(76," Another example, if caret position is after the colon and user presses "),i(77,"kbd"),e(78,"Backspace"),t(),e(79," , the input's value will not change but caret will be moved to the left of the colon. "),t()(),i(80,"li",4)(81,"strong"),e(82,"Dynamic mask expression"),t(),i(83,"p",5)(84,"code"),e(85,"mask"),t(),e(86," parameter can also accepts function which generates mask expression. This function will be called "),i(87,"strong"),e(88,"every\xA0time\xA0before"),t(),e(89," input changes to generate a new version of mask expression. "),t(),i(90,"div",10)(91,"div"),e(92," An "),i(93,"a",11),e(94,' "Element\xA0state" '),t(),e(95," object with raw value and current selection is passed as an argument to the function. "),t()(),r(96,"tui-doc-code",7),i(97,"div",12)(98,"div")(99,"div"),e(100," Be careful! It can be not performance-friendly to generate new mask expression on every input change. "),t(),i(101,"p",13),e(102,"Think about optimization and memoization of the such function."),t()()()()()(),r(103,"next-steps"),t()),s&2&&(n(28),o("code",m.regExpMaskExpDemo),n(8),l("/^\\d{4}$/"),n(4),l("/^\\d{0,4}$/"),n(23),o("code",m.basicTimeDemo),n(30),o("routerLink",m.elementStateDocPage),n(3),o("code",m.dynamicMaskExpDemo))},dependencies:[E,d,f,g,u,h],encapsulation:2,changeDetection:0});var p=a;export{p as default};