@taiga-ui/kit/fesm2022/taiga-ui-kit-components-input-pin.mjs

Taiga UI Angular main components kit

import * as i0 from '@angular/core';
import { signal, inject, computed, Component, ChangeDetectionStrategy, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
import * as i1 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { TuiRepeatTimes } from '@taiga-ui/cdk/directives/repeat-times';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiIsNativeFocused } from '@taiga-ui/cdk/utils/focus';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldContent } from '@taiga-ui/core/components/textfield';
import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
import { tuiMaskito } from '@taiga-ui/kit/utils';

class TuiInputPin {
    constructor() {
        this.el = tuiInjectElement();
        this.mask = signal(/^\d+$/);
        this.appearance = inject(TUI_TEXTFIELD_OPTIONS).appearance;
        this.control = inject(NgControl);
        this.maskito = tuiMaskito(computed(() => ({
            mask: this.mask(),
            overwriteMode: 'replace',
        })));
    }
    set maskSetter(mask) {
        this.mask.set(tuiIsString(mask) ? new RegExp(mask) : mask);
    }
    onClick(index) {
        this.el.focus();
        this.el.setSelectionRange(index, index + 1);
    }
    onSelection() {
        if (this.el.selectionStart === this.el.maxLength) {
            this.el.setSelectionRange(this.el.maxLength - 1, this.el.maxLength);
        }
    }
    onArrow() {
        if (this.el.selectionStart === this.el.maxLength - 1 &&
            this.el.selectionEnd === this.el.maxLength) {
            this.el.setSelectionRange(this.el.maxLength - 2, this.el.maxLength - 2);
        }
    }
    isFocused(index) {
        return (tuiIsNativeFocused(this.el) &&
            (this.el.selectionStart === index ||
                (this.el.selectionStart === this.el.maxLength &&
                    index === this.el.maxLength - 1)));
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputPin, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputPin, isStandalone: true, selector: "input[tuiInputPin]", inputs: { maskSetter: ["mask", "maskSetter"] }, host: { attributes: { "ngSkipHydration": "true", "inputmode": "numeric", "spellcheck": "false" }, listeners: { "selectionchange": "onSelection()", "keydown.arrowLeft": "onArrow()" } }, hostDirectives: [{ directive: i1.MaskitoDirective }], ngImport: i0, template: "<div\n    *tuiTextfieldContent\n    class=\"t-wrapper\"\n>\n    <label\n        *tuiRepeatTimes=\"let index of el.maxLength\"\n        class=\"t-item\"\n        [tuiAppearance]=\"appearance()\"\n        [tuiAppearanceFocus]=\"isFocused(index)\"\n        [tuiAppearanceMode]=\"control.invalid && control.touched ? 'invalid' : null\"\n        (pointerdown.prevent)=\"onClick(index)\"\n    >\n        <span\n            class=\"t-value\"\n            [class.t-value_filled]=\"el.value[index]\"\n            [textContent]=\"el.value[index] || el.placeholder[index]\"\n        ></span>\n    </label>\n</div>\n", styles: ["@keyframes blink{50%{opacity:0}}:host{color:transparent;caret-color:transparent;background:transparent;border:none;outline:none}:host::selection{background:transparent}:host::placeholder{color:transparent!important}:host ::ng-deep+.t-content .t-clear{display:none!important}.t-wrapper{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;display:flex;gap:inherit;border-radius:inherit}.t-item{display:flex;flex:1;align-items:center;justify-content:center;border-radius:inherit;pointer-events:auto;cursor:text}.t-item[data-focus=true] .t-value_filled{background:var(--tui-service-selection-background)}.t-item[data-focus=true] .t-value_filled:before{display:none}.t-item[data-focus=true] .t-value:before{content:\"\";block-size:1em;border-inline-start:1px solid var(--tui-text-primary);animation:blink 1s steps(1) infinite}.t-value{color:var(--tui-text-tertiary)}.t-value_filled{color:var(--tui-text-primary)}\n"], dependencies: [{ kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: TuiRepeatTimes, selector: "[tuiRepeatTimes][tuiRepeatTimesOf]", inputs: ["tuiRepeatTimesOf"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputPin, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'input[tuiInputPin]', imports: [TuiAppearance, TuiRepeatTimes, TuiTextfieldContent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [MaskitoDirective], host: {
                        ngSkipHydration: 'true',
                        inputmode: 'numeric',
                        spellcheck: 'false',
                        '(selectionchange)': 'onSelection()',
                        '(keydown.arrowLeft)': 'onArrow()',
                    }, template: "<div\n    *tuiTextfieldContent\n    class=\"t-wrapper\"\n>\n    <label\n        *tuiRepeatTimes=\"let index of el.maxLength\"\n        class=\"t-item\"\n        [tuiAppearance]=\"appearance()\"\n        [tuiAppearanceFocus]=\"isFocused(index)\"\n        [tuiAppearanceMode]=\"control.invalid && control.touched ? 'invalid' : null\"\n        (pointerdown.prevent)=\"onClick(index)\"\n    >\n        <span\n            class=\"t-value\"\n            [class.t-value_filled]=\"el.value[index]\"\n            [textContent]=\"el.value[index] || el.placeholder[index]\"\n        ></span>\n    </label>\n</div>\n", styles: ["@keyframes blink{50%{opacity:0}}:host{color:transparent;caret-color:transparent;background:transparent;border:none;outline:none}:host::selection{background:transparent}:host::placeholder{color:transparent!important}:host ::ng-deep+.t-content .t-clear{display:none!important}.t-wrapper{position:absolute;top:0;left:0;inline-size:100%;block-size:100%;display:flex;gap:inherit;border-radius:inherit}.t-item{display:flex;flex:1;align-items:center;justify-content:center;border-radius:inherit;pointer-events:auto;cursor:text}.t-item[data-focus=true] .t-value_filled{background:var(--tui-service-selection-background)}.t-item[data-focus=true] .t-value_filled:before{display:none}.t-item[data-focus=true] .t-value:before{content:\"\";block-size:1em;border-inline-start:1px solid var(--tui-text-primary);animation:blink 1s steps(1) infinite}.t-value{color:var(--tui-text-tertiary)}.t-value_filled{color:var(--tui-text-primary)}\n"] }]
        }], propDecorators: { maskSetter: [{
                type: Input,
                args: ['mask']
            }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { TuiInputPin };
//# sourceMappingURL=taiga-ui-kit-components-input-pin.mjs.map