@progress/kendo-angular-inputs 21.1.1-develop.2 → 21.2.0-develop.1
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/esm2022/colorpicker/adaptiveness/adaptive-renderer.component.mjs +105 -97
- package/esm2022/colorpicker/color-contrast-svg.component.mjs +10 -7
- package/esm2022/colorpicker/color-gradient.component.mjs +287 -279
- package/esm2022/colorpicker/color-input.component.mjs +242 -235
- package/esm2022/colorpicker/color-palette.component.mjs +47 -39
- package/esm2022/colorpicker/colorpicker.component.mjs +228 -222
- package/esm2022/colorpicker/contrast-validation.component.mjs +26 -21
- package/esm2022/colorpicker/contrast.component.mjs +46 -37
- package/esm2022/colorpicker/flatcolorpicker-header.component.mjs +105 -95
- package/esm2022/colorpicker/flatcolorpicker.component.mjs +167 -157
- package/esm2022/form/form.component.mjs +13 -9
- package/esm2022/formfield/formfield.component.mjs +18 -11
- package/esm2022/formfieldset/formfieldset.component.mjs +15 -11
- package/esm2022/maskedtextbox/maskedtextbox.component.mjs +77 -61
- package/esm2022/numerictextbox/numerictextbox.component.mjs +133 -113
- package/esm2022/otpinput/otpinput-separator.component.mjs +25 -15
- package/esm2022/otpinput/otpinput.component.mjs +116 -109
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/rangeslider/rangeslider.component.mjs +114 -113
- package/esm2022/rating/rating.component.mjs +273 -271
- package/esm2022/signature/signature.component.mjs +170 -161
- package/esm2022/slider/slider.component.mjs +130 -125
- package/esm2022/sliders-common/slider-ticks.component.mjs +43 -31
- package/esm2022/textarea/textarea.component.mjs +73 -69
- package/esm2022/textbox/textbox.component.mjs +145 -123
- package/fesm2022/progress-kendo-angular-inputs.mjs +2599 -2393
- package/package.json +12 -12
|
@@ -6,7 +6,7 @@ import { Component, Input, Output, EventEmitter, TemplateRef, ViewChild } from '
|
|
|
6
6
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { checkIcon } from '@progress/kendo-svg-icons';
|
|
8
8
|
import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
|
|
9
|
-
import {
|
|
9
|
+
import { 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';
|
|
@@ -48,11 +48,11 @@ export class AdaptiveRendererComponent {
|
|
|
48
48
|
return this.adaptiveService.size;
|
|
49
49
|
}
|
|
50
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
52
52
|
<kendo-actionsheet
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
53
|
+
#actionSheet
|
|
54
|
+
[animation]="{ duration: animationDuration }"
|
|
55
|
+
[expanded]="isActionSheetExpanded"
|
|
56
56
|
[cssClass]="{
|
|
57
57
|
'k-adaptive-actionsheet': true,
|
|
58
58
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -61,53 +61,57 @@ export class AdaptiveRendererComponent {
|
|
|
61
61
|
[cssStyle]="{
|
|
62
62
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
63
63
|
}"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<kendo-adaptive-close-button
|
|
77
|
-
icon="check"
|
|
78
|
-
color="primary"
|
|
79
|
-
[title]="messageFor('adaptiveCloseButtonTitle')"
|
|
80
|
-
[svgIcon]="checkIcon"
|
|
81
|
-
(close)="actionSheetClose.emit($event)">
|
|
82
|
-
</kendo-adaptive-close-button>
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
64
|
+
(overlayClick)="actionSheetClose.emit()"
|
|
65
|
+
(expand)="onExpand.emit()"
|
|
66
|
+
(collapse)="onCollapse.emit()"
|
|
67
|
+
>
|
|
68
|
+
<ng-template kendoActionSheetTemplate>
|
|
69
|
+
<div class="k-actionsheet-titlebar">
|
|
70
|
+
<div class="k-actionsheet-titlebar-group">
|
|
71
|
+
<div class="k-actionsheet-title">
|
|
72
|
+
<div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
|
|
73
|
+
@if (subtitle) {
|
|
74
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
|
|
75
|
+
}
|
|
85
76
|
</div>
|
|
86
|
-
<div class="k-actionsheet-
|
|
87
|
-
|
|
77
|
+
<div class="k-actionsheet-actions">
|
|
78
|
+
<kendo-adaptive-close-button
|
|
79
|
+
icon="check"
|
|
80
|
+
color="primary"
|
|
81
|
+
[title]="messageFor('adaptiveCloseButtonTitle')"
|
|
82
|
+
[svgIcon]="checkIcon"
|
|
83
|
+
(close)="actionSheetClose.emit($event)">
|
|
84
|
+
</kendo-adaptive-close-button>
|
|
88
85
|
</div>
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
<div class="k-actionsheet-content">
|
|
89
|
+
<ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
|
|
90
|
+
</div>
|
|
91
|
+
@if (preview) {
|
|
92
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
93
|
+
<button
|
|
94
|
+
#cancel
|
|
95
|
+
kendoButton
|
|
96
|
+
size="large"
|
|
97
|
+
(click)="onCancel.emit($event)"
|
|
98
|
+
[title]="messageFor('cancelButton')">
|
|
99
|
+
{{messageFor('cancelButton')}}
|
|
100
|
+
</button>
|
|
101
|
+
<button
|
|
102
|
+
#apply
|
|
103
|
+
kendoButton
|
|
104
|
+
size="large"
|
|
105
|
+
themeColor="primary"
|
|
106
|
+
(click)="onApply.emit()"
|
|
107
|
+
[title]="messageFor('applyButton')">
|
|
108
|
+
{{messageFor('applyButton')}}
|
|
109
|
+
</button>
|
|
110
|
+
</div>
|
|
111
|
+
}
|
|
112
|
+
</ng-template>
|
|
109
113
|
</kendo-actionsheet>
|
|
110
|
-
|
|
114
|
+
`, 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveCloseButtonComponent, selector: "kendo-adaptive-close-button", inputs: ["title", "icon", "svgIcon", "color"], outputs: ["close"] }] });
|
|
111
115
|
}
|
|
112
116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
|
|
113
117
|
type: Component,
|
|
@@ -115,9 +119,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
115
119
|
selector: 'kendo-adaptive-renderer',
|
|
116
120
|
template: `
|
|
117
121
|
<kendo-actionsheet
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
122
|
+
#actionSheet
|
|
123
|
+
[animation]="{ duration: animationDuration }"
|
|
124
|
+
[expanded]="isActionSheetExpanded"
|
|
121
125
|
[cssClass]="{
|
|
122
126
|
'k-adaptive-actionsheet': true,
|
|
123
127
|
'k-actionsheet-fullscreen': windowSize === 'small',
|
|
@@ -126,55 +130,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
126
130
|
[cssStyle]="{
|
|
127
131
|
height: windowSize === 'small' ? '100vh' : '60vh'
|
|
128
132
|
}"
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<kendo-adaptive-close-button
|
|
142
|
-
icon="check"
|
|
143
|
-
color="primary"
|
|
144
|
-
[title]="messageFor('adaptiveCloseButtonTitle')"
|
|
145
|
-
[svgIcon]="checkIcon"
|
|
146
|
-
(close)="actionSheetClose.emit($event)">
|
|
147
|
-
</kendo-adaptive-close-button>
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
150
|
-
</div>
|
|
151
|
-
<div class="k-actionsheet-content">
|
|
152
|
-
<ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
|
|
133
|
+
(overlayClick)="actionSheetClose.emit()"
|
|
134
|
+
(expand)="onExpand.emit()"
|
|
135
|
+
(collapse)="onCollapse.emit()"
|
|
136
|
+
>
|
|
137
|
+
<ng-template kendoActionSheetTemplate>
|
|
138
|
+
<div class="k-actionsheet-titlebar">
|
|
139
|
+
<div class="k-actionsheet-titlebar-group">
|
|
140
|
+
<div class="k-actionsheet-title">
|
|
141
|
+
<div class="k-text-center">{{ title || messageFor('adaptiveTitle') }}</div>
|
|
142
|
+
@if (subtitle) {
|
|
143
|
+
<div class="k-actionsheet-subtitle k-text-center">{{ subtitle }}</div>
|
|
144
|
+
}
|
|
153
145
|
</div>
|
|
154
|
-
<div
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
</button>
|
|
163
|
-
<button
|
|
164
|
-
#apply
|
|
165
|
-
kendoButton
|
|
166
|
-
size="large"
|
|
167
|
-
themeColor="primary"
|
|
168
|
-
(click)="onApply.emit()"
|
|
169
|
-
[title]="messageFor('applyButton')">
|
|
170
|
-
{{messageFor('applyButton')}}
|
|
171
|
-
</button>
|
|
146
|
+
<div class="k-actionsheet-actions">
|
|
147
|
+
<kendo-adaptive-close-button
|
|
148
|
+
icon="check"
|
|
149
|
+
color="primary"
|
|
150
|
+
[title]="messageFor('adaptiveCloseButtonTitle')"
|
|
151
|
+
[svgIcon]="checkIcon"
|
|
152
|
+
(close)="actionSheetClose.emit($event)">
|
|
153
|
+
</kendo-adaptive-close-button>
|
|
172
154
|
</div>
|
|
173
|
-
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="k-actionsheet-content">
|
|
158
|
+
<ng-container *ngTemplateOutlet="actionSheetTemplate"></ng-container>
|
|
159
|
+
</div>
|
|
160
|
+
@if (preview) {
|
|
161
|
+
<div class="k-actions k-actions-stretched k-actions-horizontal k-actionsheet-footer">
|
|
162
|
+
<button
|
|
163
|
+
#cancel
|
|
164
|
+
kendoButton
|
|
165
|
+
size="large"
|
|
166
|
+
(click)="onCancel.emit($event)"
|
|
167
|
+
[title]="messageFor('cancelButton')">
|
|
168
|
+
{{messageFor('cancelButton')}}
|
|
169
|
+
</button>
|
|
170
|
+
<button
|
|
171
|
+
#apply
|
|
172
|
+
kendoButton
|
|
173
|
+
size="large"
|
|
174
|
+
themeColor="primary"
|
|
175
|
+
(click)="onApply.emit()"
|
|
176
|
+
[title]="messageFor('applyButton')">
|
|
177
|
+
{{messageFor('applyButton')}}
|
|
178
|
+
</button>
|
|
179
|
+
</div>
|
|
180
|
+
}
|
|
181
|
+
</ng-template>
|
|
174
182
|
</kendo-actionsheet>
|
|
175
|
-
|
|
183
|
+
`,
|
|
176
184
|
standalone: true,
|
|
177
|
-
imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent,
|
|
185
|
+
imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgTemplateOutlet, AdaptiveCloseButtonComponent]
|
|
178
186
|
}]
|
|
179
187
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }], propDecorators: { title: [{
|
|
180
188
|
type: Input
|
|
@@ -8,7 +8,6 @@ import { isPresent } from '../common/utils';
|
|
|
8
8
|
import { AA_RATIO, STEP_COUNT, AAA_RATIO } from './constants';
|
|
9
9
|
import { bezierCommand, getContrastFromTwoRGBAs, getRGBA, getColorFromHSV, svgPath, controlPoint, line } from './utils';
|
|
10
10
|
import { isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
11
|
-
import { NgFor } from '@angular/common';
|
|
12
11
|
import * as i0 from "@angular/core";
|
|
13
12
|
/**
|
|
14
13
|
* @hidden
|
|
@@ -78,9 +77,11 @@ export class ColorContrastSvgComponent {
|
|
|
78
77
|
return points;
|
|
79
78
|
}
|
|
80
79
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorContrastSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
81
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
82
|
-
|
|
83
|
-
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColorContrastSvgComponent, isStandalone: true, selector: "[kendoColorContrastSvg]", inputs: { wrapper: "wrapper", hsva: "hsva", backgroundColor: "backgroundColor" }, host: { properties: { "class.k-color-contrast-svg": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
|
|
81
|
+
@for (path of paths; track path) {
|
|
82
|
+
<svg:path [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
|
|
83
|
+
}
|
|
84
|
+
`, isInline: true });
|
|
84
85
|
}
|
|
85
86
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorContrastSvgComponent, decorators: [{
|
|
86
87
|
type: Component,
|
|
@@ -88,10 +89,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
88
89
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
89
90
|
selector: '[kendoColorContrastSvg]',
|
|
90
91
|
template: `
|
|
91
|
-
|
|
92
|
-
|
|
92
|
+
@for (path of paths; track path) {
|
|
93
|
+
<svg:path [attr.d]="path" fill="none" stroke="white" stroke-width="1"></svg:path>
|
|
94
|
+
}
|
|
95
|
+
`,
|
|
93
96
|
standalone: true,
|
|
94
|
-
imports: [
|
|
97
|
+
imports: []
|
|
95
98
|
}]
|
|
96
99
|
}], propDecorators: { hostClass: [{
|
|
97
100
|
type: HostBinding,
|