@progress/kendo-angular-inputs 21.4.1 → 22.0.0-develop.1

package/esm2022/maskedtextbox/maskedtextbox.component.mjs

@@ -1,876 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 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, ContentChild } from '@angular/core';
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
-import { EventsOutsideAngularDirective, guid, hasObservers, isChanged, isControlRequired, isObjectPresent, KendoInput, parseAttributes, PrefixTemplateDirective, removeHTMLAttributes, setHTMLAttributes, SuffixTemplateDirective } 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 { InputSeparatorComponent } from '../shared/input-separator.component';
-import { NgTemplateOutlet } from '@angular/common';
-import { SharedInputEventsDirective } from '../shared/shared-events.directive';
-import * as i0 from "@angular/core";
-import * as i1 from "./masking.service";
-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
- * ```typescript
- * import { Component } from '@angular/core';
- *
- * @Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-maskedtextbox
- *       [mask]="mask"
- *       [value]="value">
- *     </kendo-maskedtextbox>
- *   `
- * })
- * export class AppComponent {
- *   public value: string = "9580128055807792";
- *   public mask: string = "0000-0000-0000-0000";
- * }
- * ```
- */
-export class MaskedTextBoxComponent {
-    service;
-    renderer;
-    hostElement;
-    ngZone;
-    injector;
-    changeDetector;
-    /**
-     * @hidden
-     */
-    focusableId = `k-${guid()}`;
-    /**
-     * Disables the MaskedTextBox when you set it to `true` ([see example]({% slug disabled_maskedtextbox %})).
-     * To disable the component in reactive forms, see [Forms Support](slug:formssupport_maskedtextbox#toc-managing-the-maskedtextbox-disabled-state-in-reactive-forms).
-     * @default false
-     */
-    disabled = false;
-    /**
-     * When `true`, sets the MaskedTextBox to read-only mode ([see example]({% slug readonly_maskedtextbox %})).
-     * @default false
-     */
-    readonly = false;
-    /**
-     * Sets the `title` attribute of the input element.
-     */
-    title;
-    /**
-     * Sets the padding size of the MaskedTextBox input element ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
-     * @default 'medium'
-     */
-    set size(size) {
-        const newSize = size || DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
-    }
-    get size() {
-        return this._size;
-    }
-    /**
-     * Sets the border radius of the MaskedTextBox ([see example](slug:appearance_maskedtextbox#toc-roundness)).
-     * @default 'medium'
-     */
-    set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
-    }
-    get rounded() {
-        return this._rounded;
-    }
-    /**
-     * Sets the background and border style of the MaskedTextBox ([see example]({% slug appearance_maskedtextbox %}#toc-fill-mode)).
-     * @default 'solid'
-     */
-    set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
-    /**
-     * Sets the mask pattern for the MaskedTextBox ([see example]({% slug value_maskedtextbox %})).
-     * If you do not set a mask, the component acts as a standard `type="text"` input.
-     *
-     * If the mask allows spaces, set the [`promptPlaceholder`]({% slug api_inputs_maskedtextboxcomponent %}#toc-promptplaceholder)
-     * to a character that the mask does not accept.
-     */
-    mask;
-    /**
-     * Sets the value of the MaskedTextBox.
-     */
-    value;
-    /**
-     * Sets the RegExp-based mask validation rules ([see example]({% slug masks_maskedtextbox %})).
-     */
-    set rules(value) {
-        this._rules = { ...this.defaultRules, ...value };
-    }
-    get rules() {
-        return this._rules || this.defaultRules;
-    }
-    /**
-     * Sets the prompt character for the masked value.
-     * @default `_`
-     */
-    prompt = '_';
-    /**
-     * Sets the character that represents an empty position in the raw value.
-     * @default ' '
-     */
-    promptPlaceholder = ' ';
-    /**
-     * When `true` includes literals in the raw value ([see example]({% slug value_maskedtextbox %})).
-     * @default false
-     */
-    includeLiterals = false;
-    /**
-     * Shows the mask on focus when the value is empty.
-     */
-    maskOnFocus = false;
-    /**
-     * Enables the built-in mask validator when you set it to `true` ([see example]({% slug validation_maskedtextbox %})).
-     * @default true
-     */
-    maskValidation = true;
-    /**
-     * Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) attribute of the component.
-     */
-    tabindex = 0;
-    /**
-     * @hidden
-     */
-    set tabIndex(tabIndex) {
-        this.tabindex = tabIndex;
-    }
-    get tabIndex() {
-        return this.tabindex;
-    }
-    /**
-     * Sets HTML attributes for the inner input element.
-     * You cannot change attributes that are essential for component functionality.
-     */
-    set inputAttributes(attributes) {
-        if (isObjectPresent(this.parsedAttributes)) {
-            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
-        }
-        this._inputAttributes = attributes;
-        this.parsedAttributes = this.inputAttributes ?
-            parseAttributes(this.inputAttributes, this.defaultAttributes) :
-            this.inputAttributes;
-        this.setInputAttributes();
-    }
-    get inputAttributes() {
-        return this._inputAttributes;
-    }
-    get defaultAttributes() {
-        return {
-            id: this.focusableId,
-            disabled: this.disabled ? '' : null,
-            readonly: this.readonly ? '' : null,
-            tabindex: this.tabIndex,
-            'aria-invalid': this.isControlInvalid,
-            title: this.title,
-            required: this.isControlRequired ? '' : null
-        };
-    }
-    get mutableAttributes() {
-        return {
-            'aria-placeholder': this.mask,
-            autocomplete: 'off',
-            autocorrect: 'off',
-            autocapitalize: 'off',
-            spellcheck: 'false'
-        };
-    }
-    /**
-     * Fires when the MaskedTextBox gets focused.
-     *
-     * To subscribe programmatically, use the `onFocus` property.
-     *
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Fires when the MaskedTextBox gets blurred.
-     *
-     * To subscribe programmatically, use the `onBlur` property.
-     *
-     */
-    onBlur = new EventEmitter();
-    /**
-     * Fires when the input element gets focused.
-     */
-    inputFocus = new EventEmitter();
-    /**
-     * Fires when the input element gets blurred.
-     */
-    inputBlur = new EventEmitter();
-    /**
-     * Fires when the value changes.
-     */
-    valueChange = new EventEmitter();
-    direction;
-    hostClasses = true;
-    get hostDisabledClass() {
-        return this.disabled;
-    }
-    /**
-     * Returns the `ElementRef` of the visible `input` element.
-     */
-    input;
-    /**
-     * @hidden
-     */
-    suffixTemplate;
-    /**
-     * @hidden
-     */
-    prefixTemplate;
-    isFocused;
-    maskedValue;
-    focusClick = false;
-    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]/
-    };
-    _rules;
-    isPasted = false;
-    selection = [0, 0];
-    control;
-    _size = 'medium';
-    _rounded = 'medium';
-    _fillMode = 'solid';
-    _inputAttributes;
-    parsedAttributes = {};
-    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;
-        validatePackage(packageMetadata);
-        this.direction = rtl ? 'rtl' : 'ltr';
-        this.updateService();
-    }
-    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
-     */
-    handleFocus = () => {
-        this.ngZone.run(() => {
-            if (!this.focused && hasObservers(this.onFocus)) {
-                this.onFocus.emit();
-            }
-            this.focused = true;
-        });
-        if (this.maskOnFocus && this.emptyMask) {
-            this.updateInput(this.service.maskRaw(this.value));
-            this.ngZone.runOutsideAngular(() => {
-                setTimeout(() => { this.setSelection(0, 0); }, 0);
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    handleInputFocus = () => {
-        this.handleFocus();
-        if (hasObservers(this.inputFocus)) {
-            this.ngZone.run(() => {
-                this.inputFocus.emit();
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    handleClick = () => {
-        if (this.focused && !this.focusClick) {
-            this.focusClick = true;
-        }
-        if (this.promptPlaceholder === null || this.promptPlaceholder === '') {
-            const { selectionStart, selectionEnd } = this.input.nativeElement;
-            if (selectionStart === selectionEnd) {
-                this.setFocusSelection();
-            }
-        }
-    };
-    /**
-     * @hidden
-     */
-    handleBlur = () => {
-        this.changeDetector.markForCheck();
-        this.focused = false;
-        this.focusClick = false;
-        if (this.maskOnFocus && this.emptyMask) {
-            this.updateInput(this.maskedValue);
-        }
-        if (hasObservers(this.onBlur)) {
-            this.ngZone.run(() => {
-                this.onBlur.emit();
-            });
-        }
-        this.ngZone.run(() => {
-            if (this.control && !this.control.touched) {
-                this.onTouched();
-            }
-        });
-    };
-    /**
-     * @hidden
-     */
-    handleInputBlur = () => {
-        this.changeDetector.markForCheck();
-        if (hasObservers(this.inputBlur) || requiresZoneOnBlur(this.control)) {
-            this.ngZone.run(() => {
-                this.inputBlur.emit();
-            });
-        }
-    };
-    /**
-     * @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.focused = true;
-        this.setFocusSelection();
-    }
-    /**
-     * Blurs the MaskedTextBox.
-     */
-    blur() {
-        if (!this.input) {
-            return;
-        }
-        this.input.nativeElement.blur();
-        this.focused = false;
-    }
-    /**
-     * @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(this.value);
-        }
-        const next = this.extractChanges(changes);
-        this.updateService(next);
-        if (!this.mask) {
-            this.updateInput(this.value);
-            return;
-        }
-        const maskedValue = this.service.maskRaw(this.value);
-        this.updateInput(maskedValue, null, true);
-        if (changes['includeLiterals'] || isChanged('promptPlaceholder', changes)) {
-            resolvedPromise.then(() => {
-                this.updateValueWithEvents(this.maskedValue, false);
-            });
-        }
-    }
-    /**
-     * @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, false);
-        }
-        this.changeDetector.markForCheck();
-    }
-    /**
-     * @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.invalid;
-    }
-    /**
-     * @hidden
-     */
-    get isControlRequired() {
-        return isControlRequired(this.control?.control);
-    }
-    /**
-     * @hidden
-     */
-    updateValueWithEvents(maskedValue, callOnChange = true) {
-        const previousValue = this.value;
-        this.updateValue(maskedValue, callOnChange);
-        const valueChanged = this.value !== previousValue;
-        if (valueChanged && hasObservers(this.valueChange)) {
-            this.valueChange.emit(this.value);
-        }
-    }
-    onChange = (_) => { };
-    onTouched = () => { };
-    updateValue(value, callOnChange = true) {
-        if (this.mask && !this.service.validationValue(value) && !this.includeLiterals) {
-            this.value = '';
-        }
-        else {
-            this.value = this.service.rawValue(value);
-        }
-        callOnChange && 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();
-        }
-    }
-    /**
-     * @hidden
-     */
-    get focused() {
-        return this.isFocused;
-    }
-    /**
-     * @hidden
-     */
-    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) {
-        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);
-        }
-    }
-    setInputAttributes() {
-        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
-        setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MaskedTextBoxComponent, isStandalone: true, 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", inputAttributes: "inputAttributes" }, outputs: { onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", valueChange: "valueChange" }, host: { listeners: { "paste": "pasteHandler($event)", "input": "inputHandler($event)" }, properties: { "class.k-readonly": "this.readonly", "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)
-            }
-        ], queries: [{ propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], exportAs: ["kendoMaskedTextBox"], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container
-          kendoInputSharedEvents
-          [hostElement]="hostElement"
-          [(isFocused)]="focused"
-          (handleBlur)="handleBlur()"
-          (onFocus)="handleFocus()"
-          >
-          @if (prefixTemplate) {
-            <span class="k-input-prefix k-input-prefix-horizontal">
-              <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
-              </ng-template>
-            </span>
-          }
-          @if (prefixTemplate && prefixTemplate.showSeparator) {
-            <kendo-input-separator></kendo-input-separator>
-          }
-          <input #input
-            class="k-input-inner"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            [id]="focusableId"
-            [tabindex]="tabIndex"
-            [attr.title]="title"
-            [attr.aria-placeholder]="mask"
-            [attr.aria-invalid]="isControlInvalid"
-            [attr.required]="isControlRequired ? '' : null"
-            [disabled]="disabled"
-            [readonly]="readonly"
-                [kendoEventsOutsideAngular]="{
-                    focus: handleInputFocus,
-                    blur: handleInputBlur,
-                    click: handleClick,
-                    dragstart: handleDragDrop,
-                    drop: handleDragDrop
-                }"
-            />
-          @if (suffixTemplate && suffixTemplate.showSeparator) {
-            <kendo-input-separator></kendo-input-separator>
-          }
-          @if (suffixTemplate) {
-            <span class="k-input-suffix k-input-suffix-horizontal">
-              <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
-              </ng-template>
-            </span>
-          }
-        </ng-container>
-        `, isInline: true, dependencies: [{ kind: "directive", type: SharedInputEventsDirective, selector: "[kendoInputSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: `
-        <ng-container
-          kendoInputSharedEvents
-          [hostElement]="hostElement"
-          [(isFocused)]="focused"
-          (handleBlur)="handleBlur()"
-          (onFocus)="handleFocus()"
-          >
-          @if (prefixTemplate) {
-            <span class="k-input-prefix k-input-prefix-horizontal">
-              <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
-              </ng-template>
-            </span>
-          }
-          @if (prefixTemplate && prefixTemplate.showSeparator) {
-            <kendo-input-separator></kendo-input-separator>
-          }
-          <input #input
-            class="k-input-inner"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="false"
-            [id]="focusableId"
-            [tabindex]="tabIndex"
-            [attr.title]="title"
-            [attr.aria-placeholder]="mask"
-            [attr.aria-invalid]="isControlInvalid"
-            [attr.required]="isControlRequired ? '' : null"
-            [disabled]="disabled"
-            [readonly]="readonly"
-                [kendoEventsOutsideAngular]="{
-                    focus: handleInputFocus,
-                    blur: handleInputBlur,
-                    click: handleClick,
-                    dragstart: handleDragDrop,
-                    drop: handleDragDrop
-                }"
-            />
-          @if (suffixTemplate && suffixTemplate.showSeparator) {
-            <kendo-input-separator></kendo-input-separator>
-          }
-          @if (suffixTemplate) {
-            <span class="k-input-suffix k-input-suffix-horizontal">
-              <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
-              </ng-template>
-            </span>
-          }
-        </ng-container>
-        `,
-                    standalone: true,
-                    imports: [SharedInputEventsDirective, NgTemplateOutlet, InputSeparatorComponent, EventsOutsideAngularDirective]
-                }]
-        }], ctorParameters: () => [{ 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
-            }, {
-                type: HostBinding,
-                args: ['class.k-readonly']
-            }], 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
-            }], inputAttributes: [{
-                type: Input
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], inputFocus: [{
-                type: Output
-            }], inputBlur: [{
-                type: Output
-            }], 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 }]
-            }], suffixTemplate: [{
-                type: ContentChild,
-                args: [SuffixTemplateDirective]
-            }], prefixTemplate: [{
-                type: ContentChild,
-                args: [PrefixTemplateDirective]
-            }], pasteHandler: [{
-                type: HostListener,
-                args: ['paste', ['$event']]
-            }], inputHandler: [{
-                type: HostListener,
-                args: ['input', ['$event']]
-            }] } });