@progress/kendo-angular-inputs 12.2.0-develop.2 → 12.2.0-develop.4

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.
@@ -421,81 +421,78 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
421
421
  i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
422
422
  dragHandle="Drag"
423
423
  >
424
- <div class="k-slider-wrap" #wrap
425
- [class.k-slider-buttons]="showButtons"
424
+ <button
425
+ kendoButton
426
+ #decreaseButton
427
+ *ngIf="showButtons"
428
+ type="button"
429
+ rounded="full"
430
+ [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
431
+ [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
432
+ class="k-button-decrease"
433
+ [title]="decrementMessage"
434
+ [attr.tabindex]="-1"
435
+ ></button>
436
+ <div
437
+ #wrap
438
+ class="k-slider-track-wrap"
426
439
  [class.k-slider-topleft]="tickPlacement === 'before'"
427
440
  [class.k-slider-bottomright]="tickPlacement === 'after'"
428
441
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
442
+ >
443
+ <ul kendoSliderTicks
444
+ #ticks
445
+ *ngIf="tickPlacement !== 'none'"
446
+ [tickTitle]="title"
447
+ [vertical]="vertical"
448
+ [step]="smallStep"
449
+ [largeStep]="largeStep"
450
+ [min]="min"
451
+ [max]="max"
452
+ [labelTemplate]="labelTemplate?.templateRef"
453
+ [attr.aria-hidden]="true"
429
454
  >
430
- <button
431
- kendoButton
432
- #decreaseButton
433
- *ngIf="showButtons"
434
- type="button"
435
- rounded="full"
436
- [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
437
- [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
438
- class="k-button-decrease"
439
- [title]="decrementMessage"
440
- [attr.tabindex]="-1"
441
-
442
- ></button>
443
- <div class="k-slider-track-wrap">
444
- <ul kendoSliderTicks
445
- #ticks
446
- *ngIf="tickPlacement !== 'none'"
447
- [tickTitle]="title"
448
- [vertical]="vertical"
449
- [step]="smallStep"
450
- [largeStep]="largeStep"
451
- [min]="min"
452
- [max]="max"
453
- [labelTemplate]="labelTemplate?.templateRef"
454
- [attr.aria-hidden]="true"
455
- >
456
- </ul>
457
- <div #track class="k-slider-track">
458
- <div #sliderSelection class="k-slider-selection">
459
- </div>
460
- <span #draghandle
461
- role="slider"
462
- [attr.aria-valuemin]="min"
463
- [attr.aria-valuemax]="max"
464
- [attr.aria-valuenow]="currentValue"
465
- [attr.aria-valuetext]="currentValue"
466
- [attr.aria-disabled]="disabled ? true : undefined"
467
- [attr.aria-readonly]="readonly ? true : undefined"
468
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
469
- [style.touch-action]="isDisabled ? '' : 'none'"
470
- class="k-draghandle"
471
- [title]="dragHandleMessage"
472
- [attr.tabindex]="disabled ? '-1' : tabIndex"
473
- [id]="focusableId"
474
- kendoDraggable
475
- (kendoPress)="ifEnabled(handleDragPress, $event)"
476
- (kendoDrag)="ifEnabled(onHandleDrag, $event)"
477
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
478
- ></span>
455
+ </ul>
456
+ <div #track class="k-slider-track">
457
+ <div #sliderSelection class="k-slider-selection">
479
458
  </div>
459
+ <span #draghandle
460
+ role="slider"
461
+ [attr.aria-valuemin]="min"
462
+ [attr.aria-valuemax]="max"
463
+ [attr.aria-valuenow]="currentValue"
464
+ [attr.aria-valuetext]="currentValue"
465
+ [attr.aria-disabled]="disabled ? true : undefined"
466
+ [attr.aria-readonly]="readonly ? true : undefined"
467
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
468
+ [style.touch-action]="isDisabled ? '' : 'none'"
469
+ class="k-draghandle"
470
+ [title]="dragHandleMessage"
471
+ [attr.tabindex]="disabled ? '-1' : tabIndex"
472
+ [id]="focusableId"
473
+ kendoDraggable
474
+ (kendoPress)="ifEnabled(handleDragPress, $event)"
475
+ (kendoDrag)="ifEnabled(onHandleDrag, $event)"
476
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
477
+ ></span>
480
478
  </div>
481
- <button
482
- kendoButton
483
- #increaseButton
484
- *ngIf="showButtons"
485
- type="button"
486
- rounded="full"
487
- [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
488
- [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
489
- class="k-button-increase"
490
- [title]="incrementMessage"
491
- (click)="$event.preventDefault()"
492
- [attr.tabindex]="-1"
493
- [attr.aria-label]="currentValue"
494
-
495
- ></button>
496
- <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
497
479
  </div>
498
- `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i5.LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
480
+ <button
481
+ kendoButton
482
+ #increaseButton
483
+ *ngIf="showButtons"
484
+ type="button"
485
+ rounded="full"
486
+ [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
487
+ [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
488
+ class="k-button-increase"
489
+ [title]="incrementMessage"
490
+ (click)="$event.preventDefault()"
491
+ [attr.tabindex]="-1"
492
+ [attr.aria-label]="currentValue"
493
+ ></button>
494
+ <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
495
+ `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i4.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i5.LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i4.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
499
496
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderComponent, decorators: [{
500
497
  type: Component,
501
498
  args: [{
@@ -516,80 +513,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
516
513
  i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
517
514
  dragHandle="Drag"
518
515
  >
519
- <div class="k-slider-wrap" #wrap
520
- [class.k-slider-buttons]="showButtons"
516
+ <button
517
+ kendoButton
518
+ #decreaseButton
519
+ *ngIf="showButtons"
520
+ type="button"
521
+ rounded="full"
522
+ [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
523
+ [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
524
+ class="k-button-decrease"
525
+ [title]="decrementMessage"
526
+ [attr.tabindex]="-1"
527
+ ></button>
528
+ <div
529
+ #wrap
530
+ class="k-slider-track-wrap"
521
531
  [class.k-slider-topleft]="tickPlacement === 'before'"
522
532
  [class.k-slider-bottomright]="tickPlacement === 'after'"
523
533
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
534
+ >
535
+ <ul kendoSliderTicks
536
+ #ticks
537
+ *ngIf="tickPlacement !== 'none'"
538
+ [tickTitle]="title"
539
+ [vertical]="vertical"
540
+ [step]="smallStep"
541
+ [largeStep]="largeStep"
542
+ [min]="min"
543
+ [max]="max"
544
+ [labelTemplate]="labelTemplate?.templateRef"
545
+ [attr.aria-hidden]="true"
524
546
  >
525
- <button
526
- kendoButton
527
- #decreaseButton
528
- *ngIf="showButtons"
529
- type="button"
530
- rounded="full"
531
- [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
532
- [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
533
- class="k-button-decrease"
534
- [title]="decrementMessage"
535
- [attr.tabindex]="-1"
536
-
537
- ></button>
538
- <div class="k-slider-track-wrap">
539
- <ul kendoSliderTicks
540
- #ticks
541
- *ngIf="tickPlacement !== 'none'"
542
- [tickTitle]="title"
543
- [vertical]="vertical"
544
- [step]="smallStep"
545
- [largeStep]="largeStep"
546
- [min]="min"
547
- [max]="max"
548
- [labelTemplate]="labelTemplate?.templateRef"
549
- [attr.aria-hidden]="true"
550
- >
551
- </ul>
552
- <div #track class="k-slider-track">
553
- <div #sliderSelection class="k-slider-selection">
554
- </div>
555
- <span #draghandle
556
- role="slider"
557
- [attr.aria-valuemin]="min"
558
- [attr.aria-valuemax]="max"
559
- [attr.aria-valuenow]="currentValue"
560
- [attr.aria-valuetext]="currentValue"
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]="dragHandleMessage"
567
- [attr.tabindex]="disabled ? '-1' : tabIndex"
568
- [id]="focusableId"
569
- kendoDraggable
570
- (kendoPress)="ifEnabled(handleDragPress, $event)"
571
- (kendoDrag)="ifEnabled(onHandleDrag, $event)"
572
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
573
- ></span>
547
+ </ul>
548
+ <div #track class="k-slider-track">
549
+ <div #sliderSelection class="k-slider-selection">
574
550
  </div>
551
+ <span #draghandle
552
+ role="slider"
553
+ [attr.aria-valuemin]="min"
554
+ [attr.aria-valuemax]="max"
555
+ [attr.aria-valuenow]="currentValue"
556
+ [attr.aria-valuetext]="currentValue"
557
+ [attr.aria-disabled]="disabled ? true : undefined"
558
+ [attr.aria-readonly]="readonly ? true : undefined"
559
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
560
+ [style.touch-action]="isDisabled ? '' : 'none'"
561
+ class="k-draghandle"
562
+ [title]="dragHandleMessage"
563
+ [attr.tabindex]="disabled ? '-1' : tabIndex"
564
+ [id]="focusableId"
565
+ kendoDraggable
566
+ (kendoPress)="ifEnabled(handleDragPress, $event)"
567
+ (kendoDrag)="ifEnabled(onHandleDrag, $event)"
568
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
569
+ ></span>
575
570
  </div>
576
- <button
577
- kendoButton
578
- #increaseButton
579
- *ngIf="showButtons"
580
- type="button"
581
- rounded="full"
582
- [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
583
- [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
584
- class="k-button-increase"
585
- [title]="incrementMessage"
586
- (click)="$event.preventDefault()"
587
- [attr.tabindex]="-1"
588
- [attr.aria-label]="currentValue"
589
-
590
- ></button>
591
- <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
592
571
  </div>
572
+ <button
573
+ kendoButton
574
+ #increaseButton
575
+ *ngIf="showButtons"
576
+ type="button"
577
+ rounded="full"
578
+ [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
579
+ [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
580
+ class="k-button-increase"
581
+ [title]="incrementMessage"
582
+ (click)="$event.preventDefault()"
583
+ [attr.tabindex]="-1"
584
+ [attr.aria-label]="currentValue"
585
+ ></button>
586
+ <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
593
587
  `
594
588
  }]
595
589
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{