@progress/kendo-angular-inputs 12.2.0-develop.2 → 12.2.0-develop.3
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/esm2020/colorpicker/color-palette.component.mjs +46 -50
- package/esm2020/colorpicker/flatcolorpicker-actions.component.mjs +2 -2
- package/esm2020/package-metadata.mjs +2 -2
- package/esm2020/rangeslider/rangeslider.component.mjs +114 -114
- package/esm2020/slider/slider.component.mjs +129 -135
- package/fesm2015/progress-kendo-angular-inputs.mjs +293 -303
- package/fesm2020/progress-kendo-angular-inputs.mjs +293 -303
- package/package.json +10 -10
|
@@ -420,31 +420,29 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
420
420
|
i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
|
|
421
421
|
colorPaletteNoColor="Colorpalette no color chosen">
|
|
422
422
|
</ng-container>
|
|
423
|
-
<
|
|
424
|
-
<
|
|
425
|
-
<
|
|
426
|
-
<
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
</table>
|
|
447
|
-
</div>
|
|
423
|
+
<table role="presentation" class="k-colorpalette-table">
|
|
424
|
+
<tbody>
|
|
425
|
+
<tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
|
|
426
|
+
<td *ngFor="let color of row; let colIndex = index"
|
|
427
|
+
role="gridcell"
|
|
428
|
+
[class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
|
|
429
|
+
[class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
|
|
430
|
+
[attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
|
|
431
|
+
[attr.aria-label]="color"
|
|
432
|
+
class="k-colorpalette-tile"
|
|
433
|
+
[id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
|
|
434
|
+
[attr.value]="color"
|
|
435
|
+
(click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
|
|
436
|
+
[ngStyle]="{
|
|
437
|
+
backgroundColor: color,
|
|
438
|
+
width: tileLayout.width + 'px',
|
|
439
|
+
height: tileLayout.height + 'px',
|
|
440
|
+
minWidth: tileLayout.width + 'px'
|
|
441
|
+
}">
|
|
442
|
+
</td>
|
|
443
|
+
</tr>
|
|
444
|
+
</tbody>
|
|
445
|
+
</table>
|
|
448
446
|
`, isInline: true, directives: [{ type: i3.LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
449
447
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, decorators: [{
|
|
450
448
|
type: Component,
|
|
@@ -476,31 +474,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
476
474
|
i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
|
|
477
475
|
colorPaletteNoColor="Colorpalette no color chosen">
|
|
478
476
|
</ng-container>
|
|
479
|
-
<
|
|
480
|
-
<
|
|
481
|
-
<
|
|
482
|
-
<
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
</table>
|
|
503
|
-
</div>
|
|
477
|
+
<table role="presentation" class="k-colorpalette-table">
|
|
478
|
+
<tbody>
|
|
479
|
+
<tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
|
|
480
|
+
<td *ngFor="let color of row; let colIndex = index"
|
|
481
|
+
role="gridcell"
|
|
482
|
+
[class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
|
|
483
|
+
[class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
|
|
484
|
+
[attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
|
|
485
|
+
[attr.aria-label]="color"
|
|
486
|
+
class="k-colorpalette-tile"
|
|
487
|
+
[id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
|
|
488
|
+
[attr.value]="color"
|
|
489
|
+
(click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
|
|
490
|
+
[ngStyle]="{
|
|
491
|
+
backgroundColor: color,
|
|
492
|
+
width: tileLayout.width + 'px',
|
|
493
|
+
height: tileLayout.height + 'px',
|
|
494
|
+
minWidth: tileLayout.width + 'px'
|
|
495
|
+
}">
|
|
496
|
+
</td>
|
|
497
|
+
</tr>
|
|
498
|
+
</tbody>
|
|
499
|
+
</table>
|
|
504
500
|
`
|
|
505
501
|
}]
|
|
506
502
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ColorPaletteService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { direction: [{
|
|
@@ -29,7 +29,7 @@ export class FlatColorPickerActionButtonsComponent {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
-
FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-
|
|
32
|
+
FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: { innerTabIndex: "innerTabIndex" }, outputs: { actionButtonClick: "actionButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-actions-horizontal": "this.hostClasses" } }, viewQueries: [{ propertyName: "firstButton", first: true, predicate: ["first"], descendants: true, read: ElementRef }, { propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
33
33
|
<button #first
|
|
34
34
|
class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
|
|
35
35
|
[attr.title]="getText('cancelButton')"
|
|
@@ -77,7 +77,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
77
77
|
args: ['class.k-actions']
|
|
78
78
|
}, {
|
|
79
79
|
type: HostBinding,
|
|
80
|
-
args: ['class.k-
|
|
80
|
+
args: ['class.k-actions-horizontal']
|
|
81
81
|
}], innerTabIndex: [{
|
|
82
82
|
type: Input
|
|
83
83
|
}], actionButtonClick: [{
|
|
@@ -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:
|
|
13
|
-
version: '12.2.0-develop.
|
|
12
|
+
publishDate: 1684487794,
|
|
13
|
+
version: '12.2.0-develop.3',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -444,70 +444,70 @@ RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
|
444
444
|
dragHandleEnd="Drag"
|
|
445
445
|
>
|
|
446
446
|
|
|
447
|
-
<div
|
|
447
|
+
<div
|
|
448
|
+
#wrap
|
|
449
|
+
class="k-slider-track-wrap"
|
|
448
450
|
[class.k-slider-topleft]="tickPlacement === 'before'"
|
|
449
451
|
[class.k-slider-bottomright]="tickPlacement === 'after'"
|
|
450
452
|
[kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
|
|
453
|
+
>
|
|
454
|
+
<ul kendoSliderTicks
|
|
455
|
+
#ticks
|
|
456
|
+
*ngIf="tickPlacement !== 'none'"
|
|
457
|
+
[tickTitle]="title"
|
|
458
|
+
[vertical]="vertical"
|
|
459
|
+
[step]="smallStep"
|
|
460
|
+
[largeStep]="largeStep"
|
|
461
|
+
[min]="min"
|
|
462
|
+
[max]="max"
|
|
463
|
+
[labelTemplate]="labelTemplate?.templateRef"
|
|
464
|
+
[attr.aria-hidden]="true"
|
|
451
465
|
>
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
*ngIf="tickPlacement !== 'none'"
|
|
456
|
-
[tickTitle]="title"
|
|
457
|
-
[vertical]="vertical"
|
|
458
|
-
[step]="smallStep"
|
|
459
|
-
[largeStep]="largeStep"
|
|
460
|
-
[min]="min"
|
|
461
|
-
[max]="max"
|
|
462
|
-
[labelTemplate]="labelTemplate?.templateRef"
|
|
463
|
-
[attr.aria-hidden]="true"
|
|
464
|
-
>
|
|
465
|
-
</ul>
|
|
466
|
-
<div #track class="k-slider-track">
|
|
467
|
-
<div #sliderSelection class="k-slider-selection">
|
|
468
|
-
</div>
|
|
469
|
-
<span #draghandleStart
|
|
470
|
-
role="slider"
|
|
471
|
-
[id]="startHandleId"
|
|
472
|
-
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
473
|
-
[attr.aria-valuemin]="min"
|
|
474
|
-
[attr.aria-valuemax]="max"
|
|
475
|
-
[attr.aria-valuenow]="value ? value[0] : null"
|
|
476
|
-
[attr.aria-valuetext]="valueText"
|
|
477
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
478
|
-
[attr.aria-readonly]="readonly ? true : undefined"
|
|
479
|
-
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
480
|
-
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
481
|
-
class="k-draghandle"
|
|
482
|
-
[title]="textFor('dragHandleStart')"
|
|
483
|
-
kendoDraggable
|
|
484
|
-
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
485
|
-
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
486
|
-
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
487
|
-
></span>
|
|
488
|
-
<span #draghandleEnd
|
|
489
|
-
role="slider"
|
|
490
|
-
[id]="endHandleId"
|
|
491
|
-
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
492
|
-
[attr.aria-valuemin]="min"
|
|
493
|
-
[attr.aria-valuemax]="max"
|
|
494
|
-
[attr.aria-valuenow]="value ? value[1] : null"
|
|
495
|
-
[attr.aria-valuetext]="valueText"
|
|
496
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
497
|
-
[attr.aria-readonly]="readonly ? true : undefined"
|
|
498
|
-
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
499
|
-
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
500
|
-
class="k-draghandle"
|
|
501
|
-
[title]="textFor('dragHandleEnd')"
|
|
502
|
-
kendoDraggable
|
|
503
|
-
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
504
|
-
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
505
|
-
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
506
|
-
></span>
|
|
466
|
+
</ul>
|
|
467
|
+
<div #track class="k-slider-track">
|
|
468
|
+
<div #sliderSelection class="k-slider-selection">
|
|
507
469
|
</div>
|
|
470
|
+
<span #draghandleStart
|
|
471
|
+
role="slider"
|
|
472
|
+
[id]="startHandleId"
|
|
473
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
474
|
+
[attr.aria-valuemin]="min"
|
|
475
|
+
[attr.aria-valuemax]="max"
|
|
476
|
+
[attr.aria-valuenow]="value ? value[0] : null"
|
|
477
|
+
[attr.aria-valuetext]="valueText"
|
|
478
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
479
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
480
|
+
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
481
|
+
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
482
|
+
class="k-draghandle"
|
|
483
|
+
[title]="textFor('dragHandleStart')"
|
|
484
|
+
kendoDraggable
|
|
485
|
+
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
486
|
+
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
487
|
+
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
488
|
+
></span>
|
|
489
|
+
<span #draghandleEnd
|
|
490
|
+
role="slider"
|
|
491
|
+
[id]="endHandleId"
|
|
492
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
493
|
+
[attr.aria-valuemin]="min"
|
|
494
|
+
[attr.aria-valuemax]="max"
|
|
495
|
+
[attr.aria-valuenow]="value ? value[1] : null"
|
|
496
|
+
[attr.aria-valuetext]="valueText"
|
|
497
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
498
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
499
|
+
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
500
|
+
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
501
|
+
class="k-draghandle"
|
|
502
|
+
[title]="textFor('dragHandleEnd')"
|
|
503
|
+
kendoDraggable
|
|
504
|
+
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
505
|
+
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
506
|
+
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
507
|
+
></span>
|
|
508
508
|
</div>
|
|
509
|
-
<kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
|
|
510
509
|
</div>
|
|
510
|
+
<kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
|
|
511
511
|
`, isInline: true, components: [{ type: i2.SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
|
|
512
512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RangeSliderComponent, decorators: [{
|
|
513
513
|
type: Component,
|
|
@@ -528,70 +528,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
528
528
|
dragHandleEnd="Drag"
|
|
529
529
|
>
|
|
530
530
|
|
|
531
|
-
<div
|
|
531
|
+
<div
|
|
532
|
+
#wrap
|
|
533
|
+
class="k-slider-track-wrap"
|
|
532
534
|
[class.k-slider-topleft]="tickPlacement === 'before'"
|
|
533
535
|
[class.k-slider-bottomright]="tickPlacement === 'after'"
|
|
534
536
|
[kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
|
|
537
|
+
>
|
|
538
|
+
<ul kendoSliderTicks
|
|
539
|
+
#ticks
|
|
540
|
+
*ngIf="tickPlacement !== 'none'"
|
|
541
|
+
[tickTitle]="title"
|
|
542
|
+
[vertical]="vertical"
|
|
543
|
+
[step]="smallStep"
|
|
544
|
+
[largeStep]="largeStep"
|
|
545
|
+
[min]="min"
|
|
546
|
+
[max]="max"
|
|
547
|
+
[labelTemplate]="labelTemplate?.templateRef"
|
|
548
|
+
[attr.aria-hidden]="true"
|
|
535
549
|
>
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
*ngIf="tickPlacement !== 'none'"
|
|
540
|
-
[tickTitle]="title"
|
|
541
|
-
[vertical]="vertical"
|
|
542
|
-
[step]="smallStep"
|
|
543
|
-
[largeStep]="largeStep"
|
|
544
|
-
[min]="min"
|
|
545
|
-
[max]="max"
|
|
546
|
-
[labelTemplate]="labelTemplate?.templateRef"
|
|
547
|
-
[attr.aria-hidden]="true"
|
|
548
|
-
>
|
|
549
|
-
</ul>
|
|
550
|
-
<div #track class="k-slider-track">
|
|
551
|
-
<div #sliderSelection class="k-slider-selection">
|
|
552
|
-
</div>
|
|
553
|
-
<span #draghandleStart
|
|
554
|
-
role="slider"
|
|
555
|
-
[id]="startHandleId"
|
|
556
|
-
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
557
|
-
[attr.aria-valuemin]="min"
|
|
558
|
-
[attr.aria-valuemax]="max"
|
|
559
|
-
[attr.aria-valuenow]="value ? value[0] : null"
|
|
560
|
-
[attr.aria-valuetext]="valueText"
|
|
561
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
562
|
-
[attr.aria-readonly]="readonly ? true : undefined"
|
|
563
|
-
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
564
|
-
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
565
|
-
class="k-draghandle"
|
|
566
|
-
[title]="textFor('dragHandleStart')"
|
|
567
|
-
kendoDraggable
|
|
568
|
-
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
569
|
-
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
570
|
-
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
571
|
-
></span>
|
|
572
|
-
<span #draghandleEnd
|
|
573
|
-
role="slider"
|
|
574
|
-
[id]="endHandleId"
|
|
575
|
-
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
576
|
-
[attr.aria-valuemin]="min"
|
|
577
|
-
[attr.aria-valuemax]="max"
|
|
578
|
-
[attr.aria-valuenow]="value ? value[1] : null"
|
|
579
|
-
[attr.aria-valuetext]="valueText"
|
|
580
|
-
[attr.aria-disabled]="disabled ? true : undefined"
|
|
581
|
-
[attr.aria-readonly]="readonly ? true : undefined"
|
|
582
|
-
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
583
|
-
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
584
|
-
class="k-draghandle"
|
|
585
|
-
[title]="textFor('dragHandleEnd')"
|
|
586
|
-
kendoDraggable
|
|
587
|
-
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
588
|
-
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
589
|
-
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
590
|
-
></span>
|
|
550
|
+
</ul>
|
|
551
|
+
<div #track class="k-slider-track">
|
|
552
|
+
<div #sliderSelection class="k-slider-selection">
|
|
591
553
|
</div>
|
|
554
|
+
<span #draghandleStart
|
|
555
|
+
role="slider"
|
|
556
|
+
[id]="startHandleId"
|
|
557
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
558
|
+
[attr.aria-valuemin]="min"
|
|
559
|
+
[attr.aria-valuemax]="max"
|
|
560
|
+
[attr.aria-valuenow]="value ? value[0] : null"
|
|
561
|
+
[attr.aria-valuetext]="valueText"
|
|
562
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
563
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
564
|
+
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
565
|
+
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
566
|
+
class="k-draghandle"
|
|
567
|
+
[title]="textFor('dragHandleStart')"
|
|
568
|
+
kendoDraggable
|
|
569
|
+
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
570
|
+
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
571
|
+
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
572
|
+
></span>
|
|
573
|
+
<span #draghandleEnd
|
|
574
|
+
role="slider"
|
|
575
|
+
[id]="endHandleId"
|
|
576
|
+
[attr.tabindex]="disabled ? undefined : tabindex"
|
|
577
|
+
[attr.aria-valuemin]="min"
|
|
578
|
+
[attr.aria-valuemax]="max"
|
|
579
|
+
[attr.aria-valuenow]="value ? value[1] : null"
|
|
580
|
+
[attr.aria-valuetext]="valueText"
|
|
581
|
+
[attr.aria-disabled]="disabled ? true : undefined"
|
|
582
|
+
[attr.aria-readonly]="readonly ? true : undefined"
|
|
583
|
+
[attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
|
|
584
|
+
[style.touch-action]="isDisabled ? '' : 'none'"
|
|
585
|
+
class="k-draghandle"
|
|
586
|
+
[title]="textFor('dragHandleEnd')"
|
|
587
|
+
kendoDraggable
|
|
588
|
+
(kendoPress)="ifEnabled(handleDragPress ,$event)"
|
|
589
|
+
(kendoDrag)="ifEnabled(onHandleDrag ,$event)"
|
|
590
|
+
(kendoRelease)="ifEnabled(onHandleRelease, $event)"
|
|
591
|
+
></span>
|
|
592
592
|
</div>
|
|
593
|
-
<kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
|
|
594
593
|
</div>
|
|
594
|
+
<kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
|
|
595
595
|
`
|
|
596
596
|
}]
|
|
597
597
|
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { value: [{
|