igniteui-webcomponents/components/mask-input/mask-input-base.js

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { property, state } from 'lit/decorators.js';
import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
import { IgcInputBaseComponent } from '../input/input-base.js';
import { MaskParser } from './mask-parser.js';
let IgcMaskInputBaseComponent = class IgcMaskInputBaseComponent extends IgcInputBaseComponent {
    constructor() {
        super(...arguments);
        this.parser = new MaskParser();
        this.selection = { start: 0, end: 0 };
        this.compositionStart = 0;
        this.focused = false;
        this.maskedValue = '';
        this._mask = '';
    }
    get inputSelection() {
        return {
            start: this.input.selectionStart || 0,
            end: this.input.selectionEnd || 0,
        };
    }
    get emptyMask() {
        return this.parser.apply();
    }
    connectedCallback() {
        super.connectedCallback();
        this._mask = this._mask || this.parser.mask;
        this.prompt = this.prompt || this.parser.prompt;
    }
    select() {
        this.input.select();
    }
    handleInput({ inputType, isComposing }) {
        const EMPTY = '';
        const value = this.input.value;
        const { start, end } = this.selection;
        const deleteEnd = this.parser.getNextNonLiteralPosition(end) + 1;
        switch (inputType) {
            case 'deleteContentForward':
                this.updateInput(EMPTY, { start, end: deleteEnd });
                return this.updateComplete.then(() => this.input.setSelectionRange(deleteEnd, deleteEnd));
            case 'deleteContentBackward':
                if (isComposing)
                    return;
                return this.updateInput(EMPTY, {
                    start: this.parser.getPreviousNonLiteralPosition(this.inputSelection.start),
                    end,
                });
            case 'deleteByCut':
                return this.updateInput(EMPTY, this.selection);
            case 'insertText':
                return this.updateInput(value.substring(start, this.inputSelection.end), this.selection);
            case 'insertFromPaste':
                return this.updateInput(value.substring(start, this.inputSelection.end), {
                    start,
                    end: this.inputSelection.start,
                });
            case 'insertFromDrop':
                return this.updateInput(value.substring(this.inputSelection.start, this.inputSelection.end), { ...this.inputSelection });
        }
    }
    handleKeydown({ key }) {
        if (!key) {
            return;
        }
        this.selection = this.inputSelection;
    }
    handleCut() {
        this.selection = this.inputSelection;
    }
    handleDragStart() {
        this.selection = this.inputSelection;
    }
    handleCompositionStart() {
        this.compositionStart = this.inputSelection.start;
    }
    handleCompositionEnd({ data }) {
        this.updateInput(data, {
            start: this.compositionStart,
            end: this.inputSelection.end,
        });
    }
    handleClick() {
        const { selectionStart: start, selectionEnd: end } = this.input;
        if (start === end && start === this.maskedValue.length) {
            this.select();
        }
    }
    setSelectionRange(start, end, direction) {
        super.setSelectionRange(start, end, direction);
        this.selection = { start, end };
    }
    setRangeText(replacement, start, end, selectMode) {
        const current = this.inputSelection;
        const _start = start ?? current.start;
        const _end = end ?? current.end;
        const result = this.parser.replace(this.maskedValue || this.emptyMask, replacement, _start, _end);
        this.maskedValue = this.parser.apply(this.parser.parse(result.value));
        this._updateSetRangeTextValue();
        this.updateComplete.then(() => {
            switch (selectMode) {
                case 'select':
                    this.setSelectionRange(_start, _end);
                    break;
                case 'start':
                    this.setSelectionRange(_start, _start);
                    break;
                case 'end':
                    this.setSelectionRange(_end, _end);
                    break;
                default:
                    this.setSelectionRange(current.start, current.end);
            }
        });
    }
};
__decorate([
    state()
], IgcMaskInputBaseComponent.prototype, "focused", void 0);
__decorate([
    state()
], IgcMaskInputBaseComponent.prototype, "maskedValue", void 0);
__decorate([
    state()
], IgcMaskInputBaseComponent.prototype, "_mask", void 0);
__decorate([
    property()
], IgcMaskInputBaseComponent.prototype, "prompt", void 0);
IgcMaskInputBaseComponent = __decorate([
    blazorDeepImport
], IgcMaskInputBaseComponent);
export { IgcMaskInputBaseComponent };
//# sourceMappingURL=mask-input-base.js.map