@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.
@@ -539,8 +539,8 @@ const packageMetadata = {
539
539
  name: '@progress/kendo-angular-inputs',
540
540
  productName: 'Kendo UI for Angular',
541
541
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
542
- publishDate: 1684484666,
543
- version: '12.2.0-develop.2',
542
+ publishDate: 1684487794,
543
+ version: '12.2.0-develop.3',
544
544
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
545
545
  };
546
546
 
@@ -1394,81 +1394,78 @@ SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
1394
1394
  i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
1395
1395
  dragHandle="Drag"
1396
1396
  >
1397
- <div class="k-slider-wrap" #wrap
1398
- [class.k-slider-buttons]="showButtons"
1397
+ <button
1398
+ kendoButton
1399
+ #decreaseButton
1400
+ *ngIf="showButtons"
1401
+ type="button"
1402
+ rounded="full"
1403
+ [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
1404
+ [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
1405
+ class="k-button-decrease"
1406
+ [title]="decrementMessage"
1407
+ [attr.tabindex]="-1"
1408
+ ></button>
1409
+ <div
1410
+ #wrap
1411
+ class="k-slider-track-wrap"
1399
1412
  [class.k-slider-topleft]="tickPlacement === 'before'"
1400
1413
  [class.k-slider-bottomright]="tickPlacement === 'after'"
1401
1414
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
1415
+ >
1416
+ <ul kendoSliderTicks
1417
+ #ticks
1418
+ *ngIf="tickPlacement !== 'none'"
1419
+ [tickTitle]="title"
1420
+ [vertical]="vertical"
1421
+ [step]="smallStep"
1422
+ [largeStep]="largeStep"
1423
+ [min]="min"
1424
+ [max]="max"
1425
+ [labelTemplate]="labelTemplate?.templateRef"
1426
+ [attr.aria-hidden]="true"
1402
1427
  >
1403
- <button
1404
- kendoButton
1405
- #decreaseButton
1406
- *ngIf="showButtons"
1407
- type="button"
1408
- rounded="full"
1409
- [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
1410
- [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
1411
- class="k-button-decrease"
1412
- [title]="decrementMessage"
1413
- [attr.tabindex]="-1"
1414
-
1415
- ></button>
1416
- <div class="k-slider-track-wrap">
1417
- <ul kendoSliderTicks
1418
- #ticks
1419
- *ngIf="tickPlacement !== 'none'"
1420
- [tickTitle]="title"
1421
- [vertical]="vertical"
1422
- [step]="smallStep"
1423
- [largeStep]="largeStep"
1424
- [min]="min"
1425
- [max]="max"
1426
- [labelTemplate]="labelTemplate?.templateRef"
1427
- [attr.aria-hidden]="true"
1428
- >
1429
- </ul>
1430
- <div #track class="k-slider-track">
1431
- <div #sliderSelection class="k-slider-selection">
1432
- </div>
1433
- <span #draghandle
1434
- role="slider"
1435
- [attr.aria-valuemin]="min"
1436
- [attr.aria-valuemax]="max"
1437
- [attr.aria-valuenow]="currentValue"
1438
- [attr.aria-valuetext]="currentValue"
1439
- [attr.aria-disabled]="disabled ? true : undefined"
1440
- [attr.aria-readonly]="readonly ? true : undefined"
1441
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
1442
- [style.touch-action]="isDisabled ? '' : 'none'"
1443
- class="k-draghandle"
1444
- [title]="dragHandleMessage"
1445
- [attr.tabindex]="disabled ? '-1' : tabIndex"
1446
- [id]="focusableId"
1447
- kendoDraggable
1448
- (kendoPress)="ifEnabled(handleDragPress, $event)"
1449
- (kendoDrag)="ifEnabled(onHandleDrag, $event)"
1450
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
1451
- ></span>
1428
+ </ul>
1429
+ <div #track class="k-slider-track">
1430
+ <div #sliderSelection class="k-slider-selection">
1452
1431
  </div>
1432
+ <span #draghandle
1433
+ role="slider"
1434
+ [attr.aria-valuemin]="min"
1435
+ [attr.aria-valuemax]="max"
1436
+ [attr.aria-valuenow]="currentValue"
1437
+ [attr.aria-valuetext]="currentValue"
1438
+ [attr.aria-disabled]="disabled ? true : undefined"
1439
+ [attr.aria-readonly]="readonly ? true : undefined"
1440
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
1441
+ [style.touch-action]="isDisabled ? '' : 'none'"
1442
+ class="k-draghandle"
1443
+ [title]="dragHandleMessage"
1444
+ [attr.tabindex]="disabled ? '-1' : tabIndex"
1445
+ [id]="focusableId"
1446
+ kendoDraggable
1447
+ (kendoPress)="ifEnabled(handleDragPress, $event)"
1448
+ (kendoDrag)="ifEnabled(onHandleDrag, $event)"
1449
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
1450
+ ></span>
1453
1451
  </div>
1454
- <button
1455
- kendoButton
1456
- #increaseButton
1457
- *ngIf="showButtons"
1458
- type="button"
1459
- rounded="full"
1460
- [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
1461
- [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
1462
- class="k-button-increase"
1463
- [title]="incrementMessage"
1464
- (click)="$event.preventDefault()"
1465
- [attr.tabindex]="-1"
1466
- [attr.aria-label]="currentValue"
1467
-
1468
- ></button>
1469
- <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
1470
1452
  </div>
1471
- `, 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: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
1453
+ <button
1454
+ kendoButton
1455
+ #increaseButton
1456
+ *ngIf="showButtons"
1457
+ type="button"
1458
+ rounded="full"
1459
+ [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
1460
+ [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
1461
+ class="k-button-increase"
1462
+ [title]="incrementMessage"
1463
+ (click)="$event.preventDefault()"
1464
+ [attr.tabindex]="-1"
1465
+ [attr.aria-label]="currentValue"
1466
+ ></button>
1467
+ <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
1468
+ `, 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: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
1472
1469
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SliderComponent, decorators: [{
1473
1470
  type: Component,
1474
1471
  args: [{
@@ -1489,80 +1486,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1489
1486
  i18n-dragHandle="kendo.slider.dragHandle|The title of the drag handle of the Slider."
1490
1487
  dragHandle="Drag"
1491
1488
  >
1492
- <div class="k-slider-wrap" #wrap
1493
- [class.k-slider-buttons]="showButtons"
1489
+ <button
1490
+ kendoButton
1491
+ #decreaseButton
1492
+ *ngIf="showButtons"
1493
+ type="button"
1494
+ rounded="full"
1495
+ [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
1496
+ [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
1497
+ class="k-button-decrease"
1498
+ [title]="decrementMessage"
1499
+ [attr.tabindex]="-1"
1500
+ ></button>
1501
+ <div
1502
+ #wrap
1503
+ class="k-slider-track-wrap"
1494
1504
  [class.k-slider-topleft]="tickPlacement === 'before'"
1495
1505
  [class.k-slider-bottomright]="tickPlacement === 'after'"
1496
1506
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
1507
+ >
1508
+ <ul kendoSliderTicks
1509
+ #ticks
1510
+ *ngIf="tickPlacement !== 'none'"
1511
+ [tickTitle]="title"
1512
+ [vertical]="vertical"
1513
+ [step]="smallStep"
1514
+ [largeStep]="largeStep"
1515
+ [min]="min"
1516
+ [max]="max"
1517
+ [labelTemplate]="labelTemplate?.templateRef"
1518
+ [attr.aria-hidden]="true"
1497
1519
  >
1498
- <button
1499
- kendoButton
1500
- #decreaseButton
1501
- *ngIf="showButtons"
1502
- type="button"
1503
- rounded="full"
1504
- [icon]="!vertical ? 'caret-alt-left' : 'caret-alt-down'"
1505
- [svgIcon]="!vertical ? arrowLeftIcon : arrowDownIcon"
1506
- class="k-button-decrease"
1507
- [title]="decrementMessage"
1508
- [attr.tabindex]="-1"
1509
-
1510
- ></button>
1511
- <div class="k-slider-track-wrap">
1512
- <ul kendoSliderTicks
1513
- #ticks
1514
- *ngIf="tickPlacement !== 'none'"
1515
- [tickTitle]="title"
1516
- [vertical]="vertical"
1517
- [step]="smallStep"
1518
- [largeStep]="largeStep"
1519
- [min]="min"
1520
- [max]="max"
1521
- [labelTemplate]="labelTemplate?.templateRef"
1522
- [attr.aria-hidden]="true"
1523
- >
1524
- </ul>
1525
- <div #track class="k-slider-track">
1526
- <div #sliderSelection class="k-slider-selection">
1527
- </div>
1528
- <span #draghandle
1529
- role="slider"
1530
- [attr.aria-valuemin]="min"
1531
- [attr.aria-valuemax]="max"
1532
- [attr.aria-valuenow]="currentValue"
1533
- [attr.aria-valuetext]="currentValue"
1534
- [attr.aria-disabled]="disabled ? true : undefined"
1535
- [attr.aria-readonly]="readonly ? true : undefined"
1536
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
1537
- [style.touch-action]="isDisabled ? '' : 'none'"
1538
- class="k-draghandle"
1539
- [title]="dragHandleMessage"
1540
- [attr.tabindex]="disabled ? '-1' : tabIndex"
1541
- [id]="focusableId"
1542
- kendoDraggable
1543
- (kendoPress)="ifEnabled(handleDragPress, $event)"
1544
- (kendoDrag)="ifEnabled(onHandleDrag, $event)"
1545
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
1546
- ></span>
1520
+ </ul>
1521
+ <div #track class="k-slider-track">
1522
+ <div #sliderSelection class="k-slider-selection">
1547
1523
  </div>
1524
+ <span #draghandle
1525
+ role="slider"
1526
+ [attr.aria-valuemin]="min"
1527
+ [attr.aria-valuemax]="max"
1528
+ [attr.aria-valuenow]="currentValue"
1529
+ [attr.aria-valuetext]="currentValue"
1530
+ [attr.aria-disabled]="disabled ? true : undefined"
1531
+ [attr.aria-readonly]="readonly ? true : undefined"
1532
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
1533
+ [style.touch-action]="isDisabled ? '' : 'none'"
1534
+ class="k-draghandle"
1535
+ [title]="dragHandleMessage"
1536
+ [attr.tabindex]="disabled ? '-1' : tabIndex"
1537
+ [id]="focusableId"
1538
+ kendoDraggable
1539
+ (kendoPress)="ifEnabled(handleDragPress, $event)"
1540
+ (kendoDrag)="ifEnabled(onHandleDrag, $event)"
1541
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
1542
+ ></span>
1548
1543
  </div>
1549
- <button
1550
- kendoButton
1551
- #increaseButton
1552
- *ngIf="showButtons"
1553
- type="button"
1554
- rounded="full"
1555
- [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
1556
- [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
1557
- class="k-button-increase"
1558
- [title]="incrementMessage"
1559
- (click)="$event.preventDefault()"
1560
- [attr.tabindex]="-1"
1561
- [attr.aria-label]="currentValue"
1562
-
1563
- ></button>
1564
- <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
1565
1544
  </div>
1545
+ <button
1546
+ kendoButton
1547
+ #increaseButton
1548
+ *ngIf="showButtons"
1549
+ type="button"
1550
+ rounded="full"
1551
+ [icon]="!vertical ? 'caret-alt-right' : 'caret-alt-up'"
1552
+ [svgIcon]="!vertical ? arrowRightIcon : arrowUpIcon"
1553
+ class="k-button-increase"
1554
+ [title]="incrementMessage"
1555
+ (click)="$event.preventDefault()"
1556
+ [attr.tabindex]="-1"
1557
+ [attr.aria-label]="currentValue"
1558
+ ></button>
1559
+ <kendo-resize-sensor (resize)="sizeComponent(false)"></kendo-resize-sensor>
1566
1560
  `
1567
1561
  }]
1568
1562
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { focusableId: [{
@@ -2111,70 +2105,70 @@ RangeSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
2111
2105
  dragHandleEnd="Drag"
2112
2106
  >
2113
2107
 
2114
- <div class="k-slider-wrap" #wrap
2108
+ <div
2109
+ #wrap
2110
+ class="k-slider-track-wrap"
2115
2111
  [class.k-slider-topleft]="tickPlacement === 'before'"
2116
2112
  [class.k-slider-bottomright]="tickPlacement === 'after'"
2117
2113
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
2114
+ >
2115
+ <ul kendoSliderTicks
2116
+ #ticks
2117
+ *ngIf="tickPlacement !== 'none'"
2118
+ [tickTitle]="title"
2119
+ [vertical]="vertical"
2120
+ [step]="smallStep"
2121
+ [largeStep]="largeStep"
2122
+ [min]="min"
2123
+ [max]="max"
2124
+ [labelTemplate]="labelTemplate?.templateRef"
2125
+ [attr.aria-hidden]="true"
2118
2126
  >
2119
- <div class="k-slider-track-wrap">
2120
- <ul kendoSliderTicks
2121
- #ticks
2122
- *ngIf="tickPlacement !== 'none'"
2123
- [tickTitle]="title"
2124
- [vertical]="vertical"
2125
- [step]="smallStep"
2126
- [largeStep]="largeStep"
2127
- [min]="min"
2128
- [max]="max"
2129
- [labelTemplate]="labelTemplate?.templateRef"
2130
- [attr.aria-hidden]="true"
2131
- >
2132
- </ul>
2133
- <div #track class="k-slider-track">
2134
- <div #sliderSelection class="k-slider-selection">
2135
- </div>
2136
- <span #draghandleStart
2137
- role="slider"
2138
- [id]="startHandleId"
2139
- [attr.tabindex]="disabled ? undefined : tabindex"
2140
- [attr.aria-valuemin]="min"
2141
- [attr.aria-valuemax]="max"
2142
- [attr.aria-valuenow]="value ? value[0] : null"
2143
- [attr.aria-valuetext]="valueText"
2144
- [attr.aria-disabled]="disabled ? true : undefined"
2145
- [attr.aria-readonly]="readonly ? true : undefined"
2146
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2147
- [style.touch-action]="isDisabled ? '' : 'none'"
2148
- class="k-draghandle"
2149
- [title]="textFor('dragHandleStart')"
2150
- kendoDraggable
2151
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
2152
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2153
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2154
- ></span>
2155
- <span #draghandleEnd
2156
- role="slider"
2157
- [id]="endHandleId"
2158
- [attr.tabindex]="disabled ? undefined : tabindex"
2159
- [attr.aria-valuemin]="min"
2160
- [attr.aria-valuemax]="max"
2161
- [attr.aria-valuenow]="value ? value[1] : null"
2162
- [attr.aria-valuetext]="valueText"
2163
- [attr.aria-disabled]="disabled ? true : undefined"
2164
- [attr.aria-readonly]="readonly ? true : undefined"
2165
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2166
- [style.touch-action]="isDisabled ? '' : 'none'"
2167
- class="k-draghandle"
2168
- [title]="textFor('dragHandleEnd')"
2169
- kendoDraggable
2170
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
2171
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2172
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2173
- ></span>
2127
+ </ul>
2128
+ <div #track class="k-slider-track">
2129
+ <div #sliderSelection class="k-slider-selection">
2174
2130
  </div>
2131
+ <span #draghandleStart
2132
+ role="slider"
2133
+ [id]="startHandleId"
2134
+ [attr.tabindex]="disabled ? undefined : tabindex"
2135
+ [attr.aria-valuemin]="min"
2136
+ [attr.aria-valuemax]="max"
2137
+ [attr.aria-valuenow]="value ? value[0] : null"
2138
+ [attr.aria-valuetext]="valueText"
2139
+ [attr.aria-disabled]="disabled ? true : undefined"
2140
+ [attr.aria-readonly]="readonly ? true : undefined"
2141
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2142
+ [style.touch-action]="isDisabled ? '' : 'none'"
2143
+ class="k-draghandle"
2144
+ [title]="textFor('dragHandleStart')"
2145
+ kendoDraggable
2146
+ (kendoPress)="ifEnabled(handleDragPress ,$event)"
2147
+ (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2148
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2149
+ ></span>
2150
+ <span #draghandleEnd
2151
+ role="slider"
2152
+ [id]="endHandleId"
2153
+ [attr.tabindex]="disabled ? undefined : tabindex"
2154
+ [attr.aria-valuemin]="min"
2155
+ [attr.aria-valuemax]="max"
2156
+ [attr.aria-valuenow]="value ? value[1] : null"
2157
+ [attr.aria-valuetext]="valueText"
2158
+ [attr.aria-disabled]="disabled ? true : undefined"
2159
+ [attr.aria-readonly]="readonly ? true : undefined"
2160
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2161
+ [style.touch-action]="isDisabled ? '' : 'none'"
2162
+ class="k-draghandle"
2163
+ [title]="textFor('dragHandleEnd')"
2164
+ kendoDraggable
2165
+ (kendoPress)="ifEnabled(handleDragPress ,$event)"
2166
+ (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2167
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2168
+ ></span>
2175
2169
  </div>
2176
- <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
2177
2170
  </div>
2171
+ <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
2178
2172
  `, isInline: true, components: [{ type: SliderTicksComponent, selector: "[kendoSliderTicks]", inputs: ["tickTitle", "vertical", "step", "largeStep", "min", "max", "labelTemplate"] }, { type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedRangeSliderMessagesDirective, selector: "[kendoSliderLocalizedMessages]" }, { type: i3.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }] });
2179
2173
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RangeSliderComponent, decorators: [{
2180
2174
  type: Component,
@@ -2195,70 +2189,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2195
2189
  dragHandleEnd="Drag"
2196
2190
  >
2197
2191
 
2198
- <div class="k-slider-wrap" #wrap
2192
+ <div
2193
+ #wrap
2194
+ class="k-slider-track-wrap"
2199
2195
  [class.k-slider-topleft]="tickPlacement === 'before'"
2200
2196
  [class.k-slider-bottomright]="tickPlacement === 'after'"
2201
2197
  [kendoEventsOutsideAngular]="{ click: onWrapClick, keydown: onKeyDown }"
2198
+ >
2199
+ <ul kendoSliderTicks
2200
+ #ticks
2201
+ *ngIf="tickPlacement !== 'none'"
2202
+ [tickTitle]="title"
2203
+ [vertical]="vertical"
2204
+ [step]="smallStep"
2205
+ [largeStep]="largeStep"
2206
+ [min]="min"
2207
+ [max]="max"
2208
+ [labelTemplate]="labelTemplate?.templateRef"
2209
+ [attr.aria-hidden]="true"
2202
2210
  >
2203
- <div class="k-slider-track-wrap">
2204
- <ul kendoSliderTicks
2205
- #ticks
2206
- *ngIf="tickPlacement !== 'none'"
2207
- [tickTitle]="title"
2208
- [vertical]="vertical"
2209
- [step]="smallStep"
2210
- [largeStep]="largeStep"
2211
- [min]="min"
2212
- [max]="max"
2213
- [labelTemplate]="labelTemplate?.templateRef"
2214
- [attr.aria-hidden]="true"
2215
- >
2216
- </ul>
2217
- <div #track class="k-slider-track">
2218
- <div #sliderSelection class="k-slider-selection">
2219
- </div>
2220
- <span #draghandleStart
2221
- role="slider"
2222
- [id]="startHandleId"
2223
- [attr.tabindex]="disabled ? undefined : tabindex"
2224
- [attr.aria-valuemin]="min"
2225
- [attr.aria-valuemax]="max"
2226
- [attr.aria-valuenow]="value ? value[0] : null"
2227
- [attr.aria-valuetext]="valueText"
2228
- [attr.aria-disabled]="disabled ? true : undefined"
2229
- [attr.aria-readonly]="readonly ? true : undefined"
2230
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2231
- [style.touch-action]="isDisabled ? '' : 'none'"
2232
- class="k-draghandle"
2233
- [title]="textFor('dragHandleStart')"
2234
- kendoDraggable
2235
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
2236
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2237
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2238
- ></span>
2239
- <span #draghandleEnd
2240
- role="slider"
2241
- [id]="endHandleId"
2242
- [attr.tabindex]="disabled ? undefined : tabindex"
2243
- [attr.aria-valuemin]="min"
2244
- [attr.aria-valuemax]="max"
2245
- [attr.aria-valuenow]="value ? value[1] : null"
2246
- [attr.aria-valuetext]="valueText"
2247
- [attr.aria-disabled]="disabled ? true : undefined"
2248
- [attr.aria-readonly]="readonly ? true : undefined"
2249
- [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2250
- [style.touch-action]="isDisabled ? '' : 'none'"
2251
- class="k-draghandle"
2252
- [title]="textFor('dragHandleEnd')"
2253
- kendoDraggable
2254
- (kendoPress)="ifEnabled(handleDragPress ,$event)"
2255
- (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2256
- (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2257
- ></span>
2211
+ </ul>
2212
+ <div #track class="k-slider-track">
2213
+ <div #sliderSelection class="k-slider-selection">
2258
2214
  </div>
2215
+ <span #draghandleStart
2216
+ role="slider"
2217
+ [id]="startHandleId"
2218
+ [attr.tabindex]="disabled ? undefined : tabindex"
2219
+ [attr.aria-valuemin]="min"
2220
+ [attr.aria-valuemax]="max"
2221
+ [attr.aria-valuenow]="value ? value[0] : null"
2222
+ [attr.aria-valuetext]="valueText"
2223
+ [attr.aria-disabled]="disabled ? true : undefined"
2224
+ [attr.aria-readonly]="readonly ? true : undefined"
2225
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2226
+ [style.touch-action]="isDisabled ? '' : 'none'"
2227
+ class="k-draghandle"
2228
+ [title]="textFor('dragHandleStart')"
2229
+ kendoDraggable
2230
+ (kendoPress)="ifEnabled(handleDragPress ,$event)"
2231
+ (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2232
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2233
+ ></span>
2234
+ <span #draghandleEnd
2235
+ role="slider"
2236
+ [id]="endHandleId"
2237
+ [attr.tabindex]="disabled ? undefined : tabindex"
2238
+ [attr.aria-valuemin]="min"
2239
+ [attr.aria-valuemax]="max"
2240
+ [attr.aria-valuenow]="value ? value[1] : null"
2241
+ [attr.aria-valuetext]="valueText"
2242
+ [attr.aria-disabled]="disabled ? true : undefined"
2243
+ [attr.aria-readonly]="readonly ? true : undefined"
2244
+ [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
2245
+ [style.touch-action]="isDisabled ? '' : 'none'"
2246
+ class="k-draghandle"
2247
+ [title]="textFor('dragHandleEnd')"
2248
+ kendoDraggable
2249
+ (kendoPress)="ifEnabled(handleDragPress ,$event)"
2250
+ (kendoDrag)="ifEnabled(onHandleDrag ,$event)"
2251
+ (kendoRelease)="ifEnabled(onHandleRelease, $event)"
2252
+ ></span>
2259
2253
  </div>
2260
- <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
2261
2254
  </div>
2255
+ <kendo-resize-sensor (resize)="sizeComponent()"></kendo-resize-sensor>
2262
2256
  `
2263
2257
  }]
2264
2258
  }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { value: [{
@@ -10991,31 +10985,29 @@ ColorPaletteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
10991
10985
  i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
10992
10986
  colorPaletteNoColor="Colorpalette no color chosen">
10993
10987
  </ng-container>
10994
- <div class="k-colorpalette-table-wrap">
10995
- <table role="presentation" class="k-colorpalette-table k-palette">
10996
- <tbody>
10997
- <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
10998
- <td *ngFor="let color of row; let colIndex = index"
10999
- role="gridcell"
11000
- [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
11001
- [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
11002
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
11003
- [attr.aria-label]="color"
11004
- class="k-colorpalette-tile"
11005
- [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
11006
- [attr.value]="color"
11007
- (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
11008
- [ngStyle]="{
11009
- backgroundColor: color,
11010
- width: tileLayout.width + 'px',
11011
- height: tileLayout.height + 'px',
11012
- minWidth: tileLayout.width + 'px'
11013
- }">
11014
- </td>
11015
- </tr>
11016
- </tbody>
11017
- </table>
11018
- </div>
10988
+ <table role="presentation" class="k-colorpalette-table">
10989
+ <tbody>
10990
+ <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
10991
+ <td *ngFor="let color of row; let colIndex = index"
10992
+ role="gridcell"
10993
+ [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
10994
+ [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
10995
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
10996
+ [attr.aria-label]="color"
10997
+ class="k-colorpalette-tile"
10998
+ [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
10999
+ [attr.value]="color"
11000
+ (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
11001
+ [ngStyle]="{
11002
+ backgroundColor: color,
11003
+ width: tileLayout.width + 'px',
11004
+ height: tileLayout.height + 'px',
11005
+ minWidth: tileLayout.width + 'px'
11006
+ }">
11007
+ </td>
11008
+ </tr>
11009
+ </tbody>
11010
+ </table>
11019
11011
  `, isInline: true, directives: [{ type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
11020
11012
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColorPaletteComponent, decorators: [{
11021
11013
  type: Component,
@@ -11047,31 +11039,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11047
11039
  i18n-colorPaletteNoColor="kendo.colorpalette.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
11048
11040
  colorPaletteNoColor="Colorpalette no color chosen">
11049
11041
  </ng-container>
11050
- <div class="k-colorpalette-table-wrap">
11051
- <table role="presentation" class="k-colorpalette-table k-palette">
11052
- <tbody>
11053
- <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
11054
- <td *ngFor="let color of row; let colIndex = index"
11055
- role="gridcell"
11056
- [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
11057
- [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
11058
- [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
11059
- [attr.aria-label]="color"
11060
- class="k-colorpalette-tile"
11061
- [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
11062
- [attr.value]="color"
11063
- (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
11064
- [ngStyle]="{
11065
- backgroundColor: color,
11066
- width: tileLayout.width + 'px',
11067
- height: tileLayout.height + 'px',
11068
- minWidth: tileLayout.width + 'px'
11069
- }">
11070
- </td>
11071
- </tr>
11072
- </tbody>
11073
- </table>
11074
- </div>
11042
+ <table role="presentation" class="k-colorpalette-table">
11043
+ <tbody>
11044
+ <tr *ngFor="let row of colorRows; let rowIndex = index" role="row">
11045
+ <td *ngFor="let color of row; let colIndex = index"
11046
+ role="gridcell"
11047
+ [class.k-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex"
11048
+ [class.k-focus]="focusInComponent && focusedCell?.row === rowIndex && focusedCell?.col === colIndex"
11049
+ [attr.aria-selected]="selectedCell?.row === rowIndex && selectedCell?.col === colIndex ? 'true' : undefined"
11050
+ [attr.aria-label]="color"
11051
+ class="k-colorpalette-tile"
11052
+ [id]="'k-' + rowIndex + '-' + colIndex + '-' + uniqueId"
11053
+ [attr.value]="color"
11054
+ (click)="handleCellSelection(color, { row: rowIndex, col: colIndex })"
11055
+ [ngStyle]="{
11056
+ backgroundColor: color,
11057
+ width: tileLayout.width + 'px',
11058
+ height: tileLayout.height + 'px',
11059
+ minWidth: tileLayout.width + 'px'
11060
+ }">
11061
+ </td>
11062
+ </tr>
11063
+ </tbody>
11064
+ </table>
11075
11065
  `
11076
11066
  }]
11077
11067
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ColorPaletteService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { direction: [{
@@ -11150,7 +11140,7 @@ class FlatColorPickerActionButtonsComponent {
11150
11140
  }
11151
11141
  }
11152
11142
  FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
11153
- 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-hstack": "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: `
11143
+ 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: `
11154
11144
  <button #first
11155
11145
  class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
11156
11146
  [attr.title]="getText('cancelButton')"
@@ -11198,7 +11188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
11198
11188
  args: ['class.k-actions']
11199
11189
  }, {
11200
11190
  type: HostBinding,
11201
- args: ['class.k-hstack']
11191
+ args: ['class.k-actions-horizontal']
11202
11192
  }], innerTabIndex: [{
11203
11193
  type: Input
11204
11194
  }], actionButtonClick: [{