@taiga-ui/addon-commerce
Version:
Extension package for Taiga UI related to commerce, payment systems, currencies etc.
135 lines (128 loc) • 8.67 kB
JavaScript
import { TuiLabel } from '@taiga-ui/core/components/label';
import { TuiTextfieldContent, TuiTextfieldComponent, TuiTextfieldOptionsDirective } from '@taiga-ui/core/components/textfield';
import { TuiDropdownContent } from '@taiga-ui/core/portals/dropdown';
import * as i0 from '@angular/core';
import { inject, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, input, Directive } from '@angular/core';
import { toSignal, outputFromObservable, toObservable } from '@angular/core/rxjs-interop';
import { NgControl, DefaultValueAccessor } from '@angular/forms';
import * as i1 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { TUI_MASK_CARD, TUI_MASK_CVC, TUI_MASK_EXPIRE } from '@taiga-ui/addon-commerce/constants';
import { TUI_PAYMENT_SYSTEM_ICONS } from '@taiga-ui/addon-commerce/tokens';
import { tuiGetPaymentSystem } from '@taiga-ui/addon-commerce/utils';
import { CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
import { tuiControlValue } from '@taiga-ui/cdk/observables';
import { TuiIconPipe } from '@taiga-ui/core/components/icon';
import * as i2 from '@taiga-ui/core/components/input';
import { TuiWithInput } from '@taiga-ui/core/components/input';
import { tuiMaskito } from '@taiga-ui/kit/utils';
import { timer, switchMap, map, startWith, distinctUntilChanged, skip } from 'rxjs';
class TuiInputCardComponent {
constructor() {
this.icons = inject(TUI_PAYMENT_SYSTEM_ICONS);
this.control = inject(NgControl);
this.value = toSignal(timer(0).pipe(switchMap(() => tuiControlValue(this.control))), { initialValue: '' });
this.accessor = inject(DefaultValueAccessor, {
self: true,
optional: true,
});
this.mask = tuiMaskito(TUI_MASK_CARD);
this.image = computed((s = tuiGetPaymentSystem(this.value())) => (s && this.icons[s]) || '');
this.binChange = outputFromObservable(toObservable(this.value).pipe(map((v) => (v.length < 6 ? null : v.replace(' ', '').slice(0, 6))), startWith(null), distinctUntilChanged(), skip(1)));
}
ngOnInit() {
if (!this.accessor) {
return;
}
const onChanges = this.accessor.onChange.bind(this.accessor);
this.accessor.onChange = (value) => onChanges(value.replaceAll(CHAR_NO_BREAK_SPACE, ''));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputCardComponent, isStandalone: true, selector: "input[tuiInputCard]", outputs: { binChange: "binChange" }, host: { attributes: { "autocomplete": "cc-number", "inputmode": "numeric", "ngSkipHydration": "true", "placeholder": "0000 0000 0000 0000" } }, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithInput }], ngImport: i0, template: `
(image()) {
<img
*tuiTextfieldContent
alt=""
class="t-payment-system"
[src]="image() | tuiIcon"
/>
}
`, isInline: true, styles: ["tui-textfield:where(*[data-tui-version=\"5.9.0\"]) .t-payment-system:not(:first-child){display:none}tui-textfield:where(*[data-tui-version=\"5.9.0\"]) .t-payment-system{inline-size:1.5rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.9.0\"]) .t-payment-system{inline-size:2rem}\n"], dependencies: [{ kind: "pipe", type: TuiIconPipe, name: "tuiIcon" }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCardComponent, decorators: [{
type: Component,
args: [{ selector: 'input[tuiInputCard]', imports: [TuiIconPipe, TuiTextfieldContent], template: `
(image()) {
<img
*tuiTextfieldContent
alt=""
class="t-payment-system"
[src]="image() | tuiIcon"
/>
}
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [MaskitoDirective, TuiWithInput], host: {
autocomplete: 'cc-number',
inputmode: 'numeric',
ngSkipHydration: 'true',
placeholder: '0000 0000 0000 0000',
}, styles: ["tui-textfield:where(*[data-tui-version=\"5.9.0\"]) .t-payment-system:not(:first-child){display:none}tui-textfield:where(*[data-tui-version=\"5.9.0\"]) .t-payment-system{inline-size:1.5rem}tui-textfield[data-size=l]:where(*[data-tui-version=\"5.9.0\"]) .t-payment-system{inline-size:2rem}\n"] }]
}] });
class TuiInputCVCDirective {
constructor() {
this.mask = tuiMaskito(computed(() => TUI_MASK_CVC(this.length())));
this.hidden = input(true);
this.length = input(3);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCVCDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: TuiInputCVCDirective, isStandalone: true, selector: "input[tuiInputCVC]", inputs: { hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "autocomplete": "cc-csc", "inputmode": "numeric" }, listeners: { "copy.prevent": "(0)" }, properties: { "placeholder": "\"0\".repeat(length())", "style.-webkit-text-security": "hidden() ? \"disc\" : null" } }, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithInput }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputCVCDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputCVC]',
hostDirectives: [MaskitoDirective, TuiWithInput],
host: {
autocomplete: 'cc-csc',
inputmode: 'numeric',
'[placeholder]': '"0".repeat(length())',
'[style.-webkit-text-security]': 'hidden() ? "disc" : null',
'(copy.prevent)': '(0)',
},
}]
}] });
class TuiInputExpireDirective {
constructor() {
this.mask = tuiMaskito(TUI_MASK_EXPIRE);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputExpireDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: TuiInputExpireDirective, isStandalone: true, selector: "input[tuiInputExpire]", host: { attributes: { "autocomplete": "cc-exp", "inputmode": "numeric", "maxlength": "5", "name": "ccexpiryyear", "placeholder": "00/00", "translate": "no" } }, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithInput }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputExpireDirective, decorators: [{
type: Directive,
args: [{
selector: 'input[tuiInputExpire]',
hostDirectives: [MaskitoDirective, TuiWithInput],
host: {
autocomplete: 'cc-exp',
inputmode: 'numeric',
maxlength: '5',
name: 'ccexpiryyear',
placeholder: '00/00',
translate: 'no',
},
}]
}] });
const TuiInputCard = [
TuiInputCardComponent,
TuiInputCVCDirective,
TuiInputExpireDirective,
TuiLabel,
TuiTextfieldComponent,
TuiTextfieldOptionsDirective,
TuiDropdownContent,
];
/**
* Generated bundle index. Do not edit.
*/
export { TuiInputCVCDirective, TuiInputCard, TuiInputCardComponent, TuiInputExpireDirective };
//# sourceMappingURL=taiga-ui-addon-commerce-components-input-card.mjs.map