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

Taiga UI Angular main components kit

import { TuiLabel } from '@taiga-ui/core/components/label';
import { TUI_TEXTFIELD_OPTIONS, 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, input, ChangeDetectionStrategy, Component } from '@angular/core';
import { NgControl } from '@angular/forms';
import * as i1 from '@maskito/angular';
import { MaskitoDirective } from '@maskito/angular';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiIsFocused } from '@taiga-ui/cdk/utils/focus';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
import { tuiMaskito } from '@taiga-ui/kit/utils';

class TuiInputPinComponent {
    constructor() {
        this.el = tuiInjectElement();
        this.appearance = inject(TUI_TEXTFIELD_OPTIONS).appearance;
        this.control = inject(NgControl);
        this.maskito = tuiMaskito(computed(() => ({ mask: this.mask(), overwriteMode: 'replace' })));
        this.mask = input(/^\d+$/, {
            transform: (mask) => 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 - 1);
        }
    }
    isFocused(index) {
        return (tuiIsFocused(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: "19.2.21", ngImport: i0, type: TuiInputPinComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiInputPinComponent, isStandalone: true, selector: "input[tuiInputPin]", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "inputmode": "numeric", "ngSkipHydration": "true", "spellcheck": "false" }, listeners: { "pointerdown.prevent": "onClick(0)", "selectionchange": "onSelection()" } }, hostDirectives: [{ directive: i1.MaskitoDirective }], ngImport: i0, template: "<div\n    *tuiTextfieldContent\n    class=\"t-wrapper\"\n>\n    @for (_ of '-'.repeat(el.maxLength); track $index) {\n        <label\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    }\n</div>\n", styles: ["@keyframes blink{50%{opacity:0}}:host{position:absolute;inset:0;color:transparent;background:transparent;border:none;outline:none;--t-caret-color: rgba(255, 255, 255, .01);caret-color:var(--t-caret-color)}:host ::ng-deep+.t-content{gap:inherit!important}:host :host-context([tuiTheme=\"dark\"]){--t-caret-color: rgba(50, 50, 50, .01)}:host::selection{background:transparent}:host::placeholder{color:transparent!important}:host ::ng-deep+.t-content [tuiButtonX]{display:none!important}.t-wrapper{position:absolute;inset-block-start:0;inset-inline-start: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;margin-inline-start:.25rem}.t-item:first-child{pointer-events:none;margin:0}.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-secondary)}.t-value_filled{color:var(--tui-text-primary)}\n"], dependencies: [{ kind: "directive", type: TuiAppearance, selector: "[tuiAppearance]", inputs: ["tuiAppearance", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceMode"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiInputPinComponent, decorators: [{
            type: Component,
            args: [{ selector: 'input[tuiInputPin]', imports: [TuiAppearance, TuiTextfieldContent], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [MaskitoDirective], host: {
                        inputmode: 'numeric',
                        ngSkipHydration: 'true',
                        spellcheck: 'false',
                        '(pointerdown.prevent)': 'onClick(0)',
                        '(selectionchange)': 'onSelection()',
                    }, template: "<div\n    *tuiTextfieldContent\n    class=\"t-wrapper\"\n>\n    @for (_ of '-'.repeat(el.maxLength); track $index) {\n        <label\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    }\n</div>\n", styles: ["@keyframes blink{50%{opacity:0}}:host{position:absolute;inset:0;color:transparent;background:transparent;border:none;outline:none;--t-caret-color: rgba(255, 255, 255, .01);caret-color:var(--t-caret-color)}:host ::ng-deep+.t-content{gap:inherit!important}:host :host-context([tuiTheme=\"dark\"]){--t-caret-color: rgba(50, 50, 50, .01)}:host::selection{background:transparent}:host::placeholder{color:transparent!important}:host ::ng-deep+.t-content [tuiButtonX]{display:none!important}.t-wrapper{position:absolute;inset-block-start:0;inset-inline-start: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;margin-inline-start:.25rem}.t-item:first-child{pointer-events:none;margin:0}.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-secondary)}.t-value_filled{color:var(--tui-text-primary)}\n"] }]
        }] });

const TuiInputPin = [
    TuiInputPinComponent,
    TuiLabel,
    TuiTextfieldComponent,
    TuiTextfieldOptionsDirective,
    TuiDropdownContent,
];

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

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