@progress/kendo-angular-inputs 13.2.1-develop.11 → 13.2.1-develop.13

package/esm2020/maskedtextbox/maskedtextbox.component.mjs

@@ -0,0 +1,711 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, Optional, Output, Renderer2, ViewChild, forwardRef, NgZone, Injector, isDevMode, ChangeDetectorRef } from '@angular/core';
+import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { guid, hasObservers, isChanged, KendoInput } from '@progress/kendo-angular-common';
+import { RTL } from '@progress/kendo-angular-l10n';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { MaskingService } from './masking.service';
+import { invokeElementMethod } from '../common/dom-utils';
+import { requiresZoneOnBlur, isPresent, getStylingClasses } from '../common/utils';
+import * as i0 from "@angular/core";
+import * as i1 from "./masking.service";
+import * as i2 from "@progress/kendo-angular-common";
+const resolvedPromise = Promise.resolve(null);
+const FOCUSED = 'k-focus';
+const DEFAULT_SIZE = 'medium';
+const DEFAULT_ROUNDED = 'medium';
+const DEFAULT_FILL_MODE = 'solid';
+/**
+ * Represents the [Kendo UI MaskedTextBox component for Angular]({% slug overview_maskedtextbox %}).
+ *
+ * @example
+ * ```ts-no-run
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *      <kendo-maskedtextbox
+ *          [mask]="mask"
+ *          [value]="value">
+ *      </kendo-maskedtextbox>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *  public value: string = "9580128055807792";
+ *  public mask: string = "0000-0000-0000-0000";
+ * }
+ * ```
+ */
+export class MaskedTextBoxComponent {
+    constructor(service, renderer, hostElement, ngZone, injector, changeDetector, rtl) {
+        this.service = service;
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        this.ngZone = ngZone;
+        this.injector = injector;
+        this.changeDetector = changeDetector;
+        /**
+         * @hidden
+         */
+        this.focusableId = `k-${guid()}`;
+        /**
+         * Determines whether the MaskedTextBox is disabled ([see example]({% slug disabled_maskedtextbox %})).
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the MaskedTextBox is in its read-only state ([see example]({% slug readonly_maskedtextbox %})).
+         */
+        this.readonly = false;
+        /**
+         * Represents a prompt character for the masked value.
+         * @default `_`
+         */
+        this.prompt = '_';
+        /**
+         * Indicates a character which represents an empty position in the raw value.
+         * @default ' '
+         */
+        this.promptPlaceholder = ' ';
+        /**
+         * Indicates whether to include literals in the raw value  ([see example]({% slug value_maskedtextbox %})).
+         * @default false
+         */
+        this.includeLiterals = false;
+        /**
+         * Specifies if the mask should be shown on focus for empty value.
+         */
+        this.maskOnFocus = false;
+        /**
+         * Determines whether the built-in mask validator is enforced when a form is validated
+         * ([see example]({% slug validation_maskedtextbox %})).
+         * @default true
+         */
+        this.maskValidation = true;
+        /**
+         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         */
+        this.tabindex = 0;
+        /**
+         * Fires each time the user focuses the `input` element.
+         *
+         * > To wire the event programmatically, use the `onFocus` property.
+         *
+         * @example
+         * ```ts-no-run
+         * _@Component({
+         * selector: 'my-app',
+         * template: `
+         *  <kendo-maskedtextbox (focus)="handleFocus()"></kendo-maskedtextbox>
+         * `
+         * })
+         * class AppComponent {
+         *   public handleFocus(): void {
+         *      console.log("Component is focused");
+         *   }
+         * }
+         * ```
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the `input` element gets blurred.
+         *
+         * > To wire the event programmatically, use the `onBlur` property.
+         *
+         * @example
+         * ```ts-no-run
+         * _@Component({
+         * selector: 'my-app',
+         * template: `
+         *  <kendo-maskedtextbox (blur)="handleBlur()"></kendo-maskedtextbox>
+         * `
+         * })
+         * class AppComponent {
+         *   public handleBlur(): void {
+         *      console.log("Component is blurred");
+         *   }
+         * }
+         * ```
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the value changes.
+         */
+        this.valueChange = new EventEmitter();
+        this.hostClasses = true;
+        this.focusClick = false;
+        this.defaultRules = {
+            "#": /[\d\s\+\-]/,
+            "&": /[\S]/,
+            "0": /[\d]/,
+            "9": /[\d\s]/,
+            "?": /[a-zA-Z\s]/,
+            "A": /[a-zA-Z0-9]/,
+            "C": /./,
+            "L": /[a-zA-Z]/,
+            "a": /[a-zA-Z0-9\s]/
+        };
+        this.isPasted = false;
+        this.selection = [0, 0];
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        /**
+         * @hidden
+         */
+        this.handleFocus = () => {
+            this.focused = true;
+            if (this.maskOnFocus && this.emptyMask) {
+                this.updateInput(this.service.maskRaw(this.value));
+                this.ngZone.runOutsideAngular(() => {
+                    setTimeout(() => { this.setSelection(0, 0); }, 0);
+                });
+            }
+            if (hasObservers(this.onFocus)) {
+                this.ngZone.run(() => {
+                    this.onFocus.emit();
+                });
+            }
+        };
+        /**
+         * @hidden
+         */
+        this.handleClick = () => {
+            if (this.focused && !this.focusClick) {
+                this.focusClick = true;
+                const { selectionStart, selectionEnd } = this.input.nativeElement;
+                if (selectionStart === selectionEnd) {
+                    this.setFocusSelection();
+                }
+            }
+        };
+        /**
+         * @hidden
+         */
+        this.handleBlur = () => {
+            this.changeDetector.markForCheck();
+            this.focused = false;
+            this.focusClick = false;
+            if (this.maskOnFocus && this.emptyMask) {
+                this.updateInput(this.maskedValue);
+            }
+            if (hasObservers(this.onBlur) || requiresZoneOnBlur(this.control)) {
+                this.ngZone.run(() => {
+                    this.onTouched();
+                    this.onBlur.emit();
+                });
+            }
+        };
+        this.onChange = (_) => { };
+        this.onTouched = () => { };
+        validatePackage(packageMetadata);
+        this.direction = rtl ? 'rtl' : 'ltr';
+        this.updateService();
+    }
+    /**
+     * The size property specifies the padding of the MaskedTextBox internal input element
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the MaskedTextBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-rounded)).
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set rounded(rounded) {
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the MaskedTexBox
+     * ([see example]({% slug appearance_maskedtextbox %}#toc-fillMode)).
+     * The possible values are:
+     * * `flat`
+     * * `solid` (default)
+     * * `outline`
+     * * `none`
+     */
+    set fillMode(fillMode) {
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * Exposes the RegExp-based mask validation array ([see example]({% slug masks_maskedtextbox %})).
+     */
+    set rules(value) {
+        this._rules = Object.assign({}, this.defaultRules, value);
+    }
+    get rules() {
+        return this._rules || this.defaultRules;
+    }
+    /**
+     * @hidden
+     */
+    set tabIndex(tabIndex) {
+        this.tabindex = tabIndex;
+    }
+    get tabIndex() {
+        return this.tabindex;
+    }
+    get hostDisabledClass() {
+        return this.disabled;
+    }
+    ngOnInit() {
+        if (this.hostElement) {
+            this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        }
+        this.control = this.injector.get(NgControl, null);
+    }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the MaskedTextBox is empty.
+     */
+    isEmpty() {
+        if (this.input) {
+            return !this.input.nativeElement.value;
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleDragDrop() {
+        return false;
+    }
+    /**
+     * Focuses the MaskedTextBox.
+     *
+     * @example
+     * ```ts-no-run
+     * _@Component({
+     * selector: 'my-app',
+     * template: `
+     *  <button (click)="maskedinput.focus()">Focus the input</button>
+     *  <kendo-maskedtextbox #maskedinput></kendo-maskedtextbox>
+     * `
+     * })
+     * class AppComponent { }
+     * ```
+     */
+    focus() {
+        if (!this.input) {
+            return;
+        }
+        this.input.nativeElement.focus();
+        this.setFocusSelection();
+    }
+    /**
+     * Blurs the MaskedTextBox.
+     */
+    blur() {
+        if (!this.input) {
+            return;
+        }
+        this.input.nativeElement.blur();
+    }
+    /**
+     * @hidden
+     */
+    pasteHandler(e) {
+        const { selectionStart, selectionEnd } = e.target;
+        if (selectionEnd === selectionStart) {
+            return;
+        }
+        this.isPasted = true;
+        this.selection = [selectionStart, selectionEnd];
+    }
+    /**
+     * @hidden
+     */
+    inputHandler(e) {
+        const value = e.target.value;
+        const [start, end] = this.selection;
+        if (!this.mask) {
+            this.updateValueWithEvents(value);
+            this.isPasted = false;
+            return;
+        }
+        let result;
+        if (this.isPasted) {
+            this.isPasted = false;
+            const rightPart = this.maskedValue.length - end;
+            const to = value.length - rightPart;
+            result = this.service.maskInRange(value.slice(start, to), this.maskedValue, start, end);
+        }
+        else {
+            result = this.service.maskInput(value, this.maskedValue || '', e.target.selectionStart);
+        }
+        this.updateInput(result.value, result.selection);
+        this.updateValueWithEvents(result.value);
+    }
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes) {
+        if (changes['value']) {
+            this.value = this.normalizeValue();
+        }
+        if (!this.mask) {
+            this.updateInput(this.value);
+            return;
+        }
+        const next = this.extractChanges(changes);
+        this.updateService(next);
+        const maskedValue = this.service.maskRaw(this.value);
+        this.updateInput(maskedValue, null, true);
+        if (changes['includeLiterals'] || isChanged('promptPlaceholder', changes)) {
+            resolvedPromise.then(() => {
+                this.updateValueWithEvents(this.maskedValue);
+            });
+        }
+    }
+    /**
+     * @hidden
+     * Writes a new value to the element.
+     */
+    writeValue(value) {
+        this.value = this.normalizeValue(value);
+        this.updateInput(this.service.maskRaw(this.value));
+        if (this.includeLiterals) {
+            this.updateValue(this.maskedValue);
+        }
+    }
+    /**
+     * @hidden
+     * Sets the function that will be called when a `change` event is triggered.
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * @hidden
+     * Sets the function that will be called when a `touch` event is triggered.
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * @hidden
+     * Called when the status of the component changes to or from `disabled`.
+     * Depending on the value, it enables or disables the appropriate DOM element.
+     *
+     * @param isDisabled
+     */
+    setDisabledState(isDisabled) {
+        this.changeDetector.markForCheck();
+        this.disabled = isDisabled;
+    }
+    /**
+     * @hidden
+     */
+    validate(_) {
+        if (this.maskValidation === false || !this.mask) {
+            return null;
+        }
+        if (!this.service.validationValue(this.maskedValue)) {
+            return null;
+        }
+        if (this.maskedValue.indexOf(this.prompt) !== -1) {
+            return {
+                patternError: {
+                    mask: this.mask,
+                    maskedValue: this.maskedValue,
+                    value: this.value
+                }
+            };
+        }
+        return null;
+    }
+    /**
+     * @hidden
+     */
+    get isControlInvalid() {
+        return this.control && this.control.touched && !this.control.valid;
+    }
+    /**
+     * @hidden
+     */
+    updateValueWithEvents(maskedValue) {
+        this.updateValue(maskedValue);
+        if (hasObservers(this.valueChange)) {
+            this.valueChange.emit(this.value);
+        }
+    }
+    updateValue(value) {
+        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
+            this.value = '';
+        }
+        else {
+            this.value = this.service.rawValue(value);
+        }
+        this.onChange(this.value);
+    }
+    updateInput(maskedValue = '', selection, isFromOnChanges) {
+        if (isFromOnChanges && maskedValue === this.maskedValue) {
+            return;
+        }
+        this.maskedValue = maskedValue;
+        const value = this.maskOnFocus && !this.focused && this.emptyMask ? '' : maskedValue;
+        this.renderer.setProperty(this.input.nativeElement, "value", value);
+        if (selection !== undefined) {
+            this.setSelection(selection, selection);
+        }
+    }
+    extractChanges(changes) {
+        return Object.keys(changes).filter(key => key !== 'rules').reduce((obj, key) => {
+            obj[key] = changes[key].currentValue;
+            return obj;
+        }, {});
+    }
+    updateService(extra) {
+        const config = Object.assign({
+            includeLiterals: this.includeLiterals,
+            mask: this.mask,
+            prompt: this.prompt,
+            promptPlaceholder: this.promptPlaceholder,
+            rules: this.rules
+        }, extra);
+        this.service.update(config);
+    }
+    setSelection(start = this.selection[0], end = this.selection[1]) {
+        if (this.focused) {
+            invokeElementMethod(this.input, 'setSelectionRange', start, end);
+        }
+    }
+    get emptyMask() {
+        return this.service.maskRaw() === this.maskedValue;
+    }
+    setFocusSelection() {
+        const selectionStart = this.input.nativeElement.selectionStart;
+        const index = this.maskedValue ? this.maskedValue.indexOf(this.prompt) : 0;
+        if (index >= 0 && index < selectionStart) {
+            this.selection = [index, index];
+            this.setSelection();
+        }
+    }
+    get focused() {
+        return this.isFocused;
+    }
+    set focused(value) {
+        if (this.isFocused !== value && this.hostElement) {
+            const element = this.hostElement.nativeElement;
+            if (value) {
+                this.renderer.addClass(element, FOCUSED);
+            }
+            else {
+                this.renderer.removeClass(element, FOCUSED);
+            }
+            this.isFocused = value;
+        }
+    }
+    normalizeValue(value = this.value) {
+        const present = isPresent(value);
+        if (present && typeof value !== 'string') {
+            if (isDevMode()) {
+                throw new Error('The MaskedTextBox component supports only string values.');
+            }
+            return String(value);
+        }
+        return present ? value : '';
+    }
+    handleClasses(value, input) {
+        const elem = this.hostElement.nativeElement;
+        const classes = getStylingClasses('input', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+}
+MaskedTextBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, deps: [{ token: i1.MaskingService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: RTL, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MaskedTextBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MaskedTextBoxComponent, selector: "kendo-maskedtextbox", inputs: { focusableId: "focusableId", disabled: "disabled", readonly: "readonly", title: "title", size: "size", rounded: "rounded", fillMode: "fillMode", mask: "mask", value: "value", rules: "rules", prompt: "prompt", promptPlaceholder: "promptPlaceholder", includeLiterals: "includeLiterals", maskOnFocus: "maskOnFocus", maskValidation: "maskValidation", tabindex: "tabindex", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "attr.dir": "this.direction", "class.k-input": "this.hostClasses", "class.k-maskedtextbox": "this.hostClasses", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
+        MaskingService,
+        {
+            multi: true,
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
+        },
+        {
+            multi: true,
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
+        },
+        {
+            provide: KendoInput,
+            useExisting: forwardRef(() => MaskedTextBoxComponent)
+        }
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
+        <input type="text"
+            #input
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+            class="k-input-inner"
+            [id]="focusableId"
+            [tabindex]="tabIndex"
+            [attr.title]="title"
+            [attr.aria-placeholder]="mask"
+            [attr.aria-invalid]="isControlInvalid"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [kendoEventsOutsideAngular]="{
+                focus: handleFocus,
+                blur: handleBlur,
+                click: handleClick,
+                dragstart: handleDragDrop,
+                drop: handleDragDrop
+            }"
+        />
+    `, isInline: true, directives: [{ type: i2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MaskedTextBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoMaskedTextBox',
+                    providers: [
+                        MaskingService,
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
+                        },
+                        {
+                            multi: true,
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => MaskedTextBoxComponent) /* eslint-disable-line*/
+                        },
+                        {
+                            provide: KendoInput,
+                            useExisting: forwardRef(() => MaskedTextBoxComponent)
+                        }
+                    ],
+                    selector: 'kendo-maskedtextbox',
+                    template: `
+        <input type="text"
+            #input
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            spellcheck="false"
+            class="k-input-inner"
+            [id]="focusableId"
+            [tabindex]="tabIndex"
+            [attr.title]="title"
+            [attr.aria-placeholder]="mask"
+            [attr.aria-invalid]="isControlInvalid"
+            [disabled]="disabled"
+            [readonly]="readonly"
+            [kendoEventsOutsideAngular]="{
+                focus: handleFocus,
+                blur: handleBlur,
+                click: handleClick,
+                dragstart: handleDragDrop,
+                drop: handleDragDrop
+            }"
+        />
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.MaskingService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [RTL]
+                }] }]; }, propDecorators: { focusableId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], rounded: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], mask: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], rules: [{
+                type: Input
+            }], prompt: [{
+                type: Input
+            }], promptPlaceholder: [{
+                type: Input
+            }], includeLiterals: [{
+                type: Input
+            }], maskOnFocus: [{
+                type: Input
+            }], maskValidation: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], valueChange: [{
+                type: Output
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-input']
+            }, {
+                type: HostBinding,
+                args: ['class.k-maskedtextbox']
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], input: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], pasteHandler: [{
+                type: HostListener,
+                args: ['paste', ['$event']]
+            }], inputHandler: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });