@progress/kendo-angular-inputs 19.0.0-develop.3 → 19.0.0-develop.30

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.
Files changed (13) hide show
  1. package/colorpicker/adaptiveness/adaptive-renderer.component.d.ts +4 -2
  2. package/colorpicker/colorpicker.component.d.ts +16 -3
  3. package/colorpicker/localization/messages.d.ts +3 -3
  4. package/colorpicker/models/adaptive-mode.d.ts +0 -7
  5. package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +42 -36
  6. package/esm2022/colorpicker/colorpicker.component.mjs +41 -16
  7. package/esm2022/colorpicker/localization/messages.mjs +4 -4
  8. package/esm2022/colorpicker/models/adaptive-mode.mjs +0 -19
  9. package/esm2022/package-metadata.mjs +2 -2
  10. package/esm2022/switch/switch.component.mjs +1 -8
  11. package/fesm2022/progress-kendo-angular-inputs.mjs +91 -86
  12. package/package.json +12 -12
  13. package/switch/switch.component.d.ts +0 -1
package/colorpicker/adaptiveness/adaptive-renderer.component.d.ts CHANGED
@@ -8,12 +8,14 @@ import { SVGIcon } from '@progress/kendo-angular-icons';
8
8
  import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
9
9
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
10
10
  import { TextBoxComponent } from '../../textbox/textbox.component';
11
+ import { AdaptiveService, AdaptiveSize } from '@progress/kendo-angular-utils';
11
12
  import * as i0 from "@angular/core";
12
13
  /**
13
14
  * @hidden
14
15
  */
15
16
  export declare class AdaptiveRendererComponent {
16
17
  localization: LocalizationService;
18
+ adaptiveService: AdaptiveService;
17
19
  title: string;
18
20
  subtitle: string;
19
21
  actionSheetTemplate: TemplateRef<any>;
@@ -28,11 +30,11 @@ export declare class AdaptiveRendererComponent {
28
30
  actionSheetSearchBar: TextBoxComponent;
29
31
  cancelButton: ButtonComponent;
30
32
  applyButton: ButtonComponent;
31
- constructor(localization: LocalizationService);
33
+ constructor(localization: LocalizationService, adaptiveService: AdaptiveService);
32
34
  animationDuration: number;
33
- xIcon: SVGIcon;
34
35
  checkIcon: SVGIcon;
35
36
  messageFor(key: string): string;
37
+ get windowSize(): AdaptiveSize;
36
38
  static ɵfac: i0.ɵɵFactoryDeclaration<AdaptiveRendererComponent, never>;
37
39
  static ɵcmp: i0.ɵɵComponentDeclaration<AdaptiveRendererComponent, "kendo-adaptive-renderer", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "actionSheetTemplate": { "alias": "actionSheetTemplate"; "required": false; }; "isActionSheetExpanded": { "alias": "isActionSheetExpanded"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; }, { "actionSheetClose": "actionSheetClose"; "onExpand": "onExpand"; "onCollapse": "onCollapse"; "onApply": "onApply"; "onCancel": "onCancel"; }, never, never, true, never>;
38
40
  }
package/colorpicker/colorpicker.component.d.ts CHANGED
@@ -130,6 +130,15 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
130
130
  */
131
131
  set svgIcon(icon: SVGIcon);
132
132
  get svgIcon(): SVGIcon;
133
+ /**
134
+ * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
135
+ */
136
+ adaptiveTitle: string;
137
+ /**
138
+ * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
139
+ * By default the ActionSheet does not render a subtitle.
140
+ */
141
+ adaptiveSubtitle: any;
133
142
  /**
134
143
  * Specifies whether the ColorPicker should display a 'Clear color' button.
135
144
  *
@@ -394,11 +403,15 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
394
403
  /**
395
404
  * @hidden
396
405
  */
397
- onApply(): void;
406
+ applyValue(): void;
407
+ /**
408
+ * @hidden
409
+ */
410
+ cancelValue(e: any): void;
398
411
  /**
399
412
  * @hidden
400
413
  */
401
- onCancel(e: any): void;
414
+ onActionSheetClose(e: any): void;
402
415
  /**
403
416
  * @hidden
404
417
  */
@@ -426,5 +439,5 @@ export declare class ColorPickerComponent implements OnInit, AfterViewInit, OnCh
426
439
  private domFocusListener;
427
440
  private handleHostId;
428
441
  static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerComponent, never>;
429
- static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "views": { "alias": "views"; "required": false; }; "view": { "alias": "view"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "clearButtonClick": "clearButtonClick"; "activeViewChange": "activeViewChange"; }, never, never, true, never>;
442
+ static ɵcmp: i0.ɵɵComponentDeclaration<ColorPickerComponent, "kendo-colorpicker", ["kendoColorPicker"], { "views": { "alias": "views"; "required": false; }; "view": { "alias": "view"; "required": false; }; "adaptiveMode": { "alias": "adaptiveMode"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "format": { "alias": "format"; "required": false; }; "value": { "alias": "value"; "required": false; }; "popupSettings": { "alias": "popupSettings"; "required": false; }; "paletteSettings": { "alias": "paletteSettings"; "required": false; }; "gradientSettings": { "alias": "gradientSettings"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; "adaptiveSubtitle": { "alias": "adaptiveSubtitle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "actionsLayout": { "alias": "actionsLayout"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; }, { "valueChange": "valueChange"; "open": "open"; "close": "close"; "onFocus": "focus"; "onBlur": "blur"; "cancel": "cancel"; "activeColorClick": "activeColorClick"; "clearButtonClick": "clearButtonClick"; "activeViewChange": "activeViewChange"; }, never, never, true, never>;
430
443
  }
package/colorpicker/localization/messages.d.ts CHANGED
@@ -117,13 +117,13 @@ export declare class ColorPickerMessages extends ComponentMessages {
117
117
  */
118
118
  cancelButton: string;
119
119
  /**
120
- * The title for the Close button in adaptive mode.
120
+ * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
121
121
  */
122
- closeButton: string;
122
+ adaptiveCloseButtonTitle: string;
123
123
  /**
124
124
  * The title for the ActionSheet when in adaptive mode.
125
125
  */
126
126
  adaptiveTitle: string;
127
127
  static ɵfac: i0.ɵɵFactoryDeclaration<ColorPickerMessages, never>;
128
- static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "closeButton": { "alias": "closeButton"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; }, {}, never, never, false, never>;
128
+ static ɵdir: i0.ɵɵDirectiveDeclaration<ColorPickerMessages, "kendo-colorpicker-messages-base", never, { "colorPaletteNoColor": { "alias": "colorPaletteNoColor"; "required": false; }; "colorGradientNoColor": { "alias": "colorGradientNoColor"; "required": false; }; "flatColorPickerNoColor": { "alias": "flatColorPickerNoColor"; "required": false; }; "colorPickerNoColor": { "alias": "colorPickerNoColor"; "required": false; }; "colorGradientHandle": { "alias": "colorGradientHandle"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "hueSliderHandle": { "alias": "hueSliderHandle"; "required": false; }; "opacitySliderHandle": { "alias": "opacitySliderHandle"; "required": false; }; "hexInputPlaceholder": { "alias": "hexInputPlaceholder"; "required": false; }; "redInputPlaceholder": { "alias": "redInputPlaceholder"; "required": false; }; "greenInputPlaceholder": { "alias": "greenInputPlaceholder"; "required": false; }; "blueInputPlaceholder": { "alias": "blueInputPlaceholder"; "required": false; }; "alphaInputPlaceholder": { "alias": "alphaInputPlaceholder"; "required": false; }; "redChannelLabel": { "alias": "redChannelLabel"; "required": false; }; "greenChannelLabel": { "alias": "greenChannelLabel"; "required": false; }; "blueChannelLabel": { "alias": "blueChannelLabel"; "required": false; }; "alphaChannelLabel": { "alias": "alphaChannelLabel"; "required": false; }; "passContrast": { "alias": "passContrast"; "required": false; }; "failContrast": { "alias": "failContrast"; "required": false; }; "contrastRatio": { "alias": "contrastRatio"; "required": false; }; "previewColor": { "alias": "previewColor"; "required": false; }; "revertSelection": { "alias": "revertSelection"; "required": false; }; "gradientView": { "alias": "gradientView"; "required": false; }; "paletteView": { "alias": "paletteView"; "required": false; }; "formatButton": { "alias": "formatButton"; "required": false; }; "applyButton": { "alias": "applyButton"; "required": false; }; "cancelButton": { "alias": "cancelButton"; "required": false; }; "adaptiveCloseButtonTitle": { "alias": "adaptiveCloseButtonTitle"; "required": false; }; "adaptiveTitle": { "alias": "adaptiveTitle"; "required": false; }; }, {}, never, never, false, never>;
129
129
  }
package/colorpicker/models/adaptive-mode.d.ts CHANGED
@@ -2,9 +2,6 @@
2
2
  * Copyright © 2025 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 { Renderer2 } from "@angular/core";
6
- import { ActionSheetComponent } from "@progress/kendo-angular-navigation";
7
- import { AdaptiveSize } from "@progress/kendo-angular-utils";
8
5
  /**
9
6
  * Specifies the adaptive rendering of the component.
10
7
  *
@@ -17,7 +14,3 @@ export type AdaptiveMode = 'none' | 'auto';
17
14
  * @hidden
18
15
  */
19
16
  export declare const animationDuration = 300;
20
- /**
21
- * @hidden
22
- */
23
- export declare const updateActionSheetAdaptiveAppearance: (actionSheet: ActionSheetComponent, windowSize: AdaptiveSize, renderer: Renderer2) => void;
package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs CHANGED
@@ -4,20 +4,23 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, Input, Output, EventEmitter, TemplateRef, ViewChild } from '@angular/core';
6
6
  import { LocalizationService } from '@progress/kendo-angular-l10n';
7
- import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
7
+ import { checkIcon } from '@progress/kendo-svg-icons';
8
8
  import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
9
9
  import { NgIf, NgTemplateOutlet } from '@angular/common';
10
10
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
11
11
  import { TextBoxComponent } from '../../textbox/textbox.component';
12
12
  import { animationDuration } from '../models/adaptive-mode';
13
13
  import { AdaptiveCloseButtonComponent } from './adaptive-close-button.component';
14
+ import { AdaptiveService } from '@progress/kendo-angular-utils';
14
15
  import * as i0 from "@angular/core";
15
16
  import * as i1 from "@progress/kendo-angular-l10n";
17
+ import * as i2 from "@progress/kendo-angular-utils";
16
18
  /**
17
19
  * @hidden
18
20
  */
19
21
  export class AdaptiveRendererComponent {
20
22
  localization;
23
+ adaptiveService;
21
24
  title;
22
25
  subtitle;
23
26
  actionSheetTemplate;
@@ -32,52 +35,55 @@ export class AdaptiveRendererComponent {
32
35
  actionSheetSearchBar;
33
36
  cancelButton;
34
37
  applyButton;
35
- constructor(localization) {
38
+ constructor(localization, adaptiveService) {
36
39
  this.localization = localization;
40
+ this.adaptiveService = adaptiveService;
37
41
  }
38
42
  animationDuration = animationDuration;
39
- xIcon = xIcon;
40
43
  checkIcon = checkIcon;
41
44
  messageFor(key) {
42
45
  return this.localization.get(key);
43
46
  }
44
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
47
+ get windowSize() {
48
+ return this.adaptiveService.size;
49
+ }
50
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
45
51
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", actionSheetTemplate: "actionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", preview: "preview" }, outputs: { actionSheetClose: "actionSheetClose", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }, { propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["apply"], descendants: true }], ngImport: i0, template: `
46
52
  <kendo-actionsheet
47
53
  #actionSheet
48
54
  [animation]="{ duration: animationDuration }"
49
55
  [expanded]="isActionSheetExpanded"
56
+ [cssClass]="{
57
+ 'k-adaptive-actionsheet': true,
58
+ 'k-actionsheet-fullscreen': windowSize === 'small',
59
+ 'k-actionsheet-bottom': windowSize === 'medium'
60
+ }"
61
+ [cssStyle]="{
62
+ height: windowSize === 'small' ? '100vh' : '60vh'
63
+ }"
50
64
  (overlayClick)="actionSheetClose.emit()"
51
65
  (expand)="onExpand.emit()"
52
66
  (collapse)="onCollapse.emit()"
53
67
  >
54
68
  <ng-template kendoActionSheetTemplate>
55
- <div class="k-text-center k-actionsheet-titlebar">
56
- <div class="k-actionsheet-titlebar-group k-hbox">
69
+ <div class="k-actionsheet-titlebar">
70
+ <div class="k-actionsheet-titlebar-group">
57
71
  <div class="k-actionsheet-title">
58
- <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
59
- <div class="k-actionsheet-subtitle k-text-center"></div>
72
+ <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
73
+ <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
60
74
  </div>
61
- <div *ngIf="!preview" class="k-actionsheet-actions">
75
+ <div class="k-actionsheet-actions">
62
76
  <kendo-adaptive-close-button
63
77
  icon="check"
64
78
  color="primary"
65
- [title]="messageFor('closeButton')"
79
+ [title]="messageFor('adaptiveCloseButtonTitle')"
66
80
  [svgIcon]="checkIcon"
67
- (close)="onApply.emit($event)">
68
- </kendo-adaptive-close-button>
69
- </div>
70
- <div *ngIf="preview" class="k-actionsheet-actions">
71
- <kendo-adaptive-close-button
72
- icon="x"
73
- [title]="messageFor('closeButton')"
74
- [svgIcon]="xIcon"
75
81
  (close)="actionSheetClose.emit($event)">
76
82
  </kendo-adaptive-close-button>
77
83
  </div>
78
84
  </div>
79
85
  </div>
80
- <div class="k-actionsheet-content !k-overflow-hidden">
86
+ <div class="k-actionsheet-content">
81
87
  <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
82
88
  </div>
83
89
  <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -101,7 +107,7 @@ export class AdaptiveRendererComponent {
101
107
  </div>
102
108
  </ng-template>
103
109
  </kendo-actionsheet>
104
- `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
110
+ `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
105
111
  }
106
112
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
107
113
  type: Component,
@@ -112,37 +118,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
112
118
  #actionSheet
113
119
  [animation]="{ duration: animationDuration }"
114
120
  [expanded]="isActionSheetExpanded"
121
+ [cssClass]="{
122
+ 'k-adaptive-actionsheet': true,
123
+ 'k-actionsheet-fullscreen': windowSize === 'small',
124
+ 'k-actionsheet-bottom': windowSize === 'medium'
125
+ }"
126
+ [cssStyle]="{
127
+ height: windowSize === 'small' ? '100vh' : '60vh'
128
+ }"
115
129
  (overlayClick)="actionSheetClose.emit()"
116
130
  (expand)="onExpand.emit()"
117
131
  (collapse)="onCollapse.emit()"
118
132
  >
119
133
  <ng-template kendoActionSheetTemplate>
120
- <div class="k-text-center k-actionsheet-titlebar">
121
- <div class="k-actionsheet-titlebar-group k-hbox">
134
+ <div class="k-actionsheet-titlebar">
135
+ <div class="k-actionsheet-titlebar-group">
122
136
  <div class="k-actionsheet-title">
123
- <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
124
- <div class="k-actionsheet-subtitle k-text-center"></div>
137
+ <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
138
+ <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
125
139
  </div>
126
- <div *ngIf="!preview" class="k-actionsheet-actions">
140
+ <div class="k-actionsheet-actions">
127
141
  <kendo-adaptive-close-button
128
142
  icon="check"
129
143
  color="primary"
130
- [title]="messageFor('closeButton')"
144
+ [title]="messageFor('adaptiveCloseButtonTitle')"
131
145
  [svgIcon]="checkIcon"
132
- (close)="onApply.emit($event)">
133
- </kendo-adaptive-close-button>
134
- </div>
135
- <div *ngIf="preview" class="k-actionsheet-actions">
136
- <kendo-adaptive-close-button
137
- icon="x"
138
- [title]="messageFor('closeButton')"
139
- [svgIcon]="xIcon"
140
146
  (close)="actionSheetClose.emit($event)">
141
147
  </kendo-adaptive-close-button>
142
148
  </div>
143
149
  </div>
144
150
  </div>
145
- <div class="k-actionsheet-content !k-overflow-hidden">
151
+ <div class="k-actionsheet-content">
146
152
  <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
147
153
  </div>
148
154
  <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -170,7 +176,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
170
176
  standalone: true,
171
177
  imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, NgTemplateOutlet, AdaptiveCloseButtonComponent]
172
178
  }]
173
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
179
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }]; }, propDecorators: { title: [{
174
180
  type: Input
175
181
  }], subtitle: [{
176
182
  type: Input
package/esm2022/colorpicker/colorpicker.component.mjs CHANGED
@@ -26,7 +26,6 @@ import { parseCSSClassNames } from '@progress/kendo-angular-common';
26
26
  import { caretAltDownIcon } from '@progress/kendo-svg-icons';
27
27
  import { NgClass, NgIf } from '@angular/common';
28
28
  import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
29
- import { updateActionSheetAdaptiveAppearance } from './models/adaptive-mode';
30
29
  import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
31
30
  import * as i0 from "@angular/core";
32
31
  import * as i1 from "@progress/kendo-angular-popup";
@@ -192,6 +191,15 @@ export class ColorPickerComponent {
192
191
  get svgIcon() {
193
192
  return this._svgIcon;
194
193
  }
194
+ /**
195
+ * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
196
+ */
197
+ adaptiveTitle = '';
198
+ /**
199
+ * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
200
+ * By default the ActionSheet does not render a subtitle.
201
+ */
202
+ adaptiveSubtitle;
195
203
  /**
196
204
  * Specifies whether the ColorPicker should display a 'Clear color' button.
197
205
  *
@@ -683,17 +691,28 @@ export class ColorPickerComponent {
683
691
  /**
684
692
  * @hidden
685
693
  */
686
- onApply() {
694
+ applyValue() {
687
695
  this.handleValueChange(this.flatColorPicker.selection);
688
696
  this.toggleWithEvents(false);
689
697
  }
690
698
  /**
691
699
  * @hidden
692
700
  */
693
- onCancel(e) {
701
+ cancelValue(e) {
694
702
  this.flatColorPicker.resetSelection(e);
695
703
  this.toggleWithEvents(false);
696
704
  }
705
+ /**
706
+ * @hidden
707
+ */
708
+ onActionSheetClose(e) {
709
+ if (this.preview) {
710
+ this.cancelValue(e);
711
+ }
712
+ else {
713
+ this.applyValue();
714
+ }
715
+ }
697
716
  /**
698
717
  * @hidden
699
718
  */
@@ -769,9 +788,7 @@ export class ColorPickerComponent {
769
788
  });
770
789
  }
771
790
  openActionSheet() {
772
- this.windowSize = this.adaptiveService.size;
773
791
  this.actionSheet.toggle(true);
774
- updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
775
792
  }
776
793
  closeActionSheet() {
777
794
  this.actionSheet.toggle(false);
@@ -881,7 +898,7 @@ export class ColorPickerComponent {
881
898
  }
882
899
  }
883
900
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.PopupService }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
884
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
901
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
885
902
  multi: true,
886
903
  provide: NG_VALUE_ACCESSOR,
887
904
  useExisting: forwardRef(() => ColorPickerComponent)
@@ -932,8 +949,8 @@ export class ColorPickerComponent {
932
949
  applyButton="Apply"
933
950
  i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
934
951
  cancelButton="Cancel"
935
- i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
936
- closeButton="Close"
952
+ i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
953
+ adaptiveCloseButtonTitle="Close"
937
954
  i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
938
955
  adaptiveTitle="Choose Color"
939
956
  i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -1010,10 +1027,12 @@ export class ColorPickerComponent {
1010
1027
  <kendo-adaptive-renderer
1011
1028
  [actionSheetTemplate]="popupTemplate"
1012
1029
  [isActionSheetExpanded]="isActionSheetExpanded"
1030
+ [title]="adaptiveTitle"
1031
+ [subtitle]="adaptiveSubtitle"
1013
1032
  [preview]="preview"
1014
- (actionSheetClose)="onCancel($event)"
1015
- (onApply)="onApply()"
1016
- (onCancel)="onCancel($event)"
1033
+ (actionSheetClose)="onActionSheetClose($event)"
1034
+ (onApply)="applyValue()"
1035
+ (onCancel)="cancelValue($event)"
1017
1036
  >
1018
1037
  </kendo-adaptive-renderer>
1019
1038
  <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -1075,8 +1094,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1075
1094
  applyButton="Apply"
1076
1095
  i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
1077
1096
  cancelButton="Cancel"
1078
- i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
1079
- closeButton="Close"
1097
+ i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
1098
+ adaptiveCloseButtonTitle="Close"
1080
1099
  i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
1081
1100
  adaptiveTitle="Choose Color"
1082
1101
  i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -1153,10 +1172,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1153
1172
  <kendo-adaptive-renderer
1154
1173
  [actionSheetTemplate]="popupTemplate"
1155
1174
  [isActionSheetExpanded]="isActionSheetExpanded"
1175
+ [title]="adaptiveTitle"
1176
+ [subtitle]="adaptiveSubtitle"
1156
1177
  [preview]="preview"
1157
- (actionSheetClose)="onCancel($event)"
1158
- (onApply)="onApply()"
1159
- (onCancel)="onCancel($event)"
1178
+ (actionSheetClose)="onActionSheetClose($event)"
1179
+ (onApply)="applyValue()"
1180
+ (onCancel)="cancelValue($event)"
1160
1181
  >
1161
1182
  </kendo-adaptive-renderer>
1162
1183
  <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -1234,6 +1255,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1234
1255
  type: Input
1235
1256
  }], svgIcon: [{
1236
1257
  type: Input
1258
+ }], adaptiveTitle: [{
1259
+ type: Input
1260
+ }], adaptiveSubtitle: [{
1261
+ type: Input
1237
1262
  }], clearButton: [{
1238
1263
  type: Input
1239
1264
  }], tabindex: [{
package/esm2022/colorpicker/localization/messages.mjs CHANGED
@@ -118,15 +118,15 @@ export class ColorPickerMessages extends ComponentMessages {
118
118
  */
119
119
  cancelButton;
120
120
  /**
121
- * The title for the Close button in adaptive mode.
121
+ * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
122
122
  */
123
- closeButton;
123
+ adaptiveCloseButtonTitle;
124
124
  /**
125
125
  * The title for the ActionSheet when in adaptive mode.
126
126
  */
127
127
  adaptiveTitle;
128
128
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
129
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", closeButton: "closeButton", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
129
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
130
130
  }
131
131
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
132
132
  type: Directive,
@@ -188,7 +188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
188
188
  type: Input
189
189
  }], cancelButton: [{
190
190
  type: Input
191
- }], closeButton: [{
191
+ }], adaptiveCloseButtonTitle: [{
192
192
  type: Input
193
193
  }], adaptiveTitle: [{
194
194
  type: Input
package/esm2022/colorpicker/models/adaptive-mode.mjs CHANGED
@@ -6,22 +6,3 @@
6
6
  * @hidden
7
7
  */
8
8
  export const animationDuration = 300;
9
- /**
10
- * @hidden
11
- */
12
- export const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer) => {
13
- const element = actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
14
- const animationContainer = actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
15
- renderer.addClass(element, 'k-adaptive-actionsheet');
16
- renderer.setStyle(animationContainer, 'width', '100%');
17
- if (windowSize === 'medium') {
18
- renderer.removeClass(element, 'k-actionsheet-fullscreen');
19
- renderer.addClass(element, 'k-actionsheet-bottom');
20
- renderer.setStyle(animationContainer, 'bottom', '0px');
21
- }
22
- else if (windowSize === 'small') {
23
- renderer.removeClass(element, 'k-actionsheet-bottom');
24
- renderer.addClass(element, 'k-actionsheet-fullscreen');
25
- renderer.setStyle(animationContainer, 'height', '100%');
26
- }
27
- };
package/esm2022/package-metadata.mjs CHANGED
@@ -10,7 +10,7 @@ export const packageMetadata = {
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCode: 'KENDOUIANGULAR',
12
12
  productCodes: ['KENDOUIANGULAR'],
13
- publishDate: 1745498527,
14
- version: '19.0.0-develop.3',
13
+ publishDate: 1747836155,
14
+ version: '19.0.0-develop.30',
15
15
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
16
16
  };
package/esm2022/switch/switch.component.mjs CHANGED
@@ -10,7 +10,6 @@ import { validatePackage } from '@progress/kendo-licensing';
10
10
  import { packageMetadata } from '../package-metadata';
11
11
  import { requiresZoneOnBlur, getStylingClasses } from '../common/utils';
12
12
  import { skip, take } from "rxjs/operators";
13
- import { browser } from '@progress/kendo-common';
14
13
  import { LocalizedSwitchMessagesDirective } from './localization/localized-switch-messages.directive';
15
14
  import * as i0 from "@angular/core";
16
15
  import * as i1 from "@progress/kendo-angular-l10n";
@@ -146,9 +145,6 @@ export class SwitchComponent {
146
145
  */
147
146
  valueChange = new EventEmitter();
148
147
  direction;
149
- get ieClass() {
150
- return browser && browser.msie;
151
- }
152
148
  hostRole = 'switch';
153
149
  get hostId() {
154
150
  return this.focusableId;
@@ -450,7 +446,7 @@ export class SwitchComponent {
450
446
  }
451
447
  }
452
448
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
453
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchComponent, isStandalone: true, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
449
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchComponent, isStandalone: true, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
454
450
  LocalizationService,
455
451
  { provide: L10N_PREFIX, useValue: 'kendo.switch' },
456
452
  {
@@ -564,9 +560,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
564
560
  }], direction: [{
565
561
  type: HostBinding,
566
562
  args: ['attr.dir']
567
- }], ieClass: [{
568
- type: HostBinding,
569
- args: ['class.k-ie']
570
563
  }], hostRole: [{
571
564
  type: HostBinding,
572
565
  args: ['attr.role']
package/fesm2022/progress-kendo-angular-inputs.mjs CHANGED
@@ -16,13 +16,13 @@ import { validatePackage } from '@progress/kendo-licensing';
16
16
  import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, checkIcon, exclamationCircleIcon, xIcon, caretAltExpandIcon, xCircleIcon, dropletSlashIcon, dropletSliderIcon, paletteIcon, starIcon, starOutlineIcon, hyperlinkOpenIcon } from '@progress/kendo-svg-icons';
17
17
  import { NgFor, NgClass, NgSwitch, NgSwitchCase, NgTemplateOutlet, NgIf, NgStyle } from '@angular/common';
18
18
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
19
- import { browser, mobileOS } from '@progress/kendo-common';
20
19
  import * as i1$1 from '@progress/kendo-angular-intl';
20
+ import { mobileOS } from '@progress/kendo-common';
21
21
  import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
22
22
  import { parseColor as parseColor$1, Color, namedColors } from '@progress/kendo-drawing';
23
23
  import * as i1$2 from '@progress/kendo-angular-popup';
24
24
  import { PopupService } from '@progress/kendo-angular-popup';
25
- import * as i3 from '@progress/kendo-angular-utils';
25
+ import * as i2 from '@progress/kendo-angular-utils';
26
26
  import { AdaptiveService } from '@progress/kendo-angular-utils';
27
27
  import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
28
28
  import { SignaturePad } from '@progress/kendo-inputs-common';
@@ -554,8 +554,8 @@ const packageMetadata = {
554
554
  productName: 'Kendo UI for Angular',
555
555
  productCode: 'KENDOUIANGULAR',
556
556
  productCodes: ['KENDOUIANGULAR'],
557
- publishDate: 1745498527,
558
- version: '19.0.0-develop.3',
557
+ publishDate: 1747836155,
558
+ version: '19.0.0-develop.30',
559
559
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
560
560
  };
561
561
 
@@ -2606,9 +2606,6 @@ class SwitchComponent {
2606
2606
  */
2607
2607
  valueChange = new EventEmitter();
2608
2608
  direction;
2609
- get ieClass() {
2610
- return browser && browser.msie;
2611
- }
2612
2609
  hostRole = 'switch';
2613
2610
  get hostId() {
2614
2611
  return this.focusableId;
@@ -2910,7 +2907,7 @@ class SwitchComponent {
2910
2907
  }
2911
2908
  }
2912
2909
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
2913
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchComponent, isStandalone: true, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "class.k-ie": "this.ieClass", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
2910
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SwitchComponent, isStandalone: true, selector: "kendo-switch", inputs: { focusableId: "focusableId", onLabel: "onLabel", offLabel: "offLabel", checked: "checked", disabled: "disabled", readonly: "readonly", tabindex: "tabindex", size: "size", thumbRounded: "thumbRounded", trackRounded: "trackRounded", tabIndex: "tabIndex" }, outputs: { onFocus: "focus", onBlur: "blur", valueChange: "valueChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.direction", "attr.role": "this.hostRole", "attr.id": "this.hostId", "attr.aria-checked": "this.ariaChecked", "attr.aria-invalid": "this.ariaInvalid", "attr.tabindex": "this.hostTabIndex", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-readonly": "this.ariaReadonly", "class.k-switch": "this.hostClasses", "class.k-disabled": "this.disabledClass" } }, providers: [
2914
2911
  LocalizationService,
2915
2912
  { provide: L10N_PREFIX, useValue: 'kendo.switch' },
2916
2913
  {
@@ -3024,9 +3021,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
3024
3021
  }], direction: [{
3025
3022
  type: HostBinding,
3026
3023
  args: ['attr.dir']
3027
- }], ieClass: [{
3028
- type: HostBinding,
3029
- args: ['class.k-ie']
3030
3024
  }], hostRole: [{
3031
3025
  type: HostBinding,
3032
3026
  args: ['attr.role']
@@ -9420,15 +9414,15 @@ class ColorPickerMessages extends ComponentMessages {
9420
9414
  */
9421
9415
  cancelButton;
9422
9416
  /**
9423
- * The title for the Close button in adaptive mode.
9417
+ * The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode.
9424
9418
  */
9425
- closeButton;
9419
+ adaptiveCloseButtonTitle;
9426
9420
  /**
9427
9421
  * The title for the ActionSheet when in adaptive mode.
9428
9422
  */
9429
9423
  adaptiveTitle;
9430
9424
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
9431
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", closeButton: "closeButton", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
9425
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerMessages, selector: "kendo-colorpicker-messages-base", inputs: { colorPaletteNoColor: "colorPaletteNoColor", colorGradientNoColor: "colorGradientNoColor", flatColorPickerNoColor: "flatColorPickerNoColor", colorPickerNoColor: "colorPickerNoColor", colorGradientHandle: "colorGradientHandle", clearButton: "clearButton", hueSliderHandle: "hueSliderHandle", opacitySliderHandle: "opacitySliderHandle", hexInputPlaceholder: "hexInputPlaceholder", redInputPlaceholder: "redInputPlaceholder", greenInputPlaceholder: "greenInputPlaceholder", blueInputPlaceholder: "blueInputPlaceholder", alphaInputPlaceholder: "alphaInputPlaceholder", redChannelLabel: "redChannelLabel", greenChannelLabel: "greenChannelLabel", blueChannelLabel: "blueChannelLabel", alphaChannelLabel: "alphaChannelLabel", passContrast: "passContrast", failContrast: "failContrast", contrastRatio: "contrastRatio", previewColor: "previewColor", revertSelection: "revertSelection", gradientView: "gradientView", paletteView: "paletteView", formatButton: "formatButton", applyButton: "applyButton", cancelButton: "cancelButton", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", adaptiveTitle: "adaptiveTitle" }, usesInheritance: true, ngImport: i0 });
9432
9426
  }
9433
9427
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerMessages, decorators: [{
9434
9428
  type: Directive,
@@ -9490,7 +9484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
9490
9484
  type: Input
9491
9485
  }], cancelButton: [{
9492
9486
  type: Input
9493
- }], closeButton: [{
9487
+ }], adaptiveCloseButtonTitle: [{
9494
9488
  type: Input
9495
9489
  }], adaptiveTitle: [{
9496
9490
  type: Input
@@ -12673,25 +12667,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12673
12667
  * @hidden
12674
12668
  */
12675
12669
  const animationDuration = 300;
12676
- /**
12677
- * @hidden
12678
- */
12679
- const updateActionSheetAdaptiveAppearance = (actionSheet, windowSize, renderer) => {
12680
- const element = actionSheet['element'].nativeElement.querySelector('.k-actionsheet');
12681
- const animationContainer = actionSheet['element'].nativeElement.querySelector('.k-child-animation-container');
12682
- renderer.addClass(element, 'k-adaptive-actionsheet');
12683
- renderer.setStyle(animationContainer, 'width', '100%');
12684
- if (windowSize === 'medium') {
12685
- renderer.removeClass(element, 'k-actionsheet-fullscreen');
12686
- renderer.addClass(element, 'k-actionsheet-bottom');
12687
- renderer.setStyle(animationContainer, 'bottom', '0px');
12688
- }
12689
- else if (windowSize === 'small') {
12690
- renderer.removeClass(element, 'k-actionsheet-bottom');
12691
- renderer.addClass(element, 'k-actionsheet-fullscreen');
12692
- renderer.setStyle(animationContainer, 'height', '100%');
12693
- }
12694
- };
12695
12670
 
12696
12671
  /**
12697
12672
  * @hidden
@@ -12754,6 +12729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12754
12729
  */
12755
12730
  class AdaptiveRendererComponent {
12756
12731
  localization;
12732
+ adaptiveService;
12757
12733
  title;
12758
12734
  subtitle;
12759
12735
  actionSheetTemplate;
@@ -12768,52 +12744,55 @@ class AdaptiveRendererComponent {
12768
12744
  actionSheetSearchBar;
12769
12745
  cancelButton;
12770
12746
  applyButton;
12771
- constructor(localization) {
12747
+ constructor(localization, adaptiveService) {
12772
12748
  this.localization = localization;
12749
+ this.adaptiveService = adaptiveService;
12773
12750
  }
12774
12751
  animationDuration = animationDuration;
12775
- xIcon = xIcon;
12776
12752
  checkIcon = checkIcon;
12777
12753
  messageFor(key) {
12778
12754
  return this.localization.get(key);
12779
12755
  }
12780
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
12756
+ get windowSize() {
12757
+ return this.adaptiveService.size;
12758
+ }
12759
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
12781
12760
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", actionSheetTemplate: "actionSheetTemplate", isActionSheetExpanded: "isActionSheetExpanded", preview: "preview" }, outputs: { actionSheetClose: "actionSheetClose", onExpand: "onExpand", onCollapse: "onCollapse", onApply: "onApply", onCancel: "onCancel" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }, { propertyName: "cancelButton", first: true, predicate: ["cancel"], descendants: true }, { propertyName: "applyButton", first: true, predicate: ["apply"], descendants: true }], ngImport: i0, template: `
12782
12761
  <kendo-actionsheet
12783
12762
  #actionSheet
12784
12763
  [animation]="{ duration: animationDuration }"
12785
12764
  [expanded]="isActionSheetExpanded"
12765
+ [cssClass]="{
12766
+ 'k-adaptive-actionsheet': true,
12767
+ 'k-actionsheet-fullscreen': windowSize === 'small',
12768
+ 'k-actionsheet-bottom': windowSize === 'medium'
12769
+ }"
12770
+ [cssStyle]="{
12771
+ height: windowSize === 'small' ? '100vh' : '60vh'
12772
+ }"
12786
12773
  (overlayClick)="actionSheetClose.emit()"
12787
12774
  (expand)="onExpand.emit()"
12788
12775
  (collapse)="onCollapse.emit()"
12789
12776
  >
12790
12777
  <ng-template kendoActionSheetTemplate>
12791
- <div class="k-text-center k-actionsheet-titlebar">
12792
- <div class="k-actionsheet-titlebar-group k-hbox">
12778
+ <div class="k-actionsheet-titlebar">
12779
+ <div class="k-actionsheet-titlebar-group">
12793
12780
  <div class="k-actionsheet-title">
12794
- <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
12795
- <div class="k-actionsheet-subtitle k-text-center"></div>
12781
+ <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
12782
+ <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
12796
12783
  </div>
12797
- <div *ngIf="!preview" class="k-actionsheet-actions">
12784
+ <div class="k-actionsheet-actions">
12798
12785
  <kendo-adaptive-close-button
12799
12786
  icon="check"
12800
12787
  color="primary"
12801
- [title]="messageFor('closeButton')"
12788
+ [title]="messageFor('adaptiveCloseButtonTitle')"
12802
12789
  [svgIcon]="checkIcon"
12803
- (close)="onApply.emit($event)">
12804
- </kendo-adaptive-close-button>
12805
- </div>
12806
- <div *ngIf="preview" class="k-actionsheet-actions">
12807
- <kendo-adaptive-close-button
12808
- icon="x"
12809
- [title]="messageFor('closeButton')"
12810
- [svgIcon]="xIcon"
12811
12790
  (close)="actionSheetClose.emit($event)">
12812
12791
  </kendo-adaptive-close-button>
12813
12792
  </div>
12814
12793
  </div>
12815
12794
  </div>
12816
- <div class="k-actionsheet-content !k-overflow-hidden">
12795
+ <div class="k-actionsheet-content">
12817
12796
  <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
12818
12797
  </div>
12819
12798
  <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -12837,7 +12816,7 @@ class AdaptiveRendererComponent {
12837
12816
  </div>
12838
12817
  </ng-template>
12839
12818
  </kendo-actionsheet>
12840
- `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
12819
+ `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
12841
12820
  }
12842
12821
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
12843
12822
  type: Component,
@@ -12848,37 +12827,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12848
12827
  #actionSheet
12849
12828
  [animation]="{ duration: animationDuration }"
12850
12829
  [expanded]="isActionSheetExpanded"
12830
+ [cssClass]="{
12831
+ 'k-adaptive-actionsheet': true,
12832
+ 'k-actionsheet-fullscreen': windowSize === 'small',
12833
+ 'k-actionsheet-bottom': windowSize === 'medium'
12834
+ }"
12835
+ [cssStyle]="{
12836
+ height: windowSize === 'small' ? '100vh' : '60vh'
12837
+ }"
12851
12838
  (overlayClick)="actionSheetClose.emit()"
12852
12839
  (expand)="onExpand.emit()"
12853
12840
  (collapse)="onCollapse.emit()"
12854
12841
  >
12855
12842
  <ng-template kendoActionSheetTemplate>
12856
- <div class="k-text-center k-actionsheet-titlebar">
12857
- <div class="k-actionsheet-titlebar-group k-hbox">
12843
+ <div class="k-actionsheet-titlebar">
12844
+ <div class="k-actionsheet-titlebar-group">
12858
12845
  <div class="k-actionsheet-title">
12859
- <div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
12860
- <div class="k-actionsheet-subtitle k-text-center"></div>
12846
+ <div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
12847
+ <div class="k-actionsheet-subtitle k-text-center" *ngIf="subtitle">{{ subtitle }}</div>
12861
12848
  </div>
12862
- <div *ngIf="!preview" class="k-actionsheet-actions">
12849
+ <div class="k-actionsheet-actions">
12863
12850
  <kendo-adaptive-close-button
12864
12851
  icon="check"
12865
12852
  color="primary"
12866
- [title]="messageFor('closeButton')"
12853
+ [title]="messageFor('adaptiveCloseButtonTitle')"
12867
12854
  [svgIcon]="checkIcon"
12868
- (close)="onApply.emit($event)">
12869
- </kendo-adaptive-close-button>
12870
- </div>
12871
- <div *ngIf="preview" class="k-actionsheet-actions">
12872
- <kendo-adaptive-close-button
12873
- icon="x"
12874
- [title]="messageFor('closeButton')"
12875
- [svgIcon]="xIcon"
12876
12855
  (close)="actionSheetClose.emit($event)">
12877
12856
  </kendo-adaptive-close-button>
12878
12857
  </div>
12879
12858
  </div>
12880
12859
  </div>
12881
- <div class="k-actionsheet-content !k-overflow-hidden">
12860
+ <div class="k-actionsheet-content">
12882
12861
  <ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
12883
12862
  </div>
12884
12863
  <div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
@@ -12906,7 +12885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
12906
12885
  standalone: true,
12907
12886
  imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, NgTemplateOutlet, AdaptiveCloseButtonComponent]
12908
12887
  }]
12909
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
12888
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }]; }, propDecorators: { title: [{
12910
12889
  type: Input
12911
12890
  }], subtitle: [{
12912
12891
  type: Input
@@ -13101,6 +13080,15 @@ class ColorPickerComponent {
13101
13080
  get svgIcon() {
13102
13081
  return this._svgIcon;
13103
13082
  }
13083
+ /**
13084
+ * Sets the title of the ActionSheet that is rendered instead of the Popup when using small screen devices.
13085
+ */
13086
+ adaptiveTitle = '';
13087
+ /**
13088
+ * Sets the subtitle of the ActionSheet that is rendered instead of the Popup when using small screen devices.
13089
+ * By default the ActionSheet does not render a subtitle.
13090
+ */
13091
+ adaptiveSubtitle;
13104
13092
  /**
13105
13093
  * Specifies whether the ColorPicker should display a 'Clear color' button.
13106
13094
  *
@@ -13592,17 +13580,28 @@ class ColorPickerComponent {
13592
13580
  /**
13593
13581
  * @hidden
13594
13582
  */
13595
- onApply() {
13583
+ applyValue() {
13596
13584
  this.handleValueChange(this.flatColorPicker.selection);
13597
13585
  this.toggleWithEvents(false);
13598
13586
  }
13599
13587
  /**
13600
13588
  * @hidden
13601
13589
  */
13602
- onCancel(e) {
13590
+ cancelValue(e) {
13603
13591
  this.flatColorPicker.resetSelection(e);
13604
13592
  this.toggleWithEvents(false);
13605
13593
  }
13594
+ /**
13595
+ * @hidden
13596
+ */
13597
+ onActionSheetClose(e) {
13598
+ if (this.preview) {
13599
+ this.cancelValue(e);
13600
+ }
13601
+ else {
13602
+ this.applyValue();
13603
+ }
13604
+ }
13606
13605
  /**
13607
13606
  * @hidden
13608
13607
  */
@@ -13678,9 +13677,7 @@ class ColorPickerComponent {
13678
13677
  });
13679
13678
  }
13680
13679
  openActionSheet() {
13681
- this.windowSize = this.adaptiveService.size;
13682
13680
  this.actionSheet.toggle(true);
13683
- updateActionSheetAdaptiveAppearance(this.actionSheet, this.windowSize, this.renderer);
13684
13681
  }
13685
13682
  closeActionSheet() {
13686
13683
  this.actionSheet.toggle(false);
@@ -13789,8 +13786,8 @@ class ColorPickerComponent {
13789
13786
  this.focusableId = id;
13790
13787
  }
13791
13788
  }
13792
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i3.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
13793
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
13789
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.PopupService }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
13790
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColorPickerComponent, isStandalone: true, selector: "kendo-colorpicker", inputs: { views: "views", view: "view", adaptiveMode: "adaptiveMode", activeView: "activeView", readonly: "readonly", disabled: "disabled", format: "format", value: "value", popupSettings: "popupSettings", paletteSettings: "paletteSettings", gradientSettings: "gradientSettings", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", clearButton: "clearButton", tabindex: "tabindex", preview: "preview", actionsLayout: "actionsLayout", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", open: "open", close: "close", onFocus: "focus", onBlur: "blur", cancel: "cancel", activeColorClick: "activeColorClick", clearButtonClick: "clearButtonClick", activeViewChange: "activeViewChange" }, host: { properties: { "class.k-colorpicker": "this.hostClasses", "class.k-icon-picker": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-focus": "this.focusedClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-expanded": "this.ariaExpanded", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.direction", "attr.role": "this.role", "attr.aria-haspopup": "this.hasPopup", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [{
13794
13791
  multi: true,
13795
13792
  provide: NG_VALUE_ACCESSOR,
13796
13793
  useExisting: forwardRef(() => ColorPickerComponent)
@@ -13841,8 +13838,8 @@ class ColorPickerComponent {
13841
13838
  applyButton="Apply"
13842
13839
  i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
13843
13840
  cancelButton="Cancel"
13844
- i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
13845
- closeButton="Close"
13841
+ i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
13842
+ adaptiveCloseButtonTitle="Close"
13846
13843
  i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
13847
13844
  adaptiveTitle="Choose Color"
13848
13845
  i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -13919,10 +13916,12 @@ class ColorPickerComponent {
13919
13916
  <kendo-adaptive-renderer
13920
13917
  [actionSheetTemplate]="popupTemplate"
13921
13918
  [isActionSheetExpanded]="isActionSheetExpanded"
13919
+ [title]="adaptiveTitle"
13920
+ [subtitle]="adaptiveSubtitle"
13922
13921
  [preview]="preview"
13923
- (actionSheetClose)="onCancel($event)"
13924
- (onApply)="onApply()"
13925
- (onCancel)="onCancel($event)"
13922
+ (actionSheetClose)="onActionSheetClose($event)"
13923
+ (onApply)="applyValue()"
13924
+ (onCancel)="cancelValue($event)"
13926
13925
  >
13927
13926
  </kendo-adaptive-renderer>
13928
13927
  <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -13984,8 +13983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
13984
13983
  applyButton="Apply"
13985
13984
  i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
13986
13985
  cancelButton="Cancel"
13987
- i18n-closeButton="kendo.colorpicker.closeButton|The title for the Close button."
13988
- closeButton="Close"
13986
+ i18n-adaptiveCloseButtonTitle="kendo.colorpicker.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode."
13987
+ adaptiveCloseButtonTitle="Close"
13989
13988
  i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
13990
13989
  adaptiveTitle="Choose Color"
13991
13990
  i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
@@ -14062,10 +14061,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
14062
14061
  <kendo-adaptive-renderer
14063
14062
  [actionSheetTemplate]="popupTemplate"
14064
14063
  [isActionSheetExpanded]="isActionSheetExpanded"
14064
+ [title]="adaptiveTitle"
14065
+ [subtitle]="adaptiveSubtitle"
14065
14066
  [preview]="preview"
14066
- (actionSheetClose)="onCancel($event)"
14067
- (onApply)="onApply()"
14068
- (onCancel)="onCancel($event)"
14067
+ (actionSheetClose)="onActionSheetClose($event)"
14068
+ (onApply)="applyValue()"
14069
+ (onCancel)="cancelValue($event)"
14069
14070
  >
14070
14071
  </kendo-adaptive-renderer>
14071
14072
  <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
@@ -14073,7 +14074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
14073
14074
  standalone: true,
14074
14075
  imports: [LocalizedColorPickerMessagesDirective, NgClass, NgIf, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent, ResizeSensorComponent, AdaptiveRendererComponent]
14075
14076
  }]
14076
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.AdaptiveService }]; }, propDecorators: { hostClasses: [{
14077
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.PopupService }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i2.AdaptiveService }]; }, propDecorators: { hostClasses: [{
14077
14078
  type: HostBinding,
14078
14079
  args: ['class.k-colorpicker']
14079
14080
  }, {
@@ -14143,6 +14144,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
14143
14144
  type: Input
14144
14145
  }], svgIcon: [{
14145
14146
  type: Input
14147
+ }], adaptiveTitle: [{
14148
+ type: Input
14149
+ }], adaptiveSubtitle: [{
14150
+ type: Input
14146
14151
  }], clearButton: [{
14147
14152
  type: Input
14148
14153
  }], tabindex: [{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-inputs",
3
- "version": "19.0.0-develop.3",
3
+ "version": "19.0.0-develop.30",
4
4
  "description": "Kendo UI for Angular Inputs Package - Everything you need to build professional form functionality (Checkbox, ColorGradient, ColorPalette, ColorPicker, FlatColorPicker, FormField, MaskedTextBox, NumericTextBox, RadioButton, RangeSlider, Slider, Switch, TextArea, and TextBox Components)",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -28,7 +28,7 @@
28
28
  "package": {
29
29
  "productName": "Kendo UI for Angular",
30
30
  "productCode": "KENDOUIANGULAR",
31
- "publishDate": 1745498527,
31
+ "publishDate": 1747836155,
32
32
  "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
33
33
  }
34
34
  },
@@ -40,20 +40,20 @@
40
40
  "@angular/platform-browser": "16 - 19",
41
41
  "@progress/kendo-drawing": "^1.21.0",
42
42
  "@progress/kendo-licensing": "^1.5.0",
43
- "@progress/kendo-angular-buttons": "19.0.0-develop.3",
44
- "@progress/kendo-angular-common": "19.0.0-develop.3",
45
- "@progress/kendo-angular-utils": "19.0.0-develop.3",
46
- "@progress/kendo-angular-navigation": "19.0.0-develop.3",
47
- "@progress/kendo-angular-dialog": "19.0.0-develop.3",
48
- "@progress/kendo-angular-intl": "19.0.0-develop.3",
49
- "@progress/kendo-angular-l10n": "19.0.0-develop.3",
50
- "@progress/kendo-angular-popup": "19.0.0-develop.3",
51
- "@progress/kendo-angular-icons": "19.0.0-develop.3",
43
+ "@progress/kendo-angular-buttons": "19.0.0-develop.30",
44
+ "@progress/kendo-angular-common": "19.0.0-develop.30",
45
+ "@progress/kendo-angular-utils": "19.0.0-develop.30",
46
+ "@progress/kendo-angular-navigation": "19.0.0-develop.30",
47
+ "@progress/kendo-angular-dialog": "19.0.0-develop.30",
48
+ "@progress/kendo-angular-intl": "19.0.0-develop.30",
49
+ "@progress/kendo-angular-l10n": "19.0.0-develop.30",
50
+ "@progress/kendo-angular-popup": "19.0.0-develop.30",
51
+ "@progress/kendo-angular-icons": "19.0.0-develop.30",
52
52
  "rxjs": "^6.5.3 || ^7.0.0"
53
53
  },
54
54
  "dependencies": {
55
55
  "tslib": "^2.3.1",
56
- "@progress/kendo-angular-schematics": "19.0.0-develop.3",
56
+ "@progress/kendo-angular-schematics": "19.0.0-develop.30",
57
57
  "@progress/kendo-common": "^1.0.1",
58
58
  "@progress/kendo-draggable": "^3.0.0",
59
59
  "@progress/kendo-inputs-common": "^3.1.0"
package/switch/switch.component.d.ts CHANGED
@@ -106,7 +106,6 @@ export declare class SwitchComponent implements ControlValueAccessor, OnInit, On
106
106
  */
107
107
  valueChange: EventEmitter<any>;
108
108
  direction: string;
109
- get ieClass(): boolean;
110
109
  hostRole: string;
111
110
  get hostId(): string;
112
111
  get ariaChecked(): boolean;