@progress/kendo-angular-inputs 21.1.1-develop.2 → 21.2.0-develop.2
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
|
@@ -22,7 +22,7 @@ import { FlatColorPickerHeaderComponent } from './flatcolorpicker-header.compone
|
|
|
22
22
|
import { FlatColorPickerActionButtonsComponent } from './flatcolorpicker-actions.component';
|
|
23
23
|
import { DRAGHANDLE_MOVE_SPEED, DRAGHANDLE_MOVE_SPEED_SMALL_STEP } from "./constants";
|
|
24
24
|
import { take } from "rxjs/operators";
|
|
25
|
-
import {
|
|
25
|
+
import { NgClass } from "@angular/common";
|
|
26
26
|
import { LocalizedColorPickerMessagesDirective } from "./localization/localized-colorpicker-messages.directive";
|
|
27
27
|
import * as i0 from "@angular/core";
|
|
28
28
|
import * as i1 from "./services/flatcolorpicker.service";
|
|
@@ -570,7 +570,7 @@ export class FlatColorPickerComponent {
|
|
|
570
570
|
}
|
|
571
571
|
}
|
|
572
572
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FlatColorPickerComponent, deps: [{ token: i0.ElementRef }, { token: i1.FlatColorPickerService }, { token: i2.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
573
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
573
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FlatColorPickerComponent, isStandalone: true, selector: "kendo-flatcolorpicker", inputs: { readonly: "readonly", disabled: "disabled", format: "format", value: "value", tabindex: "tabindex", clearButton: "clearButton", preview: "preview", actionsLayout: "actionsLayout", activeView: "activeView", views: "views", gradientSettings: "gradientSettings", adaptiveMode: "adaptiveMode", paletteSettings: "paletteSettings", size: "size" }, outputs: { valueChange: "valueChange", cancel: "cancel", activeViewChange: "activeViewChange", clearButtonClick: "clearButtonClick", actionButtonClick: "actionButtonClick" }, host: { listeners: { "keydown.enter": "enterHandler($event)", "keydown.escape": "escapeHandler()", "focusin": "focusHandler($event)" }, properties: { "class.k-flatcolorpicker": "this.hostClasses", "class.k-coloreditor": "this.hostClasses", "class.k-disabled": "this.disabledClass", "attr.aria-disabled": "this.isDisabled", "attr.aria-readonly": "this.ariaReadonly", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabindex", "attr.role": "this.ariaRole", "attr.aria-invalid": "this.isControlInvalid", "class.k-readonly": "this.readonly" } }, providers: [
|
|
574
574
|
{
|
|
575
575
|
multi: true,
|
|
576
576
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -592,56 +592,56 @@ export class FlatColorPickerComponent {
|
|
|
592
592
|
}
|
|
593
593
|
], viewQueries: [{ propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerElement", first: true, predicate: ["header"], descendants: true, read: ElementRef }, { propertyName: "gradient", first: true, predicate: ["gradient"], descendants: true }, { propertyName: "gradientElement", first: true, predicate: ["gradient"], descendants: true, read: ElementRef }, { propertyName: "palette", first: true, predicate: ["palette"], descendants: true }, { propertyName: "footer", first: true, predicate: ["footer"], descendants: true }], exportAs: ["kendoFlatColorPicker"], usesOnChanges: true, ngImport: i0, template: `
|
|
594
594
|
<ng-container kendoFlatColorPickerLocalizedMessages
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
595
|
+
i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
|
|
596
|
+
flatColorPickerNoColor="Flatcolorpicker no color chosen"
|
|
597
|
+
i18n-colorGradientNoColor="kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
|
|
598
|
+
colorGradientNoColor="Colorgradient no color chosen"
|
|
599
|
+
i18n-colorPaletteNoColor="kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
|
|
600
|
+
colorPaletteNoColor="Colorpalette no color chosen"
|
|
601
|
+
i18n-colorGradientHandle="kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
|
|
602
|
+
colorGradientHandle="Choose color"
|
|
603
|
+
i18n-clearButton="kendo.flatcolorpicker.clearButton|The title for the clear button."
|
|
604
|
+
clearButton="Clear value"
|
|
605
|
+
i18n-hueSliderHandle="kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle."
|
|
606
|
+
hueSliderHandle="Set hue"
|
|
607
|
+
i18n-opacitySliderHandle="kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle."
|
|
608
|
+
opacitySliderHandle="Set opacity"
|
|
609
|
+
i18n-contrastRatio="kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool."
|
|
610
|
+
contrastRatio="Contrast ratio"
|
|
611
|
+
i18n-previewColor="kendo.flatcolorpicker.previewColor|The message for the color preview pane."
|
|
612
|
+
previewColor="Color preview"
|
|
613
|
+
i18n-revertSelection="kendo.flatcolorpicker.revertSelection|The message for the selected color pane."
|
|
614
|
+
revertSelection="Revert selection"
|
|
615
|
+
i18n-gradientView="kendo.flatcolorpicker.gradientView|The message for the gradient view button."
|
|
616
|
+
gradientView="Gradient view"
|
|
617
|
+
i18n-paletteView="kendo.flatcolorpicker.paletteView|The message for the palette view button."
|
|
618
|
+
paletteView="Palette view"
|
|
619
|
+
i18n-formatButton="kendo.flatcolorpicker.formatButton|The message for the input format toggle button."
|
|
620
|
+
formatButton="Change color format"
|
|
621
|
+
i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
|
|
622
|
+
applyButton="Apply"
|
|
623
|
+
i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
|
|
624
|
+
cancelButton="Cancel"
|
|
625
|
+
i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
|
|
626
|
+
redChannelLabel="Red channel"
|
|
627
|
+
i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
|
|
628
|
+
greenChannelLabel="Green channel"
|
|
629
|
+
i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
|
|
630
|
+
blueChannelLabel="Blue channel"
|
|
631
|
+
i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
|
|
632
|
+
alphaChannelLabel="Alpha channel"
|
|
633
|
+
i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
|
|
634
|
+
redChannelLabel="R"
|
|
635
|
+
i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
|
|
636
|
+
greenInputPlaceholder="G"
|
|
637
|
+
i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
638
|
+
blueInputPlaceholder="B"
|
|
639
|
+
i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
640
|
+
hexInputPlaceholder="HEX">
|
|
641
641
|
</ng-container>
|
|
642
|
-
|
|
642
|
+
@if (headerHasContent) {
|
|
643
|
+
<div kendoFlatColorPickerHeader
|
|
643
644
|
[innerTabIndex]="innerTabIndex"
|
|
644
|
-
*ngIf="headerHasContent"
|
|
645
645
|
#header
|
|
646
646
|
[clearButton]="clearButton"
|
|
647
647
|
[activeView]="activeView"
|
|
@@ -653,39 +653,43 @@ export class FlatColorPickerComponent {
|
|
|
653
653
|
(clearButtonClick)="onClearButtonClick()"
|
|
654
654
|
(viewChange)="onViewChange($event)"
|
|
655
655
|
(valuePaneClick)="resetSelection($event)"
|
|
656
|
-
|
|
656
|
+
(tabOut)="lastFocusable($event)"></div>
|
|
657
|
+
}
|
|
657
658
|
<div class="k-coloreditor-views k-vstack">
|
|
659
|
+
@if (activeView === 'gradient') {
|
|
658
660
|
<kendo-colorgradient #gradient
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
(valueChange)="handleValueChange($event)"
|
|
661
|
+
[tabindex]="innerTabIndex"
|
|
662
|
+
[value]="selection"
|
|
663
|
+
[size]="size"
|
|
664
|
+
[adaptiveMode]="adaptiveMode"
|
|
665
|
+
[format]="format"
|
|
666
|
+
[opacity]="gradientSettings.opacity"
|
|
667
|
+
[delay]="gradientSettings.delay"
|
|
668
|
+
[contrastTool]="gradientSettings.contrastTool"
|
|
669
|
+
[gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
|
|
670
|
+
[gradientSliderStep]="gradientSettings.gradientSliderStep"
|
|
671
|
+
[readonly]="readonly"
|
|
672
|
+
[ariaAttributesEnabled]="false"
|
|
673
|
+
(keydown.tab)="focusFirstHeaderButton()"
|
|
674
|
+
(valueChange)="handleValueChange($event)"
|
|
674
675
|
></kendo-colorgradient>
|
|
676
|
+
}
|
|
677
|
+
@if (activeView === 'palette') {
|
|
675
678
|
<kendo-colorpalette #palette
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
(valueChange)="handleValueChange($event)"
|
|
679
|
+
[tabindex]="innerTabIndex"
|
|
680
|
+
[palette]="paletteSettings.palette"
|
|
681
|
+
[size]="size"
|
|
682
|
+
[columns]="paletteSettings.columns"
|
|
683
|
+
[tileSize]="paletteSettings.tileSize"
|
|
684
|
+
[format]="format"
|
|
685
|
+
[value]="selection"
|
|
686
|
+
[readonly]="readonly"
|
|
687
|
+
(valueChange)="handleValueChange($event)"
|
|
686
688
|
></kendo-colorpalette>
|
|
689
|
+
}
|
|
687
690
|
</div>
|
|
688
|
-
|
|
691
|
+
@if (preview && !adaptiveMode) {
|
|
692
|
+
<div
|
|
689
693
|
#footer
|
|
690
694
|
kendoFlatColorPickerActionButtons
|
|
691
695
|
[innerTabIndex]="innerTabIndex"
|
|
@@ -693,8 +697,9 @@ export class FlatColorPickerComponent {
|
|
|
693
697
|
[ngClass]="'k-justify-content-' + actionsLayout"
|
|
694
698
|
(actionButtonClick)="onAction($event)"
|
|
695
699
|
(tabOut)="firstFocusable.focus()">
|
|
696
|
-
|
|
697
|
-
|
|
700
|
+
</div>
|
|
701
|
+
}
|
|
702
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedColorPickerMessagesDirective, selector: "[kendoColorPickerLocalizedMessages], [kendoFlatColorPickerLocalizedMessages], [kendoColorGradientLocalizedMessages], [kendoColorPaletteLocalizedMessages]" }, { kind: "component", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: ["clearButton", "activeView", "views", "preview", "innerTabIndex", "value", "selection", "size"], outputs: ["viewChange", "valuePaneClick", "clearButtonClick", "tabOut"] }, { kind: "component", type: ColorGradientComponent, selector: "kendo-colorgradient", inputs: ["adaptiveMode", "id", "opacity", "size", "disabled", "readonly", "clearButton", "delay", "value", "contrastTool", "tabindex", "format", "gradientSliderStep", "gradientSliderSmallStep", "ariaAttributesEnabled"], outputs: ["valueChange"], exportAs: ["kendoColorGradient"] }, { kind: "component", type: ColorPaletteComponent, selector: "kendo-colorpalette", inputs: ["id", "format", "value", "columns", "palette", "size", "tabindex", "disabled", "readonly", "tileSize"], outputs: ["selectionChange", "valueChange", "cellSelection"], exportAs: ["kendoColorPalette"] }, { kind: "component", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", inputs: ["innerTabIndex", "size"], outputs: ["actionButtonClick", "tabOut"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
698
703
|
}
|
|
699
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FlatColorPickerComponent, decorators: [{
|
|
700
705
|
type: Component,
|
|
@@ -724,56 +729,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
724
729
|
],
|
|
725
730
|
template: `
|
|
726
731
|
<ng-container kendoFlatColorPickerLocalizedMessages
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
732
|
+
i18n-flatColorPickerNoColor="kendo.flatcolorpicker.flatColorPickerNoColor|The aria-label applied to the FlatColorPicker component when the value is empty."
|
|
733
|
+
flatColorPickerNoColor="Flatcolorpicker no color chosen"
|
|
734
|
+
i18n-colorGradientNoColor="kendo.flatcolorpicker.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty."
|
|
735
|
+
colorGradientNoColor="Colorgradient no color chosen"
|
|
736
|
+
i18n-colorPaletteNoColor="kendo.flatcolorpicker.colorPaletteNoColor|The aria-label applied to the ColorPalette component when the value is empty."
|
|
737
|
+
colorPaletteNoColor="Colorpalette no color chosen"
|
|
738
|
+
i18n-colorGradientHandle="kendo.flatcolorpicker.colorGradientHandle|The title for the gradient color drag handle chooser."
|
|
739
|
+
colorGradientHandle="Choose color"
|
|
740
|
+
i18n-clearButton="kendo.flatcolorpicker.clearButton|The title for the clear button."
|
|
741
|
+
clearButton="Clear value"
|
|
742
|
+
i18n-hueSliderHandle="kendo.flatcolorpicker.hueSliderHandle|The title for the hue slider handle."
|
|
743
|
+
hueSliderHandle="Set hue"
|
|
744
|
+
i18n-opacitySliderHandle="kendo.flatcolorpicker.opacitySliderHandle|The title for the opacity slider handle."
|
|
745
|
+
opacitySliderHandle="Set opacity"
|
|
746
|
+
i18n-contrastRatio="kendo.flatcolorpicker.contrastRatio|The contrast ratio message for the contrast tool."
|
|
747
|
+
contrastRatio="Contrast ratio"
|
|
748
|
+
i18n-previewColor="kendo.flatcolorpicker.previewColor|The message for the color preview pane."
|
|
749
|
+
previewColor="Color preview"
|
|
750
|
+
i18n-revertSelection="kendo.flatcolorpicker.revertSelection|The message for the selected color pane."
|
|
751
|
+
revertSelection="Revert selection"
|
|
752
|
+
i18n-gradientView="kendo.flatcolorpicker.gradientView|The message for the gradient view button."
|
|
753
|
+
gradientView="Gradient view"
|
|
754
|
+
i18n-paletteView="kendo.flatcolorpicker.paletteView|The message for the palette view button."
|
|
755
|
+
paletteView="Palette view"
|
|
756
|
+
i18n-formatButton="kendo.flatcolorpicker.formatButton|The message for the input format toggle button."
|
|
757
|
+
formatButton="Change color format"
|
|
758
|
+
i18n-applyButton="kendo.flatcolorpicker.applyButton|The message for the Apply action button."
|
|
759
|
+
applyButton="Apply"
|
|
760
|
+
i18n-cancelButton="kendo.flatcolorpicker.cancelButton|The message for the Cancel action button."
|
|
761
|
+
cancelButton="Cancel"
|
|
762
|
+
i18n-redChannelLabel="kendo.flatcolorpicker.redChannelLabel|The label of the NumericTextBox representing the red color channel."
|
|
763
|
+
redChannelLabel="Red channel"
|
|
764
|
+
i18n-greenChannelLabel="kendo.flatcolorpicker.greenChannelLabel|The label of the NumericTextBox representing the green color channel."
|
|
765
|
+
greenChannelLabel="Green channel"
|
|
766
|
+
i18n-blueChannelLabel="kendo.flatcolorpicker.blueChannelLabel|The label of the NumericTextBox representing the blue color channel."
|
|
767
|
+
blueChannelLabel="Blue channel"
|
|
768
|
+
i18n-alphaChannelLabel="kendo.flatcolorpicker.alphaChannelLabel|The label of the NumericTextBox representing the alpha color channel."
|
|
769
|
+
alphaChannelLabel="Alpha channel"
|
|
770
|
+
i18n-redInputPlaceholder="kendo.flatcolorpicker.redInputPlaceholder|The placeholder for the red color input."
|
|
771
|
+
redChannelLabel="R"
|
|
772
|
+
i18n-greenInputPlaceholder="kendo.flatcolorpicker.greenInputPlaceholder|The placeholder for the green color input."
|
|
773
|
+
greenInputPlaceholder="G"
|
|
774
|
+
i18n-blueInputPlaceholder="kendo.flatcolorpicker.blueInputPlaceholder|The placeholder for the blue color input."
|
|
775
|
+
blueInputPlaceholder="B"
|
|
776
|
+
i18n-hexInputPlaceholder="kendo.flatcolorpicker.hexInputPlaceholder|The placeholder for the HEX color input."
|
|
777
|
+
hexInputPlaceholder="HEX">
|
|
773
778
|
</ng-container>
|
|
774
|
-
|
|
779
|
+
@if (headerHasContent) {
|
|
780
|
+
<div kendoFlatColorPickerHeader
|
|
775
781
|
[innerTabIndex]="innerTabIndex"
|
|
776
|
-
*ngIf="headerHasContent"
|
|
777
782
|
#header
|
|
778
783
|
[clearButton]="clearButton"
|
|
779
784
|
[activeView]="activeView"
|
|
@@ -785,39 +790,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
785
790
|
(clearButtonClick)="onClearButtonClick()"
|
|
786
791
|
(viewChange)="onViewChange($event)"
|
|
787
792
|
(valuePaneClick)="resetSelection($event)"
|
|
788
|
-
|
|
793
|
+
(tabOut)="lastFocusable($event)"></div>
|
|
794
|
+
}
|
|
789
795
|
<div class="k-coloreditor-views k-vstack">
|
|
796
|
+
@if (activeView === 'gradient') {
|
|
790
797
|
<kendo-colorgradient #gradient
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
(valueChange)="handleValueChange($event)"
|
|
798
|
+
[tabindex]="innerTabIndex"
|
|
799
|
+
[value]="selection"
|
|
800
|
+
[size]="size"
|
|
801
|
+
[adaptiveMode]="adaptiveMode"
|
|
802
|
+
[format]="format"
|
|
803
|
+
[opacity]="gradientSettings.opacity"
|
|
804
|
+
[delay]="gradientSettings.delay"
|
|
805
|
+
[contrastTool]="gradientSettings.contrastTool"
|
|
806
|
+
[gradientSliderSmallStep]="gradientSettings.gradientSliderSmallStep"
|
|
807
|
+
[gradientSliderStep]="gradientSettings.gradientSliderStep"
|
|
808
|
+
[readonly]="readonly"
|
|
809
|
+
[ariaAttributesEnabled]="false"
|
|
810
|
+
(keydown.tab)="focusFirstHeaderButton()"
|
|
811
|
+
(valueChange)="handleValueChange($event)"
|
|
806
812
|
></kendo-colorgradient>
|
|
813
|
+
}
|
|
814
|
+
@if (activeView === 'palette') {
|
|
807
815
|
<kendo-colorpalette #palette
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
(valueChange)="handleValueChange($event)"
|
|
816
|
+
[tabindex]="innerTabIndex"
|
|
817
|
+
[palette]="paletteSettings.palette"
|
|
818
|
+
[size]="size"
|
|
819
|
+
[columns]="paletteSettings.columns"
|
|
820
|
+
[tileSize]="paletteSettings.tileSize"
|
|
821
|
+
[format]="format"
|
|
822
|
+
[value]="selection"
|
|
823
|
+
[readonly]="readonly"
|
|
824
|
+
(valueChange)="handleValueChange($event)"
|
|
818
825
|
></kendo-colorpalette>
|
|
826
|
+
}
|
|
819
827
|
</div>
|
|
820
|
-
|
|
828
|
+
@if (preview && !adaptiveMode) {
|
|
829
|
+
<div
|
|
821
830
|
#footer
|
|
822
831
|
kendoFlatColorPickerActionButtons
|
|
823
832
|
[innerTabIndex]="innerTabIndex"
|
|
@@ -825,10 +834,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
825
834
|
[ngClass]="'k-justify-content-' + actionsLayout"
|
|
826
835
|
(actionButtonClick)="onAction($event)"
|
|
827
836
|
(tabOut)="firstFocusable.focus()">
|
|
828
|
-
|
|
829
|
-
|
|
837
|
+
</div>
|
|
838
|
+
}
|
|
839
|
+
`,
|
|
830
840
|
standalone: true,
|
|
831
|
-
imports: [LocalizedColorPickerMessagesDirective,
|
|
841
|
+
imports: [LocalizedColorPickerMessagesDirective, FlatColorPickerHeaderComponent, ColorGradientComponent, ColorPaletteComponent, FlatColorPickerActionButtonsComponent, NgClass]
|
|
832
842
|
}]
|
|
833
843
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FlatColorPickerService }, { type: i2.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { hostClasses: [{
|
|
834
844
|
type: HostBinding,
|
|
@@ -2,7 +2,7 @@
|
|
|
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 { NgClass,
|
|
5
|
+
import { NgClass, NgStyle } from '@angular/common';
|
|
6
6
|
import { Component, ElementRef, HostBinding, Input, ChangeDetectorRef } from '@angular/core';
|
|
7
7
|
import { ResizeSensorComponent, shouldShowValidationUI, getLicenseMessage, WatermarkOverlayComponent, isDocumentAvailable } from '@progress/kendo-angular-common';
|
|
8
8
|
import { calculateColumns, calculateGutters, DEFAULT_FORM_GUTTERS, generateColumnClass, generateGuttersStyling, innerWidth } from './utils';
|
|
@@ -121,13 +121,15 @@ export class FormComponent {
|
|
|
121
121
|
this.guttersStyle = generateGuttersStyling(this._formGutters, { ...DEFAULT_FORM_GUTTERS });
|
|
122
122
|
}
|
|
123
123
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormComponent, isStandalone: true, selector: "form[kendoForm]", inputs: { orientation: "orientation", cols: "cols", gutters: "gutters" }, host: { properties: { "class": "this.formClass", "class.k-form-horizontal": "this.horizontalClass" } }, exportAs: ["kendoForm"], usesOnChanges: true, ngImport: i0, template: `
|
|
125
125
|
<div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{ gap: guttersStyle }">
|
|
126
|
-
|
|
126
|
+
<ng-content></ng-content>
|
|
127
127
|
</div>
|
|
128
128
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
129
|
-
|
|
130
|
-
|
|
129
|
+
@if (showLicenseWatermark) {
|
|
130
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
131
|
+
}
|
|
132
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]", inputs: ["licenseMessage"] }] });
|
|
131
133
|
}
|
|
132
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormComponent, decorators: [{
|
|
133
135
|
type: Component,
|
|
@@ -136,13 +138,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
136
138
|
selector: 'form[kendoForm]',
|
|
137
139
|
template: `
|
|
138
140
|
<div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{ gap: guttersStyle }">
|
|
139
|
-
|
|
141
|
+
<ng-content></ng-content>
|
|
140
142
|
</div>
|
|
141
143
|
<kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
|
|
142
|
-
|
|
143
|
-
|
|
144
|
+
@if (showLicenseWatermark) {
|
|
145
|
+
<div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
|
|
146
|
+
}
|
|
147
|
+
`,
|
|
144
148
|
standalone: true,
|
|
145
|
-
imports: [NgClass, NgStyle,
|
|
149
|
+
imports: [NgClass, NgStyle, ResizeSensorComponent, WatermarkOverlayComponent],
|
|
146
150
|
}]
|
|
147
151
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FormService }], propDecorators: { orientation: [{
|
|
148
152
|
type: Input
|
|
@@ -11,7 +11,6 @@ import { validatePackage } from '@progress/kendo-licensing';
|
|
|
11
11
|
import { packageMetadata } from '../package-metadata';
|
|
12
12
|
import { ErrorComponent } from './error.component';
|
|
13
13
|
import { HintComponent } from './hint.component';
|
|
14
|
-
import { NgIf } from '@angular/common';
|
|
15
14
|
import { FormService } from '../common/formservice.service';
|
|
16
15
|
import { filter } from 'rxjs/operators';
|
|
17
16
|
import { calculateColSpan, generateColSpanClass } from '../form/utils';
|
|
@@ -271,7 +270,7 @@ export class FormFieldComponent {
|
|
|
271
270
|
}
|
|
272
271
|
}
|
|
273
272
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i2.FormService }], target: i0.ɵɵFactoryTarget.Component });
|
|
274
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
273
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormFieldComponent, isStandalone: true, selector: "kendo-formfield", inputs: { showHints: "showHints", orientation: "orientation", showErrors: "showErrors", colSpan: "colSpan" }, host: { properties: { "class.k-form-field": "this.hostClass", "attr.dir": "this.direction", "class.k-form-field-error": "this.errorClass", "class.k-form-field-disabled": "this.disabledClass" } }, providers: [
|
|
275
274
|
LocalizationService,
|
|
276
275
|
{
|
|
277
276
|
provide: L10N_PREFIX,
|
|
@@ -280,11 +279,15 @@ export class FormFieldComponent {
|
|
|
280
279
|
], queries: [{ propertyName: "kendoInput", first: true, predicate: KendoInput, descendants: true, static: true }, { propertyName: "formControls", predicate: NgControl, descendants: true }, { propertyName: "controlElementRefs", predicate: NgControl, descendants: true, read: ElementRef }, { propertyName: "errorChildren", predicate: ErrorComponent, descendants: true }, { propertyName: "hintChildren", predicate: HintComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
281
280
|
<ng-content select="label, kendo-label"></ng-content>
|
|
282
281
|
<div class="k-form-field-wrap">
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
<ng-content select="kendo-
|
|
282
|
+
<ng-content></ng-content>
|
|
283
|
+
@if (hasHints) {
|
|
284
|
+
<ng-content select="kendo-formhint"></ng-content>
|
|
285
|
+
}
|
|
286
|
+
@if (hasErrors) {
|
|
287
|
+
<ng-content select="kendo-formerror"></ng-content>
|
|
288
|
+
}
|
|
286
289
|
</div>
|
|
287
|
-
|
|
290
|
+
`, isInline: true });
|
|
288
291
|
}
|
|
289
292
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
290
293
|
type: Component,
|
|
@@ -293,11 +296,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
293
296
|
template: `
|
|
294
297
|
<ng-content select="label, kendo-label"></ng-content>
|
|
295
298
|
<div class="k-form-field-wrap">
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
<ng-content select="kendo-
|
|
299
|
+
<ng-content></ng-content>
|
|
300
|
+
@if (hasHints) {
|
|
301
|
+
<ng-content select="kendo-formhint"></ng-content>
|
|
302
|
+
}
|
|
303
|
+
@if (hasErrors) {
|
|
304
|
+
<ng-content select="kendo-formerror"></ng-content>
|
|
305
|
+
}
|
|
299
306
|
</div>
|
|
300
|
-
|
|
307
|
+
`,
|
|
301
308
|
providers: [
|
|
302
309
|
LocalizationService,
|
|
303
310
|
{
|
|
@@ -306,7 +313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
306
313
|
}
|
|
307
314
|
],
|
|
308
315
|
standalone: true,
|
|
309
|
-
imports: [
|
|
316
|
+
imports: []
|
|
310
317
|
}]
|
|
311
318
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i2.FormService }], propDecorators: { hostClass: [{
|
|
312
319
|
type: HostBinding,
|
|
@@ -2,7 +2,7 @@
|
|
|
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 { NgClass,
|
|
5
|
+
import { NgClass, NgStyle } from '@angular/common';
|
|
6
6
|
import { Component, HostBinding, Input, ElementRef, Renderer2, ChangeDetectorRef, } from '@angular/core';
|
|
7
7
|
import { FormService } from '../common/formservice.service';
|
|
8
8
|
import { filter } from 'rxjs/operators';
|
|
@@ -131,14 +131,16 @@ export class FormFieldSetComponent {
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldSetComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.FormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
134
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
135
|
-
|
|
134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FormFieldSetComponent, isStandalone: true, selector: "fieldset[kendoFormFieldSet]", inputs: { legend: "legend", cols: "cols", gutters: "gutters", colSpan: "colSpan" }, host: { properties: { "class.k-form-fieldset": "this.formFieldSetClass" } }, exportAs: ["kendoFormFieldSet"], usesOnChanges: true, ngImport: i0, template: `
|
|
135
|
+
@if (legend) {
|
|
136
|
+
<legend class="k-form-legend">
|
|
136
137
|
{{ legend }}
|
|
137
|
-
|
|
138
|
+
</legend>
|
|
139
|
+
}
|
|
138
140
|
<div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{'gap': guttersStyle}">
|
|
139
|
-
|
|
141
|
+
<ng-content></ng-content>
|
|
140
142
|
</div>
|
|
141
|
-
|
|
143
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
142
144
|
}
|
|
143
145
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormFieldSetComponent, decorators: [{
|
|
144
146
|
type: Component,
|
|
@@ -146,15 +148,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
146
148
|
exportAs: 'kendoFormFieldSet',
|
|
147
149
|
selector: 'fieldset[kendoFormFieldSet]',
|
|
148
150
|
template: `
|
|
149
|
-
|
|
151
|
+
@if (legend) {
|
|
152
|
+
<legend class="k-form-legend">
|
|
150
153
|
{{ legend }}
|
|
151
|
-
|
|
154
|
+
</legend>
|
|
155
|
+
}
|
|
152
156
|
<div class="k-form-layout k-d-grid" [ngClass]="[columnsClass]" [ngStyle]="{'gap': guttersStyle}">
|
|
153
|
-
|
|
157
|
+
<ng-content></ng-content>
|
|
154
158
|
</div>
|
|
155
|
-
|
|
159
|
+
`,
|
|
156
160
|
standalone: true,
|
|
157
|
-
imports: [
|
|
161
|
+
imports: [NgClass, NgStyle],
|
|
158
162
|
}]
|
|
159
163
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.FormService }, { type: i0.ChangeDetectorRef }], propDecorators: { formFieldSetClass: [{
|
|
160
164
|
type: HostBinding,
|