feat(addon-commerce): add flag hide cvc code in InputCard, InputCardG…

…rouped (#7070) Co-authored-by: g.d.panov <[email protected]>
taiga-family · Mar 22, 2024 · 0efb113 · 0efb113
1 parent a1ae503
commit 0efb113
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 0 deletions.
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
@@ -130,6 +130,8 @@ export class TuiInputCardGroupedComponent
 
     exampleTextCVC = this.options.exampleTextCVC;
 
+    cvcHidden = this.options.cvcHidden;
+
     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
@@ -10,13 +10,15 @@ 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 = {
     ...TUI_INPUT_CARD_DEFAULT_OPTIONS,
     cardValidator: tuiDefaultCardValidator,
     exampleText: '0000 0000 0000 0000',
     exampleTextCVC: '000',
+    cvcHidden: false,
 };
 
 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
@@ -139,6 +139,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
@@ -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
@@ -51,6 +51,9 @@ export class TuiInputCVCComponent
     @Input()
     autocompleteEnabled = false;
 
+    @Input()
+    hidden = false;
+
     @Input()
     set length(length: TuiCodeCVCLength) {
         this.exampleText = '0'.repeat(length);

diff --git 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
@@ -19,6 +19,7 @@
         inputmode="numeric"
         tuiTextfield
         [autocomplete]="autocomplete"
+        [class.t-input_hidden]="hidden"
         [placeholder]="computedPlaceholder"
     />
 </tui-primitive-textfield>