@progress/kendo-angular-inputs 21.1.1-develop.1 → 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
- package/schematics/ngAdd/index.js +4 -0
|
@@ -8,7 +8,6 @@ import { getContrastFromTwoRGBAs, getRGBA } from './utils';
|
|
|
8
8
|
import { AA_RATIO, AAA_RATIO } from './constants';
|
|
9
9
|
import { checkIcon, xCircleIcon } from '@progress/kendo-svg-icons';
|
|
10
10
|
import { ContrastValidationComponent } from './contrast-validation.component';
|
|
11
|
-
import { NgIf } from '@angular/common';
|
|
12
11
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
13
12
|
import * as i0 from "@angular/core";
|
|
14
13
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
@@ -41,30 +40,35 @@ export class ContrastComponent {
|
|
|
41
40
|
return contrast;
|
|
42
41
|
}
|
|
43
42
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ContrastComponent, isStandalone: true, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
|
|
45
44
|
<div class="k-contrast-ratio">
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
45
|
+
<span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
|
|
46
|
+
@if (value) {
|
|
47
|
+
@if (satisfiesAACondition) {
|
|
48
|
+
<span class="k-contrast-validation k-text-success">
|
|
49
|
+
<kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
|
|
50
|
+
@if (satisfiesAAACondition) {
|
|
51
|
+
<kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
|
|
52
|
+
}
|
|
53
|
+
</span>
|
|
54
|
+
} @else {
|
|
55
|
+
<span class="k-contrast-validation k-text-error">
|
|
56
|
+
<kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
|
|
57
|
+
</span>
|
|
58
|
+
}
|
|
59
|
+
}
|
|
56
60
|
</div>
|
|
57
61
|
<div kendoContrastValidation
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
62
|
+
type="AA"
|
|
63
|
+
[value]="value"
|
|
64
|
+
[pass]="satisfiesAACondition">
|
|
61
65
|
</div>
|
|
62
66
|
<div kendoContrastValidation
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
67
|
+
type="AAA"
|
|
68
|
+
[value]="value"
|
|
69
|
+
[pass]="satisfiesAAACondition">
|
|
66
70
|
</div>
|
|
67
|
-
|
|
71
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }] });
|
|
68
72
|
}
|
|
69
73
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ContrastComponent, decorators: [{
|
|
70
74
|
type: Component,
|
|
@@ -73,30 +77,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
73
77
|
selector: '[kendoContrastTool]',
|
|
74
78
|
template: `
|
|
75
79
|
<div class="k-contrast-ratio">
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
80
|
+
<span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
|
|
81
|
+
@if (value) {
|
|
82
|
+
@if (satisfiesAACondition) {
|
|
83
|
+
<span class="k-contrast-validation k-text-success">
|
|
84
|
+
<kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
|
|
85
|
+
@if (satisfiesAAACondition) {
|
|
86
|
+
<kendo-icon-wrapper name="check" [svgIcon]="checkIcon"></kendo-icon-wrapper>
|
|
87
|
+
}
|
|
88
|
+
</span>
|
|
89
|
+
} @else {
|
|
90
|
+
<span class="k-contrast-validation k-text-error">
|
|
91
|
+
<kendo-icon-wrapper name="x" [svgIcon]="xCircleIcon"></kendo-icon-wrapper>
|
|
92
|
+
</span>
|
|
93
|
+
}
|
|
94
|
+
}
|
|
86
95
|
</div>
|
|
87
96
|
<div kendoContrastValidation
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
97
|
+
type="AA"
|
|
98
|
+
[value]="value"
|
|
99
|
+
[pass]="satisfiesAACondition">
|
|
91
100
|
</div>
|
|
92
101
|
<div kendoContrastValidation
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
102
|
+
type="AAA"
|
|
103
|
+
[value]="value"
|
|
104
|
+
[pass]="satisfiesAAACondition">
|
|
96
105
|
</div>
|
|
97
|
-
|
|
106
|
+
`,
|
|
98
107
|
standalone: true,
|
|
99
|
-
imports: [
|
|
108
|
+
imports: [IconWrapperComponent, ContrastValidationComponent]
|
|
100
109
|
}]
|
|
101
110
|
}], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { value: [{
|
|
102
111
|
type: Input
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef, Renderer2 } from '@angular/core';
|
|
7
7
|
import { dropletSlashIcon, dropletSliderIcon, paletteIcon } from '@progress/kendo-svg-icons';
|
|
8
8
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
9
|
-
import {
|
|
9
|
+
import { NgClass } from '@angular/common';
|
|
10
10
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
12
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
@@ -72,63 +72,68 @@ export class FlatColorPickerHeaderComponent {
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FlatColorPickerHeaderComponent, isStandalone: true, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", innerTabIndex: "innerTabIndex", value: "value", selection: "selection", size: "size" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick", tabOut: "tabOut" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
76
76
|
<div class="k-coloreditor-header-actions k-hstack">
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
77
|
+
@if (viewButtons) {
|
|
78
|
+
<div
|
|
79
|
+
class="k-button-group k-button-group-flat"
|
|
80
|
+
role="group"
|
|
81
|
+
>
|
|
82
|
+
@for (view of views; track view; let i = $index) {
|
|
83
|
+
<button
|
|
84
|
+
kendoButton
|
|
85
|
+
type="button"
|
|
86
|
+
#viewButtons
|
|
87
|
+
fillMode="flat"
|
|
88
|
+
[tabindex]="innerTabIndex.toString()"
|
|
89
|
+
(click)="onViewButtonClick(view)"
|
|
90
|
+
[icon]="getViewButtonIcon(view)"
|
|
91
|
+
[svgIcon]="getViewButtonsSVGIcon(view)"
|
|
92
|
+
(keydown.shift.tab)="onHeaderTabOut($event, i)"
|
|
93
|
+
[size]="size"
|
|
94
|
+
[attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
|
|
95
|
+
[attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
|
|
96
|
+
[attr.aria-pressed]="activeView === view"
|
|
97
|
+
[ngClass]="activeView === view ? 'k-selected' : ''">
|
|
98
98
|
</button>
|
|
99
|
+
}
|
|
99
100
|
</div>
|
|
101
|
+
}
|
|
100
102
|
</div>
|
|
101
103
|
<div class="k-spacer"></div>
|
|
102
104
|
<div class="k-coloreditor-header-actions k-hstack">
|
|
105
|
+
@if (clearButton) {
|
|
103
106
|
<button
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
(click)="clearButtonClick.emit()">
|
|
107
|
+
kendoButton
|
|
108
|
+
type="button"
|
|
109
|
+
[tabindex]="innerTabIndex.toString()"
|
|
110
|
+
#clearButton
|
|
111
|
+
[size]="size"
|
|
112
|
+
fillMode="flat"
|
|
113
|
+
icon="reset-color"
|
|
114
|
+
[svgIcon]="dropletSlashIcon"
|
|
115
|
+
class="k-coloreditor-reset"
|
|
116
|
+
[attr.aria-label]="getText('clearButton')"
|
|
117
|
+
[attr.title]="getText('clearButton')"
|
|
118
|
+
(click)="clearButtonClick.emit()">
|
|
117
119
|
</button>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
120
|
+
}
|
|
121
|
+
@if (preview) {
|
|
122
|
+
<div class="k-coloreditor-preview k-vstack" aria-hidden="true">
|
|
123
|
+
<span
|
|
124
|
+
class="k-coloreditor-preview-color k-color-preview"
|
|
125
|
+
[attr.title]="getText('previewColor')"
|
|
126
|
+
[style.background-color]="selection">
|
|
127
|
+
</span>
|
|
128
|
+
<span class="k-coloreditor-current-color k-color-preview"
|
|
129
|
+
[style.background-color]="value"
|
|
130
|
+
[attr.title]="getText('revertSelection')"
|
|
131
|
+
(click)="valuePaneClick.emit($event)">
|
|
132
|
+
</span>
|
|
129
133
|
</div>
|
|
134
|
+
}
|
|
130
135
|
</div>
|
|
131
|
-
|
|
136
|
+
`, 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
132
137
|
}
|
|
133
138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
|
|
134
139
|
type: Component,
|
|
@@ -137,63 +142,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
137
142
|
selector: '[kendoFlatColorPickerHeader]',
|
|
138
143
|
template: `
|
|
139
144
|
<div class="k-coloreditor-header-actions k-hstack">
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
145
|
+
@if (viewButtons) {
|
|
146
|
+
<div
|
|
147
|
+
class="k-button-group k-button-group-flat"
|
|
148
|
+
role="group"
|
|
149
|
+
>
|
|
150
|
+
@for (view of views; track view; let i = $index) {
|
|
151
|
+
<button
|
|
152
|
+
kendoButton
|
|
153
|
+
type="button"
|
|
154
|
+
#viewButtons
|
|
155
|
+
fillMode="flat"
|
|
156
|
+
[tabindex]="innerTabIndex.toString()"
|
|
157
|
+
(click)="onViewButtonClick(view)"
|
|
158
|
+
[icon]="getViewButtonIcon(view)"
|
|
159
|
+
[svgIcon]="getViewButtonsSVGIcon(view)"
|
|
160
|
+
(keydown.shift.tab)="onHeaderTabOut($event, i)"
|
|
161
|
+
[size]="size"
|
|
162
|
+
[attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
|
|
163
|
+
[attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
|
|
164
|
+
[attr.aria-pressed]="activeView === view"
|
|
165
|
+
[ngClass]="activeView === view ? 'k-selected' : ''">
|
|
161
166
|
</button>
|
|
167
|
+
}
|
|
162
168
|
</div>
|
|
169
|
+
}
|
|
163
170
|
</div>
|
|
164
171
|
<div class="k-spacer"></div>
|
|
165
172
|
<div class="k-coloreditor-header-actions k-hstack">
|
|
173
|
+
@if (clearButton) {
|
|
166
174
|
<button
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
(click)="clearButtonClick.emit()">
|
|
175
|
+
kendoButton
|
|
176
|
+
type="button"
|
|
177
|
+
[tabindex]="innerTabIndex.toString()"
|
|
178
|
+
#clearButton
|
|
179
|
+
[size]="size"
|
|
180
|
+
fillMode="flat"
|
|
181
|
+
icon="reset-color"
|
|
182
|
+
[svgIcon]="dropletSlashIcon"
|
|
183
|
+
class="k-coloreditor-reset"
|
|
184
|
+
[attr.aria-label]="getText('clearButton')"
|
|
185
|
+
[attr.title]="getText('clearButton')"
|
|
186
|
+
(click)="clearButtonClick.emit()">
|
|
180
187
|
</button>
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
188
|
+
}
|
|
189
|
+
@if (preview) {
|
|
190
|
+
<div class="k-coloreditor-preview k-vstack" aria-hidden="true">
|
|
191
|
+
<span
|
|
192
|
+
class="k-coloreditor-preview-color k-color-preview"
|
|
193
|
+
[attr.title]="getText('previewColor')"
|
|
194
|
+
[style.background-color]="selection">
|
|
195
|
+
</span>
|
|
196
|
+
<span class="k-coloreditor-current-color k-color-preview"
|
|
197
|
+
[style.background-color]="value"
|
|
198
|
+
[attr.title]="getText('revertSelection')"
|
|
199
|
+
(click)="valuePaneClick.emit($event)">
|
|
200
|
+
</span>
|
|
192
201
|
</div>
|
|
202
|
+
}
|
|
193
203
|
</div>
|
|
194
|
-
|
|
204
|
+
`,
|
|
195
205
|
standalone: true,
|
|
196
|
-
imports: [
|
|
206
|
+
imports: [ButtonComponent, NgClass]
|
|
197
207
|
}]
|
|
198
208
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.Renderer2 }], propDecorators: { hostClasses: [{
|
|
199
209
|
type: HostBinding,
|