@taiga-ui/addon-commerce/esm2022/components/thumbnail-card/thumbnail-card.component.mjs

Extension package for Taiga UI related to commerce, payment systems, currencies etc.

import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, inject, Input } from '@angular/core';
import { TuiIcon, TuiIconPipe } from '@taiga-ui/core/components/icon';
import { TUI_THUMBNAIL_CARD_OPTIONS } from './thumbnail-card.options';
import * as i0 from "@angular/core";
class TuiThumbnailCard {
    constructor() {
        this.options = inject(TUI_THUMBNAIL_CARD_OPTIONS);
        this.size = this.options.size;
        this.paymentSystem = null;
        this.iconStart = '';
        this.iconEnd = '';
        this.monoHandler = this.options.monoHandler;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiThumbnailCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiThumbnailCard, isStandalone: true, selector: "tui-thumbnail-card", inputs: { size: "size", paymentSystem: "paymentSystem", iconStart: "iconStart", iconEnd: "iconEnd", monoHandler: "monoHandler" }, host: { properties: { "attr.data-size": "size" } }, ngImport: i0, template: "<!-- TODO: use this icon as a fallback for <ng-content select=\"img\" /> (Angular 18)  -->\n<tui-icon\n    *ngIf=\"iconStart\"\n    class=\"t-icon t-left\"\n    [icon]=\"iconStart\"\n/>\n\n<div class=\"t-left t-icon\">\n    <ng-content select=\"img\" />\n</div>\n\n<tui-icon\n    *ngIf=\"iconEnd\"\n    class=\"t-right t-icon\"\n    [icon]=\"iconEnd\"\n/>\n\n<div class=\"t-content\">\n    <ng-content />\n</div>\n\n<ng-container *ngIf=\"paymentSystem\">\n    <tui-icon\n        *ngIf=\"monoHandler(paymentSystem); else colored\"\n        class=\"t-logo\"\n        [icon]=\"options.icons[paymentSystem]\"\n    />\n    <ng-template #colored>\n        <img\n            class=\"t-logo\"\n            [alt]=\"paymentSystem\"\n            [src]=\"options.icons[paymentSystem] | tuiIcon\"\n        />\n    </ng-template>\n</ng-container>\n", styles: [":host{position:relative;display:inline-block;flex-shrink:0;background:#000;color:#fff;transform-style:preserve-3d;overflow:hidden;box-shadow:inset 0 0 0 1px var(--tui-background-neutral-1);--t-logo-height: .8125rem}:host:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit}:host:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(180deg) translateZ(1px);color:#b0b0b0;border-radius:inherit;background:linear-gradient(to bottom,currentColor 0 20%,#959595 20% 40%,currentColor 40%)}:host[data-size=xs],:host[data-size=s]{font-size:0;border-radius:.25rem}:host[data-size=xs]{inline-size:2rem;block-size:1.375rem}:host[data-size=s]{inline-size:2.5rem;block-size:1.625rem}:host[data-size=m]{inline-size:3rem;block-size:2rem;border-radius:.3125rem;font:normal .5625rem / var(--t-logo-height) var(--tui-font-text)}:host[data-size=l]{inline-size:3.375rem;block-size:2.25rem;border-radius:.375rem;font:normal .6875rem / var(--t-logo-height) var(--tui-font-text)}.t-left{position:absolute;top:0;left:0;display:flex;transform-origin:top left}:host[data-size=xs] .t-left,:host[data-size=s] .t-left{transform:translate(.125rem,.125rem) scale(.625)}:host[data-size=m] .t-left{transform:translate(.1875rem,.1875rem) scale(.875)}:host[data-size=l] .t-left{transform:translate(.1875rem,.1875rem)}.t-right{position:absolute;top:.1875rem;right:.1875rem}:host[data-size=xs] .t-right,:host[data-size=s] .t-right{display:none}:host[data-size=m] .t-right{inline-size:.875rem;block-size:.875rem}:host[data-size=m] .t-right:after{transform:scale(.5)}:host[data-size=l] .t-right{inline-size:1rem;block-size:1rem}:host[data-size=l] .t-right:after{color:#fff;transform:scale(.625)}.t-right:before{content:\"\";position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border-radius:100%;background:currentColor;opacity:.35}.t-logo{position:absolute;right:.25rem;bottom:0;block-size:var(--t-logo-height);transform-origin:right}:host[data-size=xs] .t-logo{right:.125rem}:host[data-size=m] .t-logo,:host[data-size=l] .t-logo{bottom:.0625rem}.t-logo:after{-webkit-mask-position:right;mask-position:right}.t-content{position:absolute}:host[data-size=m] .t-content{left:.1875rem;bottom:.0625rem}:host[data-size=l] .t-content{left:.25rem;bottom:.0625rem}.t-icon{inline-size:1rem;block-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }, { kind: "pipe", type: TuiIconPipe, name: "tuiIcon" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiThumbnailCard };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiThumbnailCard, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'tui-thumbnail-card', imports: [NgIf, TuiIcon, TuiIconPipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        '[attr.data-size]': 'size',
                    }, template: "<!-- TODO: use this icon as a fallback for <ng-content select=\"img\" /> (Angular 18)  -->\n<tui-icon\n    *ngIf=\"iconStart\"\n    class=\"t-icon t-left\"\n    [icon]=\"iconStart\"\n/>\n\n<div class=\"t-left t-icon\">\n    <ng-content select=\"img\" />\n</div>\n\n<tui-icon\n    *ngIf=\"iconEnd\"\n    class=\"t-right t-icon\"\n    [icon]=\"iconEnd\"\n/>\n\n<div class=\"t-content\">\n    <ng-content />\n</div>\n\n<ng-container *ngIf=\"paymentSystem\">\n    <tui-icon\n        *ngIf=\"monoHandler(paymentSystem); else colored\"\n        class=\"t-logo\"\n        [icon]=\"options.icons[paymentSystem]\"\n    />\n    <ng-template #colored>\n        <img\n            class=\"t-logo\"\n            [alt]=\"paymentSystem\"\n            [src]=\"options.icons[paymentSystem] | tuiIcon\"\n        />\n    </ng-template>\n</ng-container>\n", styles: [":host{position:relative;display:inline-block;flex-shrink:0;background:#000;color:#fff;transform-style:preserve-3d;overflow:hidden;box-shadow:inset 0 0 0 1px var(--tui-background-neutral-1);--t-logo-height: .8125rem}:host:before{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit}:host:after{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;content:\"\";-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:rotateY(180deg) translateZ(1px);color:#b0b0b0;border-radius:inherit;background:linear-gradient(to bottom,currentColor 0 20%,#959595 20% 40%,currentColor 40%)}:host[data-size=xs],:host[data-size=s]{font-size:0;border-radius:.25rem}:host[data-size=xs]{inline-size:2rem;block-size:1.375rem}:host[data-size=s]{inline-size:2.5rem;block-size:1.625rem}:host[data-size=m]{inline-size:3rem;block-size:2rem;border-radius:.3125rem;font:normal .5625rem / var(--t-logo-height) var(--tui-font-text)}:host[data-size=l]{inline-size:3.375rem;block-size:2.25rem;border-radius:.375rem;font:normal .6875rem / var(--t-logo-height) var(--tui-font-text)}.t-left{position:absolute;top:0;left:0;display:flex;transform-origin:top left}:host[data-size=xs] .t-left,:host[data-size=s] .t-left{transform:translate(.125rem,.125rem) scale(.625)}:host[data-size=m] .t-left{transform:translate(.1875rem,.1875rem) scale(.875)}:host[data-size=l] .t-left{transform:translate(.1875rem,.1875rem)}.t-right{position:absolute;top:.1875rem;right:.1875rem}:host[data-size=xs] .t-right,:host[data-size=s] .t-right{display:none}:host[data-size=m] .t-right{inline-size:.875rem;block-size:.875rem}:host[data-size=m] .t-right:after{transform:scale(.5)}:host[data-size=l] .t-right{inline-size:1rem;block-size:1rem}:host[data-size=l] .t-right:after{color:#fff;transform:scale(.625)}.t-right:before{content:\"\";position:absolute;top:0;left:0;inline-size:100%;block-size:100%;border-radius:100%;background:currentColor;opacity:.35}.t-logo{position:absolute;right:.25rem;bottom:0;block-size:var(--t-logo-height);transform-origin:right}:host[data-size=xs] .t-logo{right:.125rem}:host[data-size=m] .t-logo,:host[data-size=l] .t-logo{bottom:.0625rem}.t-logo:after{-webkit-mask-position:right;mask-position:right}.t-content{position:absolute}:host[data-size=m] .t-content{left:.1875rem;bottom:.0625rem}:host[data-size=l] .t-content{left:.25rem;bottom:.0625rem}.t-icon{inline-size:1rem;block-size:1rem}\n"] }]
        }], propDecorators: { size: [{
                type: Input
            }], paymentSystem: [{
                type: Input
            }], iconStart: [{
                type: Input
            }], iconEnd: [{
                type: Input
            }], monoHandler: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGh1bWJuYWlsLWNhcmQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tY29tbWVyY2UvY29tcG9uZW50cy90aHVtYm5haWwtY2FyZC90aHVtYm5haWwtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi1jb21tZXJjZS9jb21wb25lbnRzL3RodW1ibmFpbC1jYXJkL3RodW1ibmFpbC1jYXJkLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUdoRixPQUFPLEVBQUMsT0FBTyxFQUFFLFdBQVcsRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBR3BFLE9BQU8sRUFBQywwQkFBMEIsRUFBQyxNQUFNLDBCQUEwQixDQUFDOztBQUVwRSxNQVdhLGdCQUFnQjtJQVg3QjtRQVl1QixZQUFPLEdBQUcsTUFBTSxDQUFDLDBCQUEwQixDQUFDLENBQUM7UUFHekQsU0FBSSxHQUF5QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztRQUcvQyxrQkFBYSxHQUE0QixJQUFJLENBQUM7UUFHOUMsY0FBUyxHQUFHLEVBQUUsQ0FBQztRQUdmLFlBQU8sR0FBRyxFQUFFLENBQUM7UUFHYixnQkFBVyxHQUF3QyxJQUFJLENBQUMsT0FBTyxDQUFDLFdBQVcsQ0FBQztLQUN0RjsrR0FqQlksZ0JBQWdCO21HQUFoQixnQkFBZ0Isb1FDcEI3QixvMEJBbUNBLDQ3RUR2QmMsSUFBSSw2RkFBRSxPQUFPLGdGQUFFLFdBQVc7O1NBUTNCLGdCQUFnQjs0RkFBaEIsZ0JBQWdCO2tCQVg1QixTQUFTO2lDQUNNLElBQUksWUFDTixvQkFBb0IsV0FDckIsQ0FBQyxJQUFJLEVBQUUsT0FBTyxFQUFFLFdBQVcsQ0FBQyxtQkFHcEIsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixrQkFBa0IsRUFBRSxNQUFNO3FCQUM3Qjs4QkFNTSxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsYUFBYTtzQkFEbkIsS0FBSztnQkFJQyxTQUFTO3NCQURmLEtBQUs7Z0JBSUMsT0FBTztzQkFEYixLQUFLO2dCQUlDLFdBQVc7c0JBRGpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge05nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge0NoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGluamVjdCwgSW5wdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0eXBlIFR1aVBheW1lbnRTeXN0ZW19IGZyb20gJ0B0YWlnYS11aS9hZGRvbi1jb21tZXJjZS90eXBlcyc7XG5pbXBvcnQge3R5cGUgVHVpQm9vbGVhbkhhbmRsZXJ9IGZyb20gJ0B0YWlnYS11aS9jZGsvdHlwZXMnO1xuaW1wb3J0IHtUdWlJY29uLCBUdWlJY29uUGlwZX0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9pY29uJztcbmltcG9ydCB7dHlwZSBUdWlTaXplTCwgdHlwZSBUdWlTaXplWFN9IGZyb20gJ0B0YWlnYS11aS9jb3JlL3R5cGVzJztcblxuaW1wb3J0IHtUVUlfVEhVTUJOQUlMX0NBUkRfT1BUSU9OU30gZnJvbSAnLi90aHVtYm5haWwtY2FyZC5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3R1aS10aHVtYm5haWwtY2FyZCcsXG4gICAgaW1wb3J0czogW05nSWYsIFR1aUljb24sIFR1aUljb25QaXBlXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGh1bWJuYWlsLWNhcmQudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdGh1bWJuYWlsLWNhcmQuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGh1bWJuYWlsQ2FyZCB7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IG9wdGlvbnMgPSBpbmplY3QoVFVJX1RIVU1CTkFJTF9DQVJEX09QVElPTlMpO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2l6ZTogVHVpU2l6ZUwgfCBUdWlTaXplWFMgPSB0aGlzLm9wdGlvbnMuc2l6ZTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIHBheW1lbnRTeXN0ZW06IFR1aVBheW1lbnRTeXN0ZW0gfCBudWxsID0gbnVsbDtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGljb25TdGFydCA9ICcnO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgaWNvbkVuZCA9ICcnO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgbW9ub0hhbmRsZXI6IFR1aUJvb2xlYW5IYW5kbGVyPFR1aVBheW1lbnRTeXN0ZW0+ID0gdGhpcy5vcHRpb25zLm1vbm9IYW5kbGVyO1xufVxuIiwiPCEtLSBUT0RPOiB1c2UgdGhpcyBpY29uIGFzIGEgZmFsbGJhY2sgZm9yIDxuZy1jb250ZW50IHNlbGVjdD1cImltZ1wiIC8+IChBbmd1bGFyIDE4KSAgLS0+XG48dHVpLWljb25cbiAgICAqbmdJZj1cImljb25TdGFydFwiXG4gICAgY2xhc3M9XCJ0LWljb24gdC1sZWZ0XCJcbiAgICBbaWNvbl09XCJpY29uU3RhcnRcIlxuLz5cblxuPGRpdiBjbGFzcz1cInQtbGVmdCB0LWljb25cIj5cbiAgICA8bmctY29udGVudCBzZWxlY3Q9XCJpbWdcIiAvPlxuPC9kaXY+XG5cbjx0dWktaWNvblxuICAgICpuZ0lmPVwiaWNvbkVuZFwiXG4gICAgY2xhc3M9XCJ0LXJpZ2h0IHQtaWNvblwiXG4gICAgW2ljb25dPVwiaWNvbkVuZFwiXG4vPlxuXG48ZGl2IGNsYXNzPVwidC1jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQgLz5cbjwvZGl2PlxuXG48bmctY29udGFpbmVyICpuZ0lmPVwicGF5bWVudFN5c3RlbVwiPlxuICAgIDx0dWktaWNvblxuICAgICAgICAqbmdJZj1cIm1vbm9IYW5kbGVyKHBheW1lbnRTeXN0ZW0pOyBlbHNlIGNvbG9yZWRcIlxuICAgICAgICBjbGFzcz1cInQtbG9nb1wiXG4gICAgICAgIFtpY29uXT1cIm9wdGlvbnMuaWNvbnNbcGF5bWVudFN5c3RlbV1cIlxuICAgIC8+XG4gICAgPG5nLXRlbXBsYXRlICNjb2xvcmVkPlxuICAgICAgICA8aW1nXG4gICAgICAgICAgICBjbGFzcz1cInQtbG9nb1wiXG4gICAgICAgICAgICBbYWx0XT1cInBheW1lbnRTeXN0ZW1cIlxuICAgICAgICAgICAgW3NyY109XCJvcHRpb25zLmljb25zW3BheW1lbnRTeXN0ZW1dIHwgdHVpSWNvblwiXG4gICAgICAgIC8+XG4gICAgPC9uZy10ZW1wbGF0ZT5cbjwvbmctY29udGFpbmVyPlxuIl19