@progress/kendo-angular-inputs 7.5.1-dev.202110280909 → 7.5.3

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-inputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635411998,
+    publishDate: 1642518309,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/rangeslider/rangeslider-model.js

@@ -24,8 +24,7 @@ export class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.startHandlePosition}px`);
         }
@@ -35,8 +34,7 @@ export class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.endHandlePosition}px`);
         }
@@ -45,11 +43,10 @@ export class RangeSliderModel extends SliderModelBase {
         const { reverse, vertical } = this.props;
         const dimension = vertical ? 'height' : 'width';
         const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
-        const handleWidth = Math.floor(dragHandle.offsetWidth / 2);
         const size = Math.abs(this.endHandlePosition - this.startHandlePosition);
         const currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
         this.renderer.setStyle(selection, dimension, `${size}px`);
-        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) - handleWidth + 'px'
-            : parseFloat(currentSelectionPosition) + handleWidth + 'px');
+        this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) + 'px'
+            : parseFloat(currentSelectionPosition) + 'px');
     }
 }

package/dist/es2015/rangeslider/rangeslider.component.js

@@ -443,62 +443,63 @@ RangeSliderComponent = RangeSliderComponent_1 = tslib_1.__decorate([
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <ul kendoSliderTicks
-                #ticks
-                *ngIf="tickPlacement !== 'none'"
-                [tickTitle]="title"
-                [vertical]="vertical"
-                [step]="smallStep"
-                [largeStep]="largeStep"
-                [min]="min"
-                [max]="max"
-                [labelTemplate]="labelTemplate?.templateRef"
-                [attr.aria-hidden]="true"
-            >
-            </ul>
-            <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
+            <div class="k-slider-track-wrap">
+                <ul kendoSliderTicks
+                    #ticks
+                    *ngIf="tickPlacement !== 'none'"
+                    [tickTitle]="title"
+                    [vertical]="vertical"
+                    [step]="smallStep"
+                    [largeStep]="largeStep"
+                    [min]="min"
+                    [max]="max"
+                    [labelTemplate]="labelTemplate?.templateRef"
+                    [attr.aria-hidden]="true"
+                >
+                </ul>
+                <div #track class="k-slider-track">
+                    <div #sliderSelection class="k-slider-selection">
+                    </div>
+                    <a #draghandleStart
+                        role="slider"
+                        [id]="startHandleId"
+                        [attr.tabindex]="disabled ? undefined : tabindex"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="value ? value[0] : null"
+                        [attr.aria-valuetext]="valueText"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="textFor('dragHandleStart')"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress ,$event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
+                    <a #draghandleEnd
+                        role="slider"
+                        [id]="endHandleId"
+                        [attr.tabindex]="disabled ? undefined : tabindex"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="value ? value[1] : null"
+                        [attr.aria-valuetext]="valueText"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="textFor('dragHandleEnd')"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress ,$event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
                 </div>
-                <a #draghandleStart
-                    role="slider"
-                    [id]="startHandleId"
-                    [attr.tabindex]="disabled ? undefined : tabindex"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="value ? value[0] : null"
-                    [attr.aria-valuetext]="valueText"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="textFor('dragHandleStart')"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress ,$event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
-                <a #draghandleEnd
-                    role="slider"
-                    [id]="endHandleId"
-                    [attr.tabindex]="disabled ? undefined : tabindex"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="value ? value[1] : null"
-                    [attr.aria-valuetext]="valueText"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="textFor('dragHandleEnd')"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress ,$event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
             </div>
-
             <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
         </div>
   `

package/dist/es2015/shared/utils.d.ts

@@ -0,0 +1,16 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ *
+ * Returns true if the used browser is Safari.
+ */
+export declare const isSafari: (userAgent: any) => boolean;
+/**
+ * @hidden
+ *
+ * Checks if input is Japanese IME
+ */
+export declare const isJapanese: (input: any) => boolean;

package/dist/es2015/shared/utils.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { detectDesktopBrowser, detectMobileOS } from "@progress/kendo-common";
+/**
+ * @hidden
+ *
+ * Returns true if the used browser is Safari.
+ */
+export const isSafari = (userAgent) => {
+    return detectDesktopBrowser(userAgent).safari ||
+        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+/**
+ * @hidden
+ *
+ * Checks if input is Japanese IME
+ */
+export const isJapanese = (input) => {
+    const japaneseRegex = /[\u3000-\u303F]|[\u3040-\u309F]|[\u30A0-\u30FF]|[\uFF00-\uFFEF]|[\u4E00-\u9FAF]|[\u2605-\u2606]|[\u2190-\u2195]|\u203B/g;
+    return japaneseRegex.test(input);
+};

package/dist/es2015/slider/slider-model.d.ts

@@ -10,5 +10,5 @@ export declare class SliderModel extends SliderModelBase {
     protected tickSizes: number[];
     protected handlePosition: number;
     positionHandle(dragHandle: HTMLElement): void;
-    positionSelection(dragHandle: HTMLElement, selection: HTMLElement): void;
+    positionSelection(selection: HTMLElement): void;
 }

package/dist/es2015/slider/slider-model.js

@@ -18,16 +18,14 @@ export class SliderModel extends SliderModelBase {
             max,
             reverse,
             value,
-            trackWidth,
-            handleWidth: dragHandle.offsetWidth
+            trackWidth
         });
         this.renderer.setStyle(dragHandle, position, `${this.handlePosition}px`);
     }
-    positionSelection(dragHandle, selection) {
+    positionSelection(selection) {
         const { reverse, vertical } = this.props;
         const dimension = vertical ? 'height' : 'width';
-        const handleWidth = Math.floor(dragHandle.offsetWidth / 2);
-        let size = this.handlePosition + handleWidth;
+        let size = this.handlePosition;
         if (reverse) {
             size = this.trackWidth() - size;
         }

package/dist/es2015/slider/slider.component.js

@@ -268,7 +268,7 @@ let SliderComponent = SliderComponent_1 = class SliderComponent extends SliderBa
             model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => element.nativeElement));
         }
         model.positionHandle(dragHandleEl);
-        model.positionSelection(dragHandleEl, selectionEl);
+        model.positionSelection(selectionEl);
         if (!animate) {
             this.hostElement.nativeElement.getBoundingClientRect();
             this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
@@ -446,69 +446,66 @@ SliderComponent = SliderComponent_1 = tslib_1.__decorate([
             [class.k-slider-bottomright]="tickPlacement === 'after'"
             [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
             >
-            <span
-                #decreaseButton
-                *ngIf="showButtons"
-                class="k-button k-button-decrease"
+            <button *ngIf="showButtons" type="button" #decreaseButton
+                class="k-button-decrease k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="decrementMessage"
-                role="presentation"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-w]="!vertical"
-                    [class.k-i-arrow-s]="vertical"
+                [attr.tabindex]="-1"
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-w]="!vertical"
+                        [class.k-i-arrow-s]="vertical">
+                    </span>
+            </button>
+            <div class="k-slider-track-wrap">
+                <ul kendoSliderTicks
+                    #ticks
+                    *ngIf="tickPlacement !== 'none'"
+                    [tickTitle]="title"
+                    [vertical]="vertical"
+                    [step]="smallStep"
+                    [largeStep]="largeStep"
+                    [min]="min"
+                    [max]="max"
+                    [labelTemplate]="labelTemplate?.templateRef"
+                    [attr.aria-hidden]="true"
                 >
-                </span>
-            </span>
-            <span
-                *ngIf="showButtons"
-                #increaseButton
-                class="k-button k-button-increase"
+                </ul>
+                <div #track class="k-slider-track">
+                    <div #sliderSelection class="k-slider-selection">
+                    </div>
+                    <a #draghandle
+                        role="slider"
+                        [attr.aria-valuemin]="min"
+                        [attr.aria-valuemax]="max"
+                        [attr.aria-valuenow]="currentValue"
+                        [attr.aria-valuetext]="currentValue"
+                        [attr.aria-disabled]="disabled ? true : undefined"
+                        [attr.aria-readonly]="readonly ? true : undefined"
+                        [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+                        [style.touch-action]="isDisabled ? '' : 'none'"
+                        class="k-draghandle"
+                        [title]="dragHandleMessage"
+                        [attr.tabindex]="disabled ? '-1' : tabIndex"
+                        [id]="focusableId"
+                        kendoDraggable
+                        (kendoPress)="ifEnabled(handleDragPress, $event)"
+                        (kendoDrag)="ifEnabled(onHandleDrag, $event)"
+                        (kendoRelease)="ifEnabled(onHandleRelease, $event)"
+                    ></a>
+                </div>
+            </div>
+            <button *ngIf="showButtons" type="button" #increaseButton
+                class="k-button-increase k-button k-button-md k-rounded-full k-button-rectangle k-button-solid k-button-solid-base k-icon-button"
                 [title]="incrementMessage"
                 (click)="$event.preventDefault()"
+                [attr.tabindex]="-1"
                 [attr.aria-label]="currentValue"
-            >
-                <span class="k-icon"
-                    [class.k-i-arrow-e]="!vertical"
-                    [class.k-i-arrow-n]="vertical"
-                >
-                </span>
-            </span>
-            <ul kendoSliderTicks
-                #ticks
-                *ngIf="tickPlacement !== 'none'"
-                [tickTitle]="title"
-                [vertical]="vertical"
-                [step]="smallStep"
-                [largeStep]="largeStep"
-                [min]="min"
-                [max]="max"
-                [labelTemplate]="labelTemplate?.templateRef"
-                [attr.aria-hidden]="true"
-            >
-            </ul>
-            <div #track class="k-slider-track">
-                <div #sliderSelection class="k-slider-selection">
-                </div>
-                <a #draghandle
-                    role="slider"
-                    [attr.aria-valuemin]="min"
-                    [attr.aria-valuemax]="max"
-                    [attr.aria-valuenow]="currentValue"
-                    [attr.aria-valuetext]="currentValue"
-                    [attr.aria-disabled]="disabled ? true : undefined"
-                    [attr.aria-readonly]="readonly ? true : undefined"
-                    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-                    [style.touch-action]="isDisabled ? '' : 'none'"
-                    class="k-draghandle"
-                    [title]="dragHandleMessage"
-                    [attr.tabindex]="disabled ? '-1' : tabIndex"
-                    [id]="focusableId"
-                    kendoDraggable
-                    (kendoPress)="ifEnabled(handleDragPress, $event)"
-                    (kendoDrag)="ifEnabled(onHandleDrag, $event)"
-                    (kendoRelease)="ifEnabled(onHandleRelease, $event)"
-                ></a>
-            </div>
+                role="presentation">
+                    <span class="k-button-icon k-icon"
+                        [class.k-i-arrow-e]="!vertical"
+                        [class.k-i-arrow-n]="vertical">
+                    </span>
+            </button>
             <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
         </div>
   `

package/dist/es2015/sliders-common/slider-model.base.js

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { calculateTrackSize, calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
+import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
 import { subtract } from '../common/math';
 /**
  * @hidden
@@ -20,8 +20,10 @@ export class SliderModelBase {
     }
     resizeTrack() {
         const orientation = this.props.vertical ? 'height' : 'width';
+        const altOrientation = this.props.vertical ? 'width' : 'height';
         const trackWidth = this.trackWidth();
-        this.track.style[orientation] = `${trackWidth}px`;
+        this.track.parentElement.style[orientation] = `${trackWidth}px`;
+        this.track.parentElement.style[altOrientation] = '';
     }
     resizeTicks(ticksContainer, ticks) {
         const dimension = this.props.vertical ? "height" : "width";
@@ -32,22 +34,17 @@ export class SliderModelBase {
     }
     resizeWrapper() {
         const dimension = this.props.vertical ? "height" : "width";
-        const wrapperSize = this.elementSize(this.wrapper);
-        const trackWidth = calculateTrackSize(wrapperSize, this.elementOffset(this.track));
         const fixedTrackWidth = calculateFixedTrackSize(this.props);
         const wrapperParentEl = this.wrapper.parentElement;
-        if (trackWidth > fixedTrackWidth) {
-            wrapperParentEl.style[dimension] = `${wrapperSize - (trackWidth - fixedTrackWidth)}px`;
-        }
-        else {
-            wrapperParentEl.style[dimension] = `${wrapperSize + (fixedTrackWidth - trackWidth)}px`;
+        if (fixedTrackWidth) {
+            wrapperParentEl.style[dimension] = "auto";
         }
     }
     trackWidth() {
         if (this.props.fixedTickWidth) {
             return calculateFixedTrackSize(this.props);
         }
-        return calculateTrackSize(this.elementSize(this.wrapper), this.elementOffset(this.track), this.props.buttons);
+        return this.elementSize(this.track.parentElement);
     }
     getTickSizes() {
         const { min, max, smallStep } = this.props;

package/dist/es2015/sliders-common/slider-ticks.component.d.ts

@@ -7,7 +7,6 @@ import { ElementRef, OnChanges, QueryList, TemplateRef } from '@angular/core';
  * @hidden
  */
 export declare class SliderTicksComponent implements OnChanges {
-    private rtl;
     wrapperClasses: string;
     tickTitle: (value: number) => string;
     vertical: boolean;
@@ -18,7 +17,6 @@ export declare class SliderTicksComponent implements OnChanges {
     labelTemplate: TemplateRef<any>;
     tickElements: QueryList<ElementRef>;
     ticks: Array<any>;
-    constructor(rtl: boolean);
     ngOnChanges(_: any): void;
     private createTicks;
     private endTickClasses;

package/dist/es2015/sliders-common/slider-ticks.component.js

@@ -4,8 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 /* tslint:disable:component-selector */
-import { Component, Inject, Input, Optional, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
-import { RTL } from '@progress/kendo-angular-l10n';
+import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
 import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
 /**
  * @hidden
@@ -22,8 +21,10 @@ class SliderTick {
  * @hidden
  */
 let SliderTicksComponent = class SliderTicksComponent {
-    constructor(rtl) {
-        this.rtl = rtl;
+    /**
+     * @hidden
+     */
+    constructor() {
         this.wrapperClasses = 'k-reset k-slider-items';
         this.ticks = [];
     }
@@ -46,9 +47,6 @@ let SliderTicksComponent = class SliderTicksComponent {
                 result[i].classes['k-tick-large'] = true;
             }
         }
-        if (this.rtl || this.vertical) {
-            result = result.reverse();
-        }
         if (result.length > 0) {
             Object.assign(result[0].classes, this.endTickClasses(true));
             Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
@@ -120,8 +118,6 @@ SliderTicksComponent = tslib_1.__decorate([
         {{ tickTitle(value) }}
      </ng-template>
   `
-    }),
-    tslib_1.__param(0, Optional()), tslib_1.__param(0, Inject(RTL)),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
+    })
 ], SliderTicksComponent);
 export { SliderTicksComponent };

package/dist/es2015/sliders-common/sliders-util.d.ts

@@ -21,7 +21,7 @@ export declare const calculateValueFromTick: (index: number, { max, min, smallSt
 /**
  * @hidden
  */
-export declare const calculateHandlePosition: ({ handleWidth, trackWidth, min, max, reverse, value }: any) => number;
+export declare const calculateHandlePosition: ({ trackWidth, min, max, reverse, value }: any) => number;
 /**
  * @hidden
  */
@@ -95,7 +95,7 @@ declare const _default: {
     calculateValueFromTick: (index: number, { max, min, smallStep, reverse, vertical }: any) => number;
     calculateTrackSize: (wrapperWidth: number, offset: any, showButtons?: boolean) => number;
     calculateTicksCount: (min?: number, max?: number, smallStep?: number) => number;
-    calculateHandlePosition: ({ handleWidth, trackWidth, min, max, reverse, value }: any) => number;
+    calculateHandlePosition: ({ trackWidth, min, max, reverse, value }: any) => number;
     decreaseValueToStep: (value: number, { max, min, smallStep, largeStep }: any, large?: boolean) => number;
     decrement: (options: any) => number;
     decrementLarge: (options: any) => number;

package/dist/es2015/sliders-common/sliders-util.js

@@ -40,14 +40,13 @@ export const calculateValueFromTick = (index, { max, min, smallStep, reverse, ve
 /**
  * @hidden
  */
-export const calculateHandlePosition = ({ handleWidth, trackWidth, min, max, reverse, value }) => {
-    const halfHandleWidth = Math.floor(handleWidth / 2);
+export const calculateHandlePosition = ({ trackWidth, min, max, reverse, value }) => {
     const step = trackWidth / Math.abs(max - min);
     let pos = isPresent(value) ? step * (value - min) : min;
     if (reverse) {
         pos = trackWidth - pos;
     }
-    return Math.floor(pos - halfHandleWidth);
+    return Math.floor(pos);
 };
 /**
  * @hidden

package/dist/es2015/textbox/textbox.component.js

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var TextBoxComponent_1;
+import { isJapanese } from './../shared/utils';
 import { closest } from './../common/dom-utils';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { Component, ElementRef, forwardRef, Input, Output, EventEmitter, HostBinding, ViewChild, NgZone, ChangeDetectorRef, Injector, ContentChild, Renderer2 } from '@angular/core';
@@ -15,6 +16,7 @@ import { guid, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-co
 import { TextBoxSuffixTemplateDirective } from './textbox-suffix.directive';
 import { TextBoxPrefixTemplateDirective } from './textbox-prefix.directive';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { isSafari } from '../shared/utils';
 const FOCUSED = 'k-state-focused';
 let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
     constructor(localizationService, ngZone, changeDetector, renderer, injector, hostElement) {
@@ -197,7 +199,7 @@ let TextBoxComponent = TextBoxComponent_1 = class TextBoxComponent {
          * @hidden
          */
         this.handleInput = (ev) => {
-            let incomingValue = ev.target.value;
+            let incomingValue = isSafari(navigator.userAgent) && isJapanese(ev.target.value) ? ev.data : ev.target.value;
             this.updateValue(incomingValue);
         };
         this.ngChange = (_) => { };