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

package/esm2020/slider.module.mjs

@@ -0,0 +1,73 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SliderComponent } from './slider/slider.component';
+import { SlidersCommonModule } from './sliders-common/sliders-common.module';
+import { LocalizedSliderMessagesDirective } from './slider/localization/localized-slider-messages.directive';
+import { SliderCustomMessagesComponent } from './slider/localization/custom-messages.component';
+import { LabelTemplateDirective } from './sliders-common/label-template.directive';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
+import * as i0 from "@angular/core";
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
+ * definition for the Slider component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Inputs module
+ * import { SliderModule } from '@progress/kendo-angular-inputs';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ * import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, BrowserAnimationsModule, SliderModule], // import Slider module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+export class SliderModule {
+}
+SliderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SliderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderModule, declarations: [SliderComponent,
+        SliderCustomMessagesComponent,
+        LocalizedSliderMessagesDirective], imports: [CommonModule, SlidersCommonModule, IconsModule, ButtonModule], exports: [SliderComponent,
+        SliderCustomMessagesComponent,
+        LabelTemplateDirective,
+        LocalizedSliderMessagesDirective] });
+SliderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderModule, imports: [[CommonModule, SlidersCommonModule, IconsModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SliderComponent,
+                        SliderCustomMessagesComponent,
+                        LocalizedSliderMessagesDirective
+                    ],
+                    exports: [
+                        SliderComponent,
+                        SliderCustomMessagesComponent,
+                        LabelTemplateDirective,
+                        LocalizedSliderMessagesDirective
+                    ],
+                    imports: [CommonModule, SlidersCommonModule, IconsModule, ButtonModule]
+                }]
+        }] });

package/esm2020/sliders-common/label-template.directive.mjs

@@ -0,0 +1,45 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, TemplateRef, Optional } from '@angular/core';
+import * as i0 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 {
+ * }
+ *
+ * ```
+ */
+export class LabelTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+LabelTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+LabelTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LabelTemplateDirective, selector: "[kendoSliderLabelTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoSliderLabelTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2020/sliders-common/slider-base.mjs

@@ -0,0 +1,255 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { increment, decrement, incrementLarge, decrementLarge, identity } from './sliders-util';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Input, Output, EventEmitter, HostBinding, Injector, Renderer2, NgZone, ChangeDetectorRef, ElementRef, ViewChild, ContentChild, Component } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NgControl } from '@angular/forms';
+import { Keys } from '@progress/kendo-angular-common';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+import { LabelTemplateDirective } from './label-template.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export class SliderBase {
+    constructor(localizationService, injector, renderer, ngZone, changeDetector, hostElement) {
+        this.localizationService = localizationService;
+        this.injector = injector;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.changeDetector = changeDetector;
+        this.hostElement = hostElement;
+        /**
+         * Defines the title of the ticks ([see example]({% slug ticks_slider %}#toc-titles)). The default title
+         * for each tick is its Slider value. If you use a callback function, the function accepts an argument
+         * that holds the value of the component and returns a string with the new title.
+         */
+        this.title = identity;
+        /**
+         * Denotes the location of the tick marks in the Slider ([see example]({% slug ticks_slider %}#toc-placement)).
+         *
+         * The available options are:
+         * * `before`—The tick marks are located to the top side of the horizontal track or to the left side of a vertical track.
+         * * `after`—The tick marks are located to the bottom side of the horizontal track or to the right side of the vertical track.
+         * * `both`— (Default) The tick marks are located on both sides of the track.
+         * * `none`—The tick marks are not visible. The actual elements are not added to the DOM tree.
+         */
+        this.tickPlacement = 'both';
+        /**
+         * If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
+         * ([see example]({% slug orientation_slider %})).
+         */
+        this.vertical = false;
+        /**
+         * The minimum value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
+         * The attribute accepts both integers and floating-point numbers.
+         */
+        this.min = 0;
+        /**
+         * The maximum value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
+         * The attribute accepts both integers and floating-point numbers.
+         */
+        this.max = 10;
+        /**
+         * The step value of the Slider ([see example]({% slug predefinedsteps_slider %}#toc-small-steps)).
+         * Accepts positive values only. Can be an integer or a floating-point number.
+         */
+        this.smallStep = 1;
+        /**
+         * Specifies that every n<sup>th</sup> tick will be large and will have a label
+         * ([see example]({% slug predefinedsteps_slider %}#toc-large-steps)).
+         * Accepts positive integer values only.
+         */
+        this.largeStep = null;
+        /**
+         * Determines whether the Slider is disabled ([see example]({% slug disabledstate_slider %})).
+         */
+        this.disabled = false;
+        /**
+         * Determines whether the Slider is in its read-only state ([see example]({% slug readonly_slider %})).
+         */
+        this.readonly = false;
+        /**
+         * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Slider.
+         */
+        this.tabindex = 0;
+        /**
+         * Fires each time the user focuses the component.
+         */
+        this.onFocus = new EventEmitter();
+        /**
+         * Fires each time the component is blurred.
+         */
+        this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user selects a new value.
+         */
+        this.valueChange = new EventEmitter();
+        this.sliderClass = true;
+        this.subscriptions = new Subscription();
+        /**
+         * @hidden
+         */
+        this.ifEnabled = (callback, event) => {
+            if (!this.isDisabled) {
+                callback.call(this, event);
+            }
+        };
+        validatePackage(packageMetadata);
+        this.direction = localizationService.rtl ? 'rtl' : 'ltr';
+    }
+    get horizontalClass() {
+        return !this.vertical;
+    }
+    get verticalClass() {
+        return this.vertical;
+    }
+    get disabledClass() {
+        return this.disabled;
+    }
+    /**
+     * @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;
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.localizationService
+            .changes
+            .subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+            this.sizeComponent();
+        }));
+        if (this.hostElement) {
+            this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
+        }
+        this.control = this.injector.get(NgControl, null);
+    }
+    /**
+     * @hidden
+     */
+    get isDisabled() {
+        return this.disabled || this.readonly;
+    }
+    /**
+     * @hidden
+     * Used by the FloatingLabel to determine if the component is empty.
+     */
+    isEmpty() {
+        return false;
+    }
+    get reverse() {
+        return this.localizationService.rtl && !this.vertical;
+    }
+    get keyBinding() {
+        const reverse = this.reverse;
+        return {
+            [Keys.ArrowLeft]: reverse ? increment : decrement,
+            [Keys.ArrowRight]: reverse ? decrement : increment,
+            [Keys.ArrowDown]: decrement,
+            [Keys.ArrowUp]: increment,
+            [Keys.PageUp]: incrementLarge,
+            [Keys.PageDown]: decrementLarge,
+            [Keys.Home]: ({ min }) => min,
+            [Keys.End]: ({ max }) => max
+        };
+    }
+    resetStyles(elements) {
+        elements.forEach(el => {
+            if (el) {
+                if (this.vertical) {
+                    this.renderer.removeStyle(el, 'width');
+                    this.renderer.removeStyle(el, 'left');
+                    this.renderer.removeStyle(el, 'right');
+                }
+                else {
+                    this.renderer.removeStyle(el, 'height');
+                    this.renderer.removeStyle(el, 'bottom');
+                }
+                this.renderer.removeStyle(el, 'padding-top');
+            }
+        });
+    }
+}
+SliderBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderBase, deps: [{ token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SliderBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SliderBase, selector: "kendo-slider-base", inputs: { title: "title", tickPlacement: "tickPlacement", vertical: "vertical", min: "min", max: "max", smallStep: "smallStep", largeStep: "largeStep", fixedTickWidth: "fixedTickWidth", disabled: "disabled", readonly: "readonly", tabindex: "tabindex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "attr.dir": "this.direction", "class.k-slider-horizontal": "this.horizontalClass", "class.k-slider-vertical": "this.verticalClass", "class.k-slider": "this.sliderClass", "class.k-disabled": "this.disabledClass" } }, queries: [{ propertyName: "labelTemplate", first: true, predicate: LabelTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrap"], descendants: true, static: true }, { propertyName: "track", first: true, predicate: ["track"], descendants: true, static: true }, { propertyName: "sliderSelection", first: true, predicate: ["sliderSelection"], descendants: true, static: true }, { propertyName: "ticksContainer", first: true, predicate: ["ticks"], descendants: true, read: ElementRef }, { propertyName: "ticks", first: true, predicate: ["ticks"], descendants: true }], ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-slider-base',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], tickPlacement: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], smallStep: [{
+                type: Input
+            }], largeStep: [{
+                type: Input
+            }], fixedTickWidth: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], tabindex: [{
+                type: Input
+            }], onFocus: [{
+                type: Output,
+                args: ['focus']
+            }], onBlur: [{
+                type: Output,
+                args: ['blur']
+            }], valueChange: [{
+                type: Output
+            }], direction: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], horizontalClass: [{
+                type: HostBinding,
+                args: ['class.k-slider-horizontal']
+            }], verticalClass: [{
+                type: HostBinding,
+                args: ['class.k-slider-vertical']
+            }], sliderClass: [{
+                type: HostBinding,
+                args: ['class.k-slider']
+            }], disabledClass: [{
+                type: HostBinding,
+                args: ['class.k-disabled']
+            }], wrapper: [{
+                type: ViewChild,
+                args: ['wrap', { static: true }]
+            }], track: [{
+                type: ViewChild,
+                args: ['track', { static: true }]
+            }], sliderSelection: [{
+                type: ViewChild,
+                args: ['sliderSelection', { static: true }]
+            }], ticksContainer: [{
+                type: ViewChild,
+                args: ['ticks', { read: ElementRef, static: false }]
+            }], ticks: [{
+                type: ViewChild,
+                args: ['ticks', { static: false }]
+            }], labelTemplate: [{
+                type: ContentChild,
+                args: [LabelTemplateDirective, { static: false }]
+            }] } });

package/esm2020/sliders-common/slider-model.base.mjs

@@ -0,0 +1,93 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
+import { subtract } from '../common/math';
+/**
+ * @hidden
+ */
+export class SliderModelBase {
+    constructor(props, wrapper, track, renderer) {
+        this.props = props;
+        this.wrapper = wrapper;
+        this.track = track;
+        this.renderer = renderer;
+        this.props = props;
+        this.wrapper = wrapper;
+        this.track = track;
+        this.tickSizes = this.getTickSizes();
+    }
+    resizeTrack() {
+        const orientation = this.props.vertical ? 'height' : 'width';
+        const altOrientation = this.props.vertical ? 'width' : 'height';
+        const trackWidth = this.trackWidth();
+        this.track.parentElement.style[orientation] = `${trackWidth}px`;
+        this.track.parentElement.style[altOrientation] = '';
+    }
+    resizeTicks(ticksContainer, ticks) {
+        const dimension = this.props.vertical ? "height" : "width";
+        [...ticks].map((tick, index) => tick.style[dimension] = `${this.tickSizes[index]}px`);
+        if (this.props.vertical) {
+            this.adjustPadding(ticksContainer);
+        }
+    }
+    resizeWrapper() {
+        const dimension = this.props.vertical ? "height" : "width";
+        const fixedTrackWidth = calculateFixedTrackSize(this.props);
+        const wrapperParentEl = this.wrapper.parentElement;
+        if (fixedTrackWidth) {
+            wrapperParentEl.style[dimension] = "auto";
+        }
+    }
+    trackWidth() {
+        if (this.props.fixedTickWidth) {
+            return calculateFixedTrackSize(this.props);
+        }
+        return this.elementSize(this.track.parentElement);
+    }
+    getTickSizes() {
+        const { min, max, smallStep } = this.props;
+        const count = calculateTicksCount(min, max, smallStep);
+        const trackSize = this.trackWidth();
+        const distStep = trackSize / subtract(max, min);
+        const result = [];
+        let usedSpace = 0;
+        let endPoint = 0;
+        for (let i = 0; i < count; i++) {
+            if (i === 0 || i === count - 1) {
+                endPoint += (smallStep / 2) * distStep;
+            }
+            else {
+                endPoint += smallStep * distStep;
+            }
+            // ensure that the sum of the tick sizes does not exceed the track width
+            endPoint = +endPoint.toFixed(2) - 0.01;
+            const size = Math.round(endPoint - usedSpace);
+            result.push(size);
+            usedSpace += size;
+        }
+        if (usedSpace >= trackSize) {
+            result[result.length - 1] -= 1;
+        }
+        return result;
+    }
+    adjustPadding(ticksContainer) {
+        const totalTickSize = this.tickSizes.reduce((prev, curr) => prev + curr, 0);
+        const trackWidth = this.trackWidth();
+        const reminder = trackWidth - totalTickSize;
+        if (reminder !== 0) {
+            const padding = reminder + this.elementOffset(this.track);
+            ticksContainer.style.paddingTop = `${padding}px`;
+        }
+    }
+    elementOffset(element) {
+        const { vertical } = this.props;
+        const style = getComputedStyle(element);
+        return parseInt(vertical ? style.bottom : style.left, 10);
+    }
+    elementSize(element) {
+        const { vertical } = this.props;
+        return vertical ? element.clientHeight : element.clientWidth;
+    }
+}

package/esm2020/sliders-common/slider-ticks.component.mjs

@@ -0,0 +1,125 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/* eslint-disable @angular-eslint/component-selector */
+import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
+import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+class SliderTick {
+    constructor(value) {
+        this.value = value;
+        this.classes = {
+            'k-tick': true
+        };
+    }
+}
+/**
+ * @hidden
+ */
+export class SliderTicksComponent {
+    constructor() {
+        this.wrapperClasses = 'k-reset k-slider-items';
+        this.ticks = [];
+    }
+    ngOnChanges(_) {
+        this.createTicks();
+    }
+    createTicks() {
+        const count = calculateTicksCount(this.min, this.max, this.step);
+        const largeStep = this.largeStep;
+        const tickValueProps = {
+            max: this.max,
+            min: this.min,
+            smallStep: this.step
+        };
+        const result = [];
+        for (let i = 0; i < count; i++) {
+            result.push(new SliderTick(calculateValueFromTick(i, tickValueProps)));
+            if (largeStep && i % largeStep === 0) {
+                result[i].large = true;
+                result[i].classes['k-tick-large'] = true;
+            }
+        }
+        if (result.length > 0) {
+            Object.assign(result[0].classes, this.endTickClasses(true));
+            Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
+        }
+        this.ticks = result;
+    }
+    endTickClasses(first) {
+        return {
+            'k-first': (first && !this.vertical) || (!first && this.vertical),
+            'k-last': (!first && !this.vertical) || (first && this.vertical)
+        };
+    }
+}
+SliderTicksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SliderTicksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: { tickTitle: "tickTitle", vertical: "vertical", step: "step", largeStep: "largeStep", min: "min", max: "max", labelTemplate: "labelTemplate" }, host: { properties: { "class": "this.wrapperClasses" } }, viewQueries: [{ propertyName: "tickElements", predicate: ["tickElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <li #tickElement *ngFor="let tick of ticks;"
+        [ngClass]="tick.classes"
+        title="{{ tickTitle(tick.value) }}"
+        role="presentation"
+     >
+         <ng-container [ngSwitch]="tick.large">
+            <span class="k-label" *ngSwitchCase="true">
+                <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
+                </ng-container>
+            </span>
+            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
+         </ng-container>
+     </li>
+
+     <ng-template #defaultLabel let-value="value">
+        {{ tickTitle(value) }}
+     </ng-template>
+  `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderTicksComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoSliderTicks]',
+                    template: `
+    <li #tickElement *ngFor="let tick of ticks;"
+        [ngClass]="tick.classes"
+        title="{{ tickTitle(tick.value) }}"
+        role="presentation"
+     >
+         <ng-container [ngSwitch]="tick.large">
+            <span class="k-label" *ngSwitchCase="true">
+                <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
+                </ng-container>
+            </span>
+            <ng-container *ngSwitchCase="false">&nbsp;</ng-container>
+         </ng-container>
+     </li>
+
+     <ng-template #defaultLabel let-value="value">
+        {{ tickTitle(value) }}
+     </ng-template>
+  `
+                }]
+        }], propDecorators: { wrapperClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], tickTitle: [{
+                type: Input
+            }], vertical: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], largeStep: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], labelTemplate: [{
+                type: Input
+            }], tickElements: [{
+                type: ViewChildren,
+                args: ['tickElement']
+            }] } });

package/esm2020/sliders-common/sliders-common.module.mjs

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SliderTicksComponent } from './slider-ticks.component';
+import { LabelTemplateDirective } from './label-template.directive';
+import { DraggableModule, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class SlidersCommonModule {
+}
+SlidersCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SlidersCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SlidersCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SlidersCommonModule, declarations: [SliderTicksComponent,
+        LabelTemplateDirective], imports: [CommonModule, DraggableModule, EventsModule, ResizeSensorModule], exports: [LabelTemplateDirective,
+        SliderTicksComponent,
+        DraggableModule,
+        EventsModule,
+        ResizeSensorModule] });
+SlidersCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SlidersCommonModule, imports: [[CommonModule, DraggableModule, EventsModule, ResizeSensorModule], DraggableModule,
+        EventsModule,
+        ResizeSensorModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SlidersCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SliderTicksComponent,
+                        LabelTemplateDirective
+                    ],
+                    exports: [
+                        LabelTemplateDirective,
+                        SliderTicksComponent,
+                        DraggableModule,
+                        EventsModule,
+                        ResizeSensorModule
+                    ],
+                    imports: [CommonModule, DraggableModule, EventsModule, ResizeSensorModule]
+                }]
+        }] });