@progress/kendo-angular-inputs 8.0.0-dev.202112251033 → 8.0.0-dev.202201190602
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/LICENSE.md +1 -1
- package/NOTICE.txt +119 -79
- package/README.md +1 -1
- package/dist/cdn/js/kendo-angular-inputs.js +1 -1
- package/dist/cdn/main.js +1 -1
- package/dist/es/colorpicker/color-gradient.component.js +3 -0
- package/dist/es/colorpicker/color-input.component.js +1 -1
- package/dist/es/colorpicker/color-palette.component.js +6 -3
- package/dist/es/colorpicker/colorpicker.component.js +189 -49
- package/dist/es/colorpicker/flatcolorpicker.component.js +7 -4
- package/dist/es/maskedtextbox/maskedtextbox.component.js +1 -1
- package/dist/es/numerictextbox/numerictextbox.component.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/radiobutton/radiobutton.directive.js +3 -0
- package/dist/es/rangeslider/rangeslider-model.js +4 -7
- package/dist/es/rangeslider/rangeslider.component.js +1 -1
- package/dist/es/slider/slider-model.js +3 -5
- package/dist/es/slider/slider.component.js +2 -2
- package/dist/es/sliders-common/slider-model.base.js +7 -10
- package/dist/es/sliders-common/slider-ticks.component.js +3 -10
- package/dist/es/sliders-common/sliders-util.js +2 -3
- package/dist/es/switch/switch.component.js +1 -1
- package/dist/es/textarea/textarea.component.js +3 -2
- package/dist/es/textbox/textbox.component.js +2 -2
- package/dist/es2015/colorpicker/color-gradient.component.js +3 -0
- package/dist/es2015/colorpicker/color-input.component.js +1 -1
- package/dist/es2015/colorpicker/color-palette.component.d.ts +1 -1
- package/dist/es2015/colorpicker/color-palette.component.js +6 -3
- package/dist/es2015/colorpicker/colorpicker.component.d.ts +19 -7
- package/dist/es2015/colorpicker/colorpicker.component.js +168 -70
- package/dist/es2015/colorpicker/flatcolorpicker.component.d.ts +2 -2
- package/dist/es2015/colorpicker/flatcolorpicker.component.js +7 -4
- package/dist/es2015/index.metadata.json +1 -1
- package/dist/es2015/maskedtextbox/maskedtextbox.component.d.ts +1 -1
- package/dist/es2015/maskedtextbox/maskedtextbox.component.js +1 -1
- package/dist/es2015/numerictextbox/numerictextbox.component.d.ts +1 -1
- package/dist/es2015/numerictextbox/numerictextbox.component.js +1 -1
- package/dist/es2015/package-metadata.js +1 -1
- package/dist/es2015/radiobutton/radiobutton.directive.js +3 -0
- package/dist/es2015/rangeslider/rangeslider-model.js +4 -7
- package/dist/es2015/rangeslider/rangeslider.component.js +55 -54
- package/dist/es2015/slider/slider-model.d.ts +1 -1
- package/dist/es2015/slider/slider-model.js +3 -5
- package/dist/es2015/slider/slider.component.js +56 -59
- package/dist/es2015/sliders-common/slider-model.base.js +7 -10
- package/dist/es2015/sliders-common/slider-ticks.component.d.ts +0 -2
- package/dist/es2015/sliders-common/slider-ticks.component.js +6 -10
- package/dist/es2015/sliders-common/sliders-util.d.ts +2 -2
- package/dist/es2015/sliders-common/sliders-util.js +2 -3
- package/dist/es2015/switch/switch.component.d.ts +1 -1
- package/dist/es2015/switch/switch.component.js +1 -1
- package/dist/es2015/textarea/textarea.component.d.ts +1 -1
- package/dist/es2015/textarea/textarea.component.js +10 -2
- package/dist/es2015/textbox/textbox.component.d.ts +1 -1
- package/dist/es2015/textbox/textbox.component.js +19 -20
- package/dist/fesm2015/index.js +369 -285
- package/dist/fesm5/index.js +258 -140
- package/dist/npm/colorpicker/color-gradient.component.js +3 -0
- package/dist/npm/colorpicker/color-input.component.js +1 -1
- package/dist/npm/colorpicker/color-palette.component.js +6 -3
- package/dist/npm/colorpicker/colorpicker.component.js +188 -48
- package/dist/npm/colorpicker/flatcolorpicker.component.js +7 -4
- package/dist/npm/maskedtextbox/maskedtextbox.component.js +1 -1
- package/dist/npm/numerictextbox/numerictextbox.component.js +1 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/radiobutton/radiobutton.directive.js +3 -0
- package/dist/npm/rangeslider/rangeslider-model.js +4 -7
- package/dist/npm/rangeslider/rangeslider.component.js +1 -1
- package/dist/npm/slider/slider-model.js +3 -5
- package/dist/npm/slider/slider.component.js +2 -2
- package/dist/npm/sliders-common/slider-model.base.js +6 -9
- package/dist/npm/sliders-common/slider-ticks.component.js +2 -9
- package/dist/npm/sliders-common/sliders-util.js +2 -3
- package/dist/npm/switch/switch.component.js +1 -1
- package/dist/npm/textarea/textarea.component.js +3 -2
- package/dist/npm/textbox/textbox.component.js +2 -2
- package/dist/systemjs/kendo-angular-inputs.js +1 -1
- package/package.json +6 -6
|
@@ -54,7 +54,7 @@ export declare class MaskedTextBoxComponent implements ControlValueAccessor, OnC
|
|
|
54
54
|
*/
|
|
55
55
|
title: string;
|
|
56
56
|
/**
|
|
57
|
-
* The size property specifies the
|
|
57
|
+
* The size property specifies the padding of the MaskedTextBox internal input element
|
|
58
58
|
* ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
|
|
59
59
|
* The possible values are:
|
|
60
60
|
* * `'small'`
|
|
@@ -203,7 +203,7 @@ let MaskedTextBoxComponent = MaskedTextBoxComponent_1 = class MaskedTextBoxCompo
|
|
|
203
203
|
this.updateService();
|
|
204
204
|
}
|
|
205
205
|
/**
|
|
206
|
-
* The size property specifies the
|
|
206
|
+
* The size property specifies the padding of the MaskedTextBox internal input element
|
|
207
207
|
* ([see example]({% slug appearance_maskedtextbox %}#toc-size)).
|
|
208
208
|
* The possible values are:
|
|
209
209
|
* * `'small'`
|
|
@@ -113,7 +113,7 @@ export declare class NumericTextBoxComponent implements ControlValueAccessor, On
|
|
|
113
113
|
*/
|
|
114
114
|
maxlength: number;
|
|
115
115
|
/**
|
|
116
|
-
* The size property specifies
|
|
116
|
+
* The size property specifies padding of the NumericTextBox internal input element
|
|
117
117
|
* ([see example]({% slug appearance_numerictextbox %}#toc-size)).
|
|
118
118
|
* The possible values are:
|
|
119
119
|
* * `'small'`
|
|
@@ -322,7 +322,7 @@ let NumericTextBoxComponent = NumericTextBoxComponent_1 = class NumericTextBoxCo
|
|
|
322
322
|
return this.tabindex;
|
|
323
323
|
}
|
|
324
324
|
/**
|
|
325
|
-
* The size property specifies
|
|
325
|
+
* The size property specifies padding of the NumericTextBox internal input element
|
|
326
326
|
* ([see example]({% slug appearance_numerictextbox %}#toc-size)).
|
|
327
327
|
* The possible values are:
|
|
328
328
|
* * `'small'`
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-inputs',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
12
|
+
publishDate: 1642571836,
|
|
13
13
|
version: '',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
|
|
15
15
|
};
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as tslib_1 from "tslib";
|
|
6
6
|
import { Directive, ElementRef, HostBinding, Input, Renderer2 } from '@angular/core';
|
|
7
|
+
import { validatePackage } from '@progress/kendo-licensing';
|
|
7
8
|
import { getStylingClasses } from '../common/utils';
|
|
9
|
+
import { packageMetadata } from '../package-metadata';
|
|
8
10
|
/**
|
|
9
11
|
* Represents the directive that renders the [Kendo UI RadioButton]({% slug overview_checkbox %}) input component.
|
|
10
12
|
* The directive is placed on input type="radio" elements.
|
|
@@ -20,6 +22,7 @@ let RadioButtonDirective = class RadioButtonDirective {
|
|
|
20
22
|
this.hostElement = hostElement;
|
|
21
23
|
this.kendoClass = true;
|
|
22
24
|
this._size = 'medium';
|
|
25
|
+
validatePackage(packageMetadata);
|
|
23
26
|
}
|
|
24
27
|
/**
|
|
25
28
|
* The size property specifies the width and height of the RadioButton
|
|
@@ -24,8 +24,7 @@ export class RangeSliderModel extends SliderModelBase {
|
|
|
24
24
|
max,
|
|
25
25
|
reverse,
|
|
26
26
|
value,
|
|
27
|
-
trackWidth
|
|
28
|
-
handleWidth: dragHandle.offsetWidth
|
|
27
|
+
trackWidth
|
|
29
28
|
});
|
|
30
29
|
this.renderer.setStyle(dragHandle, position, `${this.startHandlePosition}px`);
|
|
31
30
|
}
|
|
@@ -35,8 +34,7 @@ export class RangeSliderModel extends SliderModelBase {
|
|
|
35
34
|
max,
|
|
36
35
|
reverse,
|
|
37
36
|
value,
|
|
38
|
-
trackWidth
|
|
39
|
-
handleWidth: dragHandle.offsetWidth
|
|
37
|
+
trackWidth
|
|
40
38
|
});
|
|
41
39
|
this.renderer.setStyle(dragHandle, position, `${this.endHandlePosition}px`);
|
|
42
40
|
}
|
|
@@ -45,11 +43,10 @@ export class RangeSliderModel extends SliderModelBase {
|
|
|
45
43
|
const { reverse, vertical } = this.props;
|
|
46
44
|
const dimension = vertical ? 'height' : 'width';
|
|
47
45
|
const position = vertical ? 'bottom' : reverse ? 'right' : 'left';
|
|
48
|
-
const handleWidth = Math.floor(dragHandle.offsetWidth / 2);
|
|
49
46
|
const size = Math.abs(this.endHandlePosition - this.startHandlePosition);
|
|
50
47
|
const currentSelectionPosition = vertical ? dragHandle.style.bottom : dragHandle.style.left;
|
|
51
48
|
this.renderer.setStyle(selection, dimension, `${size}px`);
|
|
52
|
-
this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition)
|
|
53
|
-
: parseFloat(currentSelectionPosition) +
|
|
49
|
+
this.renderer.setStyle(selection, position, reverse ? this.trackWidth() - parseFloat(currentSelectionPosition) + 'px'
|
|
50
|
+
: parseFloat(currentSelectionPosition) + 'px');
|
|
54
51
|
}
|
|
55
52
|
}
|
|
@@ -443,62 +443,63 @@ RangeSliderComponent = RangeSliderComponent_1 = tslib_1.__decorate([
|
|
|
443
443
|
[class.k-slider-bottomright]="tickPlacement === 'after'"
|
|
444
444
|
[kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
|
|
445
445
|
>
|
|
446
|
-
<
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
<div #
|
|
446
|
+
<div class="k-slider-track-wrap">
|
|
447
|
+
<ul kendoSliderTicks
|
|
448
|
+
#ticks
|
|
449
|
+
*ngIf="tickPlacement !== 'none'"
|
|
450
|
+
[tickTitle]="title"
|
|
451
|
+
[vertical]="vertical"
|
|
452
|
+
[step]="smallStep"
|
|
453
|
+
[largeStep]="largeStep"
|
|
454
|
+
[min]="min"
|
|
455
|
+
[max]="max"
|
|
456
|
+
[labelTemplate]="labelTemplate?.templateRef"
|
|
457
|
+
[attr.aria-hidden]="true"
|
|
458
|
+
>
|
|
459
|
+
</ul>
|
|
460
|
+
<div #track class="k-slider-track">
|
|
461
|
+
<div #sliderSelection class="k-slider-selection">
|
|
462
|
+
</div>
|
|
463
|
+
<a #draghandleStart
|
|
464
|
+
role="slider"
|
|
465
|
+
[id]="startHandleId"
|
|
466
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
467
|
+
[attr.aria-valuemin]="min"
|
|
468
|
+
[attr.aria-valuemax]="max"
|
|
469
|
+
[attr.aria-valuenow]="value ? value[0] : null"
|
|
470
|
+
[attr.aria-valuetext]="valueText"
|
|
471
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
472
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
473
|
+
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
474
|
+
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
475
|
+
class="k-draghandle"
|
|
476
|
+
[title]="textFor('dragHandleStart')"
|
|
477
|
+
kendoDraggable
|
|
478
|
+
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
479
|
+
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
480
|
+
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
481
|
+
></a>
|
|
482
|
+
<a #draghandleEnd
|
|
483
|
+
role="slider"
|
|
484
|
+
[id]="endHandleId"
|
|
485
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
486
|
+
[attr.aria-valuemin]="min"
|
|
487
|
+
[attr.aria-valuemax]="max"
|
|
488
|
+
[attr.aria-valuenow]="value ? value[1] : null"
|
|
489
|
+
[attr.aria-valuetext]="valueText"
|
|
490
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
491
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
492
|
+
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
493
|
+
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
494
|
+
class="k-draghandle"
|
|
495
|
+
[title]="textFor('dragHandleEnd')"
|
|
496
|
+
kendoDraggable
|
|
497
|
+
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
498
|
+
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
499
|
+
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
500
|
+
></a>
|
|
461
501
|
</div>
|
|
462
|
-
<a #draghandleStart
|
|
463
|
-
role="slider"
|
|
464
|
-
[id]="startHandleId"
|
|
465
|
-
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
466
|
-
[attr.aria-valuemin]="min"
|
|
467
|
-
[attr.aria-valuemax]="max"
|
|
468
|
-
[attr.aria-valuenow]="value ? value[0] : null"
|
|
469
|
-
[attr.aria-valuetext]="valueText"
|
|
470
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
471
|
-
[attr.aria-readonly]="readonly ? true : undefined"
|
|
472
|
-
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
473
|
-
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
474
|
-
class="k-draghandle"
|
|
475
|
-
[title]="textFor('dragHandleStart')"
|
|
476
|
-
kendoDraggable
|
|
477
|
-
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
478
|
-
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
479
|
-
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
480
|
-
></a>
|
|
481
|
-
<a #draghandleEnd
|
|
482
|
-
role="slider"
|
|
483
|
-
[id]="endHandleId"
|
|
484
|
-
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
485
|
-
[attr.aria-valuemin]="min"
|
|
486
|
-
[attr.aria-valuemax]="max"
|
|
487
|
-
[attr.aria-valuenow]="value ? value[1] : null"
|
|
488
|
-
[attr.aria-valuetext]="valueText"
|
|
489
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
490
|
-
[attr.aria-readonly]="readonly ? true : undefined"
|
|
491
|
-
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
492
|
-
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
493
|
-
class="k-draghandle"
|
|
494
|
-
[title]="textFor('dragHandleEnd')"
|
|
495
|
-
kendoDraggable
|
|
496
|
-
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
497
|
-
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
498
|
-
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
499
|
-
></a>
|
|
500
502
|
</div>
|
|
501
|
-
|
|
502
503
|
<kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
|
|
503
504
|
</div>
|
|
504
505
|
`
|
|
@@ -10,5 +10,5 @@ export declare class SliderModel extends SliderModelBase {
|
|
|
10
10
|
protected tickSizes: number[];
|
|
11
11
|
protected handlePosition: number;
|
|
12
12
|
positionHandle(dragHandle: HTMLElement): void;
|
|
13
|
-
positionSelection(
|
|
13
|
+
positionSelection(selection: HTMLElement): void;
|
|
14
14
|
}
|
|
@@ -18,16 +18,14 @@ export class SliderModel extends SliderModelBase {
|
|
|
18
18
|
max,
|
|
19
19
|
reverse,
|
|
20
20
|
value,
|
|
21
|
-
trackWidth
|
|
22
|
-
handleWidth: dragHandle.offsetWidth
|
|
21
|
+
trackWidth
|
|
23
22
|
});
|
|
24
23
|
this.renderer.setStyle(dragHandle, position, `${this.handlePosition}px`);
|
|
25
24
|
}
|
|
26
|
-
positionSelection(
|
|
25
|
+
positionSelection(selection) {
|
|
27
26
|
const { reverse, vertical } = this.props;
|
|
28
27
|
const dimension = vertical ? 'height' : 'width';
|
|
29
|
-
|
|
30
|
-
let size = this.handlePosition + handleWidth;
|
|
28
|
+
let size = this.handlePosition;
|
|
31
29
|
if (reverse) {
|
|
32
30
|
size = this.trackWidth() - size;
|
|
33
31
|
}
|
|
@@ -268,7 +268,7 @@ let SliderComponent = SliderComponent_1 = class SliderComponent extends SliderBa
|
|
|
268
268
|
model.resizeTicks(this.ticksContainer.nativeElement, this.ticks.tickElements.map(element => element.nativeElement));
|
|
269
269
|
}
|
|
270
270
|
model.positionHandle(dragHandleEl);
|
|
271
|
-
model.positionSelection(
|
|
271
|
+
model.positionSelection(selectionEl);
|
|
272
272
|
if (!animate) {
|
|
273
273
|
this.hostElement.nativeElement.getBoundingClientRect();
|
|
274
274
|
this.renderer.addClass(this.hostElement.nativeElement, 'k-slider-transitions');
|
|
@@ -446,69 +446,66 @@ SliderComponent = SliderComponent_1 = tslib_1.__decorate([
|
|
|
446
446
|
[class.k-slider-bottomright]="tickPlacement === 'after'"
|
|
447
447
|
[kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
|
|
448
448
|
>
|
|
449
|
-
<
|
|
450
|
-
|
|
451
|
-
*ngIf="showButtons"
|
|
452
|
-
class="k-button k-button-decrease"
|
|
449
|
+
<button *ngIf="showButtons" type="button" #decreaseButton
|
|
450
|
+
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"
|
|
453
451
|
[title]="decrementMessage"
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
452
|
+
[attr.tabindex]="-1"
|
|
453
|
+
role="presentation">
|
|
454
|
+
<span class="k-button-icon k-icon"
|
|
455
|
+
[class.k-i-arrow-w]="!vertical"
|
|
456
|
+
[class.k-i-arrow-s]="vertical">
|
|
457
|
+
</span>
|
|
458
|
+
</button>
|
|
459
|
+
<div class="k-slider-track-wrap">
|
|
460
|
+
<ul kendoSliderTicks
|
|
461
|
+
#ticks
|
|
462
|
+
*ngIf="tickPlacement !== 'none'"
|
|
463
|
+
[tickTitle]="title"
|
|
464
|
+
[vertical]="vertical"
|
|
465
|
+
[step]="smallStep"
|
|
466
|
+
[largeStep]="largeStep"
|
|
467
|
+
[min]="min"
|
|
468
|
+
[max]="max"
|
|
469
|
+
[labelTemplate]="labelTemplate?.templateRef"
|
|
470
|
+
[attr.aria-hidden]="true"
|
|
459
471
|
>
|
|
460
|
-
</
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
472
|
+
</ul>
|
|
473
|
+
<div #track class="k-slider-track">
|
|
474
|
+
<div #sliderSelection class="k-slider-selection">
|
|
475
|
+
</div>
|
|
476
|
+
<a #draghandle
|
|
477
|
+
role="slider"
|
|
478
|
+
[attr.aria-valuemin]="min"
|
|
479
|
+
[attr.aria-valuemax]="max"
|
|
480
|
+
[attr.aria-valuenow]="currentValue"
|
|
481
|
+
[attr.aria-valuetext]="currentValue"
|
|
482
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
483
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
484
|
+
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
485
|
+
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
486
|
+
class="k-draghandle"
|
|
487
|
+
[title]="dragHandleMessage"
|
|
488
|
+
[attr.tabindex]="disabled ? '-1' : tabIndex"
|
|
489
|
+
[id]="focusableId"
|
|
490
|
+
kendoDraggable
|
|
491
|
+
(kendoPress)="ifEnabled(handleDragPress, $event)"
|
|
492
|
+
(kendoDrag)="ifEnabled(onHandleDrag, $event)"
|
|
493
|
+
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
494
|
+
></a>
|
|
495
|
+
</div>
|
|
496
|
+
</div>
|
|
497
|
+
<button *ngIf="showButtons" type="button" #increaseButton
|
|
498
|
+
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"
|
|
466
499
|
[title]="incrementMessage"
|
|
467
500
|
(click)="$event.preventDefault()"
|
|
501
|
+
[attr.tabindex]="-1"
|
|
468
502
|
[attr.aria-label]="currentValue"
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
</span>
|
|
476
|
-
<ul kendoSliderTicks
|
|
477
|
-
#ticks
|
|
478
|
-
*ngIf="tickPlacement !== 'none'"
|
|
479
|
-
[tickTitle]="title"
|
|
480
|
-
[vertical]="vertical"
|
|
481
|
-
[step]="smallStep"
|
|
482
|
-
[largeStep]="largeStep"
|
|
483
|
-
[min]="min"
|
|
484
|
-
[max]="max"
|
|
485
|
-
[labelTemplate]="labelTemplate?.templateRef"
|
|
486
|
-
[attr.aria-hidden]="true"
|
|
487
|
-
>
|
|
488
|
-
</ul>
|
|
489
|
-
<div #track class="k-slider-track">
|
|
490
|
-
<div #sliderSelection class="k-slider-selection">
|
|
491
|
-
</div>
|
|
492
|
-
<a #draghandle
|
|
493
|
-
role="slider"
|
|
494
|
-
[attr.aria-valuemin]="min"
|
|
495
|
-
[attr.aria-valuemax]="max"
|
|
496
|
-
[attr.aria-valuenow]="currentValue"
|
|
497
|
-
[attr.aria-valuetext]="currentValue"
|
|
498
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
499
|
-
[attr.aria-readonly]="readonly ? true : undefined"
|
|
500
|
-
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
501
|
-
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
502
|
-
class="k-draghandle"
|
|
503
|
-
[title]="dragHandleMessage"
|
|
504
|
-
[attr.tabindex]="disabled ? '-1' : tabIndex"
|
|
505
|
-
[id]="focusableId"
|
|
506
|
-
kendoDraggable
|
|
507
|
-
(kendoPress)="ifEnabled(handleDragPress, $event)"
|
|
508
|
-
(kendoDrag)="ifEnabled(onHandleDrag, $event)"
|
|
509
|
-
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
510
|
-
></a>
|
|
511
|
-
</div>
|
|
503
|
+
role="presentation">
|
|
504
|
+
<span class="k-button-icon k-icon"
|
|
505
|
+
[class.k-i-arrow-e]="!vertical"
|
|
506
|
+
[class.k-i-arrow-n]="vertical">
|
|
507
|
+
</span>
|
|
508
|
+
</button>
|
|
512
509
|
<kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
|
|
513
510
|
</div>
|
|
514
511
|
`
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2021 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import {
|
|
5
|
+
import { calculateFixedTrackSize, calculateTicksCount } from '../sliders-common/sliders-util';
|
|
6
6
|
import { subtract } from '../common/math';
|
|
7
7
|
/**
|
|
8
8
|
* @hidden
|
|
@@ -20,8 +20,10 @@ export class SliderModelBase {
|
|
|
20
20
|
}
|
|
21
21
|
resizeTrack() {
|
|
22
22
|
const orientation = this.props.vertical ? 'height' : 'width';
|
|
23
|
+
const altOrientation = this.props.vertical ? 'width' : 'height';
|
|
23
24
|
const trackWidth = this.trackWidth();
|
|
24
|
-
this.track.style[orientation] = `${trackWidth}px`;
|
|
25
|
+
this.track.parentElement.style[orientation] = `${trackWidth}px`;
|
|
26
|
+
this.track.parentElement.style[altOrientation] = '';
|
|
25
27
|
}
|
|
26
28
|
resizeTicks(ticksContainer, ticks) {
|
|
27
29
|
const dimension = this.props.vertical ? "height" : "width";
|
|
@@ -32,22 +34,17 @@ export class SliderModelBase {
|
|
|
32
34
|
}
|
|
33
35
|
resizeWrapper() {
|
|
34
36
|
const dimension = this.props.vertical ? "height" : "width";
|
|
35
|
-
const wrapperSize = this.elementSize(this.wrapper);
|
|
36
|
-
const trackWidth = calculateTrackSize(wrapperSize, this.elementOffset(this.track));
|
|
37
37
|
const fixedTrackWidth = calculateFixedTrackSize(this.props);
|
|
38
38
|
const wrapperParentEl = this.wrapper.parentElement;
|
|
39
|
-
if (
|
|
40
|
-
wrapperParentEl.style[dimension] =
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
wrapperParentEl.style[dimension] = `${wrapperSize + (fixedTrackWidth - trackWidth)}px`;
|
|
39
|
+
if (fixedTrackWidth) {
|
|
40
|
+
wrapperParentEl.style[dimension] = "auto";
|
|
44
41
|
}
|
|
45
42
|
}
|
|
46
43
|
trackWidth() {
|
|
47
44
|
if (this.props.fixedTickWidth) {
|
|
48
45
|
return calculateFixedTrackSize(this.props);
|
|
49
46
|
}
|
|
50
|
-
return
|
|
47
|
+
return this.elementSize(this.track.parentElement);
|
|
51
48
|
}
|
|
52
49
|
getTickSizes() {
|
|
53
50
|
const { min, max, smallStep } = this.props;
|
|
@@ -7,7 +7,6 @@ import { ElementRef, OnChanges, QueryList, TemplateRef } from '@angular/core';
|
|
|
7
7
|
* @hidden
|
|
8
8
|
*/
|
|
9
9
|
export declare class SliderTicksComponent implements OnChanges {
|
|
10
|
-
private rtl;
|
|
11
10
|
wrapperClasses: string;
|
|
12
11
|
tickTitle: (value: number) => string;
|
|
13
12
|
vertical: boolean;
|
|
@@ -18,7 +17,6 @@ export declare class SliderTicksComponent implements OnChanges {
|
|
|
18
17
|
labelTemplate: TemplateRef<any>;
|
|
19
18
|
tickElements: QueryList<ElementRef>;
|
|
20
19
|
ticks: Array<any>;
|
|
21
|
-
constructor(rtl: boolean);
|
|
22
20
|
ngOnChanges(_: any): void;
|
|
23
21
|
private createTicks;
|
|
24
22
|
private endTickClasses;
|
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as tslib_1 from "tslib";
|
|
6
6
|
/* tslint:disable:component-selector */
|
|
7
|
-
import { Component,
|
|
8
|
-
import { RTL } from '@progress/kendo-angular-l10n';
|
|
7
|
+
import { Component, Input, QueryList, ViewChildren, HostBinding, TemplateRef } from '@angular/core';
|
|
9
8
|
import { calculateTicksCount, calculateValueFromTick } from './sliders-util';
|
|
10
9
|
/**
|
|
11
10
|
* @hidden
|
|
@@ -22,8 +21,10 @@ class SliderTick {
|
|
|
22
21
|
* @hidden
|
|
23
22
|
*/
|
|
24
23
|
let SliderTicksComponent = class SliderTicksComponent {
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
/**
|
|
25
|
+
* @hidden
|
|
26
|
+
*/
|
|
27
|
+
constructor() {
|
|
27
28
|
this.wrapperClasses = 'k-reset k-slider-items';
|
|
28
29
|
this.ticks = [];
|
|
29
30
|
}
|
|
@@ -46,9 +47,6 @@ let SliderTicksComponent = class SliderTicksComponent {
|
|
|
46
47
|
result[i].classes['k-tick-large'] = true;
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
|
-
if (this.rtl || this.vertical) {
|
|
50
|
-
result = result.reverse();
|
|
51
|
-
}
|
|
52
50
|
if (result.length > 0) {
|
|
53
51
|
Object.assign(result[0].classes, this.endTickClasses(true));
|
|
54
52
|
Object.assign(result[result.length - 1].classes, this.endTickClasses(false));
|
|
@@ -120,8 +118,6 @@ SliderTicksComponent = tslib_1.__decorate([
|
|
|
120
118
|
{{ tickTitle(value) }}
|
|
121
119
|
</ng-template>
|
|
122
120
|
`
|
|
123
|
-
})
|
|
124
|
-
tslib_1.__param(0, Optional()), tslib_1.__param(0, Inject(RTL)),
|
|
125
|
-
tslib_1.__metadata("design:paramtypes", [Boolean])
|
|
121
|
+
})
|
|
126
122
|
], SliderTicksComponent);
|
|
127
123
|
export { SliderTicksComponent };
|
|
@@ -21,7 +21,7 @@ export declare const calculateValueFromTick: (index: number, { max, min, smallSt
|
|
|
21
21
|
/**
|
|
22
22
|
* @hidden
|
|
23
23
|
*/
|
|
24
|
-
export declare const calculateHandlePosition: ({
|
|
24
|
+
export declare const calculateHandlePosition: ({ trackWidth, min, max, reverse, value }: any) => number;
|
|
25
25
|
/**
|
|
26
26
|
* @hidden
|
|
27
27
|
*/
|
|
@@ -95,7 +95,7 @@ declare const _default: {
|
|
|
95
95
|
calculateValueFromTick: (index: number, { max, min, smallStep, reverse, vertical }: any) => number;
|
|
96
96
|
calculateTrackSize: (wrapperWidth: number, offset: any, showButtons?: boolean) => number;
|
|
97
97
|
calculateTicksCount: (min?: number, max?: number, smallStep?: number) => number;
|
|
98
|
-
calculateHandlePosition: ({
|
|
98
|
+
calculateHandlePosition: ({ trackWidth, min, max, reverse, value }: any) => number;
|
|
99
99
|
decreaseValueToStep: (value: number, { max, min, smallStep, largeStep }: any, large?: boolean) => number;
|
|
100
100
|
decrement: (options: any) => number;
|
|
101
101
|
decrementLarge: (options: any) => number;
|
|
@@ -40,14 +40,13 @@ export const calculateValueFromTick = (index, { max, min, smallStep, reverse, ve
|
|
|
40
40
|
/**
|
|
41
41
|
* @hidden
|
|
42
42
|
*/
|
|
43
|
-
export const calculateHandlePosition = ({
|
|
44
|
-
const halfHandleWidth = Math.floor(handleWidth / 2);
|
|
43
|
+
export const calculateHandlePosition = ({ trackWidth, min, max, reverse, value }) => {
|
|
45
44
|
const step = trackWidth / Math.abs(max - min);
|
|
46
45
|
let pos = isPresent(value) ? step * (value - min) : min;
|
|
47
46
|
if (reverse) {
|
|
48
47
|
pos = trackWidth - pos;
|
|
49
48
|
}
|
|
50
|
-
return Math.floor(pos
|
|
49
|
+
return Math.floor(pos);
|
|
51
50
|
};
|
|
52
51
|
/**
|
|
53
52
|
* @hidden
|
|
@@ -113,7 +113,7 @@ let SwitchComponent = SwitchComponent_1 = class SwitchComponent {
|
|
|
113
113
|
return this._checked;
|
|
114
114
|
}
|
|
115
115
|
/**
|
|
116
|
-
* Specifies the
|
|
116
|
+
* Specifies the width and height of the Switch.
|
|
117
117
|
*
|
|
118
118
|
* The possible values are:
|
|
119
119
|
* * `'small'`
|
|
@@ -68,7 +68,7 @@ export declare class TextAreaComponent extends TextFieldsBase implements Control
|
|
|
68
68
|
*/
|
|
69
69
|
resizable: TextAreaResize;
|
|
70
70
|
/**
|
|
71
|
-
* The size property specifies the
|
|
71
|
+
* The size property specifies the padding of the internal textarea element
|
|
72
72
|
* ([see example]({% slug appearance_textarea %}#toc-size)).
|
|
73
73
|
*
|
|
74
74
|
* The possible values are:
|
|
@@ -173,7 +173,7 @@ let TextAreaComponent = TextAreaComponent_1 = class TextAreaComponent extends Te
|
|
|
173
173
|
return this.tabindex;
|
|
174
174
|
}
|
|
175
175
|
/**
|
|
176
|
-
* The size property specifies the
|
|
176
|
+
* The size property specifies the padding of the internal textarea element
|
|
177
177
|
* ([see example]({% slug appearance_textarea %}#toc-size)).
|
|
178
178
|
*
|
|
179
179
|
* The possible values are:
|
|
@@ -558,7 +558,15 @@ TextAreaComponent = TextAreaComponent_1 = tslib_1.__decorate([
|
|
|
558
558
|
input: handleInput}">
|
|
559
559
|
</textarea>
|
|
560
560
|
<ng-content select="kendo-textarea-suffix"></ng-content>
|
|
561
|
-
|
|
561
|
+
`,
|
|
562
|
+
styles: [`
|
|
563
|
+
:host(.k-flex-col) {
|
|
564
|
+
flex-direction: column !important;
|
|
565
|
+
}
|
|
566
|
+
:host(.k-flex-row) {
|
|
567
|
+
flex-direction: row !important;
|
|
568
|
+
}
|
|
569
|
+
`]
|
|
562
570
|
}),
|
|
563
571
|
tslib_1.__metadata("design:paramtypes", [LocalizationService,
|
|
564
572
|
NgZone,
|
|
@@ -96,7 +96,7 @@ export declare class TextBoxComponent implements ControlValueAccessor {
|
|
|
96
96
|
*/
|
|
97
97
|
clearButtonIcon: string;
|
|
98
98
|
/**
|
|
99
|
-
* The size property specifies the
|
|
99
|
+
* The size property specifies the padding of the TextBox internal input element
|
|
100
100
|
* ([see example]({% slug appearance_textbox %}#toc-size)).
|
|
101
101
|
*
|
|
102
102
|
* The possible values are:
|