@progress/kendo-angular-inputs 21.1.1-develop.2 → 21.2.0-develop.10
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 +49 -41
- package/esm2022/colorpicker/colorpicker.component.mjs +230 -224
- 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 +135 -115
- package/esm2022/otpinput/otpinput-separator.component.mjs +25 -15
- package/esm2022/otpinput/otpinput.component.mjs +118 -111
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/rangeslider/rangeslider.component.mjs +116 -115
- package/esm2022/rating/rating.component.mjs +275 -273
- package/esm2022/signature/signature.component.mjs +170 -161
- package/esm2022/slider/slider.component.mjs +132 -127
- 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 +2607 -2401
- package/package.json +12 -12
|
@@ -12,7 +12,7 @@ import { PopupService } from '@progress/kendo-angular-popup';
|
|
|
12
12
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
13
13
|
import { AdaptiveService } from '@progress/kendo-angular-utils';
|
|
14
14
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
15
|
-
import { Keys, KendoInput, isChanged, closest, guid, ResizeSensorComponent, isDocumentAvailable,
|
|
15
|
+
import { Keys, KendoInput, isChanged, closest, guid, ResizeSensorComponent, isDocumentAvailable, normalizeKeys } from '@progress/kendo-angular-common';
|
|
16
16
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
17
17
|
import { packageMetadata } from '../package-metadata';
|
|
18
18
|
import { PALETTEPRESETS } from './models';
|
|
@@ -24,7 +24,7 @@ import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
|
|
|
24
24
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
25
25
|
import { parseCSSClassNames } from '@progress/kendo-angular-common';
|
|
26
26
|
import { caretAltDownIcon } from '@progress/kendo-svg-icons';
|
|
27
|
-
import { NgClass
|
|
27
|
+
import { NgClass } from '@angular/common';
|
|
28
28
|
import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
|
|
29
29
|
import { AdaptiveRendererComponent } from './adaptiveness/adaptive-renderer.component';
|
|
30
30
|
import * as i0 from "@angular/core";
|
|
@@ -665,7 +665,7 @@ export class ColorPickerComponent {
|
|
|
665
665
|
* @hidden
|
|
666
666
|
*/
|
|
667
667
|
handleWrapperKeyDown(event) {
|
|
668
|
-
const code =
|
|
668
|
+
const code = normalizeKeys(event);
|
|
669
669
|
if (code === Keys.ArrowDown || code === Keys.Enter) {
|
|
670
670
|
event.preventDefault();
|
|
671
671
|
this.ngZone.run(() => {
|
|
@@ -891,7 +891,7 @@ export class ColorPickerComponent {
|
|
|
891
891
|
}
|
|
892
892
|
}
|
|
893
893
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 });
|
|
894
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
894
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [{
|
|
895
895
|
multi: true,
|
|
896
896
|
provide: NG_VALUE_ACCESSOR,
|
|
897
897
|
useExisting: forwardRef(() => ColorPickerComponent)
|
|
@@ -910,128 +910,131 @@ export class ColorPickerComponent {
|
|
|
910
910
|
}
|
|
911
911
|
], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "activeColor", first: true, predicate: ["activeColor"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "flatColorPicker", first: true, predicate: ["flatColorPicker"], descendants: true }, { propertyName: "adaptiveRenderer", first: true, predicate: AdaptiveRendererComponent, descendants: true }], exportAs: ["kendoColorPicker"], usesOnChanges: true, ngImport: i0, template: `
|
|
912
912
|
<ng-container kendoColorPickerLocalizedMessages
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
913
|
+
i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
|
|
914
|
+
colorPickerNoColor="Colorpicker no color chosen"
|
|
915
|
+
i18n-flatColorPickerNoColor="kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
|
|
916
|
+
flatColorPickerNoColor="Flatcolorpicker no color chosen"
|
|
917
|
+
i18n-colorGradientNoColor="kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
|
|
918
|
+
colorGradientNoColor="Colorgradient no color chosen"
|
|
919
|
+
i18n-colorPaletteNoColor="kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
|
|
920
|
+
colorPaletteNoColor="Colorpalette no color chosen"
|
|
921
|
+
i18n-colorGradientHandle="kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
|
|
922
|
+
colorGradientHandle="Choose color"
|
|
923
|
+
i18n-clearButton="kendo.colorpicker.clearButton|The title for the clear button."
|
|
924
|
+
clearButton="Clear value"
|
|
925
|
+
i18n-hueSliderHandle="kendo.colorpicker.hueSliderHandle|The title for the hue slider handle."
|
|
926
|
+
hueSliderHandle="Set hue"
|
|
927
|
+
i18n-opacitySliderHandle="kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle."
|
|
928
|
+
opacitySliderHandle="Set opacity"
|
|
929
|
+
i18n-contrastRatio="kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool."
|
|
930
|
+
contrastRatio="Contrast ratio"
|
|
931
|
+
i18n-previewColor="kendo.colorpicker.previewColor|The message for the color preview pane."
|
|
932
|
+
previewColor="Color preview"
|
|
933
|
+
i18n-revertSelection="kendo.colorpicker.revertSelection|The message for the selected color pane."
|
|
934
|
+
revertSelection="Revert selection"
|
|
935
|
+
i18n-gradientView="kendo.colorpicker.gradientView|The message for the gradient view button."
|
|
936
|
+
gradientView="Gradient view"
|
|
937
|
+
i18n-paletteView="kendo.colorpicker.paletteView|The message for the palette view button."
|
|
938
|
+
paletteView="Palette view"
|
|
939
|
+
i18n-formatButton="kendo.colorpicker.formatButton|The message for the input format toggle button."
|
|
940
|
+
formatButton="Change color format"
|
|
941
|
+
i18n-applyButton="kendo.colorpicker.applyButton|The message for the Apply action button."
|
|
942
|
+
applyButton="Apply"
|
|
943
|
+
i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
|
|
944
|
+
cancelButton="Cancel"
|
|
945
|
+
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."
|
|
946
|
+
adaptiveCloseButtonTitle="Close"
|
|
947
|
+
i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
|
|
948
|
+
adaptiveTitle="Choose Color"
|
|
949
|
+
i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
|
|
950
|
+
redChannelLabel="Red channel"
|
|
951
|
+
i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
|
|
952
|
+
greenChannelLabel="Green channel"
|
|
953
|
+
i18n-blueChannelLabel="kendo.colorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
|
|
954
|
+
blueChannelLabel="Blue channel"
|
|
955
|
+
i18n-alphaChannelLabel="kendo.colorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
|
|
956
|
+
alphaChannelLabel="Alpha channel"
|
|
957
|
+
i18n-redInputPlaceholder="kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input."
|
|
958
|
+
redChannelLabel="R"
|
|
959
|
+
i18n-greenInputPlaceholder="kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input."
|
|
960
|
+
greenInputPlaceholder="G"
|
|
961
|
+
i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
962
|
+
blueInputPlaceholder="B"
|
|
963
|
+
i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
964
|
+
hexInputPlaceholder="HEX"
|
|
965
|
+
i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
|
|
966
|
+
toggleButtonLabel="Select color">
|
|
967
967
|
</ng-container>
|
|
968
968
|
<span #activeColor class="k-input-inner">
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
969
|
+
<span
|
|
970
|
+
class="k-value-icon k-color-preview"
|
|
971
|
+
[ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles || svgIcon, 'k-no-color': !value}"
|
|
972
972
|
>
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
973
|
+
@if (iconClass || icon || svgIcon) {
|
|
974
|
+
<kendo-icon-wrapper
|
|
975
|
+
[name]="iconStyles"
|
|
976
|
+
innerCssClass="k-color-preview-icon"
|
|
977
|
+
[customFontClass]="customIconStyles"
|
|
978
|
+
[svgIcon]="svgIcon"
|
|
979
979
|
>
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
980
|
+
</kendo-icon-wrapper>
|
|
981
|
+
}
|
|
982
|
+
<span class="k-color-preview-mask" [style.background-color]="value"></span>
|
|
983
|
+
</span>
|
|
983
984
|
</span>
|
|
984
985
|
<button
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
986
|
+
kendoButton
|
|
987
|
+
tabindex="-1"
|
|
988
|
+
type="button"
|
|
989
|
+
icon="caret-alt-down"
|
|
990
|
+
[size]="size"
|
|
991
|
+
[svgIcon]="arrowDownIcon"
|
|
992
|
+
[fillMode]="fillMode"
|
|
993
|
+
[disabled]="disabled"
|
|
994
|
+
rounded="none"
|
|
995
|
+
class="k-input-button"
|
|
996
|
+
[attr.aria-label]="messageFor('toggleButtonLabel')"
|
|
997
|
+
>
|
|
997
998
|
</button>
|
|
998
999
|
<ng-template #popupTemplate>
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1000
|
+
<kendo-flatcolorpicker
|
|
1001
|
+
#flatColorPicker
|
|
1002
|
+
[value]="value"
|
|
1003
|
+
[format]="format"
|
|
1004
|
+
[size]="isAdaptive ? 'large' : size"
|
|
1005
|
+
[views]="views"
|
|
1006
|
+
[activeView]="activeView"
|
|
1007
|
+
[actionsLayout]="actionsLayout"
|
|
1008
|
+
[adaptiveMode]="isActionSheetExpanded"
|
|
1009
|
+
[preview]="preview"
|
|
1010
|
+
[gradientSettings]="gradientSettings"
|
|
1011
|
+
[paletteSettings]="paletteSettings"
|
|
1012
|
+
[clearButton]="clearButton"
|
|
1013
|
+
(cancel)="handleCancelEvent($event)"
|
|
1014
|
+
(focusout)="handlePopupBlur($event)"
|
|
1015
|
+
(valueChange)="handleValueChange($event)"
|
|
1016
|
+
(keydown)="handlePopupKeyDown($event)"
|
|
1017
|
+
(activeViewChange)="activeViewChange.emit($event)"
|
|
1018
|
+
(clearButtonClick)="clearButtonClick.emit()"
|
|
1019
|
+
(actionButtonClick)="togglePopup()">
|
|
1020
|
+
</kendo-flatcolorpicker>
|
|
1020
1021
|
</ng-template>
|
|
1021
1022
|
<ng-container #container></ng-container>
|
|
1022
1023
|
<kendo-adaptive-renderer
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1024
|
+
[actionSheetTemplate]="popupTemplate"
|
|
1025
|
+
[isActionSheetExpanded]="isActionSheetExpanded"
|
|
1026
|
+
[title]="adaptiveTitle"
|
|
1027
|
+
[subtitle]="adaptiveSubtitle"
|
|
1028
|
+
[preview]="preview"
|
|
1029
|
+
(actionSheetClose)="onActionSheetClose($event)"
|
|
1030
|
+
(onApply)="applyValue()"
|
|
1031
|
+
(onCancel)="cancelValue($event)"
|
|
1032
|
+
>
|
|
1032
1033
|
</kendo-adaptive-renderer>
|
|
1033
|
-
|
|
1034
|
-
|
|
1034
|
+
@if (isOpen || isAdaptiveModeEnabled) {
|
|
1035
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1036
|
+
}
|
|
1037
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "component", type: FlatColorPickerComponent, selector: "kendo-flatcolorpicker", inputs: ["readonly", "disabled", "format", "value", "tabindex", "clearButton", "preview", "actionsLayout", "activeView", "views", "gradientSettings", "adaptiveMode", "paletteSettings", "size"], outputs: ["valueChange", "cancel", "activeViewChange", "clearButtonClick", "actionButtonClick"], exportAs: ["kendoFlatColorPicker"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "actionSheetTemplate", "isActionSheetExpanded", "preview"], outputs: ["actionSheetClose", "onExpand", "onCollapse", "onApply", "onCancel"] }] });
|
|
1035
1038
|
}
|
|
1036
1039
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
1037
1040
|
type: Component,
|
|
@@ -1057,130 +1060,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
1057
1060
|
}],
|
|
1058
1061
|
template: `
|
|
1059
1062
|
<ng-container kendoColorPickerLocalizedMessages
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1063
|
+
i18n-colorPickerNoColor="kendo.colorpicker.colorPickerNoColor|The aria-label applied to the ColorPicker component when the value is empty."
|
|
1064
|
+
colorPickerNoColor="Colorpicker no color chosen"
|
|
1065
|
+
i18n-flatColorPickerNoColor="kendo.colorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
|
|
1066
|
+
flatColorPickerNoColor="Flatcolorpicker no color chosen"
|
|
1067
|
+
i18n-colorGradientNoColor="kendo.colorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
|
|
1068
|
+
colorGradientNoColor="Colorgradient no color chosen"
|
|
1069
|
+
i18n-colorPaletteNoColor="kendo.colorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
|
|
1070
|
+
colorPaletteNoColor="Colorpalette no color chosen"
|
|
1071
|
+
i18n-colorGradientHandle="kendo.colorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
|
|
1072
|
+
colorGradientHandle="Choose color"
|
|
1073
|
+
i18n-clearButton="kendo.colorpicker.clearButton|The title for the clear button."
|
|
1074
|
+
clearButton="Clear value"
|
|
1075
|
+
i18n-hueSliderHandle="kendo.colorpicker.hueSliderHandle|The title for the hue slider handle."
|
|
1076
|
+
hueSliderHandle="Set hue"
|
|
1077
|
+
i18n-opacitySliderHandle="kendo.colorpicker.opacitySliderHandle|The title for the opacity slider handle."
|
|
1078
|
+
opacitySliderHandle="Set opacity"
|
|
1079
|
+
i18n-contrastRatio="kendo.colorpicker.contrastRatio|The contrast ratio message for the contrast tool."
|
|
1080
|
+
contrastRatio="Contrast ratio"
|
|
1081
|
+
i18n-previewColor="kendo.colorpicker.previewColor|The message for the color preview pane."
|
|
1082
|
+
previewColor="Color preview"
|
|
1083
|
+
i18n-revertSelection="kendo.colorpicker.revertSelection|The message for the selected color pane."
|
|
1084
|
+
revertSelection="Revert selection"
|
|
1085
|
+
i18n-gradientView="kendo.colorpicker.gradientView|The message for the gradient view button."
|
|
1086
|
+
gradientView="Gradient view"
|
|
1087
|
+
i18n-paletteView="kendo.colorpicker.paletteView|The message for the palette view button."
|
|
1088
|
+
paletteView="Palette view"
|
|
1089
|
+
i18n-formatButton="kendo.colorpicker.formatButton|The message for the input format toggle button."
|
|
1090
|
+
formatButton="Change color format"
|
|
1091
|
+
i18n-applyButton="kendo.colorpicker.applyButton|The message for the Apply action button."
|
|
1092
|
+
applyButton="Apply"
|
|
1093
|
+
i18n-cancelButton="kendo.colorpicker.cancelButton|The message for the Cancel action button."
|
|
1094
|
+
cancelButton="Cancel"
|
|
1095
|
+
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."
|
|
1096
|
+
adaptiveCloseButtonTitle="Close"
|
|
1097
|
+
i18n-adaptiveTitle="kendo.colorpicker.adaptiveTitle|The title for the ActionSheet when in adaptive mode."
|
|
1098
|
+
adaptiveTitle="Choose Color"
|
|
1099
|
+
i18n-redChannelLabel="kendo.colorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
|
|
1100
|
+
redChannelLabel="Red channel"
|
|
1101
|
+
i18n-greenChannelLabel="kendo.colorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
|
|
1102
|
+
greenChannelLabel="Green channel"
|
|
1103
|
+
i18n-blueChannelLabel="kendo.colorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
|
|
1104
|
+
blueChannelLabel="Blue channel"
|
|
1105
|
+
i18n-alphaChannelLabel="kendo.colorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
|
|
1106
|
+
alphaChannelLabel="Alpha channel"
|
|
1107
|
+
i18n-redInputPlaceholder="kendo.colorpicker.redInputPlaceholder|The placeholder for the red color input."
|
|
1108
|
+
redChannelLabel="R"
|
|
1109
|
+
i18n-greenInputPlaceholder="kendo.colorpicker.greenInputPlaceholder|The placeholder for the green color input."
|
|
1110
|
+
greenInputPlaceholder="G"
|
|
1111
|
+
i18n-blueInputPlaceholder="kendo.colorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
1112
|
+
blueInputPlaceholder="B"
|
|
1113
|
+
i18n-hexInputPlaceholder="kendo.colorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
1114
|
+
hexInputPlaceholder="HEX"
|
|
1115
|
+
i18n-toggleButtonLabel="kendo.colorpicker.toggleButtonLabel|The text set as aria-label on the toggle button."
|
|
1116
|
+
toggleButtonLabel="Select color">
|
|
1114
1117
|
</ng-container>
|
|
1115
1118
|
<span #activeColor class="k-input-inner">
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
+
<span
|
|
1120
|
+
class="k-value-icon k-color-preview"
|
|
1121
|
+
[ngClass]="{'k-icon-color-preview': customIconStyles || iconStyles || svgIcon, 'k-no-color': !value}"
|
|
1119
1122
|
>
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1123
|
+
@if (iconClass || icon || svgIcon) {
|
|
1124
|
+
<kendo-icon-wrapper
|
|
1125
|
+
[name]="iconStyles"
|
|
1126
|
+
innerCssClass="k-color-preview-icon"
|
|
1127
|
+
[customFontClass]="customIconStyles"
|
|
1128
|
+
[svgIcon]="svgIcon"
|
|
1126
1129
|
>
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
+
</kendo-icon-wrapper>
|
|
1131
|
+
}
|
|
1132
|
+
<span class="k-color-preview-mask" [style.background-color]="value"></span>
|
|
1133
|
+
</span>
|
|
1130
1134
|
</span>
|
|
1131
1135
|
<button
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1136
|
+
kendoButton
|
|
1137
|
+
tabindex="-1"
|
|
1138
|
+
type="button"
|
|
1139
|
+
icon="caret-alt-down"
|
|
1140
|
+
[size]="size"
|
|
1141
|
+
[svgIcon]="arrowDownIcon"
|
|
1142
|
+
[fillMode]="fillMode"
|
|
1143
|
+
[disabled]="disabled"
|
|
1144
|
+
rounded="none"
|
|
1145
|
+
class="k-input-button"
|
|
1146
|
+
[attr.aria-label]="messageFor('toggleButtonLabel')"
|
|
1147
|
+
>
|
|
1144
1148
|
</button>
|
|
1145
1149
|
<ng-template #popupTemplate>
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1150
|
+
<kendo-flatcolorpicker
|
|
1151
|
+
#flatColorPicker
|
|
1152
|
+
[value]="value"
|
|
1153
|
+
[format]="format"
|
|
1154
|
+
[size]="isAdaptive ? 'large' : size"
|
|
1155
|
+
[views]="views"
|
|
1156
|
+
[activeView]="activeView"
|
|
1157
|
+
[actionsLayout]="actionsLayout"
|
|
1158
|
+
[adaptiveMode]="isActionSheetExpanded"
|
|
1159
|
+
[preview]="preview"
|
|
1160
|
+
[gradientSettings]="gradientSettings"
|
|
1161
|
+
[paletteSettings]="paletteSettings"
|
|
1162
|
+
[clearButton]="clearButton"
|
|
1163
|
+
(cancel)="handleCancelEvent($event)"
|
|
1164
|
+
(focusout)="handlePopupBlur($event)"
|
|
1165
|
+
(valueChange)="handleValueChange($event)"
|
|
1166
|
+
(keydown)="handlePopupKeyDown($event)"
|
|
1167
|
+
(activeViewChange)="activeViewChange.emit($event)"
|
|
1168
|
+
(clearButtonClick)="clearButtonClick.emit()"
|
|
1169
|
+
(actionButtonClick)="togglePopup()">
|
|
1170
|
+
</kendo-flatcolorpicker>
|
|
1167
1171
|
</ng-template>
|
|
1168
1172
|
<ng-container #container></ng-container>
|
|
1169
1173
|
<kendo-adaptive-renderer
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1174
|
+
[actionSheetTemplate]="popupTemplate"
|
|
1175
|
+
[isActionSheetExpanded]="isActionSheetExpanded"
|
|
1176
|
+
[title]="adaptiveTitle"
|
|
1177
|
+
[subtitle]="adaptiveSubtitle"
|
|
1178
|
+
[preview]="preview"
|
|
1179
|
+
(actionSheetClose)="onActionSheetClose($event)"
|
|
1180
|
+
(onApply)="applyValue()"
|
|
1181
|
+
(onCancel)="cancelValue($event)"
|
|
1182
|
+
>
|
|
1179
1183
|
</kendo-adaptive-renderer>
|
|
1180
|
-
|
|
1184
|
+
@if (isOpen || isAdaptiveModeEnabled) {
|
|
1185
|
+
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
1186
|
+
}
|
|
1181
1187
|
`,
|
|
1182
1188
|
standalone: true,
|
|
1183
|
-
imports: [LocalizedColorPickerMessagesDirective, NgClass,
|
|
1189
|
+
imports: [LocalizedColorPickerMessagesDirective, NgClass, IconWrapperComponent, ButtonComponent, FlatColorPickerComponent, ResizeSensorComponent, AdaptiveRendererComponent]
|
|
1184
1190
|
}]
|
|
1185
1191
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PopupService }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i3.AdaptiveService }], propDecorators: { hostClasses: [{
|
|
1186
1192
|
type: HostBinding,
|