@progress/kendo-angular-inputs
Version:
Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, Te
136 lines (133 loc) • 5.86 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { NgFor, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
/**
* @hidden
*/
class SliderTick {
value;
classes = {
'k-tick': true
};
large;
constructor(value) {
this.value = value;
}
}
/**
* @hidden
*/
export class SliderTicksComponent {
wrapperClasses = 'k-reset k-slider-items';
tickTitle;
vertical;
step;
largeStep;
min;
max;
labelTemplate;
tickElements;
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)
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SliderTicksComponent, isStandalone: true, 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"> </ng-container>
</ng-container>
</li>
<ng-template #defaultLabel let-value="value">
{{ tickTitle(value) }}
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.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"> </ng-container>
</ng-container>
</li>
<ng-template #defaultLabel let-value="value">
{{ tickTitle(value) }}
</ng-template>
`,
standalone: true,
imports: [NgFor, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet]
}]
}], 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']
}] } });