@progress/kendo-angular-inputs/esm2022/sliders-common/slider-ticks.component.mjs

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

/**-----------------------------------------------------------------------------------------
* 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 { NgClass, 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: "18.2.14", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
    @for (tick of ticks; track tick) {
      <li #tickElement
        [ngClass]="tick.classes"
        title="{{ tickTitle(tick.value) }}"
        role="presentation"
        >
        @switch (tick.large) {
          @case (true) {
            <span class="k-label">
              <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
              </ng-container>
            </span>
          }
          @case (false) {
            &nbsp;
          }
        }
      </li>
    }
    
    <ng-template #defaultLabel let-value="value">
      {{ tickTitle(value) }}
    </ng-template>
    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderTicksComponent, decorators: [{
            type: Component,
            args: [{
                    selector: '[kendoSliderTicks]',
                    template: `
    @for (tick of ticks; track tick) {
      <li #tickElement
        [ngClass]="tick.classes"
        title="{{ tickTitle(tick.value) }}"
        role="presentation"
        >
        @switch (tick.large) {
          @case (true) {
            <span class="k-label">
              <ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
              </ng-container>
            </span>
          }
          @case (false) {
            &nbsp;
          }
        }
      </li>
    }
    
    <ng-template #defaultLabel let-value="value">
      {{ tickTitle(value) }}
    </ng-template>
    `,
                    standalone: true,
                    imports: [NgClass, 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']
            }] } });