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

package/dist/fesm2015/index.js

@@ -10,7 +10,7 @@ import { take, filter, concatMap, startWith, takeUntil, skip, debounceTime, thro
 import { LocalizationService, L10N_PREFIX, RTL, ComponentMessages, MessageService } from '@progress/kendo-angular-l10n';
 import { Keys, guid, hasObservers, anyChanged, isDocumentAvailable, KendoInput, isChanged, DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
-import { browser, mobileOS } from '@progress/kendo-common';
+import { browser, mobileOS, detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { CommonModule } from '@angular/common';
 import { PopupService, PopupModule } from '@progress/kendo-angular-popup';
@@ -113,15 +113,6 @@ const remainder = (dividend, divisor) => {
  * @hidden
  */
 const calculateFixedTrackSize = ({ max, min, smallStep, fixedTickWidth }) => ((max - min) / smallStep) * fixedTickWidth;
-/**
- * @hidden
- */
-const calculateTrackSize = (wrapperWidth, offset, showButtons = true) => {
-    const BUTTONS_COUNT = 2;
-    const trackOffset = showButtons ? parseFloat(offset) * BUTTONS_COUNT : 0;
-    const trackWidth = wrapperWidth - trackOffset;
-    return Math.floor(trackWidth);
-};
 /**
  * @hidden
  */
@@ -144,14 +135,13 @@ const calculateValueFromTick = (index, { max, min, smallStep, reverse, vertical
 /**
  * @hidden
  */
-const calculateHandlePosition = ({ handleWidth, trackWidth, min, max, reverse, value }) => {
-    const halfHandleWidth = Math.floor(handleWidth / 2);
+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
@@ -314,8 +304,10 @@ 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";
@@ -326,22 +318,17 @@ 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;
@@ -403,16 +390,14 @@ 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;
         }
@@ -459,7 +444,7 @@ 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'
 };
@@ -1031,7 +1016,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');
@@ -1209,69 +1194,66 @@ SliderComponent = SliderComponent_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>
   `
@@ -1303,8 +1285,7 @@ class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.startHandlePosition}px`);
         }
@@ -1314,8 +1295,7 @@ class RangeSliderModel extends SliderModelBase {
                 max,
                 reverse,
                 value,
-                trackWidth,
-                handleWidth: dragHandle.offsetWidth
+                trackWidth
             });
             this.renderer.setStyle(dragHandle, position, `${this.endHandlePosition}px`);
         }
@@ -1324,12 +1304,11 @@ 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');
     }
 }
 
@@ -1762,62 +1741,63 @@ RangeSliderComponent = RangeSliderComponent_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>
   `
@@ -4992,8 +4972,10 @@ class SliderTick {
  * @hidden
  */
 let SliderTicksComponent = class SliderTicksComponent {
-    constructor(rtl) {
-        this.rtl = rtl;
+    /**
+     * @hidden
+     */
+    constructor() {
         this.wrapperClasses = 'k-reset k-slider-items';
         this.ticks = [];
     }
@@ -5016,9 +4998,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));
@@ -5090,9 +5069,7 @@ SliderTicksComponent = __decorate([
         {{ tickTitle(value) }}
      </ng-template>
   `
-    }),
-    __param(0, Optional()), __param(0, Inject(RTL)),
-    __metadata("design:paramtypes", [Boolean])
+    })
 ], SliderTicksComponent);
 
 /**
@@ -5576,6 +5553,25 @@ MaskedTextBoxModule = __decorate([
     })
 ], MaskedTextBoxModule);
 
+/**
+ * @hidden
+ *
+ * Returns true if the used browser is Safari.
+ */
+const isSafari = (userAgent) => {
+    return detectDesktopBrowser(userAgent).safari ||
+        (detectMobileOS(userAgent) && detectMobileOS(userAgent).browser === 'mobilesafari');
+};
+/**
+ * @hidden
+ *
+ * Checks if input is Japanese IME
+ */
+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);
+};
+
 /**
  * Specifies the adornments in the suffix container ([see examples]({% slug adornments_textbox %}#toc-suffixadornments)).
  *  @example
@@ -5819,7 +5815,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 = (_) => { };