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

…rouped
taiga-family · Mar 22, 2024 · 2a1e927 · 2a1e927
1 parent 7936636
commit 2a1e927
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
@@ -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
@@ -9,13 +9,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: 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
@@ -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
@@ -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
@@ -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
@@ -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>