From 2a1e927a60350592de3d63303ec91e88dd9545f5 Mon Sep 17 00:00:00 2001
From: "g.d.panov" <g.d.panov@tinkoff.ru>
Date: Fri, 22 Mar 2024 15:44:24 +0300
Subject: [PATCH] feat(addon-commerce): add flag hide cvc code in InputCard,
 InputCardGrouped

---
 .../input-card-grouped/input-card-grouped.component.ts        | 2 ++
 .../input-card-grouped/input-card-grouped.options.ts          | 2 ++
 .../input-card-grouped/input-card-grouped.style.less          | 4 ++++
 .../input-card-grouped/input-card-grouped.template.html       | 1 +
 .../components/input-cvc/input-cvc.component.ts               | 3 +++
 .../addon-commerce/components/input-cvc/input-cvc.style.less  | 4 ++++
 .../components/input-cvc/input-cvc.template.html              | 1 +
 7 files changed, 17 insertions(+)

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
index f7ad3961776a..ae7b209cd1a6 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.component.ts
@@ -111,6 +111,8 @@ export class TuiInputCardGroupedComponent
 
     protected exampleTextCVC = this.options.exampleTextCVC;
 
+    protected cvcHidden = this.options.cvcHidden;
+
     protected maskCVC: MaskitoOptions = {
         mask: new Array(3).fill(TUI_DIGIT_REGEXP),
     };
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.options.ts b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.options.ts
index 405e3c3a7b8d..d00015d65738 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.options.ts
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.options.ts
@@ -9,6 +9,7 @@ export interface TuiInputCardGroupedOptions extends TuiInputCardOptions {
     readonly cardValidator: TuiBooleanHandler<string>;
     readonly exampleText: string;
     readonly exampleTextCVC: string;
+    readonly cvcHidden: boolean;
 }
 
 export const TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS: TuiInputCardGroupedOptions = {
@@ -16,6 +17,7 @@ export const TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS: TuiInputCardGroupedOptions
     cardValidator: tuiDefaultCardValidator,
     exampleText: '0000 0000 0000 0000',
     exampleTextCVC: '000',
+    cvcHidden: true,
 };
 
 export const TUI_INPUT_CARD_GROUPED_OPTIONS = tuiCreateToken(
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
index d5bd18a0dcf4..f3e888792f2c 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -143,6 +143,10 @@
     &_inert {
         pointer-events: none;
     }
+
+    &_hidden {
+        -webkit-text-security: disc;
+    }
 }
 
 .t-icons {
diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html
index b1469fbb256f..29151f741f4f 100644
--- a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html
+++ b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.template.html
@@ -120,6 +120,7 @@
                 class="t-input"
                 [attr.id]="idCVC"
                 [autocomplete]="autocompleteCVC"
+                [class.t-input_hidden]="cvcHidden"
                 [class.t-input_prefilled]="cvcPrefilled"
                 [disabled]="computedDisabled"
                 [maskito]="maskCVC"
diff --git a/projects/addon-commerce/components/input-cvc/input-cvc.component.ts b/projects/addon-commerce/components/input-cvc/input-cvc.component.ts
index fe232554eaef..b55e034e1382 100644
--- a/projects/addon-commerce/components/input-cvc/input-cvc.component.ts
+++ b/projects/addon-commerce/components/input-cvc/input-cvc.component.ts
@@ -49,6 +49,9 @@ export class TuiInputCVCComponent
     @Input()
     public autocompleteEnabled = false;
 
+    @Input()
+    public hidden = true;
+
     public exampleText = '000';
 
     public maskOptions: MaskitoOptions = {
diff --git a/projects/addon-commerce/components/input-cvc/input-cvc.style.less b/projects/addon-commerce/components/input-cvc/input-cvc.style.less
index 540861d58edb..b4ad0a1aa6fd 100644
--- a/projects/addon-commerce/components/input-cvc/input-cvc.style.less
+++ b/projects/addon-commerce/components/input-cvc/input-cvc.style.less
@@ -8,4 +8,8 @@
 .t-input {
     border-radius: inherit;
     text-align: inherit;
+
+    &_hidden {
+        -webkit-text-security: disc;
+    }
 }
diff --git a/projects/addon-commerce/components/input-cvc/input-cvc.template.html b/projects/addon-commerce/components/input-cvc/input-cvc.template.html
index a3b271b93f4b..1c2d4d114531 100644
--- a/projects/addon-commerce/components/input-cvc/input-cvc.template.html
+++ b/projects/addon-commerce/components/input-cvc/input-cvc.template.html
@@ -19,6 +19,7 @@
         inputmode="numeric"
         tuiTextfield
         [autocomplete]="autocomplete"
+        [class.t-input_hidden]="hidden"
         [placeholder]="computedPlaceholder"
     />
 </tui-primitive-textfield>