@progress/kendo-angular-inputs 8.0.8 → 9.0.0-next.202203161725

package/dist/es/slider/slider.component.js

@@ -1,482 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { Renderer2, Component, ElementRef, Input, ViewChild, forwardRef, NgZone, Injector, ChangeDetectorRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { fromEvent, interval, merge } from 'rxjs';
-import { filter, concatMap, startWith, takeUntil, take } from 'rxjs/operators';
-import { trimValue } from '../sliders-common/sliders-util';
-import { SliderModel } from './slider-model';
-import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
-import { areSame, isPresent, requiresZoneOnBlur } from '../common/utils';
-import { isButton, eventValue, decreaseValueToStep, increaseValueToStep } from '../sliders-common/sliders-util';
-import { invokeElementMethod } from '../common/dom-utils';
-import { guid, isDocumentAvailable, hasObservers, KendoInput, anyChanged, Keys } from '@progress/kendo-angular-common';
-import { SliderBase } from '../sliders-common/slider-base';
-var PRESSED = 'k-pressed';
-/**
- * Represents the [Kendo UI Slider component for Angular]({% slug overview_slider %}).
- */
-var SliderComponent = /** @class */ (function (_super) {
-    tslib_1.__extends(SliderComponent, _super);
-    function SliderComponent(localization, injector, renderer, ngZone, changeDetector, hostElement) {
-        var _this = _super.call(this, localization, injector, renderer, ngZone, changeDetector, hostElement) || this;
-        _this.localization = localization;
-        _this.injector = injector;
-        _this.renderer = renderer;
-        _this.ngZone = ngZone;
-        _this.changeDetector = changeDetector;
-        _this.hostElement = hostElement;
-        /**
-         * @hidden
-         */
-        _this.focusableId = "k-" + guid();
-        /**
-         * Determines if the animation will be played on value change.
-         * Regardless of this setting, no animation will be played during the initial rendering.
-         */
-        _this.animate = true;
-        /**
-         * Renders the arrow side buttons of the Slider ([see example]({% slug sidebuttons_slider %}#toc-hidden-state)).
-         * When `showButtons` is set to `false`, the buttons are not displayed.
-         */
-        _this.showButtons = true;
-        /**
-         * The current value of the Slider when it is initially displayed.
-         * The component can use either NgModel or the `value` binding but not both of them at the same time.
-         */
-        _this.value = _this.min;
-        _this.focusChangedProgrammatically = false;
-        /**
-         * @hidden
-         */
-        _this.onWrapClick = function (args) {
-            var target = args.target;
-            if (!_this.isDisabled && !(isButton(target) || isButton(target.parentNode))) {
-                var value = eventValue(args, _this.track.nativeElement, _this.getProps());
-                _this.changeValue(value);
-            }
-            invokeElementMethod(_this.draghandle, 'focus');
-        };
-        /**
-         * @hidden
-         */
-        _this.onKeyDown = function (e) {
-            var options = _this.getProps();
-            var max = options.max, min = options.min;
-            var handler = _this.keyBinding[e.keyCode];
-            if (_this.isDisabled || !handler) {
-                return;
-            }
-            var value = handler(options);
-            _this.changeValue(trimValue(max, min, value));
-            e.preventDefault();
-        };
-        _this.ngChange = function (_) { };
-        _this.ngTouched = function () { };
-        _this.decreaseValue = function () {
-            _this.changeValue(decreaseValueToStep(_this.value, _this.getProps()));
-        };
-        _this.increaseValue = function () {
-            _this.changeValue(increaseValueToStep(_this.value, _this.getProps()));
-        };
-        _this.handleBlur = function () {
-            _this.changeDetector.markForCheck();
-            _this.focused = false;
-            if (hasObservers(_this.onBlur) || requiresZoneOnBlur(_this.control)) {
-                _this.ngZone.run(function () {
-                    _this.ngTouched();
-                    if (!_this.focusChangedProgrammatically) {
-                        _this.onBlur.emit();
-                    }
-                });
-            }
-        };
-        return _this;
-    }
-    SliderComponent_1 = SliderComponent;
-    Object.defineProperty(SliderComponent.prototype, "tabIndex", {
-        get: function () {
-            return this.tabindex;
-        },
-        /**
-         * @hidden
-         */
-        set: function (tabIndex) {
-            this.tabindex = tabIndex;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SliderComponent.prototype, "currentValue", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return isPresent(this.value) ? this.value.toString() : '';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Focuses the Slider.
-     *
-     * @example
-     * ```ts-no-run
-     * _@Component({
-     * selector: 'my-app',
-     * template: `
-     *  <button (click)="slider.focus()">Focus</button>
-     *  <kendo-slider #slider></kendo-slider>
-     * `
-     * })
-     * class AppComponent { }
-     * ```
-     */
-    SliderComponent.prototype.focus = function () {
-        if (!this.disabled) {
-            this.focusChangedProgrammatically = true;
-            invokeElementMethod(this.draghandle, 'focus');
-            this.focusChangedProgrammatically = false;
-        }
-    };
-    /**
-     * Blurs the Slider.
-     */
-    SliderComponent.prototype.blur = function () {
-        this.focusChangedProgrammatically = true;
-        invokeElementMethod(this.draghandle, 'blur');
-        this.handleBlur();
-        this.focusChangedProgrammatically = false;
-    };
-    SliderComponent.prototype.ngOnChanges = function (changes) {
-        var _this = this;
-        if (anyChanged(['value', 'fixedTickWidth', 'tickPlacement'], changes, true)) {
-            this.ngZone.onStable.asObservable().pipe(take(1)).subscribe(function () {
-                _this.sizeComponent(false);
-            });
-        }
-    };
-    SliderComponent.prototype.ngAfterViewInit = function () {
-        var _this = this;
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (this.showButtons) {
-            this.setValueChangeInterval(this.increaseButton.nativeElement, function () { return _this.increaseValue(); });
-            this.setValueChangeInterval(this.decreaseButton.nativeElement, function () { return _this.decreaseValue(); });
-        }
-        this.sizeComponent(false);
-        if (this.ticks) {
-            this.ticks.tickElements
-                .changes
-                .subscribe(function () { return _this.sizeComponent(false); });
-        }
-        this.attachElementEventHandlers();
-    };
-    SliderComponent.prototype.ngOnDestroy = function () {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    };
-    Object.defineProperty(SliderComponent.prototype, "incrementMessage", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.incrementTitle || this.localizationService.get('increment');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SliderComponent.prototype, "decrementMessage", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.decrementTitle || this.localizationService.get('decrement');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SliderComponent.prototype, "dragHandleMessage", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.dragHandleTitle || this.localizationService.get('dragHandle');
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.handleDragPress = function (args) {
-        if (args.originalEvent) {
-            args.originalEvent.preventDefault();
-        }
-        this.renderer.removeClass(this.hostElement.nativeElement, 'k-slider-transitions');
-    };
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.onHandleDrag = function (args) {
-        this.dragging = true;
-        this.changeValue(eventValue(args, this.track.nativeElement, this.getProps()));
-    };
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.onHandleRelease = function () {
-        this.dragging = false; //needed for animation
-        this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
-    };
-    //ngModel binding
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.writeValue = function (value) {
-        this.changeDetector.markForCheck();
-        this.value = value;
-        this.sizeComponent(this.animate);
-    };
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.registerOnChange = function (fn) {
-        this.ngChange = fn;
-    };
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.registerOnTouched = function (fn) {
-        this.ngTouched = fn;
-    };
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.changeValue = function (value) {
-        var _this = this;
-        if (!areSame(this.value, value)) {
-            this.ngZone.run(function () {
-                _this.value = value;
-                _this.ngChange(value);
-                _this.valueChange.emit(value);
-                _this.sizeComponent(_this.animate);
-                _this.changeDetector.markForCheck();
-            });
-        }
-    };
-    /**
-     * @hidden
-     */
-    SliderComponent.prototype.sizeComponent = function (animate) {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        var wrapper = this.wrapper.nativeElement;
-        var track = this.track.nativeElement;
-        var selectionEl = this.sliderSelection.nativeElement;
-        var dragHandleEl = this.draghandle.nativeElement;
-        var ticks = this.ticks ? this.ticksContainer.nativeElement : null;
-        if (!animate) {
-            this.renderer.removeClass(this.hostElement.nativeElement, 'k-slider-transitions');
-        }
-        this.resetStyles([track, selectionEl, dragHandleEl, ticks, this.hostElement.nativeElement]);
-        var props = this.getProps();
-        var model = new SliderModel(props, wrapper, track, this.renderer);
-        model.resizeTrack();
-        if (this.ticks) { //for case when tickPlacement: none
-            model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(function (element) { return element.nativeElement; }));
-        }
-        model.positionHandle(dragHandleEl);
-        model.positionSelection(selectionEl);
-        if (!animate) {
-            this.hostElement.nativeElement.getBoundingClientRect();
-            this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
-        }
-        if (this.fixedTickWidth) {
-            model.resizeWrapper();
-        }
-    };
-    Object.defineProperty(SliderComponent.prototype, "focused", {
-        set: function (value) {
-            if (this.isFocused !== value && this.hostElement) {
-                this.isFocused = value;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SliderComponent.prototype, "dragging", {
-        set: function (value) {
-            if (this.isDragged !== value && this.sliderSelection && this.draghandle) {
-                var sliderSelection = this.sliderSelection.nativeElement;
-                var draghandle = this.draghandle.nativeElement;
-                if (value) {
-                    this.renderer.addClass(sliderSelection, PRESSED);
-                    this.renderer.addClass(draghandle, PRESSED);
-                }
-                else {
-                    this.renderer.removeClass(sliderSelection, PRESSED);
-                    this.renderer.removeClass(draghandle, PRESSED);
-                }
-                this.isDragged = value;
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    SliderComponent.prototype.setValueChangeInterval = function (element, callback) {
-        var _this = this;
-        this.ngZone.runOutsideAngular(function () {
-            var mousedown = fromEvent(element, 'mousedown');
-            var mouseup = fromEvent(element, 'mouseup');
-            var mouseout = fromEvent(element, 'mouseout');
-            var subscription = mousedown.pipe(filter(function (e) { return e.button === 0 && !_this.isDisabled; }), concatMap(function () {
-                return interval(150).pipe(startWith(-1), takeUntil(merge(mouseup, mouseout)));
-            })).subscribe(function () {
-                if (!_this.isFocused) {
-                    invokeElementMethod(_this.draghandle, 'focus');
-                }
-                callback();
-            });
-            _this.subscriptions.add(subscription);
-        });
-    };
-    SliderComponent.prototype.getProps = function () {
-        return {
-            buttons: this.showButtons,
-            disabled: this.disabled,
-            fixedTickWidth: this.fixedTickWidth,
-            largeStep: this.largeStep,
-            max: this.max,
-            min: this.min,
-            readonly: this.readonly,
-            reverse: this.reverse,
-            rtl: this.localizationService.rtl,
-            smallStep: this.smallStep,
-            value: trimValue(this.max, this.min, this.value),
-            vertical: this.vertical
-        };
-    };
-    SliderComponent.prototype.attachElementEventHandlers = function () {
-        var _this = this;
-        var hostElement = this.hostElement.nativeElement;
-        var tabbing = false;
-        var cursorInsideWrapper = false;
-        this.ngZone.runOutsideAngular(function () {
-            // focusIn and focusOut are relative to the host element
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusin', function () {
-                if (!_this.isFocused) {
-                    _this.ngZone.run(function () {
-                        if (!_this.focusChangedProgrammatically) {
-                            _this.onFocus.emit();
-                        }
-                        _this.focused = true;
-                    });
-                }
-            }));
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'focusout', function (args) {
-                if (!_this.isFocused) {
-                    return;
-                }
-                if (tabbing) {
-                    if (args.relatedTarget !== _this.draghandle.nativeElement) {
-                        _this.handleBlur();
-                    }
-                    tabbing = false;
-                }
-                else {
-                    if (!cursorInsideWrapper) {
-                        _this.handleBlur();
-                    }
-                }
-            }));
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'mouseenter', function () {
-                cursorInsideWrapper = true;
-            }));
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'mouseleave', function () {
-                cursorInsideWrapper = false;
-            }));
-            _this.subscriptions.add(_this.renderer.listen(hostElement, 'keydown', function (args) {
-                if (args.keyCode === Keys.Tab) {
-                    tabbing = true;
-                }
-                else {
-                    tabbing = false;
-                }
-            }));
-        });
-    };
-    var SliderComponent_1;
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], SliderComponent.prototype, "focusableId", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], SliderComponent.prototype, "dragHandleTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], SliderComponent.prototype, "incrementTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], SliderComponent.prototype, "animate", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", String)
-    ], SliderComponent.prototype, "decrementTitle", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Boolean)
-    ], SliderComponent.prototype, "showButtons", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], SliderComponent.prototype, "value", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number),
-        tslib_1.__metadata("design:paramtypes", [Number])
-    ], SliderComponent.prototype, "tabIndex", null);
-    tslib_1.__decorate([
-        ViewChild('draghandle', { static: true }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], SliderComponent.prototype, "draghandle", void 0);
-    tslib_1.__decorate([
-        ViewChild('decreaseButton', { static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], SliderComponent.prototype, "decreaseButton", void 0);
-    tslib_1.__decorate([
-        ViewChild('increaseButton', { static: false }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], SliderComponent.prototype, "increaseButton", void 0);
-    SliderComponent = SliderComponent_1 = tslib_1.__decorate([
-        Component({
-            exportAs: 'kendoSlider',
-            providers: [
-                LocalizationService,
-                { provide: L10N_PREFIX, useValue: 'kendo.slider' },
-                { multi: true, provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(function () { return SliderComponent_1; }) },
-                { provide: KendoInput, useExisting: forwardRef(function () { return SliderComponent_1; }) }
-            ],
-            selector: 'kendo-slider',
-            template: "\n        <ng-container kendoSliderLocalizedMessages\n            i18n-increment=\"kendo.slider.increment|The title of the **Increase** button of the Slider.\"\n            increment=\"increment\"\n            i18n-decrement=\"kendo.slider.decrement|The title of the **Decrease** button of the Slider.\"\n            decrement=\"decrement\"\n            i18n-dragHandle=\"kendo.slider.dragHandle|The title of the drag handle of the Slider.\"\n            dragHandle=\"Drag\"\n        >\n        <div class=\"k-slider-wrap\" #wrap\n            [class.k-slider-buttons]=\"showButtons\"\n            [class.k-slider-topleft]=\"tickPlacement === 'before'\"\n            [class.k-slider-bottomright]=\"tickPlacement === 'after'\"\n            [kendoEventsOutsideAngular]=\"{ click: onWrapClick, keydown: onKeyDown }\"\n            >\n            <button *ngIf=\"showButtons\" type=\"button\" #decreaseButton\n                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\"\n                [title]=\"decrementMessage\"\n                [attr.tabindex]=\"-1\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-w]=\"!vertical\"\n                        [class.k-i-arrow-s]=\"vertical\">\n                    </span>\n            </button>\n            <div class=\"k-slider-track-wrap\">\n                <ul kendoSliderTicks\n                    #ticks\n                    *ngIf=\"tickPlacement !== 'none'\"\n                    [tickTitle]=\"title\"\n                    [vertical]=\"vertical\"\n                    [step]=\"smallStep\"\n                    [largeStep]=\"largeStep\"\n                    [min]=\"min\"\n                    [max]=\"max\"\n                    [labelTemplate]=\"labelTemplate?.templateRef\"\n                    [attr.aria-hidden]=\"true\"\n                >\n                </ul>\n                <div #track class=\"k-slider-track\">\n                    <div #sliderSelection class=\"k-slider-selection\">\n                    </div>\n                    <a #draghandle\n                        role=\"slider\"\n                        [attr.aria-valuemin]=\"min\"\n                        [attr.aria-valuemax]=\"max\"\n                        [attr.aria-valuenow]=\"currentValue\"\n                        [attr.aria-valuetext]=\"currentValue\"\n                        [attr.aria-disabled]=\"disabled ? true : undefined\"\n                        [attr.aria-readonly]=\"readonly ? true : undefined\"\n                        [attr.aria-orientation]=\"vertical ? 'vertical' : 'horizontal'\"\n                        [style.touch-action]=\"isDisabled ? '' : 'none'\"\n                        class=\"k-draghandle\"\n                        [title]=\"dragHandleMessage\"\n                        [attr.tabindex]=\"disabled ? '-1' : tabIndex\"\n                        [id]=\"focusableId\"\n                        kendoDraggable\n                        (kendoPress)=\"ifEnabled(handleDragPress, $event)\"\n                        (kendoDrag)=\"ifEnabled(onHandleDrag, $event)\"\n                        (kendoRelease)=\"ifEnabled(onHandleRelease, $event)\"\n                    ></a>\n                </div>\n            </div>\n            <button *ngIf=\"showButtons\" type=\"button\" #increaseButton\n                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\"\n                [title]=\"incrementMessage\"\n                (click)=\"$event.preventDefault()\"\n                [attr.tabindex]=\"-1\"\n                [attr.aria-label]=\"currentValue\"\n                role=\"presentation\">\n                    <span class=\"k-button-icon k-icon\"\n                        [class.k-i-arrow-e]=\"!vertical\"\n                        [class.k-i-arrow-n]=\"vertical\">\n                    </span>\n            </button>\n            <kendo-resize-sensor (resize)=\"sizeComponent(false)\"></kendo-resize-sensor>\n        </div>\n  "
-        }),
-        tslib_1.__metadata("design:paramtypes", [LocalizationService,
-            Injector,
-            Renderer2,
-            NgZone,
-            ChangeDetectorRef,
-            ElementRef])
-    ], SliderComponent);
-    return SliderComponent;
-}(SliderBase));
-export { SliderComponent };

package/dist/es/sliders-common/label-template.directive.js

@@ -1,44 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as tslib_1 from "tslib";
-import { Directive, TemplateRef, Optional } from '@angular/core';
-/**
- * Represents the template for the labels of the Slider.
- * To define the labels template, nest an `<ng-template>` tag with the `kendoSliderLabelTemplate` directive inside
- * the `<kendo-slider>` tag. The template context is passed to the `label` value.
- *
- * @example
- * ```ts-no-run
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *         <kendo-slider [largeStep]="2">
- *           <ng-template kendoSliderLabelTemplate let-value="value">
- *             <b>{{value}}</b>
- *           </ng-template>
- *         </kendo-slider>
- *     `
- * })
- *
- * class AppComponent {
- * }
- *
- * ```
- */
-var LabelTemplateDirective = /** @class */ (function () {
-    function LabelTemplateDirective(templateRef) {
-        this.templateRef = templateRef;
-    }
-    LabelTemplateDirective = tslib_1.__decorate([
-        Directive({
-            selector: '[kendoSliderLabelTemplate]'
-        }),
-        tslib_1.__param(0, Optional()),
-        tslib_1.__metadata("design:paramtypes", [TemplateRef])
-    ], LabelTemplateDirective);
-    return LabelTemplateDirective;
-}());
-export { LabelTemplateDirective };