fix(addon-commerce): InputCardGrouped fix wrong offset for card num…

…ber (#2878)
taiga-family · Oct 12, 2022 · c387fb2 · c387fb2
1 parent 169cd5c
commit c387fb2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 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
@@ -263,6 +263,10 @@ export class TuiInputCardGroupedComponent
         return this.autocompleteEnabled ? `cc-csc` : `off`;
     }
 
+    get tailLength(): number {
+        return this.hasExtraSpace ? 5 : 4;
+    }
+
     // Safari expiration date autofill workaround
     get name(): 'ccexpiryyear' | null {
         return this.autocompleteEnabled ? `ccexpiryyear` : null;
@@ -362,6 +366,10 @@ export class TuiInputCardGroupedComponent
         this.updateProperty(cvc, `cvc`);
     }
 
+    transform({offsetWidth}: HTMLSpanElement): string {
+        return this.isCardCollapsed ? `translate3d(${offsetWidth}px, 0, 0)` : ``;
+    }
+
     onActiveZoneChange(active: boolean): void {
         this.updateFocused(active);
         this.open = active && this.open;
@@ -420,6 +428,10 @@ export class TuiInputCardGroupedComponent
         return this.value && tuiGetPaymentSystem(this.value.card);
     }
 
+    private get hasExtraSpace(): boolean {
+        return this.card.length % 4 > 0;
+    }
+
     @tuiPure
     private isFocusable(card: string): boolean {
         return this.focusable && (this.cardValidator(card) || this.cardPrefilled);

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
@@ -100,10 +100,6 @@
     right: 100%;
     display: block;
     transform: translate3d(100%, 0, 0);
-
-    &_collapsed {
-        transform: translate3d(4ch, 0, 0);
-    }
 }
 
 .t-input {
@@ -169,3 +165,7 @@
     margin: 1.125rem 1rem;
     line-height: 1.25rem;
 }
+
+.t-ghost {
+    visibility: hidden;
+}
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
@@ -48,10 +48,17 @@
                 [attr.data-before]="masked"
                 [class.t-collapsed_enable-mask]="isCardCollapsed"
             >
+                <span
+                    #ghost
+                    class="t-ghost"
+                >
+                    {{ formattedCard.slice(-tailLength) }}
+                </span>
+
                 <span class="t-collapsed-wrapper">
                     <span
                         class="t-value"
-                        [class.t-value_collapsed]="isCardCollapsed"
+                        [style.transform]="transform(ghost)"
                     >
                         {{ formattedCard }}
                     </span>