@progress/kendo-angular-inputs 21.4.1 → 22.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/colorpicker/localization/messages.d.ts +1 -1
- package/common/radio-checkbox.base.d.ts +1 -1
- package/fesm2022/progress-kendo-angular-inputs.mjs +321 -321
- package/numerictextbox/localization/messages.d.ts +1 -1
- package/otpinput/localization/messages.d.ts +1 -1
- package/package.json +17 -25
- package/rangeslider/localization/messages.d.ts +1 -1
- package/signature/localization/messages.d.ts +1 -1
- package/slider/localization/messages.d.ts +1 -1
- package/sliders-common/slider-base.d.ts +1 -1
- package/switch/localization/messages.d.ts +1 -1
- package/text-fields-common/text-fields-base.d.ts +1 -1
- package/textbox/localization/messages.d.ts +1 -1
- package/esm2022/checkbox/checkbox.component.mjs +0 -227
- package/esm2022/checkbox/checkbox.directive.mjs +0 -96
- package/esm2022/checkbox/checked-state.mjs +0 -5
- package/esm2022/checkbox.module.mjs +0 -42
- package/esm2022/colorpicker/adaptiveness/adaptive-close-button.component.mjs +0 -62
- package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +0 -219
- package/esm2022/colorpicker/color-contrast-svg.component.mjs +0 -108
- package/esm2022/colorpicker/color-gradient-numeric-label.directive.mjs +0 -37
- package/esm2022/colorpicker/color-gradient-text-label.directive.mjs +0 -34
- package/esm2022/colorpicker/color-gradient.component.mjs +0 -1110
- package/esm2022/colorpicker/color-input.component.mjs +0 -498
- package/esm2022/colorpicker/color-palette.component.mjs +0 -629
- package/esm2022/colorpicker/colorpicker.component.mjs +0 -1315
- package/esm2022/colorpicker/constants.mjs +0 -40
- package/esm2022/colorpicker/contrast-validation.component.mjs +0 -83
- package/esm2022/colorpicker/contrast.component.mjs +0 -114
- package/esm2022/colorpicker/events/active-color-click-event.mjs +0 -55
- package/esm2022/colorpicker/events/cancel-event.mjs +0 -18
- package/esm2022/colorpicker/events/close-event.mjs +0 -10
- package/esm2022/colorpicker/events/kendo-drag-event.mjs +0 -5
- package/esm2022/colorpicker/events/open-event.mjs +0 -10
- package/esm2022/colorpicker/events.mjs +0 -8
- package/esm2022/colorpicker/flatcolorpicker-actions.component.mjs +0 -112
- package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +0 -244
- package/esm2022/colorpicker/flatcolorpicker.component.mjs +0 -942
- package/esm2022/colorpicker/localization/colorgradient-localization.service.mjs +0 -46
- package/esm2022/colorpicker/localization/colorpalette-localization.service.mjs +0 -46
- package/esm2022/colorpicker/localization/colorpicker-localization.service.mjs +0 -31
- package/esm2022/colorpicker/localization/custom-messages.component.mjs +0 -51
- package/esm2022/colorpicker/localization/flatcolorpicker-localization.service.mjs +0 -46
- package/esm2022/colorpicker/localization/localized-colorpicker-messages.directive.mjs +0 -39
- package/esm2022/colorpicker/localization/messages.mjs +0 -201
- package/esm2022/colorpicker/models/actions-layout.mjs +0 -5
- package/esm2022/colorpicker/models/adaptive-mode.mjs +0 -8
- package/esm2022/colorpicker/models/colorpicker-view.mjs +0 -5
- package/esm2022/colorpicker/models/gradient-settings.mjs +0 -5
- package/esm2022/colorpicker/models/hsva.mjs +0 -5
- package/esm2022/colorpicker/models/output-format.mjs +0 -5
- package/esm2022/colorpicker/models/palette-presets.mjs +0 -62
- package/esm2022/colorpicker/models/palette-settings.mjs +0 -5
- package/esm2022/colorpicker/models/popup-settings.mjs +0 -5
- package/esm2022/colorpicker/models/rgb.mjs +0 -5
- package/esm2022/colorpicker/models/rgba.mjs +0 -5
- package/esm2022/colorpicker/models/table-cell.mjs +0 -5
- package/esm2022/colorpicker/models/tile-size.mjs +0 -5
- package/esm2022/colorpicker/models.mjs +0 -16
- package/esm2022/colorpicker/services/color-palette.service.mjs +0 -65
- package/esm2022/colorpicker/services/flatcolorpicker.service.mjs +0 -39
- package/esm2022/colorpicker/utils/color-parser.mjs +0 -164
- package/esm2022/colorpicker/utils/contrast-curve.mjs +0 -85
- package/esm2022/colorpicker/utils.mjs +0 -6
- package/esm2022/colorpicker.module.mjs +0 -50
- package/esm2022/common/dom-utils.mjs +0 -36
- package/esm2022/common/formservice.service.mjs +0 -21
- package/esm2022/common/math.mjs +0 -65
- package/esm2022/common/models/fillmode.mjs +0 -5
- package/esm2022/common/models/gutters.mjs +0 -5
- package/esm2022/common/models/responsive-breakpoints.mjs +0 -5
- package/esm2022/common/models/rounded.mjs +0 -5
- package/esm2022/common/models/size.mjs +0 -5
- package/esm2022/common/models/styling-classes.mjs +0 -5
- package/esm2022/common/models/type.mjs +0 -5
- package/esm2022/common/models.mjs +0 -9
- package/esm2022/common/radio-checkbox.base.mjs +0 -295
- package/esm2022/common/utils.mjs +0 -88
- package/esm2022/directives.mjs +0 -430
- package/esm2022/form/form.component.mjs +0 -163
- package/esm2022/form/formseparator.component.mjs +0 -80
- package/esm2022/form/utils.mjs +0 -147
- package/esm2022/form.module.mjs +0 -46
- package/esm2022/formfield/error.component.mjs +0 -70
- package/esm2022/formfield/formfield.component.mjs +0 -353
- package/esm2022/formfield/hint.component.mjs +0 -65
- package/esm2022/formfield/models/message-align.mjs +0 -5
- package/esm2022/formfield/models/orientation.mjs +0 -5
- package/esm2022/formfield/models/show-options.mjs +0 -5
- package/esm2022/formfield.module.mjs +0 -43
- package/esm2022/formfieldset/formfieldset.component.mjs +0 -174
- package/esm2022/index.mjs +0 -91
- package/esm2022/inputs.module.mjs +0 -91
- package/esm2022/maskedtextbox/maskedtextbox.component.mjs +0 -876
- package/esm2022/maskedtextbox/masking.service.mjs +0 -189
- package/esm2022/maskedtextbox/parsing/combinators.mjs +0 -28
- package/esm2022/maskedtextbox/parsing/parsers.mjs +0 -148
- package/esm2022/maskedtextbox/parsing/result.mjs +0 -44
- package/esm2022/maskedtextbox/parsing/stream.mjs +0 -43
- package/esm2022/maskedtextbox.module.mjs +0 -43
- package/esm2022/numerictextbox/arrow-direction.mjs +0 -13
- package/esm2022/numerictextbox/constants.mjs +0 -28
- package/esm2022/numerictextbox/localization/custom-messages.component.mjs +0 -55
- package/esm2022/numerictextbox/localization/localized-numerictextbox-messages.directive.mjs +0 -39
- package/esm2022/numerictextbox/localization/messages.mjs +0 -33
- package/esm2022/numerictextbox/numerictextbox.component.mjs +0 -1314
- package/esm2022/numerictextbox/utils.mjs +0 -92
- package/esm2022/numerictextbox.module.mjs +0 -46
- package/esm2022/otp.module.mjs +0 -44
- package/esm2022/otpinput/localization/custom-messages.component.mjs +0 -45
- package/esm2022/otpinput/localization/localized-textbox-messages.directive.mjs +0 -39
- package/esm2022/otpinput/localization/messages.mjs +0 -34
- package/esm2022/otpinput/models/otpinput-type.mjs +0 -5
- package/esm2022/otpinput/models/separator-icon.mjs +0 -5
- package/esm2022/otpinput/otpinput-separator.component.mjs +0 -93
- package/esm2022/otpinput/otpinput.component.mjs +0 -936
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/progress-kendo-angular-inputs.mjs +0 -8
- package/esm2022/radiobutton/radiobutton.component.mjs +0 -212
- package/esm2022/radiobutton/radiobutton.directive.mjs +0 -81
- package/esm2022/radiobutton.module.mjs +0 -43
- package/esm2022/rangeslider/localization/custom-messages.component.mjs +0 -53
- package/esm2022/rangeslider/localization/localized-rangeslider-messages.directive.mjs +0 -39
- package/esm2022/rangeslider/localization/messages.mjs +0 -33
- package/esm2022/rangeslider/rangeslider-model.mjs +0 -53
- package/esm2022/rangeslider/rangeslider-value.type.mjs +0 -5
- package/esm2022/rangeslider/rangeslider.component.mjs +0 -625
- package/esm2022/rangeslider.module.mjs +0 -46
- package/esm2022/rating/directives/rating-hovered-item.directive.mjs +0 -35
- package/esm2022/rating/directives/rating-item.directive.mjs +0 -34
- package/esm2022/rating/directives/rating-selected-item.directive.mjs +0 -36
- package/esm2022/rating/models/precision.mjs +0 -5
- package/esm2022/rating/models/rating-item.interface.mjs +0 -5
- package/esm2022/rating/models/selection.mjs +0 -5
- package/esm2022/rating/rating.component.mjs +0 -754
- package/esm2022/rating.module.mjs +0 -46
- package/esm2022/shared/input-separator.component.mjs +0 -55
- package/esm2022/shared/input-spacer.component.mjs +0 -56
- package/esm2022/shared/shared-events.directive.mjs +0 -102
- package/esm2022/shared/utils.mjs +0 -13
- package/esm2022/signature/events/close-event.mjs +0 -10
- package/esm2022/signature/events/index.mjs +0 -6
- package/esm2022/signature/events/open-event.mjs +0 -10
- package/esm2022/signature/localization/custom-messages.component.mjs +0 -43
- package/esm2022/signature/localization/index.mjs +0 -7
- package/esm2022/signature/localization/localized-signature-messages.directive.mjs +0 -39
- package/esm2022/signature/localization/messages.mjs +0 -45
- package/esm2022/signature/signature.component.mjs +0 -981
- package/esm2022/signature.module.mjs +0 -47
- package/esm2022/slider/localization/custom-messages.component.mjs +0 -43
- package/esm2022/slider/localization/localized-slider-messages.directive.mjs +0 -39
- package/esm2022/slider/localization/messages.mjs +0 -39
- package/esm2022/slider/slider-model.mjs +0 -32
- package/esm2022/slider/slider.component.mjs +0 -671
- package/esm2022/slider.module.mjs +0 -48
- package/esm2022/sliders-common/label-template.directive.mjs +0 -37
- package/esm2022/sliders-common/slider-base.mjs +0 -300
- package/esm2022/sliders-common/slider-model.base.mjs +0 -118
- package/esm2022/sliders-common/slider-ticks.component.mjs +0 -147
- package/esm2022/sliders-common/sliders-util.mjs +0 -206
- package/esm2022/sliders-common/title-callback.mjs +0 -5
- package/esm2022/switch/events/blur-event.mjs +0 -13
- package/esm2022/switch/events/focus-event.mjs +0 -13
- package/esm2022/switch/localization/custom-messages.component.mjs +0 -43
- package/esm2022/switch/localization/localized-switch-messages.directive.mjs +0 -39
- package/esm2022/switch/localization/messages.mjs +0 -33
- package/esm2022/switch/switch.component.mjs +0 -585
- package/esm2022/switch.module.mjs +0 -44
- package/esm2022/text-fields-common/text-fields-base.mjs +0 -150
- package/esm2022/textarea/models/adornments-orientation.mjs +0 -5
- package/esm2022/textarea/models/flow.mjs +0 -5
- package/esm2022/textarea/models/resize.mjs +0 -5
- package/esm2022/textarea/models/textarea-settings.mjs +0 -5
- package/esm2022/textarea/textarea-prefix.component.mjs +0 -67
- package/esm2022/textarea/textarea-suffix.component.mjs +0 -67
- package/esm2022/textarea/textarea.component.mjs +0 -740
- package/esm2022/textarea/textarea.directive.mjs +0 -288
- package/esm2022/textarea.module.mjs +0 -46
- package/esm2022/textbox/localization/custom-messages.component.mjs +0 -43
- package/esm2022/textbox/localization/localized-textbox-messages.directive.mjs +0 -39
- package/esm2022/textbox/localization/messages.mjs +0 -27
- package/esm2022/textbox/models/icon-show-options.mjs +0 -5
- package/esm2022/textbox/textbox-prefix.directive.mjs +0 -50
- package/esm2022/textbox/textbox-suffix.directive.mjs +0 -49
- package/esm2022/textbox/textbox.component.mjs +0 -933
- package/esm2022/textbox/textbox.directive.mjs +0 -125
- package/esm2022/textbox.module.mjs +0 -51
- package/esm2022/validators/max.validator.mjs +0 -21
- package/esm2022/validators/min.validator.mjs +0 -21
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { NgModule } from '@angular/core';
|
|
6
|
-
import { KENDO_SLIDER } from './directives';
|
|
7
|
-
import { IconsService } from '@progress/kendo-angular-icons';
|
|
8
|
-
import { PopupService } from '@progress/kendo-angular-popup';
|
|
9
|
-
import { ResizeBatchService } from '@progress/kendo-angular-common';
|
|
10
|
-
import * as i0 from "@angular/core";
|
|
11
|
-
import * as i1 from "./slider/slider.component";
|
|
12
|
-
import * as i2 from "./slider/localization/custom-messages.component";
|
|
13
|
-
import * as i3 from "./sliders-common/label-template.directive";
|
|
14
|
-
//IMPORTANT: NgModule export kept for backwards compatibility
|
|
15
|
-
/**
|
|
16
|
-
* Defines the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) for the Slider component.
|
|
17
|
-
*
|
|
18
|
-
* Use this module to add the Slider component to your NgModule-based Angular application.
|
|
19
|
-
*
|
|
20
|
-
* @example
|
|
21
|
-
*
|
|
22
|
-
* ```typescript
|
|
23
|
-
* import { SliderModule } from '@progress/kendo-angular-inputs';
|
|
24
|
-
* import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
25
|
-
* import { NgModule } from '@angular/core';
|
|
26
|
-
* import { AppComponent } from './app.component';
|
|
27
|
-
*
|
|
28
|
-
* @NgModule({
|
|
29
|
-
* declarations: [AppComponent],
|
|
30
|
-
* imports: [BrowserModule, BrowserAnimationsModule, SliderModule],
|
|
31
|
-
* bootstrap: [AppComponent]
|
|
32
|
-
* })
|
|
33
|
-
* export class AppModule {}
|
|
34
|
-
* ```
|
|
35
|
-
*/
|
|
36
|
-
export class SliderModule {
|
|
37
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
38
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SliderModule, imports: [i1.SliderComponent, i2.SliderCustomMessagesComponent, i3.LabelTemplateDirective], exports: [i1.SliderComponent, i2.SliderCustomMessagesComponent, i3.LabelTemplateDirective] });
|
|
39
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.SliderComponent] });
|
|
40
|
-
}
|
|
41
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderModule, decorators: [{
|
|
42
|
-
type: NgModule,
|
|
43
|
-
args: [{
|
|
44
|
-
imports: [...KENDO_SLIDER],
|
|
45
|
-
exports: [...KENDO_SLIDER],
|
|
46
|
-
providers: [IconsService, PopupService, ResizeBatchService]
|
|
47
|
-
}]
|
|
48
|
-
}] });
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, TemplateRef, Optional } from '@angular/core';
|
|
6
|
-
import * as i0 from "@angular/core";
|
|
7
|
-
/**
|
|
8
|
-
* Represents the template for Slider labels.
|
|
9
|
-
* To define a labels template, nest an `<ng-template>` tag with the `kendoSliderLabelTemplate` directive inside
|
|
10
|
-
* the `<kendo-slider>` tag. The template context provides the `value`.
|
|
11
|
-
*
|
|
12
|
-
* @example
|
|
13
|
-
* ```html
|
|
14
|
-
* <kendo-slider [largeStep]="2">
|
|
15
|
-
* <ng-template kendoSliderLabelTemplate let-value="value">
|
|
16
|
-
* <p>{{ value }}</p>
|
|
17
|
-
* </ng-template>
|
|
18
|
-
* </kendo-slider>
|
|
19
|
-
* ```
|
|
20
|
-
*/
|
|
21
|
-
export class LabelTemplateDirective {
|
|
22
|
-
templateRef;
|
|
23
|
-
constructor(templateRef) {
|
|
24
|
-
this.templateRef = templateRef;
|
|
25
|
-
}
|
|
26
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
27
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LabelTemplateDirective, isStandalone: true, selector: "[kendoSliderLabelTemplate]", ngImport: i0 });
|
|
28
|
-
}
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LabelTemplateDirective, decorators: [{
|
|
30
|
-
type: Directive,
|
|
31
|
-
args: [{
|
|
32
|
-
selector: '[kendoSliderLabelTemplate]',
|
|
33
|
-
standalone: true
|
|
34
|
-
}]
|
|
35
|
-
}], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
|
|
36
|
-
type: Optional
|
|
37
|
-
}] }] });
|
|
@@ -1,300 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { increment, decrement, incrementLarge, decrementLarge, identity } from './sliders-util';
|
|
6
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { Input, Output, EventEmitter, HostBinding, Injector, Renderer2, NgZone, ChangeDetectorRef, ElementRef, ViewChild, ContentChild, Component } from '@angular/core';
|
|
8
|
-
import { Subscription } from 'rxjs';
|
|
9
|
-
import { NgControl } from '@angular/forms';
|
|
10
|
-
import { Keys } from '@progress/kendo-angular-common';
|
|
11
|
-
import { validatePackage } from '@progress/kendo-licensing';
|
|
12
|
-
import { packageMetadata } from '../package-metadata';
|
|
13
|
-
import { LabelTemplateDirective } from './label-template.directive';
|
|
14
|
-
import * as i0 from "@angular/core";
|
|
15
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
export class SliderBase {
|
|
20
|
-
localizationService;
|
|
21
|
-
injector;
|
|
22
|
-
renderer;
|
|
23
|
-
ngZone;
|
|
24
|
-
changeDetector;
|
|
25
|
-
hostElement;
|
|
26
|
-
/**
|
|
27
|
-
* Sets the title for the ticks.
|
|
28
|
-
* The default title for each tick is its Slider value.
|
|
29
|
-
* If you use a callback function, the function receives the component value and returns a string for the new title [see example]({% slug ticks_slider %}#toc-titles).
|
|
30
|
-
*/
|
|
31
|
-
title = identity;
|
|
32
|
-
/**
|
|
33
|
-
* Sets the location of the tick marks in the Slider [see example]({% slug ticks_slider %}#toc-placement).
|
|
34
|
-
*
|
|
35
|
-
* The options are:
|
|
36
|
-
* - `before` – Shows tick marks above a horizontal track or left of a vertical track.
|
|
37
|
-
* - `after` – Shows tick marks below a horizontal track or right of a vertical track.
|
|
38
|
-
* - `both` – Shows tick marks on both sides of the track.
|
|
39
|
-
* - `none` – Hides tick marks and removes them from the DOM.
|
|
40
|
-
*
|
|
41
|
-
* @default 'both'
|
|
42
|
-
*/
|
|
43
|
-
tickPlacement = 'both';
|
|
44
|
-
/**
|
|
45
|
-
* When `true`. renders a vertical Slider [see example]({% slug orientation_slider %}).
|
|
46
|
-
*
|
|
47
|
-
* @default false
|
|
48
|
-
*/
|
|
49
|
-
vertical = false;
|
|
50
|
-
/**
|
|
51
|
-
* Sets the minimum value of the Slider.
|
|
52
|
-
* Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
|
|
53
|
-
*
|
|
54
|
-
* @default 0
|
|
55
|
-
*/
|
|
56
|
-
min = 0;
|
|
57
|
-
/**
|
|
58
|
-
* Sets the maximum value of the Slider.
|
|
59
|
-
* Accepts integers and floating-point numbers [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
|
|
60
|
-
*
|
|
61
|
-
* @default 10
|
|
62
|
-
*/
|
|
63
|
-
max = 10;
|
|
64
|
-
/**
|
|
65
|
-
* Sets the step value of the Slider.
|
|
66
|
-
* Accepts only positive values.
|
|
67
|
-
* Can be an integer or a floating-point number [see example]({% slug predefinedsteps_slider %}#toc-small-steps).
|
|
68
|
-
*
|
|
69
|
-
* @default 1
|
|
70
|
-
*/
|
|
71
|
-
smallStep = 1;
|
|
72
|
-
/**
|
|
73
|
-
* Sets every n<sup>th</sup> tick as large and shows a label for it [see example]({% slug predefinedsteps_slider %}#toc-large-steps).
|
|
74
|
-
*
|
|
75
|
-
* @default null
|
|
76
|
-
*/
|
|
77
|
-
largeStep = null;
|
|
78
|
-
/**
|
|
79
|
-
* Sets the width between two ticks along the track, in pixels.
|
|
80
|
-
* If you do not set `fixedTickWidth`, the Slider adjusts the tick width automatically [see example]({% slug ticks_slider %}#toc-width).
|
|
81
|
-
*
|
|
82
|
-
*/
|
|
83
|
-
fixedTickWidth;
|
|
84
|
-
/**
|
|
85
|
-
* When `true`, disables the Slider.
|
|
86
|
-
* To disable the component in reactive forms, see [Forms Support](slug:formssupport_slider#toc-managing-the-slider-disabled-state-in-reactive-forms) [see example]({% slug disabledstate_slider %}).
|
|
87
|
-
*
|
|
88
|
-
* @default false
|
|
89
|
-
*/
|
|
90
|
-
disabled = false;
|
|
91
|
-
/**
|
|
92
|
-
* When `true`, sets the Slider to read-only [see example]({% slug readonly_slider %}).
|
|
93
|
-
*
|
|
94
|
-
* @default false
|
|
95
|
-
*/
|
|
96
|
-
readonly = false;
|
|
97
|
-
/**
|
|
98
|
-
* Sets the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the Slider.
|
|
99
|
-
*
|
|
100
|
-
* @default 0
|
|
101
|
-
*/
|
|
102
|
-
tabindex = 0;
|
|
103
|
-
/**
|
|
104
|
-
* Fires when the user focuses the component.
|
|
105
|
-
*
|
|
106
|
-
*/
|
|
107
|
-
onFocus = new EventEmitter();
|
|
108
|
-
/**
|
|
109
|
-
* Fires when the component is blurred.
|
|
110
|
-
*
|
|
111
|
-
*/
|
|
112
|
-
onBlur = new EventEmitter();
|
|
113
|
-
/**
|
|
114
|
-
* Fires when the user selects a new value.
|
|
115
|
-
*
|
|
116
|
-
*/
|
|
117
|
-
valueChange = new EventEmitter();
|
|
118
|
-
direction;
|
|
119
|
-
get horizontalClass() {
|
|
120
|
-
return !this.vertical;
|
|
121
|
-
}
|
|
122
|
-
get verticalClass() {
|
|
123
|
-
return this.vertical;
|
|
124
|
-
}
|
|
125
|
-
sliderClass = true;
|
|
126
|
-
get disabledClass() {
|
|
127
|
-
return this.disabled;
|
|
128
|
-
}
|
|
129
|
-
wrapper;
|
|
130
|
-
track;
|
|
131
|
-
sliderSelection;
|
|
132
|
-
ticksContainer;
|
|
133
|
-
ticks;
|
|
134
|
-
labelTemplate;
|
|
135
|
-
subscriptions = new Subscription();
|
|
136
|
-
isFocused;
|
|
137
|
-
isDragged;
|
|
138
|
-
control;
|
|
139
|
-
constructor(localizationService, injector, renderer, ngZone, changeDetector, hostElement) {
|
|
140
|
-
this.localizationService = localizationService;
|
|
141
|
-
this.injector = injector;
|
|
142
|
-
this.renderer = renderer;
|
|
143
|
-
this.ngZone = ngZone;
|
|
144
|
-
this.changeDetector = changeDetector;
|
|
145
|
-
this.hostElement = hostElement;
|
|
146
|
-
validatePackage(packageMetadata);
|
|
147
|
-
this.direction = localizationService.rtl ? 'rtl' : 'ltr';
|
|
148
|
-
}
|
|
149
|
-
/**
|
|
150
|
-
* @hidden
|
|
151
|
-
* Called when the status of the component changes to or from `disabled`.
|
|
152
|
-
* Depending on the value, it enables or disables the appropriate DOM element.
|
|
153
|
-
*
|
|
154
|
-
* @param isDisabled
|
|
155
|
-
*/
|
|
156
|
-
setDisabledState(isDisabled) {
|
|
157
|
-
this.changeDetector.markForCheck();
|
|
158
|
-
this.disabled = isDisabled;
|
|
159
|
-
}
|
|
160
|
-
ngOnInit() {
|
|
161
|
-
this.subscriptions.add(this.localizationService
|
|
162
|
-
.changes
|
|
163
|
-
.subscribe(({ rtl }) => {
|
|
164
|
-
this.direction = rtl ? 'rtl' : 'ltr';
|
|
165
|
-
this.sizeComponent();
|
|
166
|
-
}));
|
|
167
|
-
if (this.hostElement) {
|
|
168
|
-
this.renderer.removeAttribute(this.hostElement.nativeElement, "tabindex");
|
|
169
|
-
}
|
|
170
|
-
this.control = this.injector.get(NgControl, null);
|
|
171
|
-
}
|
|
172
|
-
/**
|
|
173
|
-
* @hidden
|
|
174
|
-
*/
|
|
175
|
-
get isDisabled() {
|
|
176
|
-
return this.disabled || this.readonly;
|
|
177
|
-
}
|
|
178
|
-
/**
|
|
179
|
-
* @hidden
|
|
180
|
-
*/
|
|
181
|
-
ifEnabled = (callback, event) => {
|
|
182
|
-
if (!this.isDisabled) {
|
|
183
|
-
callback.call(this, event);
|
|
184
|
-
}
|
|
185
|
-
};
|
|
186
|
-
/**
|
|
187
|
-
* @hidden
|
|
188
|
-
* Used by the FloatingLabel to determine if the component is empty.
|
|
189
|
-
*/
|
|
190
|
-
isEmpty() {
|
|
191
|
-
return false;
|
|
192
|
-
}
|
|
193
|
-
get reverse() {
|
|
194
|
-
return this.localizationService.rtl && !this.vertical;
|
|
195
|
-
}
|
|
196
|
-
get keyBinding() {
|
|
197
|
-
const reverse = this.reverse;
|
|
198
|
-
return {
|
|
199
|
-
[Keys.ArrowLeft]: reverse ? increment : decrement,
|
|
200
|
-
[Keys.ArrowRight]: reverse ? decrement : increment,
|
|
201
|
-
[Keys.ArrowDown]: decrement,
|
|
202
|
-
[Keys.ArrowUp]: increment,
|
|
203
|
-
[Keys.PageUp]: incrementLarge,
|
|
204
|
-
[Keys.PageDown]: decrementLarge,
|
|
205
|
-
[Keys.Home]: ({ min }) => min,
|
|
206
|
-
[Keys.End]: ({ max }) => max
|
|
207
|
-
};
|
|
208
|
-
}
|
|
209
|
-
resetStyles(elements) {
|
|
210
|
-
elements.forEach(el => {
|
|
211
|
-
if (el) {
|
|
212
|
-
if (this.vertical) {
|
|
213
|
-
this.renderer.removeStyle(el, 'width');
|
|
214
|
-
this.renderer.removeStyle(el, 'left');
|
|
215
|
-
this.renderer.removeStyle(el, 'right');
|
|
216
|
-
}
|
|
217
|
-
else {
|
|
218
|
-
this.renderer.removeStyle(el, 'height');
|
|
219
|
-
this.renderer.removeStyle(el, 'bottom');
|
|
220
|
-
}
|
|
221
|
-
this.renderer.removeStyle(el, 'padding-top');
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
|
|
226
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: { "class.k-readonly": "this.readonly", "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 });
|
|
227
|
-
}
|
|
228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderBase, decorators: [{
|
|
229
|
-
type: Component,
|
|
230
|
-
args: [{
|
|
231
|
-
selector: 'kendo-slider-base',
|
|
232
|
-
template: ``
|
|
233
|
-
}]
|
|
234
|
-
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { title: [{
|
|
235
|
-
type: Input
|
|
236
|
-
}], tickPlacement: [{
|
|
237
|
-
type: Input
|
|
238
|
-
}], vertical: [{
|
|
239
|
-
type: Input
|
|
240
|
-
}], min: [{
|
|
241
|
-
type: Input
|
|
242
|
-
}], max: [{
|
|
243
|
-
type: Input
|
|
244
|
-
}], smallStep: [{
|
|
245
|
-
type: Input
|
|
246
|
-
}], largeStep: [{
|
|
247
|
-
type: Input
|
|
248
|
-
}], fixedTickWidth: [{
|
|
249
|
-
type: Input
|
|
250
|
-
}], disabled: [{
|
|
251
|
-
type: Input
|
|
252
|
-
}], readonly: [{
|
|
253
|
-
type: Input
|
|
254
|
-
}, {
|
|
255
|
-
type: HostBinding,
|
|
256
|
-
args: ['class.k-readonly']
|
|
257
|
-
}], tabindex: [{
|
|
258
|
-
type: Input
|
|
259
|
-
}], onFocus: [{
|
|
260
|
-
type: Output,
|
|
261
|
-
args: ['focus']
|
|
262
|
-
}], onBlur: [{
|
|
263
|
-
type: Output,
|
|
264
|
-
args: ['blur']
|
|
265
|
-
}], valueChange: [{
|
|
266
|
-
type: Output
|
|
267
|
-
}], direction: [{
|
|
268
|
-
type: HostBinding,
|
|
269
|
-
args: ['attr.dir']
|
|
270
|
-
}], horizontalClass: [{
|
|
271
|
-
type: HostBinding,
|
|
272
|
-
args: ['class.k-slider-horizontal']
|
|
273
|
-
}], verticalClass: [{
|
|
274
|
-
type: HostBinding,
|
|
275
|
-
args: ['class.k-slider-vertical']
|
|
276
|
-
}], sliderClass: [{
|
|
277
|
-
type: HostBinding,
|
|
278
|
-
args: ['class.k-slider']
|
|
279
|
-
}], disabledClass: [{
|
|
280
|
-
type: HostBinding,
|
|
281
|
-
args: ['class.k-disabled']
|
|
282
|
-
}], wrapper: [{
|
|
283
|
-
type: ViewChild,
|
|
284
|
-
args: ['wrap', { static: true }]
|
|
285
|
-
}], track: [{
|
|
286
|
-
type: ViewChild,
|
|
287
|
-
args: ['track', { static: true }]
|
|
288
|
-
}], sliderSelection: [{
|
|
289
|
-
type: ViewChild,
|
|
290
|
-
args: ['sliderSelection', { static: true }]
|
|
291
|
-
}], ticksContainer: [{
|
|
292
|
-
type: ViewChild,
|
|
293
|
-
args: ['ticks', { read: ElementRef, static: false }]
|
|
294
|
-
}], ticks: [{
|
|
295
|
-
type: ViewChild,
|
|
296
|
-
args: ['ticks', { static: false }]
|
|
297
|
-
}], labelTemplate: [{
|
|
298
|
-
type: ContentChild,
|
|
299
|
-
args: [LabelTemplateDirective, { static: false }]
|
|
300
|
-
}] } });
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
|
|
6
|
-
import { subtract } from '../common/math';
|
|
7
|
-
import { isPresent } from '../common/utils';
|
|
8
|
-
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export class SliderModelBase {
|
|
13
|
-
props;
|
|
14
|
-
wrapper;
|
|
15
|
-
track;
|
|
16
|
-
renderer;
|
|
17
|
-
button;
|
|
18
|
-
tickSizes;
|
|
19
|
-
constructor(props, wrapper, track, renderer, button) {
|
|
20
|
-
this.props = props;
|
|
21
|
-
this.wrapper = wrapper;
|
|
22
|
-
this.track = track;
|
|
23
|
-
this.renderer = renderer;
|
|
24
|
-
this.button = button;
|
|
25
|
-
this.props = props;
|
|
26
|
-
this.wrapper = wrapper;
|
|
27
|
-
this.track = track;
|
|
28
|
-
this.tickSizes = this.getTickSizes();
|
|
29
|
-
}
|
|
30
|
-
resizeTrack() {
|
|
31
|
-
const orientation = this.props.vertical ? 'height' : 'width';
|
|
32
|
-
const altOrientation = this.props.vertical ? 'width' : 'height';
|
|
33
|
-
const trackWidth = this.trackWidth();
|
|
34
|
-
this.track.parentElement.style[orientation] = `${trackWidth}px`;
|
|
35
|
-
this.track.parentElement.style[altOrientation] = '';
|
|
36
|
-
}
|
|
37
|
-
resizeTicks(ticksContainer, ticks) {
|
|
38
|
-
const dimension = this.props.vertical ? "height" : "width";
|
|
39
|
-
[...ticks].forEach((tick, index) => tick.style[dimension] = `${this.tickSizes[index]}px`);
|
|
40
|
-
if (this.props.vertical) {
|
|
41
|
-
this.adjustPadding(ticksContainer);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
resizeWrapper() {
|
|
45
|
-
const dimension = this.props.vertical ? "height" : "width";
|
|
46
|
-
const fixedTrackWidth = calculateFixedTrackSize(this.props);
|
|
47
|
-
const wrapperParentEl = this.wrapper.parentElement;
|
|
48
|
-
if (fixedTrackWidth) {
|
|
49
|
-
wrapperParentEl.style[dimension] = "auto";
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
trackWidth() {
|
|
53
|
-
if (this.props.fixedTickWidth) {
|
|
54
|
-
return calculateFixedTrackSize(this.props);
|
|
55
|
-
}
|
|
56
|
-
const wrapperWidth = this.elementSize(this.wrapper.parentElement);
|
|
57
|
-
const trackOffset = this.getTrackOffset();
|
|
58
|
-
return wrapperWidth - trackOffset;
|
|
59
|
-
}
|
|
60
|
-
getTickSizes() {
|
|
61
|
-
const { min, max, smallStep } = this.props;
|
|
62
|
-
const count = calculateTicksCount(min, max, smallStep);
|
|
63
|
-
const trackSize = this.trackWidth();
|
|
64
|
-
const distStep = trackSize / subtract(max, min);
|
|
65
|
-
const result = [];
|
|
66
|
-
let usedSpace = 0;
|
|
67
|
-
let endPoint = 0;
|
|
68
|
-
for (let i = 0; i < count; i++) {
|
|
69
|
-
if (i === 0 || i === count - 1) {
|
|
70
|
-
endPoint += (smallStep / 2) * distStep;
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
endPoint += smallStep * distStep;
|
|
74
|
-
}
|
|
75
|
-
// ensure that the sum of the tick sizes does not exceed the track width
|
|
76
|
-
endPoint = +endPoint.toFixed(2) - 0.01;
|
|
77
|
-
const size = Math.round(endPoint - usedSpace);
|
|
78
|
-
result.push(size);
|
|
79
|
-
usedSpace += size;
|
|
80
|
-
}
|
|
81
|
-
if (usedSpace >= trackSize) {
|
|
82
|
-
result[result.length - 1] -= 1;
|
|
83
|
-
}
|
|
84
|
-
return result;
|
|
85
|
-
}
|
|
86
|
-
adjustPadding(ticksContainer) {
|
|
87
|
-
const totalTickSize = this.tickSizes.reduce((prev, curr) => prev + curr, 0);
|
|
88
|
-
const trackWidth = this.trackWidth();
|
|
89
|
-
const reminder = trackWidth - totalTickSize;
|
|
90
|
-
if (reminder !== 0) {
|
|
91
|
-
const padding = reminder + this.elementOffset(this.track);
|
|
92
|
-
ticksContainer.style.paddingTop = `${padding}px`;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
elementOffset(element) {
|
|
96
|
-
if (!isDocumentAvailable()) {
|
|
97
|
-
return 0;
|
|
98
|
-
}
|
|
99
|
-
const { vertical } = this.props;
|
|
100
|
-
const style = getComputedStyle(element);
|
|
101
|
-
return parseInt(vertical ? style.bottom : style.left, 10);
|
|
102
|
-
}
|
|
103
|
-
elementSize(element) {
|
|
104
|
-
const { vertical } = this.props;
|
|
105
|
-
return vertical ? element.clientHeight : element.clientWidth;
|
|
106
|
-
}
|
|
107
|
-
getTrackOffset() {
|
|
108
|
-
const showButtons = this.props.buttons && isPresent(this.button);
|
|
109
|
-
if (!showButtons) {
|
|
110
|
-
return 0;
|
|
111
|
-
}
|
|
112
|
-
const BUTTONS_COUNT = 2;
|
|
113
|
-
const buttonStyles = this.button.nativeElement.getBoundingClientRect();
|
|
114
|
-
const wrapperGap = isDocumentAvailable() ? parseInt(window.getComputedStyle(this.wrapper.parentElement).gap) : 0;
|
|
115
|
-
const buttonSize = this.props.vertical ? buttonStyles?.height : buttonStyles?.width;
|
|
116
|
-
return (buttonSize + wrapperGap) * BUTTONS_COUNT;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/* eslint-disable @angular-eslint/component-selector */
|
|
6
|
-
import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
|
|
7
|
-
import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
|
|
8
|
-
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
9
|
-
import * as i0 from "@angular/core";
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
class SliderTick {
|
|
14
|
-
value;
|
|
15
|
-
classes = {
|
|
16
|
-
'k-tick': true
|
|
17
|
-
};
|
|
18
|
-
large;
|
|
19
|
-
constructor(value) {
|
|
20
|
-
this.value = value;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* @hidden
|
|
25
|
-
*/
|
|
26
|
-
export class SliderTicksComponent {
|
|
27
|
-
wrapperClasses = 'k-reset k-slider-items';
|
|
28
|
-
tickTitle;
|
|
29
|
-
vertical;
|
|
30
|
-
step;
|
|
31
|
-
largeStep;
|
|
32
|
-
min;
|
|
33
|
-
max;
|
|
34
|
-
labelTemplate;
|
|
35
|
-
tickElements;
|
|
36
|
-
ticks = [];
|
|
37
|
-
ngOnChanges(_) {
|
|
38
|
-
this.createTicks();
|
|
39
|
-
}
|
|
40
|
-
createTicks() {
|
|
41
|
-
const count = calculateTicksCount(this.min, this.max, this.step);
|
|
42
|
-
const largeStep = this.largeStep;
|
|
43
|
-
const tickValueProps = {
|
|
44
|
-
max: this.max,
|
|
45
|
-
min: this.min,
|
|
46
|
-
smallStep: this.step
|
|
47
|
-
};
|
|
48
|
-
const result = [];
|
|
49
|
-
for (let i = 0; i < count; i++) {
|
|
50
|
-
result.push(new SliderTick(calculateValueFromTick(i, tickValueProps)));
|
|
51
|
-
if (largeStep && i % largeStep === 0) {
|
|
52
|
-
result[i].large = true;
|
|
53
|
-
result[i].classes['k-tick-large'] = true;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
if (result.length > 0) {
|
|
57
|
-
Object.assign(result[0].classes, this.endTickClasses(true));
|
|
58
|
-
Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
|
|
59
|
-
}
|
|
60
|
-
this.ticks = result;
|
|
61
|
-
}
|
|
62
|
-
endTickClasses(first) {
|
|
63
|
-
return {
|
|
64
|
-
'k-first': (first && !this.vertical) || (!first && this.vertical),
|
|
65
|
-
'k-last': (!first && !this.vertical) || (first && this.vertical)
|
|
66
|
-
};
|
|
67
|
-
}
|
|
68
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderTicksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
69
|
-
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: `
|
|
70
|
-
@for (tick of ticks; track tick) {
|
|
71
|
-
<li #tickElement
|
|
72
|
-
[ngClass]="tick.classes"
|
|
73
|
-
title="{{ tickTitle(tick.value) }}"
|
|
74
|
-
role="presentation"
|
|
75
|
-
>
|
|
76
|
-
@switch (tick.large) {
|
|
77
|
-
@case (true) {
|
|
78
|
-
<span class="k-label">
|
|
79
|
-
<ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
|
|
80
|
-
</ng-container>
|
|
81
|
-
</span>
|
|
82
|
-
}
|
|
83
|
-
@case (false) {
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
</li>
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
<ng-template #defaultLabel let-value="value">
|
|
91
|
-
{{ tickTitle(value) }}
|
|
92
|
-
</ng-template>
|
|
93
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
94
|
-
}
|
|
95
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SliderTicksComponent, decorators: [{
|
|
96
|
-
type: Component,
|
|
97
|
-
args: [{
|
|
98
|
-
selector: '[kendoSliderTicks]',
|
|
99
|
-
template: `
|
|
100
|
-
@for (tick of ticks; track tick) {
|
|
101
|
-
<li #tickElement
|
|
102
|
-
[ngClass]="tick.classes"
|
|
103
|
-
title="{{ tickTitle(tick.value) }}"
|
|
104
|
-
role="presentation"
|
|
105
|
-
>
|
|
106
|
-
@switch (tick.large) {
|
|
107
|
-
@case (true) {
|
|
108
|
-
<span class="k-label">
|
|
109
|
-
<ng-container [ngTemplateOutlet]="labelTemplate || defaultLabel" [ngTemplateOutletContext]="tick">
|
|
110
|
-
</ng-container>
|
|
111
|
-
</span>
|
|
112
|
-
}
|
|
113
|
-
@case (false) {
|
|
114
|
-
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
</li>
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
<ng-template #defaultLabel let-value="value">
|
|
121
|
-
{{ tickTitle(value) }}
|
|
122
|
-
</ng-template>
|
|
123
|
-
`,
|
|
124
|
-
standalone: true,
|
|
125
|
-
imports: [NgClass, NgTemplateOutlet]
|
|
126
|
-
}]
|
|
127
|
-
}], propDecorators: { wrapperClasses: [{
|
|
128
|
-
type: HostBinding,
|
|
129
|
-
args: ['class']
|
|
130
|
-
}], tickTitle: [{
|
|
131
|
-
type: Input
|
|
132
|
-
}], vertical: [{
|
|
133
|
-
type: Input
|
|
134
|
-
}], step: [{
|
|
135
|
-
type: Input
|
|
136
|
-
}], largeStep: [{
|
|
137
|
-
type: Input
|
|
138
|
-
}], min: [{
|
|
139
|
-
type: Input
|
|
140
|
-
}], max: [{
|
|
141
|
-
type: Input
|
|
142
|
-
}], labelTemplate: [{
|
|
143
|
-
type: Input
|
|
144
|
-
}], tickElements: [{
|
|
145
|
-
type: ViewChildren,
|
|
146
|
-
args: ['tickElement']
|
|
147
|
-
}] } });
|