@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
|
@@ -21,7 +21,7 @@ import { packageMetadata } from '../package-metadata';
|
|
|
21
21
|
import { dropletSlashIcon } from '@progress/kendo-svg-icons';
|
|
22
22
|
import { ContrastComponent } from './contrast.component';
|
|
23
23
|
import { ColorContrastSvgComponent } from './color-contrast-svg.component';
|
|
24
|
-
import {
|
|
24
|
+
import { NgClass } from '@angular/common';
|
|
25
25
|
import { LocalizedColorPickerMessagesDirective } from './localization/localized-colorpicker-messages.directive';
|
|
26
26
|
import { ButtonComponent } from '@progress/kendo-angular-buttons';
|
|
27
27
|
import * as i0 from "@angular/core";
|
|
@@ -642,7 +642,7 @@ export class ColorGradientComponent {
|
|
|
642
642
|
}
|
|
643
643
|
}
|
|
644
644
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorGradientComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
645
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
645
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ColorGradientComponent, isStandalone: true, selector: "kendo-colorgradient", inputs: { adaptiveMode: "adaptiveMode", id: "id", opacity: "opacity", size: "size", disabled: "disabled", readonly: "readonly", clearButton: "clearButton", delay: "delay", value: "value", contrastTool: "contrastTool", tabindex: "tabindex", format: "format", gradientSliderStep: "gradientSliderStep", gradientSliderSmallStep: "gradientSliderSmallStep", ariaAttributesEnabled: "ariaAttributesEnabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler($event)", "focusin": "focusHandler($event)" }, properties: { "class.k-colorgradient": "this.hostClasses", "attr.aria-readonly": "this.readonlyAttribute", "class.k-disabled": "this.disabledClass", "attr.id": "this.gradientId", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "attr.aria-disabled": "this.isDisabled", "class.k-readonly": "this.readonly" } }, providers: [
|
|
646
646
|
{
|
|
647
647
|
multi: true,
|
|
648
648
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -663,165 +663,169 @@ export class ColorGradientComponent {
|
|
|
663
663
|
}
|
|
664
664
|
], viewQueries: [{ propertyName: "gradientDragHandle", first: true, predicate: ["gradientDragHandle"], descendants: true }, { propertyName: "inputs", first: true, predicate: ["inputs"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }, { propertyName: "gradientWrapper", first: true, predicate: ["gradientWrapper"], descendants: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true }], exportAs: ["kendoColorGradient"], usesOnChanges: true, ngImport: i0, template: `
|
|
665
665
|
<ng-container kendoColorGradientLocalizedMessages
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
666
|
+
i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
|
|
667
|
+
colorGradientNoColor="Colorgradient no color chosen"
|
|
668
|
+
i18n-colorGradientHandle="kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser."
|
|
669
|
+
colorGradientHandle="Choose color"
|
|
670
|
+
i18n-clearButton="kendo.colorgradient.clearButton|The title for the clear button."
|
|
671
|
+
clearButton="Clear value"
|
|
672
|
+
i18n-hueSliderHandle="kendo.colorgradient.hueSliderHandle|The title for the hue slider handle."
|
|
673
|
+
hueSliderHandle="Set hue"
|
|
674
|
+
i18n-opacitySliderHandle="kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle."
|
|
675
|
+
opacitySliderHandle="Set opacity"
|
|
676
|
+
i18n-passContrast="kendo.colorgradient.passContrast|The pass message for the contrast tool."
|
|
677
|
+
passContrast="Pass"
|
|
678
|
+
i18n-failContrast="kendo.colorgradient.failContrast|The fail message for the contrast tool."
|
|
679
|
+
failContrast="Fail"
|
|
680
|
+
i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
|
|
681
|
+
contrastRatio="Contrast ratio"
|
|
682
|
+
i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
|
|
683
|
+
formatButton="Change color format"
|
|
684
|
+
i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
|
|
685
|
+
redChannelLabel="Red channel"
|
|
686
|
+
i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
|
|
687
|
+
greenChannelLabel="Green channel"
|
|
688
|
+
i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
|
|
689
|
+
blueChannelLabel="Blue channel"
|
|
690
|
+
i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
|
|
691
|
+
alphaChannelLabel="Alpha channel"
|
|
692
|
+
i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
|
|
693
|
+
redChannelLabel="R"
|
|
694
|
+
i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
|
|
695
|
+
greenInputPlaceholder="G"
|
|
696
|
+
i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
|
|
697
|
+
blueInputPlaceholder="B"
|
|
698
|
+
i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
699
|
+
hexInputPlaceholder="HEX">
|
|
700
700
|
</ng-container>
|
|
701
701
|
<div [ngClass]="{
|
|
702
702
|
'k-colorgradient-canvas': true,
|
|
703
703
|
'k-vstack': adaptiveMode,
|
|
704
704
|
'k-hstack': !adaptiveMode
|
|
705
705
|
}">
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
</div>
|
|
731
|
-
<svg kendoColorContrastSvg
|
|
732
|
-
*ngIf="contrastToolVisible && gradientWrapper"
|
|
733
|
-
class="k-color-contrast-svg"
|
|
734
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
735
|
-
[wrapper]="gradientWrapper ? gradientWrapper : undefined"
|
|
736
|
-
[hsva]="hsva"
|
|
737
|
-
[backgroundColor]="contrastTool"
|
|
738
|
-
[style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
|
|
739
|
-
</svg>
|
|
706
|
+
<div class="k-hsv-rectangle" #hsvRectangle>
|
|
707
|
+
<div
|
|
708
|
+
#gradientWrapper
|
|
709
|
+
kendoDraggable
|
|
710
|
+
class="k-hsv-gradient"
|
|
711
|
+
(click)="changePosition($event)"
|
|
712
|
+
(kendoPress)="handleDragPress($event)"
|
|
713
|
+
(kendoDrag)="onHandleDrag($event)"
|
|
714
|
+
(kendoRelease)="onHandleRelease()"
|
|
715
|
+
[style.touch-action]="'none'">
|
|
716
|
+
<div
|
|
717
|
+
#gradientDragHandle
|
|
718
|
+
class="k-hsv-draghandle k-draghandle"
|
|
719
|
+
[tabindex]="innerTabIndex.toString()"
|
|
720
|
+
[attr.title]="colorGradientHandleTitle"
|
|
721
|
+
[attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
|
|
722
|
+
role="slider"
|
|
723
|
+
[attr.aria-valuetext]="hsvSliderValueText"
|
|
724
|
+
[attr.aria-readonly]="readonly ? readonly : undefined"
|
|
725
|
+
[attr.aria-disabled]="disabled ? disabled : undefined"
|
|
726
|
+
[attr.aria-orientation]="'undefined'"
|
|
727
|
+
[attr.aria-valuenow]="'0'"
|
|
728
|
+
(keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
|
|
729
|
+
</div>
|
|
740
730
|
</div>
|
|
731
|
+
@if (contrastToolVisible && gradientWrapper) {
|
|
732
|
+
<svg kendoColorContrastSvg
|
|
733
|
+
class="k-color-contrast-svg"
|
|
734
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
735
|
+
[wrapper]="gradientWrapper ? gradientWrapper : undefined"
|
|
736
|
+
[hsva]="hsva"
|
|
737
|
+
[backgroundColor]="contrastTool"
|
|
738
|
+
[style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
|
|
739
|
+
</svg>
|
|
740
|
+
}
|
|
741
|
+
</div>
|
|
741
742
|
<div [ngClass]="{
|
|
742
743
|
'k-hsv-controls': true,
|
|
743
744
|
'k-sliders-wrap-clearable': clearButton,
|
|
744
745
|
'k-vstack': adaptiveMode,
|
|
745
746
|
'k-hstack': !adaptiveMode
|
|
746
747
|
}">
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
>
|
|
763
|
-
</button>
|
|
764
|
-
<kendo-slider
|
|
765
|
-
[ngClass]="{'k-align-self-end': clearButton}"
|
|
766
|
-
[style.height.px]="clearButton ? '140' : null"
|
|
767
|
-
class="k-hue-slider k-colorgradient-slider"
|
|
768
|
-
[dragHandleTitle]="hueSliderTitle"
|
|
769
|
-
[tabindex]="innerTabIndex"
|
|
770
|
-
[disabled]="disabled"
|
|
771
|
-
[readonly]="readonly"
|
|
772
|
-
[showButtons]="false"
|
|
773
|
-
tickPlacement="none"
|
|
774
|
-
[vertical]="!adaptiveMode"
|
|
775
|
-
[min]="0"
|
|
776
|
-
[max]="360"
|
|
777
|
-
[value]="hsva.value.h"
|
|
778
|
-
[smallStep]="5"
|
|
779
|
-
[largeStep]="10"
|
|
780
|
-
(valueChange)="handleHueSliderChange($event)"
|
|
748
|
+
@if (clearButton) {
|
|
749
|
+
<button
|
|
750
|
+
kendoButton
|
|
751
|
+
class="k-clear-color"
|
|
752
|
+
fillMode="flat"
|
|
753
|
+
icon="droplet-slash"
|
|
754
|
+
[svgIcon]="dropletSlashIcon"
|
|
755
|
+
[size]="size"
|
|
756
|
+
(click)="reset()"
|
|
757
|
+
(keydown.enter)="reset()"
|
|
758
|
+
(keydown.space)="reset()"
|
|
759
|
+
[attr.aria-label]="clearButtonTitle"
|
|
760
|
+
[attr.title]="clearButtonTitle"
|
|
761
|
+
[tabindex]="innerTabIndex.toString()"
|
|
762
|
+
[style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
|
|
781
763
|
>
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
764
|
+
</button>
|
|
765
|
+
}
|
|
766
|
+
<kendo-slider
|
|
767
|
+
[ngClass]="{'k-align-self-end': clearButton}"
|
|
768
|
+
[style.height.px]="clearButton ? '140' : null"
|
|
769
|
+
class="k-hue-slider k-colorgradient-slider"
|
|
770
|
+
[dragHandleTitle]="hueSliderTitle"
|
|
771
|
+
[tabindex]="innerTabIndex"
|
|
772
|
+
[disabled]="disabled"
|
|
773
|
+
[readonly]="readonly"
|
|
774
|
+
[showButtons]="false"
|
|
775
|
+
tickPlacement="none"
|
|
776
|
+
[vertical]="!adaptiveMode"
|
|
777
|
+
[min]="0"
|
|
778
|
+
[max]="360"
|
|
779
|
+
[value]="hsva.value.h"
|
|
780
|
+
[smallStep]="5"
|
|
781
|
+
[largeStep]="10"
|
|
782
|
+
(valueChange)="handleHueSliderChange($event)"
|
|
783
|
+
>
|
|
784
|
+
</kendo-slider>
|
|
785
|
+
@if (opacity) {
|
|
786
|
+
<kendo-slider
|
|
787
|
+
#alphaSlider
|
|
788
|
+
[tabindex]="innerTabIndex"
|
|
789
|
+
[ngClass]="{'k-align-self-end': clearButton}"
|
|
790
|
+
[style.height.px]="clearButton ? '140' : null"
|
|
791
|
+
class="k-alpha-slider k-colorgradient-slider"
|
|
792
|
+
[dragHandleTitle]="opacitySliderTitle"
|
|
793
|
+
[disabled]="disabled"
|
|
794
|
+
[readonly]="readonly"
|
|
795
|
+
[showButtons]="false"
|
|
796
|
+
tickPlacement="none"
|
|
797
|
+
[vertical]="!adaptiveMode"
|
|
798
|
+
[min]="0"
|
|
799
|
+
[max]="100"
|
|
800
|
+
[smallStep]="1"
|
|
801
|
+
[largeStep]="10"
|
|
802
|
+
[value]="alphaSliderValue"
|
|
803
|
+
(valueChange)="handleAlphaSliderChange($event)"
|
|
802
804
|
>
|
|
803
|
-
|
|
804
|
-
|
|
805
|
+
</kendo-slider>
|
|
806
|
+
}
|
|
807
|
+
</div>
|
|
805
808
|
</div>
|
|
806
809
|
<kendo-colorinput #inputs
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
810
|
+
[tabindex]="innerTabIndex"
|
|
811
|
+
[opacity]="opacity"
|
|
812
|
+
[size]="size"
|
|
813
|
+
[formatView]="format"
|
|
814
|
+
[value]="value"
|
|
815
|
+
[disabled]="disabled"
|
|
816
|
+
[readonly]="readonly"
|
|
817
|
+
(valueChange)="handleInputsValueChange($event)"
|
|
818
|
+
(tabOut)="gradientDragHandle.focus()"
|
|
819
|
+
>
|
|
817
820
|
</kendo-colorinput>
|
|
818
|
-
|
|
819
|
-
|
|
821
|
+
@if (contrastToolVisible) {
|
|
822
|
+
<div class="k-colorgradient-color-contrast k-vbox"
|
|
820
823
|
kendoContrastTool
|
|
821
824
|
[value]="value"
|
|
822
825
|
[ratio]="contrastTool">
|
|
823
|
-
|
|
824
|
-
|
|
826
|
+
</div>
|
|
827
|
+
}
|
|
828
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "component", type: ColorContrastSvgComponent, selector: "[kendoColorContrastSvg]", inputs: ["wrapper", "hsva", "backgroundColor"] }, { 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: SliderComponent, selector: "kendo-slider", inputs: ["focusableId", "dragHandleTitle", "incrementTitle", "animate", "decrementTitle", "showButtons", "value", "tabIndex"], exportAs: ["kendoSlider"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ColorInputComponent, selector: "kendo-colorinput", inputs: ["focusableId", "formatView", "size", "tabindex", "value", "opacity", "disabled", "readonly"], outputs: ["valueChange", "tabOut"] }, { kind: "component", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: ["value", "ratio"] }] });
|
|
825
829
|
}
|
|
826
830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ColorGradientComponent, decorators: [{
|
|
827
831
|
type: Component,
|
|
@@ -850,167 +854,171 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
850
854
|
],
|
|
851
855
|
template: `
|
|
852
856
|
<ng-container kendoColorGradientLocalizedMessages
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
857
|
+
i18n-colorGradientNoColor="kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
|
|
858
|
+
colorGradientNoColor="Colorgradient no color chosen"
|
|
859
|
+
i18n-colorGradientHandle="kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser."
|
|
860
|
+
colorGradientHandle="Choose color"
|
|
861
|
+
i18n-clearButton="kendo.colorgradient.clearButton|The title for the clear button."
|
|
862
|
+
clearButton="Clear value"
|
|
863
|
+
i18n-hueSliderHandle="kendo.colorgradient.hueSliderHandle|The title for the hue slider handle."
|
|
864
|
+
hueSliderHandle="Set hue"
|
|
865
|
+
i18n-opacitySliderHandle="kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle."
|
|
866
|
+
opacitySliderHandle="Set opacity"
|
|
867
|
+
i18n-passContrast="kendo.colorgradient.passContrast|The pass message for the contrast tool."
|
|
868
|
+
passContrast="Pass"
|
|
869
|
+
i18n-failContrast="kendo.colorgradient.failContrast|The fail message for the contrast tool."
|
|
870
|
+
failContrast="Fail"
|
|
871
|
+
i18n-contrastRatio="kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool."
|
|
872
|
+
contrastRatio="Contrast ratio"
|
|
873
|
+
i18n-formatButton="kendo.colorgradient.formatButton|The message for the input format toggle button."
|
|
874
|
+
formatButton="Change color format"
|
|
875
|
+
i18n-redChannelLabel="kendo.colorgradient.redChannelLabel|The label of the NumericTextBox representing the red color channel."
|
|
876
|
+
redChannelLabel="Red channel"
|
|
877
|
+
i18n-greenChannelLabel="kendo.colorgradient.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
|
|
878
|
+
greenChannelLabel="Green channel"
|
|
879
|
+
i18n-blueChannelLabel="kendo.colorgradient.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
|
|
880
|
+
blueChannelLabel="Blue channel"
|
|
881
|
+
i18n-alphaChannelLabel="kendo.colorgradient.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
|
|
882
|
+
alphaChannelLabel="Alpha channel"
|
|
883
|
+
i18n-redInputPlaceholder="kendo.colorgradient.redInputPlaceholder|The placeholder for the red color input."
|
|
884
|
+
redChannelLabel="R"
|
|
885
|
+
i18n-greenInputPlaceholder="kendo.colorgradient.greenInputPlaceholder|The placeholder for the green color input."
|
|
886
|
+
greenInputPlaceholder="G"
|
|
887
|
+
i18n-blueInputPlaceholder="kendo.colorgradient.blueInputPlaceholder|The placeholder for the blue color input."
|
|
888
|
+
blueInputPlaceholder="B"
|
|
889
|
+
i18n-hexInputPlaceholder="kendo.colorgradient.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
890
|
+
hexInputPlaceholder="HEX">
|
|
887
891
|
</ng-container>
|
|
888
892
|
<div [ngClass]="{
|
|
889
893
|
'k-colorgradient-canvas': true,
|
|
890
894
|
'k-vstack': adaptiveMode,
|
|
891
895
|
'k-hstack': !adaptiveMode
|
|
892
896
|
}">
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
</div>
|
|
918
|
-
<svg kendoColorContrastSvg
|
|
919
|
-
*ngIf="contrastToolVisible && gradientWrapper"
|
|
920
|
-
class="k-color-contrast-svg"
|
|
921
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
922
|
-
[wrapper]="gradientWrapper ? gradientWrapper : undefined"
|
|
923
|
-
[hsva]="hsva"
|
|
924
|
-
[backgroundColor]="contrastTool"
|
|
925
|
-
[style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
|
|
926
|
-
</svg>
|
|
897
|
+
<div class="k-hsv-rectangle" #hsvRectangle>
|
|
898
|
+
<div
|
|
899
|
+
#gradientWrapper
|
|
900
|
+
kendoDraggable
|
|
901
|
+
class="k-hsv-gradient"
|
|
902
|
+
(click)="changePosition($event)"
|
|
903
|
+
(kendoPress)="handleDragPress($event)"
|
|
904
|
+
(kendoDrag)="onHandleDrag($event)"
|
|
905
|
+
(kendoRelease)="onHandleRelease()"
|
|
906
|
+
[style.touch-action]="'none'">
|
|
907
|
+
<div
|
|
908
|
+
#gradientDragHandle
|
|
909
|
+
class="k-hsv-draghandle k-draghandle"
|
|
910
|
+
[tabindex]="innerTabIndex.toString()"
|
|
911
|
+
[attr.title]="colorGradientHandleTitle"
|
|
912
|
+
[attr.aria-label]="colorGradientHandleTitle + ' ' + colorGradientHandleAriaLabel"
|
|
913
|
+
role="slider"
|
|
914
|
+
[attr.aria-valuetext]="hsvSliderValueText"
|
|
915
|
+
[attr.aria-readonly]="readonly ? readonly : undefined"
|
|
916
|
+
[attr.aria-disabled]="disabled ? disabled : undefined"
|
|
917
|
+
[attr.aria-orientation]="'undefined'"
|
|
918
|
+
[attr.aria-valuenow]="'0'"
|
|
919
|
+
(keydown.shift.tab)="$event.preventDefault(); inputs.focusLast();">
|
|
920
|
+
</div>
|
|
927
921
|
</div>
|
|
922
|
+
@if (contrastToolVisible && gradientWrapper) {
|
|
923
|
+
<svg kendoColorContrastSvg
|
|
924
|
+
class="k-color-contrast-svg"
|
|
925
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
926
|
+
[wrapper]="gradientWrapper ? gradientWrapper : undefined"
|
|
927
|
+
[hsva]="hsva"
|
|
928
|
+
[backgroundColor]="contrastTool"
|
|
929
|
+
[style]="'position: absolute; overflow: visible; pointer-events: none; left: 0px; top: 0px;'">
|
|
930
|
+
</svg>
|
|
931
|
+
}
|
|
932
|
+
</div>
|
|
928
933
|
<div [ngClass]="{
|
|
929
934
|
'k-hsv-controls': true,
|
|
930
935
|
'k-sliders-wrap-clearable': clearButton,
|
|
931
936
|
'k-vstack': adaptiveMode,
|
|
932
937
|
'k-hstack': !adaptiveMode
|
|
933
938
|
}">
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
>
|
|
950
|
-
</button>
|
|
951
|
-
<kendo-slider
|
|
952
|
-
[ngClass]="{'k-align-self-end': clearButton}"
|
|
953
|
-
[style.height.px]="clearButton ? '140' : null"
|
|
954
|
-
class="k-hue-slider k-colorgradient-slider"
|
|
955
|
-
[dragHandleTitle]="hueSliderTitle"
|
|
956
|
-
[tabindex]="innerTabIndex"
|
|
957
|
-
[disabled]="disabled"
|
|
958
|
-
[readonly]="readonly"
|
|
959
|
-
[showButtons]="false"
|
|
960
|
-
tickPlacement="none"
|
|
961
|
-
[vertical]="!adaptiveMode"
|
|
962
|
-
[min]="0"
|
|
963
|
-
[max]="360"
|
|
964
|
-
[value]="hsva.value.h"
|
|
965
|
-
[smallStep]="5"
|
|
966
|
-
[largeStep]="10"
|
|
967
|
-
(valueChange)="handleHueSliderChange($event)"
|
|
939
|
+
@if (clearButton) {
|
|
940
|
+
<button
|
|
941
|
+
kendoButton
|
|
942
|
+
class="k-clear-color"
|
|
943
|
+
fillMode="flat"
|
|
944
|
+
icon="droplet-slash"
|
|
945
|
+
[svgIcon]="dropletSlashIcon"
|
|
946
|
+
[size]="size"
|
|
947
|
+
(click)="reset()"
|
|
948
|
+
(keydown.enter)="reset()"
|
|
949
|
+
(keydown.space)="reset()"
|
|
950
|
+
[attr.aria-label]="clearButtonTitle"
|
|
951
|
+
[attr.title]="clearButtonTitle"
|
|
952
|
+
[tabindex]="innerTabIndex.toString()"
|
|
953
|
+
[style]="'position: absolute; top: 0; left: 50%; transform: translateX(-50%);'"
|
|
968
954
|
>
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
955
|
+
</button>
|
|
956
|
+
}
|
|
957
|
+
<kendo-slider
|
|
958
|
+
[ngClass]="{'k-align-self-end': clearButton}"
|
|
959
|
+
[style.height.px]="clearButton ? '140' : null"
|
|
960
|
+
class="k-hue-slider k-colorgradient-slider"
|
|
961
|
+
[dragHandleTitle]="hueSliderTitle"
|
|
962
|
+
[tabindex]="innerTabIndex"
|
|
963
|
+
[disabled]="disabled"
|
|
964
|
+
[readonly]="readonly"
|
|
965
|
+
[showButtons]="false"
|
|
966
|
+
tickPlacement="none"
|
|
967
|
+
[vertical]="!adaptiveMode"
|
|
968
|
+
[min]="0"
|
|
969
|
+
[max]="360"
|
|
970
|
+
[value]="hsva.value.h"
|
|
971
|
+
[smallStep]="5"
|
|
972
|
+
[largeStep]="10"
|
|
973
|
+
(valueChange)="handleHueSliderChange($event)"
|
|
974
|
+
>
|
|
975
|
+
</kendo-slider>
|
|
976
|
+
@if (opacity) {
|
|
977
|
+
<kendo-slider
|
|
978
|
+
#alphaSlider
|
|
979
|
+
[tabindex]="innerTabIndex"
|
|
980
|
+
[ngClass]="{'k-align-self-end': clearButton}"
|
|
981
|
+
[style.height.px]="clearButton ? '140' : null"
|
|
982
|
+
class="k-alpha-slider k-colorgradient-slider"
|
|
983
|
+
[dragHandleTitle]="opacitySliderTitle"
|
|
984
|
+
[disabled]="disabled"
|
|
985
|
+
[readonly]="readonly"
|
|
986
|
+
[showButtons]="false"
|
|
987
|
+
tickPlacement="none"
|
|
988
|
+
[vertical]="!adaptiveMode"
|
|
989
|
+
[min]="0"
|
|
990
|
+
[max]="100"
|
|
991
|
+
[smallStep]="1"
|
|
992
|
+
[largeStep]="10"
|
|
993
|
+
[value]="alphaSliderValue"
|
|
994
|
+
(valueChange)="handleAlphaSliderChange($event)"
|
|
989
995
|
>
|
|
990
|
-
|
|
991
|
-
|
|
996
|
+
</kendo-slider>
|
|
997
|
+
}
|
|
998
|
+
</div>
|
|
992
999
|
</div>
|
|
993
1000
|
<kendo-colorinput #inputs
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1001
|
+
[tabindex]="innerTabIndex"
|
|
1002
|
+
[opacity]="opacity"
|
|
1003
|
+
[size]="size"
|
|
1004
|
+
[formatView]="format"
|
|
1005
|
+
[value]="value"
|
|
1006
|
+
[disabled]="disabled"
|
|
1007
|
+
[readonly]="readonly"
|
|
1008
|
+
(valueChange)="handleInputsValueChange($event)"
|
|
1009
|
+
(tabOut)="gradientDragHandle.focus()"
|
|
1010
|
+
>
|
|
1004
1011
|
</kendo-colorinput>
|
|
1005
|
-
|
|
1006
|
-
|
|
1012
|
+
@if (contrastToolVisible) {
|
|
1013
|
+
<div class="k-colorgradient-color-contrast k-vbox"
|
|
1007
1014
|
kendoContrastTool
|
|
1008
1015
|
[value]="value"
|
|
1009
1016
|
[ratio]="contrastTool">
|
|
1010
|
-
|
|
1011
|
-
|
|
1017
|
+
</div>
|
|
1018
|
+
}
|
|
1019
|
+
`,
|
|
1012
1020
|
standalone: true,
|
|
1013
|
-
imports: [LocalizedColorPickerMessagesDirective, DraggableDirective,
|
|
1021
|
+
imports: [LocalizedColorPickerMessagesDirective, DraggableDirective, ColorContrastSvgComponent, ButtonComponent, SliderComponent, NgClass, ColorInputComponent, ContrastComponent]
|
|
1014
1022
|
}]
|
|
1015
1023
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i0.Injector }], propDecorators: { hostClasses: [{
|
|
1016
1024
|
type: HostBinding,
|