@progress/kendo-angular-inputs 8.0.0-dev.202112161434 → 8.0.0-dev.202201121416

package/dist/npm/checkbox/checkbox.directive.js

@@ -6,6 +6,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
+var utils_1 = require("../common/utils");
 /**
  * Represents the directive that renders the [Kendo UI CheckBox]({% slug overview_checkbox %}) input component.
  * The directive is placed on input type="checkbox" elements.
@@ -16,17 +17,92 @@ var core_1 = require("@angular/core");
  * ```
  */
 var CheckBoxDirective = /** @class */ (function () {
-    function CheckBoxDirective() {
+    function CheckBoxDirective(renderer, hostElement) {
+        this.renderer = renderer;
+        this.hostElement = hostElement;
         this.kendoClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
     }
+    Object.defineProperty(CheckBoxDirective.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * The size property specifies the width and height of the CheckBox
+         * ([see example]({% slug appearance_checkboxdirective %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CheckBoxDirective.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the CheckBox
+         * ([see example]({% slug appearance_checkboxdirective %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CheckBoxDirective.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size', 'rounded'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
+    CheckBoxDirective.prototype.handleClasses = function (value, input) {
+        var elem = this.hostElement.nativeElement;
+        var classes = utils_1.getStylingClasses('checkbox', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
     tslib_1.__decorate([
         core_1.HostBinding('class.k-checkbox'),
         tslib_1.__metadata("design:type", Boolean)
     ], CheckBoxDirective.prototype, "kendoClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], CheckBoxDirective.prototype, "size", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], CheckBoxDirective.prototype, "rounded", null);
     CheckBoxDirective = tslib_1.__decorate([
         core_1.Directive({
             selector: 'input[kendoCheckBox]'
-        })
+        }),
+        tslib_1.__metadata("design:paramtypes", [core_1.Renderer2,
+            core_1.ElementRef])
     ], CheckBoxDirective);
     return CheckBoxDirective;
 }());

package/dist/npm/colorpicker/color-gradient.component.js

@@ -11,6 +11,7 @@ var rxjs_1 = require("rxjs");
 var operators_1 = require("rxjs/operators");
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
 var dom_utils_1 = require("../common/dom-utils");
 var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
@@ -18,6 +19,7 @@ var slider_component_1 = require("../slider/slider.component");
 var colorgradient_localization_service_1 = require("./localization/colorgradient-localization.service");
 var color_input_component_1 = require("./color-input.component");
 var constants_1 = require("./constants");
+var package_metadata_1 = require("../package-metadata");
 var serial = 0;
 /**
  * The ColorGradient component enables smooth color transitions and provides options for selecting specific colors over the drag handle.
@@ -97,6 +99,7 @@ var ColorGradientComponent = /** @class */ (function () {
         this.updateValues = new rxjs_1.Subject();
         this.notifyNgChanged = function () { };
         this.notifyNgTouched = function () { };
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
@@ -664,7 +667,7 @@ var ColorGradientComponent = /** @class */ (function () {
                     useValue: 'kendo.colorgradient'
                 }
             ],
-            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-flat k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
+            template: "\n        <ng-container kendoColorGradientLocalizedMessages\n            i18n-colorGradientNoColor=\"kendo.colorgradient.colorGradientNoColor|The aria-label applied to the ColorGradient component when the value is empty.\"\n            colorGradientNoColor=\"Colorgradient no color chosen\"\n            i18n-colorGradientHandle=\"kendo.colorgradient.colorGradientHandle|The title for the gradient color drag handle chooser.\"\n            colorGradientHandle=\"Choose color\"\n            i18n-clearButton=\"kendo.colorgradient.clearButton|The title for the clear button.\"\n            clearButton=\"Clear value\"\n            i18n-hueSliderHandle=\"kendo.colorgradient.hueSliderHandle|The title for the hue slider handle.\"\n            hueSliderHandle=\"Set hue\"\n            i18n-opacitySliderHandle=\"kendo.colorgradient.opacitySliderHandle|The title for the opacity slider handle.\"\n            opacitySliderHandle=\"Set opacity\"\n            i18n-passContrast=\"kendo.colorgradient.passContrast|The pass message for the contrast tool.\"\n            passContrast=\"Pass\"\n            i18n-failContrast=\"kendo.colorgradient.failContrast|The fail message for the contrast tool.\"\n            failContrast=\"Fail\"\n            i18n-contrastRatio=\"kendo.colorgradient.contrastRatio|The contrast ratio message for the contrast tool.\"\n            contrastRatio=\"Contrast ratio\"\n            i18n-formatButton=\"kendo.colorgradient.formatButton|The message for the input format toggle button.\"\n            formatButton=\"Change color format\">\n        </ng-container>\n        <div class=\"k-colorgradient-canvas k-hstack\">\n            <div class=\"k-hsv-rectangle\" [style.background]=\"backgroundColor\">\n                <div\n                    #gradientWrapper\n                    kendoDraggable\n                    class=\"k-hsv-gradient\"\n                    (click)=\"changePosition($event)\"\n                    (kendoPress)=\"handleDragPress($event)\"\n                    (kendoDrag)=\"onHandleDrag($event)\"\n                    (kendoRelease)=\"onHandleRelease()\">\n                    <div\n                        #gradientDragHandle\n                        class=\"k-hsv-draghandle k-draghandle\"\n                        tabindex=\"0\"\n                        [attr.title]=\"colorGradientHandleTitle\"\n                        [attr.aria-label]=\"colorGradientHandleAriaLabel\"\n                    >\n                    </div>\n                </div>\n                <svg kendoColorContrastSvg\n                    *ngIf=\"contrastToolVisible && gradientWrapper\"\n                    class=\"k-color-contrast-svg\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    [wrapper]=\"gradientWrapper ? gradientWrapper : undefined\"\n                    [hsva]=\"hsva\"\n                    [backgroundColor]=\"contrastTool\">\n                </svg>\n            </div>\n            <div class=\"k-hsv-controls k-hstack {{ clearButton ? 'k-sliders-wrap-clearable' : '' }}\">\n                <span class=\"k-clear-color k-button k-button-md k-button-flat k-button-flat-base k-button-icon\"\n                    *ngIf=\"clearButton\"\n                    (click)=\"reset()\"\n                    (keydown.enter)=\"reset()\"\n                    (keydown.space)=\"reset()\"\n                    [attr.aria-label]=\"clearButtonTitle\"\n                    [attr.title]=\"clearButtonTitle\"\n                    tabindex=\"0\">\n                    <span class=\"k-icon k-i-reset-color\"></span>\n                </span>\n                <kendo-slider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-hue-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"hueSliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"360\"\n                    [smallStep]=\"5\"\n                    [largeStep]=\"10\"\n                    [value]=\"hsva.value.h\"\n                    (valueChange)=\"handleHueSliderChange($event)\"\n                >\n                </kendo-slider>\n                <kendo-slider\n                    *ngIf=\"opacity\"\n                    #alphaSlider\n                    [ngClass]=\"{'k-align-self-end': clearButton}\"\n                    class=\"k-alpha-slider k-colorgradient-slider\"\n                    [dragHandleTitle]=\"opacitySliderTitle\"\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [showButtons]=\"false\"\n                    [tickPlacement]=\"'none'\"\n                    [vertical]=\"true\"\n                    [min]=\"0\"\n                    [max]=\"100\"\n                    [smallStep]=\"1\"\n                    [largeStep]=\"10\"\n                    [value]=\"alphaSliderValue\"\n                    (valueChange)=\"handleAlphaSliderChange($event)\"\n                >\n                </kendo-slider>\n            </div>\n        </div>\n        <kendo-colorinput  #inputs\n            [opacity]=\"opacity\"\n            [formatView]=\"format\"\n            [value]=\"value\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readonly\"\n            (valueChange)=\"handleInputsValueChange($event)\"\n        >\n        </kendo-colorinput>\n        <div class=\"k-colorgradient-color-contrast k-vbox\" *ngIf=\"contrastToolVisible\"\n            kendoContrastTool\n            [value]=\"value\"\n            [ratio]=\"contrastTool\">\n        </div>\n    ",
             styles: ["\n        .k-clear-color {\n            position: absolute;\n            top: 0;\n            left: 50%;\n            transform: translateX(-50%);\n        }\n        .k-colorgradient-slider.k-align-self-end {\n            height: 140px;\n        }\n\n        .k-color-contrast-svg {\n            position: absolute;\n            overflow: visible;\n            pointer-events: none;\n            left: 0px;\n            top: 0px;\n        }\n    "]
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,

package/dist/npm/colorpicker/color-input.component.js

@@ -184,7 +184,7 @@ var ColorInputComponent = /** @class */ (function () {
     ColorInputComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-colorinput',
-            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-icon-button k-flat\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-textbox k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
+            template: "\n        <div class=\"k-vstack\">\n            <button #toggleFormatButton\n                class=\"k-colorgradient-toggle-mode k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                [attr.aria-label]=\"formatButtonTitle\"\n                [attr.title]=\"formatButtonTitle\"\n            >\n                <span class=\"k-button-icon k-icon k-i-arrows-kpi\"></span>\n            </button>\n        </div>\n        <div *ngIf=\"formatView === 'hex'\" class=\"k-vstack\">\n            <input\n                #hexInput\n                [id]=\"focusableId\"\n                class=\"k-input k-textbox k-input-solid k-input-md k-rounded-md k-hex-value\"\n                [disabled]=\"disabled\"\n                [readonly]=\"readonly\"\n                [value]=\"hex || ''\"\n                (blur)=\"handleHexInputBlur()\"\n                (input)=\"handleHexValueChange(hexInput.value)\"\n            />\n            <label [for]=\"focusableId\" class=\"k-colorgradient-input-label\">HEX</label>\n        </div>\n        <ng-container *ngIf=\"formatView === 'rgba'\">\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #red\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.r\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"red.focusableId\" class=\"k-colorgradient-input-label\">R</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #green\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.g\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"green.focusableId\" class=\"k-colorgradient-input-label\">G</label>\n            </div>\n            <div class=\"k-vstack\">\n                <kendo-numerictextbox\n                    #blue\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"255\"\n                    [(value)]=\"rgba.b\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [format]=\"'n'\"\n                    [decimals]=\"0\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"blue.focusableId\" class=\"k-colorgradient-input-label\">B</label>\n            </div>\n            <div class=\"k-vstack\" *ngIf=\"opacity\">\n                <kendo-numerictextbox  #opacityInput\n                    #alpha\n                    [disabled]=\"disabled\"\n                    [readonly]=\"readonly\"\n                    [min]=\"0\"\n                    [max]=\"1\"\n                    [(value)]=\"rgba.a\"\n                    [autoCorrect]=\"true\"\n                    [spinners]=\"false\"\n                    [step]=\"0.01\"\n                    [format]=\"'n2'\"\n                    [decimals]=\"2\"\n                    (blur)=\"handleRgbaInputBlur()\"\n                    (valueChange)=\"handleRgbaValueChange()\">\n                </kendo-numerictextbox>\n                <label [for]=\"alpha.focusableId\" class=\"k-colorgradient-input-label\">A</label>\n            </div>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.ElementRef,
             core_1.Renderer2,

package/dist/npm/colorpicker/color-palette.component.js

@@ -7,13 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var core_1 = require("@angular/core");
 var forms_1 = require("@angular/forms");
+var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var kendo_licensing_1 = require("@progress/kendo-licensing");
+var colorpalette_localization_service_1 = require("./localization/colorpalette-localization.service");
+var package_metadata_1 = require("../package-metadata");
 var models_1 = require("./models");
 var utils_1 = require("./utils");
 var utils_2 = require("../common/utils");
 var color_palette_service_1 = require("./services/color-palette.service");
-var kendo_angular_common_1 = require("@progress/kendo-angular-common");
-var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
-var colorpalette_localization_service_1 = require("./localization/colorpalette-localization.service");
 var DEFAULT_TILE_SIZE = 24;
 var DEFAULT_COLUMNS_COUNT = 10;
 var DEFAULT_PRESET = 'office';
@@ -87,6 +89,7 @@ var ColorPaletteComponent = /** @class */ (function () {
         this._tabindex = 0;
         this.notifyNgTouched = function () { };
         this.notifyNgChanged = function () { };
+        kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
         this.dynamicRTLSubscription = localizationService.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';