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 ea27502d030d..c065ff6d408d 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 @@ -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 index 72747e64efa7..1393fd14d9a0 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 @@ -10,6 +10,7 @@ export interface TuiInputCardGroupedOptions extends TuiInputCardOptions { readonly cardValidator: TuiBooleanHandler; readonly exampleText: string; readonly exampleTextCVC: string; + readonly cvcHidden: boolean; } export const TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS: TuiInputCardGroupedOptions = { @@ -17,6 +18,7 @@ export const TUI_INPUT_CARD_GROUPED_DEFAULT_OPTIONS: TuiInputCardGroupedOptions 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 index 71a543872d65..0daaeadbe33d 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 @@ -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 index d316a51a3524..2181f1f12746 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 1cecd00345ff..4383ee720be1 100644 --- 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 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 a4a21b7b4038..64bc4d591278 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" />