ThumbnailCard ADDON-COMMERCE

    
      
    

      
        Copy
      
      
    
  

    
      @for (size of sizes; track size) {
    <tui-thumbnail-card
        iconEnd="@tui.cloud"
        iconStart="@tui.lock"
        paymentSystem="mastercard"
        [size]="size"
    >
        4572
    </tui-thumbnail-card>
}

    

      
        Copy
      
      
    
  

    
      :host {
    display: flex;
    gap: 1rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-thumbnail-card
    paymentSystem="mir"
    class="logo"
>
    7777
</tui-thumbnail-card>

    

      
        Copy
      
      
    
  

    
      @keyframes spinCard {
    0% {
        transform: rotateY(0);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }

    12% {
        transform: rotateY(90deg) rotateZ(6deg) scale(1.7);
        box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.3);
    }

    25% {
        transform: rotateY(180deg);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }

    50% {
        transform: rotateY(180deg);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }

    62% {
        transform: rotateY(270deg) rotateZ(-8deg) scale(1.7);
        box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.3);
    }

    80% {
        transform: rotateY(720deg);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }

    100% {
        transform: rotateY(720deg);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);
    }
}

:host {
    perspective: 50rem;
}

.logo {
    background-color: #7c48c3;
    background-image: linear-gradient(45deg, #c86dd7 0%, #3023ae 100%);
    overflow: visible;
    animation: spinCard 5s infinite;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-thumbnail-card
    iconEnd="@tui.user"
    paymentSystem="visa"
    size="l"
    class="star"
>
    1234
</tui-thumbnail-card>

<tui-thumbnail-card
    iconEnd="@tui.user"
    paymentSystem="mastercard"
    size="l"
    class="gradient"
>
    5678
</tui-thumbnail-card>

<tui-thumbnail-card
    paymentSystem="maestro"
    size="l"
    class="retrowave"
>
    9000
</tui-thumbnail-card>

<tui-thumbnail-card
    paymentSystem="unionpay"
    size="l"
    class="radial"
>
    7777
</tui-thumbnail-card>

    

      
        Copy
      
      
    
  

    
      :host {
    display: flex;
    gap: 1rem;
}

.star {
    color: #000;
    background:
        linear-gradient(45deg, rgba(255, 170, 0, 0.82), #fa0), url('/assets/taiga-ui/icons/star.svg'),
        url('/assets/taiga-ui/icons/star.svg');
    background-size:
        100%,
        3rem 1.5rem,
        3rem 1.5rem;
    background-position:
        0 0,
        -0.75rem 0,
        0.75rem;
    background-color: #fff;
}

.gradient {
    color: #fff;
    background: #2b9aff linear-gradient(110deg, transparent 70%, #0780ff 71%, #db028b 100%);
}

.retrowave {
    color: #ecb5ff;
    background: url('/assets/images/avatar.jpg') no-repeat center/cover;

    &::before {
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(0.25rem);
    }
}

.radial {
    color: #fff;
    background: radial-gradient(#c900ff, #0079be);
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-thumbnail-card
    iconEnd="@tui.user"
    paymentSystem="visa"
>
    <img
        alt="external"
        src="https://github.com/waterplea.png?size=200"
    />
    1234
</tui-thumbnail-card>

    

      
        Copy
      
      
    
  

    
      :host {
    display: flex;
    gap: 1rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-segmented>
    @for (state of statuses; track state) {
        <button
            type="button"
            (click)="status = state"
        >
            {{ state }}
        </button>
    }
</tui-segmented>

<tui-textfield>
    <label tuiLabel>Card number</label>
    <input
        icon=""
        tuiInputCard
        [disabled]="status === 'disabled'"
        [invalid]="status === 'invalid'"
        [readOnly]="status === 'readOnly'"
        [(ngModel)]="card"
    />
    @if (card.startsWith('1234')) {
        <tui-thumbnail-card
            iconStart="@tui.dollar-sign"
            paymentSystem="visa"
            size="s"
            [style.background]="background"
        />
    }
</tui-textfield>

    

      
        Copy
      
      
    
  

    
      :host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    

      
        Copy