@progress/kendo-angular-inputs 18.1.0-develop.29 → 18.1.0-develop.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/colorpicker/color-gradient.component.d.ts +1 -19
- package/colorpicker/color-input.component.d.ts +3 -15
- package/colorpicker/color-palette.component.d.ts +6 -16
- package/colorpicker/colorpicker.component.d.ts +8 -55
- package/colorpicker/flatcolorpicker-actions.component.d.ts +1 -3
- package/colorpicker/flatcolorpicker-header.component.d.ts +1 -3
- package/colorpicker/flatcolorpicker.component.d.ts +1 -19
- package/colorpicker/localization/messages.d.ts +1 -9
- package/esm2022/colorpicker/color-gradient.component.mjs +17 -75
- package/esm2022/colorpicker/color-input.component.mjs +23 -56
- package/esm2022/colorpicker/color-palette.component.mjs +15 -45
- package/esm2022/colorpicker/colorpicker.component.mjs +41 -182
- package/esm2022/colorpicker/flatcolorpicker-actions.component.mjs +7 -22
- package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +3 -8
- package/esm2022/colorpicker/flatcolorpicker.component.mjs +17 -72
- package/esm2022/colorpicker/localization/messages.mjs +1 -13
- package/esm2022/colorpicker/services/flatcolorpicker.service.mjs +3 -3
- package/esm2022/colorpicker.module.mjs +2 -3
- package/esm2022/inputs.module.mjs +2 -3
- package/esm2022/otpinput/otpinput.component.mjs +45 -75
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-inputs.mjs +3092 -3765
- package/otpinput/models/separator-icon.d.ts +3 -9
- package/otpinput/otpinput.component.d.ts +7 -4
- package/package.json +11 -13
- package/colorpicker/adaptiveness/adaptive-close-button.component.d.ts +0 -20
- package/colorpicker/adaptiveness/adaptive-renderer.component.d.ts +0 -38
- package/colorpicker/color-gradient-text-label.directive.d.ts +0 -19
- package/colorpicker/models/adaptive-mode.d.ts +0 -23
- package/esm2022/colorpicker/adaptiveness/adaptive-close-button.component.mjs +0 -62
- package/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +0 -205
- package/esm2022/colorpicker/color-gradient-text-label.directive.mjs +0 -34
- package/esm2022/colorpicker/models/adaptive-mode.mjs +0 -27
|
@@ -2,17 +2,11 @@
|
|
|
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 { SVGIcon } from
|
|
5
|
+
import { SVGIcon } from "@progress/kendo-angular-icons";
|
|
6
6
|
/**
|
|
7
7
|
* Represents the possible icon separators of the OTP Input.
|
|
8
8
|
*/
|
|
9
|
-
export
|
|
10
|
-
/**
|
|
11
|
-
* Specifies the type of the separator icon.
|
|
12
|
-
*/
|
|
9
|
+
export type OTPSeparatorIcon = {
|
|
13
10
|
type: 'svgIcon' | 'fontIcon' | 'iconClass';
|
|
14
|
-
/**
|
|
15
|
-
* Specifies the icon to be displayed as a separator.
|
|
16
|
-
*/
|
|
17
11
|
value: string | SVGIcon;
|
|
18
|
-
}
|
|
12
|
+
};
|
|
@@ -42,7 +42,7 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
42
42
|
*/
|
|
43
43
|
spacing: boolean;
|
|
44
44
|
/**
|
|
45
|
-
*
|
|
45
|
+
* Adds a separator between groups of input fields.
|
|
46
46
|
*
|
|
47
47
|
* > The configuration can only be applied when `groupLength` is set.
|
|
48
48
|
*/
|
|
@@ -123,6 +123,10 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
123
123
|
* might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
|
|
124
124
|
*/
|
|
125
125
|
valueChange: EventEmitter<any>;
|
|
126
|
+
/**
|
|
127
|
+
* Fires when the length of the trimmed value is equal to `length`.
|
|
128
|
+
*/
|
|
129
|
+
inputFinish: EventEmitter<string>;
|
|
126
130
|
/**
|
|
127
131
|
* Fires each time the user focuses the OTP Input.
|
|
128
132
|
*/
|
|
@@ -268,7 +272,7 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
268
272
|
private handleKeydown;
|
|
269
273
|
private isValidGroupArray;
|
|
270
274
|
private populateGroupArray;
|
|
271
|
-
private
|
|
275
|
+
private populateSeparatorPosititons;
|
|
272
276
|
private clearGroups;
|
|
273
277
|
private clearInputValues;
|
|
274
278
|
private handleInputChanges;
|
|
@@ -278,7 +282,6 @@ export declare class OTPInputComponent implements ControlValueAccessor, OnInit,
|
|
|
278
282
|
private ariaLabel;
|
|
279
283
|
private isValidNumber;
|
|
280
284
|
private showInvalidInput;
|
|
281
|
-
private containsDigitsOrSpaces;
|
|
282
285
|
static ɵfac: i0.ɵɵFactoryDeclaration<OTPInputComponent, never>;
|
|
283
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<OTPInputComponent, "kendo-otpinput", ["kendoOTPInput"], { "length": { "alias": "length"; "required": false; }; "type": { "alias": "type"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "groupLength": { "alias": "groupLength"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "onFocus": "focus"; "onBlur": "blur"; }, never, never, true, never>;
|
|
286
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<OTPInputComponent, "kendo-otpinput", ["kendoOTPInput"], { "length": { "alias": "length"; "required": false; }; "type": { "alias": "type"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "groupLength": { "alias": "groupLength"; "required": false; }; "value": { "alias": "value"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "fillMode": { "alias": "fillMode"; "required": false; }; "inputAttributes": { "alias": "inputAttributes"; "required": false; }; }, { "valueChange": "valueChange"; "inputFinish": "inputFinish"; "onFocus": "focus"; "onBlur": "blur"; }, never, never, true, never>;
|
|
284
287
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-inputs",
|
|
3
|
-
"version": "18.1.0-develop.
|
|
3
|
+
"version": "18.1.0-develop.3",
|
|
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":
|
|
31
|
+
"publishDate": 1738245756,
|
|
32
32
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
33
33
|
}
|
|
34
34
|
},
|
|
@@ -39,21 +39,19 @@
|
|
|
39
39
|
"@angular/forms": "16 - 19",
|
|
40
40
|
"@angular/platform-browser": "16 - 19",
|
|
41
41
|
"@progress/kendo-drawing": "^1.21.0",
|
|
42
|
-
"@progress/kendo-licensing": "^1.
|
|
43
|
-
"@progress/kendo-angular-buttons": "18.1.0-develop.
|
|
44
|
-
"@progress/kendo-angular-common": "18.1.0-develop.
|
|
45
|
-
"@progress/kendo-angular-
|
|
46
|
-
"@progress/kendo-angular-
|
|
47
|
-
"@progress/kendo-angular-
|
|
48
|
-
"@progress/kendo-angular-
|
|
49
|
-
"@progress/kendo-angular-
|
|
50
|
-
"@progress/kendo-angular-popup": "18.1.0-develop.29",
|
|
51
|
-
"@progress/kendo-angular-icons": "18.1.0-develop.29",
|
|
42
|
+
"@progress/kendo-licensing": "^1.0.2",
|
|
43
|
+
"@progress/kendo-angular-buttons": "18.1.0-develop.3",
|
|
44
|
+
"@progress/kendo-angular-common": "18.1.0-develop.3",
|
|
45
|
+
"@progress/kendo-angular-dialog": "18.1.0-develop.3",
|
|
46
|
+
"@progress/kendo-angular-intl": "18.1.0-develop.3",
|
|
47
|
+
"@progress/kendo-angular-l10n": "18.1.0-develop.3",
|
|
48
|
+
"@progress/kendo-angular-popup": "18.1.0-develop.3",
|
|
49
|
+
"@progress/kendo-angular-icons": "18.1.0-develop.3",
|
|
52
50
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
53
51
|
},
|
|
54
52
|
"dependencies": {
|
|
55
53
|
"tslib": "^2.3.1",
|
|
56
|
-
"@progress/kendo-angular-schematics": "18.1.0-develop.
|
|
54
|
+
"@progress/kendo-angular-schematics": "18.1.0-develop.3",
|
|
57
55
|
"@progress/kendo-common": "^1.0.1",
|
|
58
56
|
"@progress/kendo-draggable": "^3.0.0",
|
|
59
57
|
"@progress/kendo-inputs-common": "^3.1.0"
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { EventEmitter } from '@angular/core';
|
|
6
|
-
import { ButtonThemeColor } from '@progress/kendo-angular-buttons';
|
|
7
|
-
import { SVGIcon } from '@progress/kendo-angular-icons';
|
|
8
|
-
import * as i0 from "@angular/core";
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export declare class AdaptiveCloseButtonComponent {
|
|
13
|
-
title: string;
|
|
14
|
-
icon: string;
|
|
15
|
-
svgIcon: SVGIcon;
|
|
16
|
-
color: ButtonThemeColor;
|
|
17
|
-
close: EventEmitter<any>;
|
|
18
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<AdaptiveCloseButtonComponent, never>;
|
|
19
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<AdaptiveCloseButtonComponent, "kendo-adaptive-close-button", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "close": "close"; }, never, never, true, never>;
|
|
20
|
-
}
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { EventEmitter, TemplateRef } from '@angular/core';
|
|
6
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { SVGIcon } from '@progress/kendo-angular-icons';
|
|
8
|
-
import { ActionSheetComponent } from '@progress/kendo-angular-navigation';
|
|
9
|
-
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
10
|
-
import { TextBoxComponent } from '../../textbox/textbox.component';
|
|
11
|
-
import * as i0 from "@angular/core";
|
|
12
|
-
/**
|
|
13
|
-
* @hidden
|
|
14
|
-
*/
|
|
15
|
-
export declare class AdaptiveRendererComponent {
|
|
16
|
-
localization: LocalizationService;
|
|
17
|
-
title: string;
|
|
18
|
-
subtitle: string;
|
|
19
|
-
actionSheetTemplate: TemplateRef<any>;
|
|
20
|
-
isActionSheetExpanded: boolean;
|
|
21
|
-
preview: boolean;
|
|
22
|
-
actionSheetClose: EventEmitter<any>;
|
|
23
|
-
onExpand: EventEmitter<any>;
|
|
24
|
-
onCollapse: EventEmitter<any>;
|
|
25
|
-
onApply: EventEmitter<any>;
|
|
26
|
-
onCancel: EventEmitter<any>;
|
|
27
|
-
actionSheet: ActionSheetComponent;
|
|
28
|
-
actionSheetSearchBar: TextBoxComponent;
|
|
29
|
-
cancelButton: ButtonComponent;
|
|
30
|
-
applyButton: ButtonComponent;
|
|
31
|
-
constructor(localization: LocalizationService);
|
|
32
|
-
animationDuration: number;
|
|
33
|
-
xIcon: SVGIcon;
|
|
34
|
-
checkIcon: SVGIcon;
|
|
35
|
-
messageFor(key: string): string;
|
|
36
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<AdaptiveRendererComponent, never>;
|
|
37
|
-
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
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { OnInit, Renderer2 } from '@angular/core';
|
|
6
|
-
import { TextBoxComponent } from '../textbox/textbox.component';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
export declare class TextLabelDirective implements OnInit {
|
|
12
|
-
private textBox;
|
|
13
|
-
private renderer;
|
|
14
|
-
focusableId: any;
|
|
15
|
-
constructor(textBox: TextBoxComponent, renderer: Renderer2);
|
|
16
|
-
ngOnInit(): void;
|
|
17
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<TextLabelDirective, never>;
|
|
18
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<TextLabelDirective, "[kendoTextLabel]", never, { "focusableId": { "alias": "focusableId"; "required": false; }; }, {}, never, never, true, never>;
|
|
19
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Renderer2 } from "@angular/core";
|
|
6
|
-
import { ActionSheetComponent } from "@progress/kendo-angular-navigation";
|
|
7
|
-
import { AdaptiveSize } from "@progress/kendo-angular-utils";
|
|
8
|
-
/**
|
|
9
|
-
* Specifies the adaptive rendering of the component.
|
|
10
|
-
*
|
|
11
|
-
* The supported values are:
|
|
12
|
-
* * `none`—(default)
|
|
13
|
-
* * `auto`
|
|
14
|
-
*/
|
|
15
|
-
export type AdaptiveMode = 'none' | 'auto';
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
export declare const animationDuration = 300;
|
|
20
|
-
/**
|
|
21
|
-
* @hidden
|
|
22
|
-
*/
|
|
23
|
-
export declare const updateActionSheetAdaptiveAppearance: (actionSheet: ActionSheetComponent, windowSize: AdaptiveSize, renderer: Renderer2) => void;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
6
|
-
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
export class AdaptiveCloseButtonComponent {
|
|
12
|
-
title;
|
|
13
|
-
icon;
|
|
14
|
-
svgIcon;
|
|
15
|
-
color;
|
|
16
|
-
close = new EventEmitter();
|
|
17
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveCloseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveCloseButtonComponent, isStandalone: true, selector: "kendo-adaptive-close-button", inputs: { title: "title", icon: "icon", svgIcon: "svgIcon", color: "color" }, outputs: { close: "close" }, ngImport: i0, template: `
|
|
19
|
-
<button kendoButton
|
|
20
|
-
type="button"
|
|
21
|
-
[title]="title"
|
|
22
|
-
[icon]="icon"
|
|
23
|
-
[svgIcon]="svgIcon"
|
|
24
|
-
[themeColor]="color"
|
|
25
|
-
fillMode="flat"
|
|
26
|
-
size="large"
|
|
27
|
-
[tabIndex]="-1"
|
|
28
|
-
(click)="close.emit($event)"
|
|
29
|
-
></button>
|
|
30
|
-
`, isInline: true, dependencies: [{ 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"] }] });
|
|
31
|
-
}
|
|
32
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveCloseButtonComponent, decorators: [{
|
|
33
|
-
type: Component,
|
|
34
|
-
args: [{
|
|
35
|
-
selector: 'kendo-adaptive-close-button',
|
|
36
|
-
template: `
|
|
37
|
-
<button kendoButton
|
|
38
|
-
type="button"
|
|
39
|
-
[title]="title"
|
|
40
|
-
[icon]="icon"
|
|
41
|
-
[svgIcon]="svgIcon"
|
|
42
|
-
[themeColor]="color"
|
|
43
|
-
fillMode="flat"
|
|
44
|
-
size="large"
|
|
45
|
-
[tabIndex]="-1"
|
|
46
|
-
(click)="close.emit($event)"
|
|
47
|
-
></button>
|
|
48
|
-
`,
|
|
49
|
-
standalone: true,
|
|
50
|
-
imports: [ButtonComponent]
|
|
51
|
-
}]
|
|
52
|
-
}], propDecorators: { title: [{
|
|
53
|
-
type: Input
|
|
54
|
-
}], icon: [{
|
|
55
|
-
type: Input
|
|
56
|
-
}], svgIcon: [{
|
|
57
|
-
type: Input
|
|
58
|
-
}], color: [{
|
|
59
|
-
type: Input
|
|
60
|
-
}], close: [{
|
|
61
|
-
type: Output
|
|
62
|
-
}] } });
|
|
@@ -1,205 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, Input, Output, EventEmitter, TemplateRef, ViewChild } from '@angular/core';
|
|
6
|
-
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
|
-
import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
8
|
-
import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
|
|
9
|
-
import { NgIf, NgTemplateOutlet } from '@angular/common';
|
|
10
|
-
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
11
|
-
import { TextBoxComponent } from '../../textbox/textbox.component';
|
|
12
|
-
import { animationDuration } from '../models/adaptive-mode';
|
|
13
|
-
import { AdaptiveCloseButtonComponent } from './adaptive-close-button.component';
|
|
14
|
-
import * as i0 from "@angular/core";
|
|
15
|
-
import * as i1 from "@progress/kendo-angular-l10n";
|
|
16
|
-
/**
|
|
17
|
-
* @hidden
|
|
18
|
-
*/
|
|
19
|
-
export class AdaptiveRendererComponent {
|
|
20
|
-
localization;
|
|
21
|
-
title;
|
|
22
|
-
subtitle;
|
|
23
|
-
actionSheetTemplate;
|
|
24
|
-
isActionSheetExpanded;
|
|
25
|
-
preview;
|
|
26
|
-
actionSheetClose = new EventEmitter();
|
|
27
|
-
onExpand = new EventEmitter();
|
|
28
|
-
onCollapse = new EventEmitter();
|
|
29
|
-
onApply = new EventEmitter();
|
|
30
|
-
onCancel = new EventEmitter();
|
|
31
|
-
actionSheet;
|
|
32
|
-
actionSheetSearchBar;
|
|
33
|
-
cancelButton;
|
|
34
|
-
applyButton;
|
|
35
|
-
constructor(localization) {
|
|
36
|
-
this.localization = localization;
|
|
37
|
-
}
|
|
38
|
-
animationDuration = animationDuration;
|
|
39
|
-
xIcon = xIcon;
|
|
40
|
-
checkIcon = checkIcon;
|
|
41
|
-
messageFor(key) {
|
|
42
|
-
return this.localization.get(key);
|
|
43
|
-
}
|
|
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 });
|
|
45
|
-
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
|
-
<kendo-actionsheet
|
|
47
|
-
#actionSheet
|
|
48
|
-
[animation]="{ duration: animationDuration }"
|
|
49
|
-
[expanded]="isActionSheetExpanded"
|
|
50
|
-
(overlayClick)="actionSheetClose.emit()"
|
|
51
|
-
(expand)="onExpand.emit()"
|
|
52
|
-
(collapse)="onCollapse.emit()"
|
|
53
|
-
>
|
|
54
|
-
<ng-template kendoActionSheetTemplate>
|
|
55
|
-
<div class="k-text-center k-actionsheet-titlebar">
|
|
56
|
-
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
57
|
-
<div class="k-actionsheet-title">
|
|
58
|
-
<div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
|
|
59
|
-
<div class="k-actionsheet-subtitle k-text-center"></div>
|
|
60
|
-
</div>
|
|
61
|
-
<div *ngIf="!preview" class="k-actionsheet-actions">
|
|
62
|
-
<kendo-adaptive-close-button
|
|
63
|
-
icon="check"
|
|
64
|
-
color="primary"
|
|
65
|
-
[title]="messageFor('closeButton')"
|
|
66
|
-
[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
|
-
(close)="actionSheetClose.emit($event)">
|
|
76
|
-
</kendo-adaptive-close-button>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
<div class="k-actionsheet-content !k-overflow-hidden">
|
|
81
|
-
<ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
|
|
82
|
-
</div>
|
|
83
|
-
<div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
84
|
-
<button
|
|
85
|
-
#cancel
|
|
86
|
-
kendoButton
|
|
87
|
-
size="large"
|
|
88
|
-
(click)="onCancel.emit($event)"
|
|
89
|
-
[title]="messageFor('cancelButton')">
|
|
90
|
-
{{messageFor('cancelButton')}}
|
|
91
|
-
</button>
|
|
92
|
-
<button
|
|
93
|
-
#apply
|
|
94
|
-
kendoButton
|
|
95
|
-
size="large"
|
|
96
|
-
themeColor="primary"
|
|
97
|
-
(click)="onApply.emit()"
|
|
98
|
-
[title]="messageFor('applyButton')">
|
|
99
|
-
{{messageFor('applyButton')}}
|
|
100
|
-
</button>
|
|
101
|
-
</div>
|
|
102
|
-
</ng-template>
|
|
103
|
-
</kendo-actionsheet>
|
|
104
|
-
`, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "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
|
-
}
|
|
106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
|
|
107
|
-
type: Component,
|
|
108
|
-
args: [{
|
|
109
|
-
selector: 'kendo-adaptive-renderer',
|
|
110
|
-
template: `
|
|
111
|
-
<kendo-actionsheet
|
|
112
|
-
#actionSheet
|
|
113
|
-
[animation]="{ duration: animationDuration }"
|
|
114
|
-
[expanded]="isActionSheetExpanded"
|
|
115
|
-
(overlayClick)="actionSheetClose.emit()"
|
|
116
|
-
(expand)="onExpand.emit()"
|
|
117
|
-
(collapse)="onCollapse.emit()"
|
|
118
|
-
>
|
|
119
|
-
<ng-template kendoActionSheetTemplate>
|
|
120
|
-
<div class="k-text-center k-actionsheet-titlebar">
|
|
121
|
-
<div class="k-actionsheet-titlebar-group k-hbox">
|
|
122
|
-
<div class="k-actionsheet-title">
|
|
123
|
-
<div class="k-text-center">{{ messageFor('adaptiveTitle') }}</div>
|
|
124
|
-
<div class="k-actionsheet-subtitle k-text-center"></div>
|
|
125
|
-
</div>
|
|
126
|
-
<div *ngIf="!preview" class="k-actionsheet-actions">
|
|
127
|
-
<kendo-adaptive-close-button
|
|
128
|
-
icon="check"
|
|
129
|
-
color="primary"
|
|
130
|
-
[title]="messageFor('closeButton')"
|
|
131
|
-
[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
|
-
(close)="actionSheetClose.emit($event)">
|
|
141
|
-
</kendo-adaptive-close-button>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
<div class="k-actionsheet-content !k-overflow-hidden">
|
|
146
|
-
<ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
|
|
147
|
-
</div>
|
|
148
|
-
<div *ngIf="preview" class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
149
|
-
<button
|
|
150
|
-
#cancel
|
|
151
|
-
kendoButton
|
|
152
|
-
size="large"
|
|
153
|
-
(click)="onCancel.emit($event)"
|
|
154
|
-
[title]="messageFor('cancelButton')">
|
|
155
|
-
{{messageFor('cancelButton')}}
|
|
156
|
-
</button>
|
|
157
|
-
<button
|
|
158
|
-
#apply
|
|
159
|
-
kendoButton
|
|
160
|
-
size="large"
|
|
161
|
-
themeColor="primary"
|
|
162
|
-
(click)="onApply.emit()"
|
|
163
|
-
[title]="messageFor('applyButton')">
|
|
164
|
-
{{messageFor('applyButton')}}
|
|
165
|
-
</button>
|
|
166
|
-
</div>
|
|
167
|
-
</ng-template>
|
|
168
|
-
</kendo-actionsheet>
|
|
169
|
-
`,
|
|
170
|
-
standalone: true,
|
|
171
|
-
imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, NgTemplateOutlet, AdaptiveCloseButtonComponent]
|
|
172
|
-
}]
|
|
173
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { title: [{
|
|
174
|
-
type: Input
|
|
175
|
-
}], subtitle: [{
|
|
176
|
-
type: Input
|
|
177
|
-
}], actionSheetTemplate: [{
|
|
178
|
-
type: Input
|
|
179
|
-
}], isActionSheetExpanded: [{
|
|
180
|
-
type: Input
|
|
181
|
-
}], preview: [{
|
|
182
|
-
type: Input
|
|
183
|
-
}], actionSheetClose: [{
|
|
184
|
-
type: Output
|
|
185
|
-
}], onExpand: [{
|
|
186
|
-
type: Output
|
|
187
|
-
}], onCollapse: [{
|
|
188
|
-
type: Output
|
|
189
|
-
}], onApply: [{
|
|
190
|
-
type: Output
|
|
191
|
-
}], onCancel: [{
|
|
192
|
-
type: Output
|
|
193
|
-
}], actionSheet: [{
|
|
194
|
-
type: ViewChild,
|
|
195
|
-
args: [ActionSheetComponent]
|
|
196
|
-
}], actionSheetSearchBar: [{
|
|
197
|
-
type: ViewChild,
|
|
198
|
-
args: ['actionSheetSearchBar']
|
|
199
|
-
}], cancelButton: [{
|
|
200
|
-
type: ViewChild,
|
|
201
|
-
args: ['cancel']
|
|
202
|
-
}], applyButton: [{
|
|
203
|
-
type: ViewChild,
|
|
204
|
-
args: ['apply']
|
|
205
|
-
}] } });
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Directive, Input, Renderer2 } from '@angular/core';
|
|
6
|
-
import { TextBoxComponent } from '../textbox/textbox.component';
|
|
7
|
-
import * as i0 from "@angular/core";
|
|
8
|
-
import * as i1 from "../textbox/textbox.component";
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
export class TextLabelDirective {
|
|
13
|
-
textBox;
|
|
14
|
-
renderer;
|
|
15
|
-
focusableId;
|
|
16
|
-
constructor(textBox, renderer) {
|
|
17
|
-
this.textBox = textBox;
|
|
18
|
-
this.renderer = renderer;
|
|
19
|
-
}
|
|
20
|
-
ngOnInit() {
|
|
21
|
-
this.renderer.setAttribute(this.textBox.input.nativeElement, 'id', this.focusableId);
|
|
22
|
-
}
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextLabelDirective, deps: [{ token: i1.TextBoxComponent }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
24
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextLabelDirective, isStandalone: true, selector: "[kendoTextLabel]", inputs: { focusableId: "focusableId" }, ngImport: i0 });
|
|
25
|
-
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextLabelDirective, decorators: [{
|
|
27
|
-
type: Directive,
|
|
28
|
-
args: [{
|
|
29
|
-
selector: '[kendoTextLabel]',
|
|
30
|
-
standalone: true
|
|
31
|
-
}]
|
|
32
|
-
}], ctorParameters: function () { return [{ type: i1.TextBoxComponent }, { type: i0.Renderer2 }]; }, propDecorators: { focusableId: [{
|
|
33
|
-
type: Input
|
|
34
|
-
}] } });
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/**-----------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright © 2025 Progress Software Corporation. All rights reserved.
|
|
3
|
-
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
|
-
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
/**
|
|
6
|
-
* @hidden
|
|
7
|
-
*/
|
|
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
|
-
};
|