@taiga-ui/addon-commerce
Version:
Extension package for Taiga UI related to commerce, payment systems, currencies etc.
35 lines (30 loc) • 9.41 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, input, ChangeDetectionStrategy, Component } from '@angular/core';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { TUI_PAYMENT_SYSTEM_ICONS } from '@taiga-ui/addon-commerce/tokens';
const TUI_THUMBNAIL_CARD_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_THUMBNAIL_CARD_OPTIONS' : '', {
factory: () => ({
icons: inject(TUI_PAYMENT_SYSTEM_ICONS),
size: 'm',
}),
});
class TuiThumbnailCard {
constructor() {
this.options = inject(TUI_THUMBNAIL_CARD_OPTIONS);
this.size = input(this.options.size);
this.paymentSystem = input(null);
this.iconStart = input('');
this.iconEnd = input('');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiThumbnailCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiThumbnailCard, isStandalone: true, selector: "tui-thumbnail-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, paymentSystem: { classPropertyName: "paymentSystem", publicName: "paymentSystem", isSignal: true, isRequired: false, transformFunction: null }, iconStart: { classPropertyName: "iconStart", publicName: "iconStart", isSignal: true, isRequired: false, transformFunction: null }, iconEnd: { classPropertyName: "iconEnd", publicName: "iconEnd", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()" } }, ngImport: i0, template: "<div class=\"t-start t-icon\">\n <ng-content select=\"img\">\n @if (iconStart()) {\n <tui-icon\n class=\"t-icon\"\n [icon]=\"iconStart()\"\n />\n }\n </ng-content>\n</div>\n\n@if (iconEnd()) {\n <tui-icon\n class=\"t-end t-icon\"\n [icon]=\"iconEnd()\"\n />\n}\n\n<div class=\"t-content\">\n <ng-content />\n</div>\n\n@let system = paymentSystem();\n\n@if (system) {\n <tui-icon\n class=\"t-logo\"\n [icon]=\"options.icons[system]\"\n />\n}\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;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit}:host:after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;content:\"\";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-typography-family-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-typography-family-text)}.t-start{position:absolute;display:flex;inset-block-start:0;inset-inline-start:0;transform-origin:top var(--tui-inline-start)}:host[data-size=xs] .t-start,:host[data-size=s] .t-start{transform:translate(calc(var(--tui-inline) * .125rem),.125rem) scale(.625)}:host[data-size=m] .t-start{transform:translate(calc(var(--tui-inline) * .1875rem),.1875rem) scale(.75)}:host[data-size=l] .t-start{transform:translate(calc(var(--tui-inline) * .1875rem),.1875rem)}.t-end{position:absolute;inset-block-start:.1875rem;inset-inline-end:.1875rem}:host[data-size=xs] .t-end,:host[data-size=s] .t-end{display:none}:host[data-size=m] .t-end{font-size:.875rem}:host[data-size=m] .t-end:before{transform:scale(.5)}:host[data-size=l] .t-end:before{transform:scale(.625)}.t-end:after{--tui-icon-size: 100%;position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:0;inset-inline-end:0;content:\"\";z-index:-1;display:block;transform:none;border-radius:100%;background:currentColor;opacity:.35}.t-end:before{color:#fff}.t-logo{position:absolute;inset-inline-end:.25rem;inset-block-end:0;block-size:var(--t-logo-height);transform-origin:var(--tui-inline-end)}:host[data-size=xs] .t-logo{inset-inline-end:.125rem}:host[data-size=m] .t-logo,:host[data-size=l] .t-logo{inset-block-end:.0625rem}.t-logo:before{block-size:100%;background-position:var(--tui-inline-end);background-size:contain;-webkit-mask-position:var(--tui-inline-end);mask-position:var(--tui-inline-end);-webkit-mask-size:contain;mask-size:contain}.t-content{position:absolute}:host[data-size=m] .t-content{inset-inline-start:.1875rem;inset-block-end:.0625rem}:host[data-size=l] .t-content{inset-inline-start:.25rem;inset-block-end:.0625rem}.t-icon{inline-size:1em;block-size:1em;font-size:1rem}\n"], dependencies: [{ kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiThumbnailCard, decorators: [{
type: Component,
args: [{ selector: 'tui-thumbnail-card', imports: [TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.data-size]': 'size()' }, template: "<div class=\"t-start t-icon\">\n <ng-content select=\"img\">\n @if (iconStart()) {\n <tui-icon\n class=\"t-icon\"\n [icon]=\"iconStart()\"\n />\n }\n </ng-content>\n</div>\n\n@if (iconEnd()) {\n <tui-icon\n class=\"t-end t-icon\"\n [icon]=\"iconEnd()\"\n />\n}\n\n<div class=\"t-content\">\n <ng-content />\n</div>\n\n@let system = paymentSystem();\n\n@if (system) {\n <tui-icon\n class=\"t-logo\"\n [icon]=\"options.icons[system]\"\n />\n}\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;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;content:\"\";border-radius:inherit}:host:after{position:absolute;inset-block-start:0;inset-inline-start:0;inline-size:100%;block-size:100%;content:\"\";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-typography-family-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-typography-family-text)}.t-start{position:absolute;display:flex;inset-block-start:0;inset-inline-start:0;transform-origin:top var(--tui-inline-start)}:host[data-size=xs] .t-start,:host[data-size=s] .t-start{transform:translate(calc(var(--tui-inline) * .125rem),.125rem) scale(.625)}:host[data-size=m] .t-start{transform:translate(calc(var(--tui-inline) * .1875rem),.1875rem) scale(.75)}:host[data-size=l] .t-start{transform:translate(calc(var(--tui-inline) * .1875rem),.1875rem)}.t-end{position:absolute;inset-block-start:.1875rem;inset-inline-end:.1875rem}:host[data-size=xs] .t-end,:host[data-size=s] .t-end{display:none}:host[data-size=m] .t-end{font-size:.875rem}:host[data-size=m] .t-end:before{transform:scale(.5)}:host[data-size=l] .t-end:before{transform:scale(.625)}.t-end:after{--tui-icon-size: 100%;position:absolute;inset-block-start:0;inset-inline-start:0;inset-block-end:0;inset-inline-end:0;content:\"\";z-index:-1;display:block;transform:none;border-radius:100%;background:currentColor;opacity:.35}.t-end:before{color:#fff}.t-logo{position:absolute;inset-inline-end:.25rem;inset-block-end:0;block-size:var(--t-logo-height);transform-origin:var(--tui-inline-end)}:host[data-size=xs] .t-logo{inset-inline-end:.125rem}:host[data-size=m] .t-logo,:host[data-size=l] .t-logo{inset-block-end:.0625rem}.t-logo:before{block-size:100%;background-position:var(--tui-inline-end);background-size:contain;-webkit-mask-position:var(--tui-inline-end);mask-position:var(--tui-inline-end);-webkit-mask-size:contain;mask-size:contain}.t-content{position:absolute}:host[data-size=m] .t-content{inset-inline-start:.1875rem;inset-block-end:.0625rem}:host[data-size=l] .t-content{inset-inline-start:.25rem;inset-block-end:.0625rem}.t-icon{inline-size:1em;block-size:1em;font-size:1rem}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_THUMBNAIL_CARD_OPTIONS, TuiThumbnailCard };
//# sourceMappingURL=taiga-ui-addon-commerce-components-thumbnail-card.mjs.map