From 145c0b00db2c3917cf577996b8a6dd36480b3e07 Mon Sep 17 00:00:00 2001
From: Marlon Harrison <marlon@ionic.io>
Date: Mon, 15 Apr 2024 18:53:19 -0500
Subject: [PATCH 1/3] add examples for setting an initial value when using
 maskito (using maskitoTransform)

---
 .../mask/angular/example_component_html.md     |  1 +
 .../input/mask/angular/example_component_ts.md |  5 ++++-
 static/usage/v7/input/mask/demo.html           |  9 ++++++---
 .../v7/input/mask/javascript/index_html.md     |  9 ++++++---
 .../usage/v7/input/mask/javascript/index_ts.md |  3 ++-
 static/usage/v7/input/mask/react.md            | 18 ++++++++++++------
 static/usage/v7/input/mask/vue.md              |  6 +++++-
 .../mask/angular/example_component_html.md     |  1 +
 .../input/mask/angular/example_component_ts.md |  5 ++++-
 static/usage/v8/input/mask/demo.html           |  9 ++++++---
 .../v8/input/mask/javascript/index_html.md     |  9 ++++++---
 .../usage/v8/input/mask/javascript/index_ts.md |  3 ++-
 static/usage/v8/input/mask/react.md            | 12 ++++++++----
 static/usage/v8/input/mask/vue.md              |  6 +++++-
 14 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/static/usage/v7/input/mask/angular/example_component_html.md b/static/usage/v7/input/mask/angular/example_component_html.md
index f6d27b19558..2484e0c64e3 100644
--- a/static/usage/v7/input/mask/angular/example_component_html.md
+++ b/static/usage/v7/input/mask/angular/example_component_html.md
@@ -12,6 +12,7 @@
     <ion-input
       label="US phone number"
       placeholder="+1 (xxx) xxx-xxxx"
+      [(ngModel)]="myPhoneNumber"
       [maskito]="phoneMask"
       [maskitoElement]="maskPredicate"
     ></ion-input>
diff --git a/static/usage/v7/input/mask/angular/example_component_ts.md b/static/usage/v7/input/mask/angular/example_component_ts.md
index 151a5bcac16..c7f0c898017 100644
--- a/static/usage/v7/input/mask/angular/example_component_ts.md
+++ b/static/usage/v7/input/mask/angular/example_component_ts.md
@@ -1,7 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { MaskitoOptions, MaskitoElementPredicate } from '@maskito/core';
+import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core';
 
 @Component({
   selector: 'app-example',
@@ -12,6 +12,9 @@ export class ExampleComponent {
     mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
   };
 
+  //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+  myPhoneNumber = maskitoTransform('5555551212', this.phoneMask);
+
   readonly cardMask: MaskitoOptions = {
     mask: [
       ...Array(4).fill(/\d/),
diff --git a/static/usage/v7/input/mask/demo.html b/static/usage/v7/input/mask/demo.html
index b5fc734aae5..8b40c46ee12 100644
--- a/static/usage/v7/input/mask/demo.html
+++ b/static/usage/v7/input/mask/demo.html
@@ -39,10 +39,13 @@
       async function initPhoneMask() {
         const ionInput = document.querySelector('#phone');
         const nativeEl = await ionInput.getInputElement();
-
-        new window.Maskito(nativeEl, {
+        const phoneMaskOptions = {
           mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
-        });
+        };
+        new window.Maskito(nativeEl, phoneMaskOptions);
+
+        //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+        ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
       }
 
       async function initCardMask() {
diff --git a/static/usage/v7/input/mask/javascript/index_html.md b/static/usage/v7/input/mask/javascript/index_html.md
index bf7aadd8150..9d2f90c90dd 100644
--- a/static/usage/v7/input/mask/javascript/index_html.md
+++ b/static/usage/v7/input/mask/javascript/index_html.md
@@ -12,10 +12,13 @@
   async function initPhoneMask() {
     const ionInput = document.querySelector('#phone');
     const nativeEl = await ionInput.getInputElement();
-
-    new window.Maskito(nativeEl, {
+    const phoneMaskOptions = {
       mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
-    });
+    };
+    new window.Maskito(nativeEl, phoneMaskOptions);
+
+    //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+    ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
   }
 
   async function initCardMask() {
diff --git a/static/usage/v7/input/mask/javascript/index_ts.md b/static/usage/v7/input/mask/javascript/index_ts.md
index 89d38873488..8506f1714cd 100644
--- a/static/usage/v7/input/mask/javascript/index_ts.md
+++ b/static/usage/v7/input/mask/javascript/index_ts.md
@@ -1,7 +1,7 @@
 ```ts
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { Maskito } from '@maskito/core';
+import { Maskito, maskitoTransform } from '@maskito/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -25,4 +25,5 @@ import './theme/variables.css';
 defineCustomElements();
 
 (window as any).Maskito = Maskito;
+(window as any).maskitoTransform = maskitoTransform;
 ```
diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md
index 2b4d76902dc..e6d719b1543 100644
--- a/static/usage/v7/input/mask/react.md
+++ b/static/usage/v7/input/mask/react.md
@@ -1,7 +1,9 @@
 ```tsx
-import React from 'react';
+import { useState } from 'react';
 import { IonInput, IonItem, IonList } from '@ionic/react';
 import { useMaskito } from '@maskito/react';
+import { MaskitoOptions, maskitoTransform } from '@maskito/core';
+
 
 function Example() {
   const cardMask = useMaskito({
@@ -20,11 +22,13 @@ function Example() {
     },
   });
 
-  const phoneMask = useMaskito({
-    options: {
-      mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
-    },
-  });
+  const phoneMaskOptions: MaskitoOptions = {
+    mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+  };
+  const phoneMask = useMaskito({ options: phoneMaskOptions});
+  
+   //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+   const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
 
   return (
     <IonList>
@@ -48,6 +52,8 @@ function Example() {
               phoneMask(input);
             }
           }}
+          value={myPhoneNumber}
+          onIonInput={e => setMyPhoneNumber(e.detail.value || '')}
           label="US phone number"
           placeholder="+1 (xxx) xxx-xxxx"
         ></IonInput>
diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md
index 14b96d0caee..8687dd30571 100644
--- a/static/usage/v7/input/mask/vue.md
+++ b/static/usage/v7/input/mask/vue.md
@@ -5,14 +5,16 @@
       <ion-input label="Card number" placeholder="0000 0000 0000 0000" v-maskito="cardOptions"></ion-input>
     </ion-item>
     <ion-item>
-      <ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-maskito="phoneOptions"></ion-input>
+      <ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-model="myPhoneNumber" v-maskito="phoneOptions"></ion-input>
     </ion-item>
   </ion-list>
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import { IonInput, IonItem, IonList } from '@ionic/vue';
   import { maskito as vMaskito } from '@maskito/vue';
+  import { maskitoTransform } from '@maskito/core';
 
   const cardOptions = {
     mask: [
@@ -47,5 +49,7 @@
       });
     },
   };
+  // If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+  const myPhoneNumber = ref(maskitoTransform('5555551212', phoneOptions));
 </script>
 ```
diff --git a/static/usage/v8/input/mask/angular/example_component_html.md b/static/usage/v8/input/mask/angular/example_component_html.md
index f6d27b19558..2484e0c64e3 100644
--- a/static/usage/v8/input/mask/angular/example_component_html.md
+++ b/static/usage/v8/input/mask/angular/example_component_html.md
@@ -12,6 +12,7 @@
     <ion-input
       label="US phone number"
       placeholder="+1 (xxx) xxx-xxxx"
+      [(ngModel)]="myPhoneNumber"
       [maskito]="phoneMask"
       [maskitoElement]="maskPredicate"
     ></ion-input>
diff --git a/static/usage/v8/input/mask/angular/example_component_ts.md b/static/usage/v8/input/mask/angular/example_component_ts.md
index 1edb7f8c662..637f52b34b7 100644
--- a/static/usage/v8/input/mask/angular/example_component_ts.md
+++ b/static/usage/v8/input/mask/angular/example_component_ts.md
@@ -1,7 +1,7 @@
 ```ts
 import { Component } from '@angular/core';
 
-import { MaskitoOptions, MaskitoElementPredicateAsync } from '@maskito/core';
+import { MaskitoOptions, MaskitoElementPredicateAsync, maskitoTransform } from '@maskito/core';
 
 @Component({
   selector: 'app-example',
@@ -12,6 +12,9 @@ export class ExampleComponent {
     mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
   };
 
+  //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+  myPhoneNumber = maskitoTransform('5555551212', this.phoneMask);
+
   readonly cardMask: MaskitoOptions = {
     mask: [
       ...Array(4).fill(/\d/),
diff --git a/static/usage/v8/input/mask/demo.html b/static/usage/v8/input/mask/demo.html
index d3f2598bea2..283bf4b0907 100644
--- a/static/usage/v8/input/mask/demo.html
+++ b/static/usage/v8/input/mask/demo.html
@@ -39,10 +39,13 @@
       async function initPhoneMask() {
         const ionInput = document.querySelector('#phone');
         const nativeEl = await ionInput.getInputElement();
-
-        new window.Maskito(nativeEl, {
+        const phoneMaskOptions = {
           mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
-        });
+        };
+        new window.Maskito(nativeEl, phoneMaskOptions);
+
+        //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+        ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
       }
 
       async function initCardMask() {
diff --git a/static/usage/v8/input/mask/javascript/index_html.md b/static/usage/v8/input/mask/javascript/index_html.md
index bf7aadd8150..9d2f90c90dd 100644
--- a/static/usage/v8/input/mask/javascript/index_html.md
+++ b/static/usage/v8/input/mask/javascript/index_html.md
@@ -12,10 +12,13 @@
   async function initPhoneMask() {
     const ionInput = document.querySelector('#phone');
     const nativeEl = await ionInput.getInputElement();
-
-    new window.Maskito(nativeEl, {
+    const phoneMaskOptions = {
       mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
-    });
+    };
+    new window.Maskito(nativeEl, phoneMaskOptions);
+
+    //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+    ionInput.value = window.maskitoTransform('5555551212', phoneMaskOptions);
   }
 
   async function initCardMask() {
diff --git a/static/usage/v8/input/mask/javascript/index_ts.md b/static/usage/v8/input/mask/javascript/index_ts.md
index 89d38873488..8506f1714cd 100644
--- a/static/usage/v8/input/mask/javascript/index_ts.md
+++ b/static/usage/v8/input/mask/javascript/index_ts.md
@@ -1,7 +1,7 @@
 ```ts
 import { defineCustomElements } from '@ionic/core/loader';
 
-import { Maskito } from '@maskito/core';
+import { Maskito, maskitoTransform } from '@maskito/core';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/core/css/core.css';
@@ -25,4 +25,5 @@ import './theme/variables.css';
 defineCustomElements();
 
 (window as any).Maskito = Maskito;
+(window as any).maskitoTransform = maskitoTransform;
 ```
diff --git a/static/usage/v8/input/mask/react.md b/static/usage/v8/input/mask/react.md
index 2b4d76902dc..45aff628f1b 100644
--- a/static/usage/v8/input/mask/react.md
+++ b/static/usage/v8/input/mask/react.md
@@ -20,11 +20,13 @@ function Example() {
     },
   });
 
-  const phoneMask = useMaskito({
-    options: {
+  const phoneMaskOptions: MaskitoOptions = {
       mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
-    },
-  });
+  };
+  const phoneMask = useMaskito({ options: phoneMaskOptions});
+  
+   //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+   const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
 
   return (
     <IonList>
@@ -48,6 +50,8 @@ function Example() {
               phoneMask(input);
             }
           }}
+          value={myPhoneNumber}
+          onIonInput={e => setMyPhoneNumber(e.detail.value || '')}
           label="US phone number"
           placeholder="+1 (xxx) xxx-xxxx"
         ></IonInput>
diff --git a/static/usage/v8/input/mask/vue.md b/static/usage/v8/input/mask/vue.md
index 14b96d0caee..8687dd30571 100644
--- a/static/usage/v8/input/mask/vue.md
+++ b/static/usage/v8/input/mask/vue.md
@@ -5,14 +5,16 @@
       <ion-input label="Card number" placeholder="0000 0000 0000 0000" v-maskito="cardOptions"></ion-input>
     </ion-item>
     <ion-item>
-      <ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-maskito="phoneOptions"></ion-input>
+      <ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-model="myPhoneNumber" v-maskito="phoneOptions"></ion-input>
     </ion-item>
   </ion-list>
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import { IonInput, IonItem, IonList } from '@ionic/vue';
   import { maskito as vMaskito } from '@maskito/vue';
+  import { maskitoTransform } from '@maskito/core';
 
   const cardOptions = {
     mask: [
@@ -47,5 +49,7 @@
       });
     },
   };
+  // If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+  const myPhoneNumber = ref(maskitoTransform('5555551212', phoneOptions));
 </script>
 ```

From 607c39cb82b29f57f59c9e9287f0d9779ff99d07 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Tue, 16 Apr 2024 15:45:40 -0400
Subject: [PATCH 2/3] chore: prettier formatting

---
 static/usage/v7/input/mask/react.md | 11 +++++------
 static/usage/v7/input/mask/vue.md   |  7 ++++++-
 static/usage/v8/input/mask/react.md | 12 ++++++------
 static/usage/v8/input/mask/vue.md   |  7 ++++++-
 4 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/static/usage/v7/input/mask/react.md b/static/usage/v7/input/mask/react.md
index e6d719b1543..0f6ec39cb4f 100644
--- a/static/usage/v7/input/mask/react.md
+++ b/static/usage/v7/input/mask/react.md
@@ -4,7 +4,6 @@ import { IonInput, IonItem, IonList } from '@ionic/react';
 import { useMaskito } from '@maskito/react';
 import { MaskitoOptions, maskitoTransform } from '@maskito/core';
 
-
 function Example() {
   const cardMask = useMaskito({
     options: {
@@ -25,10 +24,10 @@ function Example() {
   const phoneMaskOptions: MaskitoOptions = {
     mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
   };
-  const phoneMask = useMaskito({ options: phoneMaskOptions});
-  
-   //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
-   const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
+  const phoneMask = useMaskito({ options: phoneMaskOptions });
+
+  //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+  const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
 
   return (
     <IonList>
@@ -53,7 +52,7 @@ function Example() {
             }
           }}
           value={myPhoneNumber}
-          onIonInput={e => setMyPhoneNumber(e.detail.value || '')}
+          onIonInput={(e) => setMyPhoneNumber(e.detail.value || '')}
           label="US phone number"
           placeholder="+1 (xxx) xxx-xxxx"
         ></IonInput>
diff --git a/static/usage/v7/input/mask/vue.md b/static/usage/v7/input/mask/vue.md
index 8687dd30571..815a2d51386 100644
--- a/static/usage/v7/input/mask/vue.md
+++ b/static/usage/v7/input/mask/vue.md
@@ -5,7 +5,12 @@
       <ion-input label="Card number" placeholder="0000 0000 0000 0000" v-maskito="cardOptions"></ion-input>
     </ion-item>
     <ion-item>
-      <ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-model="myPhoneNumber" v-maskito="phoneOptions"></ion-input>
+      <ion-input
+        label="US phone number"
+        placeholder="+1 (xxx) xxx-xxxx"
+        v-model="myPhoneNumber"
+        v-maskito="phoneOptions"
+      ></ion-input>
     </ion-item>
   </ion-list>
 </template>
diff --git a/static/usage/v8/input/mask/react.md b/static/usage/v8/input/mask/react.md
index 45aff628f1b..539bebc0e12 100644
--- a/static/usage/v8/input/mask/react.md
+++ b/static/usage/v8/input/mask/react.md
@@ -21,12 +21,12 @@ function Example() {
   });
 
   const phoneMaskOptions: MaskitoOptions = {
-      mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
+    mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/],
   };
-  const phoneMask = useMaskito({ options: phoneMaskOptions});
-  
-   //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
-   const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
+  const phoneMask = useMaskito({ options: phoneMaskOptions });
+
+  //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid
+  const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions));
 
   return (
     <IonList>
@@ -51,7 +51,7 @@ function Example() {
             }
           }}
           value={myPhoneNumber}
-          onIonInput={e => setMyPhoneNumber(e.detail.value || '')}
+          onIonInput={(e) => setMyPhoneNumber(e.detail.value || '')}
           label="US phone number"
           placeholder="+1 (xxx) xxx-xxxx"
         ></IonInput>
diff --git a/static/usage/v8/input/mask/vue.md b/static/usage/v8/input/mask/vue.md
index 8687dd30571..815a2d51386 100644
--- a/static/usage/v8/input/mask/vue.md
+++ b/static/usage/v8/input/mask/vue.md
@@ -5,7 +5,12 @@
       <ion-input label="Card number" placeholder="0000 0000 0000 0000" v-maskito="cardOptions"></ion-input>
     </ion-item>
     <ion-item>
-      <ion-input label="US phone number" placeholder="+1 (xxx) xxx-xxxx" v-model="myPhoneNumber" v-maskito="phoneOptions"></ion-input>
+      <ion-input
+        label="US phone number"
+        placeholder="+1 (xxx) xxx-xxxx"
+        v-model="myPhoneNumber"
+        v-maskito="phoneOptions"
+      ></ion-input>
     </ion-item>
   </ion-list>
 </template>

From a4ba12f21b3252dab0a2ff9974eb63afb120ac24 Mon Sep 17 00:00:00 2001
From: Marlon Harrison <marlon@ionic.io>
Date: Tue, 16 Apr 2024 15:36:31 -0500
Subject: [PATCH 3/3] input-masking: add maskitoTransform reference to
 demo.html

---
 static/usage/v7/input/mask/demo.html | 3 ++-
 static/usage/v8/input/mask/demo.html | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/static/usage/v7/input/mask/demo.html b/static/usage/v7/input/mask/demo.html
index 8b40c46ee12..ef1938c39c0 100644
--- a/static/usage/v7/input/mask/demo.html
+++ b/static/usage/v7/input/mask/demo.html
@@ -8,8 +8,9 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
     <script type="module">
-      import { Maskito } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
+      import { Maskito, maskitoTransform } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
       window.Maskito = Maskito;
+      window.maskitoTransform = maskitoTransform;
     </script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
 
diff --git a/static/usage/v8/input/mask/demo.html b/static/usage/v8/input/mask/demo.html
index 283bf4b0907..1d1de364389 100644
--- a/static/usage/v8/input/mask/demo.html
+++ b/static/usage/v8/input/mask/demo.html
@@ -8,8 +8,9 @@
     <script src="../../common.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
     <script type="module">
-      import { Maskito } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
+      import { Maskito, maskitoTransform } from 'https://cdn.jsdelivr.net/npm/@maskito/core/index.esm.js';
       window.Maskito = Maskito;
+      window.maskitoTransform = maskitoTransform;
     </script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />