@taiga-ui/addon-commerce
Version:
Extension package for Taiga UI related to commerce, payment systems, currencies etc.
106 lines (101 loc) • 5.84 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, signal, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output } from '@angular/core';
import { toSignal, 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 } from '@taiga-ui/addon-commerce/constants';
import { TUI_PAYMENT_SYSTEM_ICONS } from '@taiga-ui/addon-commerce/tokens';
import { CHAR_NO_BREAK_SPACE } from '@taiga-ui/cdk/constants';
import { tuiControlValue } from '@taiga-ui/cdk/observables';
import * as i2 from '@taiga-ui/core/components/textfield';
import { TuiTextfieldContent, TuiWithTextfield } from '@taiga-ui/core/components/textfield';
import { tuiInjectIconResolver } from '@taiga-ui/core/tokens';
import { tuiMaskito } from '@taiga-ui/kit/utils';
import { timer, switchMap, map, startWith, distinctUntilChanged, skip } from 'rxjs';
import { tuiGetPaymentSystem } from '@taiga-ui/addon-commerce/utils';
import { tuiProvideOptions } from '@taiga-ui/cdk/utils/miscellaneous';
const TUI_INPUT_CARD_DEFAULT_OPTIONS = {
icon: null,
paymentSystemHandler: tuiGetPaymentSystem,
autocomplete: false,
};
const TUI_INPUT_CARD_OPTIONS = new InjectionToken(ngDevMode ? 'TUI_INPUT_CARD_OPTIONS' : '', {
factory: () => TUI_INPUT_CARD_DEFAULT_OPTIONS,
});
function tuiInputCardOptionsProvider(options) {
return tuiProvideOptions(TUI_INPUT_CARD_OPTIONS, options, TUI_INPUT_CARD_DEFAULT_OPTIONS);
}
class TuiInputCard {
constructor() {
this.icons = inject(TUI_PAYMENT_SYSTEM_ICONS);
this.options = inject(TUI_INPUT_CARD_OPTIONS);
this.resolver = tuiInjectIconResolver();
this.control = inject(NgControl);
this.value = toSignal(timer(0).pipe(switchMap(() => tuiControlValue(this.control))), { initialValue: '' });
this.icon = signal(this.options.icon);
this.accessor = inject(DefaultValueAccessor, {
self: true,
optional: true,
});
this.mask = tuiMaskito(TUI_MASK_CARD);
this.image = computed(() => {
const system = this.options.paymentSystemHandler(this.value());
const icon = system && this.icons[system] && this.resolver(this.icons[system]);
const url = this.icon() || icon;
return url && this.icon() !== '' ? url : null;
});
/** @deprecated apparently "off" doesn't disable autocomplete */
this.autocomplete = this.options.autocomplete;
this.binChange = toObservable(this.value).pipe(map((value) => (value.length < 6 ? null : value.replace(' ', '').slice(0, 6))), startWith(null), distinctUntilChanged(), skip(1));
}
set iconValue(icon) {
this.icon.set(icon);
}
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: "16.2.12", ngImport: i0, type: TuiInputCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputCard, isStandalone: true, selector: "input[tuiInputCard]", inputs: { autocomplete: "autocomplete", iconValue: ["icon", "iconValue"] }, outputs: { binChange: "binChange" }, host: { attributes: { "inputmode": "numeric", "placeholder": "0000 0000 0000 0000", "ngSkipHydration": "true", "autocomplete": "cc-number" } }, hostDirectives: [{ directive: i1.MaskitoDirective }, { directive: i2.TuiWithTextfield }], ngImport: i0, template: `
<img
*tuiTextfieldContent
alt=""
class="t-payment-system"
[hidden]="!image()"
[src]="image()"
/>
`, isInline: true, styles: ["tui-textfield .t-payment-system{order:-1;inline-size:1.5rem}tui-textfield[data-size=l] .t-payment-system{inline-size:2rem}\n"], dependencies: [{ kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputCard, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'input[tuiInputCard]', imports: [TuiTextfieldContent], template: `
<img
*tuiTextfieldContent
alt=""
class="t-payment-system"
[hidden]="!image()"
[src]="image()"
/>
`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [MaskitoDirective, TuiWithTextfield], host: {
inputmode: 'numeric',
placeholder: '0000 0000 0000 0000',
ngSkipHydration: 'true',
autocomplete: 'cc-number',
}, styles: ["tui-textfield .t-payment-system{order:-1;inline-size:1.5rem}tui-textfield[data-size=l] .t-payment-system{inline-size:2rem}\n"] }]
}], propDecorators: { autocomplete: [{
type: Input
}], binChange: [{
type: Output
}], iconValue: [{
type: Input,
args: ['icon']
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_INPUT_CARD_DEFAULT_OPTIONS, TUI_INPUT_CARD_OPTIONS, TuiInputCard, tuiInputCardOptionsProvider };
//# sourceMappingURL=taiga-ui-addon-commerce-components-input-card.mjs.map