chore(demo): fix example with maskitoRejectEvent plugin (#767)

projects/demo/src/pages/documentation/plugins/examples/reject/animation.less

@@ -0,0 +1,21 @@
+@red: rgba(244, 87, 37, 1);
+
+@keyframes reject-0 {
+    from {
+        box-shadow: 0 0 @red;
+    }
+
+    to {
+        box-shadow: 0 0 1rem fade(@red, 12%);
+    }
+}
+
+@keyframes reject-1 {
+    from {
+        box-shadow: 0 0 @red;
+    }
+
+    to {
+        box-shadow: 0 0 1rem fade(@red, 12%);
+    }
+}

projects/demo/src/pages/documentation/plugins/examples/reject/component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {maskitoRejectEvent} from '@maskito/kit';
 
 import mask from './mask';
@@ -7,8 +7,10 @@ import mask from './mask';
     selector: 'plugins-reject-doc-example-1',
     template: `
         <tui-input
-            class="input"
+            [style.animation-duration.ms]="300"
+            [style.animation-iteration-count]="1"
             [style.animation-name]="'reject-' + (reject % 2)"
+            [style.max-width.rem]="20"
             [(ngModel)]="value"
             (maskitoReject)="reject = reject + 1"
         >
@@ -19,7 +21,8 @@ import mask from './mask';
             />
         </tui-input>
     `,
-    styleUrls: ['./component.less'],
+    styleUrls: ['./animation.less'],
+    encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PluginsDocExample1 {

projects/demo/src/pages/documentation/plugins/examples/reject/index.ts

@@ -0,0 +1,20 @@
+import './animation.less';
+
+import {Maskito} from '@maskito/core';
+
+import maskitoOptions from './mask';
+
+const element = document.querySelector('input')!;
+const maskedInput = new Maskito(element, maskitoOptions);
+
+let reject = -1;
+
+element.style.animation = '0.3s 1';
+
+element.addEventListener('maskitoReject', () => {
+    reject += 1;
+    element.style.animationName = `reject-${reject % 2}`;
+});
+
+// Call this function when the element is detached from DOM
+maskedInput.destroy();

projects/demo/src/pages/documentation/plugins/plugins.component.ts

@@ -10,5 +10,7 @@ import {TuiDocExample} from '@taiga-ui/addon-doc';
 export class PluginsDocPageComponent {
     readonly rejectExample: TuiDocExample = {
         [DocExamplePrimaryTab.MaskitoOptions]: import('./examples/reject/mask.ts?raw'),
+        'index.less': import('./examples/reject/animation.less?raw'),
+        'index.ts': import('./examples/reject/index.ts?raw'),
     };
 }