@progress/kendo-angular-inputs 7.5.2-dev.202111191702 → 8.0.0-dev.202112251033

package/dist/es/colorpicker/contrast-validation.component.js

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
+import { AA_RATIO, AAA_RATIO } from './constants';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Component, Input } from '@angular/core';
 /**
@@ -28,7 +29,8 @@ var ContrastValidationComponent = /** @class */ (function () {
     });
     Object.defineProperty(ContrastValidationComponent.prototype, "contrastText", {
         get: function () {
-            return this.type + ": " + this.ratio.toFixed(1);
+            var ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+            return this.type + ": " + ratio.toFixed(1);
         },
         enumerable: true,
         configurable: true
@@ -37,18 +39,18 @@ var ContrastValidationComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", String)
     ], ContrastValidationComponent.prototype, "type", void 0);
-    tslib_1.__decorate([
-        Input(),
-        tslib_1.__metadata("design:type", Number)
-    ], ContrastValidationComponent.prototype, "ratio", void 0);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", Boolean)
     ], ContrastValidationComponent.prototype, "pass", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ContrastValidationComponent.prototype, "value", void 0);
     ContrastValidationComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoContrastValidation]',
-            template: "\n        <span>{{contrastText}}</span>\n                <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                    {{passMessage}}\n                    <span class=\"k-icon k-i-check\"></span>\n                </span>\n                <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                    {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n        </span>\n    "
+            template: "\n        <span>{{contrastText}}</span>\n        <ng-container *ngIf=\"value\">\n            <span class=\"k-contrast-validation k-text-success\" *ngIf=\"pass\">\n                {{passMessage}}\n                <span class=\"k-icon k-i-check\"></span>\n            </span>\n            <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!pass\">\n                {{failMessage}}\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n        </ng-container>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], ContrastValidationComponent);

package/dist/es/colorpicker/contrast.component.js

@@ -3,8 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Component, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { getContrastFromTwoRGBAs, getRGBA } from './utils';
 import { AA_RATIO, AAA_RATIO } from './constants';
 /**
@@ -13,8 +13,6 @@ import { AA_RATIO, AAA_RATIO } from './constants';
 var ContrastComponent = /** @class */ (function () {
     function ContrastComponent(localization) {
         this.localization = localization;
-        this.aaRatio = AA_RATIO;
-        this.aaaRatio = AAA_RATIO;
     }
     Object.defineProperty(ContrastComponent.prototype, "formatedRatio", {
         get: function () {
@@ -23,23 +21,23 @@ var ContrastComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ContrastComponent.prototype, "contrastRatioMessage", {
+    Object.defineProperty(ContrastComponent.prototype, "contrastRatioText", {
         get: function () {
-            return this.localization.get('contrastRatio');
+            return this.localization.get('contrastRatio') + ": " + (this.value ? this.formatedRatio : 'n/a');
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ContrastComponent.prototype, "satisfiesAACondition", {
         get: function () {
-            return this.contrastRatio >= this.aaRatio;
+            return this.contrastRatio >= AA_RATIO;
         },
         enumerable: true,
         configurable: true
     });
     Object.defineProperty(ContrastComponent.prototype, "satisfiesAAACondition", {
         get: function () {
-            return this.contrastRatio >= this.aaaRatio;
+            return this.contrastRatio >= AAA_RATIO;
         },
         enumerable: true,
         configurable: true
@@ -63,7 +61,7 @@ var ContrastComponent = /** @class */ (function () {
     ContrastComponent = tslib_1.__decorate([
         Component({
             selector: '[kendoContrastTool]',
-            template: "\n        <div class=\"k-contrast-ratio\">\n            <span class=\"k-contrast-ratio-text\">{{contrastRatioMessage}}: {{formatedRatio}}</span>\n            <span class=\"k-contrast-validation k-text-success\" *ngIf=\"satisfiesAACondition\">\n                <span class=\"k-icon k-i-check\"></span>\n                <span class=\"k-icon k-i-check\" *ngIf=\"satisfiesAAACondition\"></span>\n            </span>\n            <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!satisfiesAACondition\">\n                <span class=\"k-icon k-i-close\"></span>\n            </span>\n        </div>\n        <div kendoContrastValidation\n            type=\"AA\"\n            [ratio]=\"aaaRatio\"\n            [pass]=\"satisfiesAACondition\">\n        </div>\n        <div kendoContrastValidation\n            type=\"AAA\"\n            [ratio]=\"aaaRatio\"\n            [pass]=\"satisfiesAAACondition\">\n        </div>\n    "
+            template: "\n        <div class=\"k-contrast-ratio\">\n            <span class=\"k-contrast-ratio-text\">{{contrastRatioText}}</span>\n            <ng-container *ngIf=\"value\">\n                <span class=\"k-contrast-validation k-text-success\" *ngIf=\"satisfiesAACondition\">\n                    <span class=\"k-icon k-i-check\"></span>\n                    <span class=\"k-icon k-i-check\" *ngIf=\"satisfiesAAACondition\"></span>\n                </span>\n                <span class=\"k-contrast-validation k-text-error\" *ngIf=\"!satisfiesAACondition\">\n                    <span class=\"k-icon k-i-close\"></span>\n                </span>\n            </ng-container>\n        </div>\n        <div kendoContrastValidation\n            type=\"AA\"\n            [value]=\"value\"\n            [pass]=\"satisfiesAACondition\">\n        </div>\n        <div kendoContrastValidation\n            type=\"AAA\"\n            [value]=\"value\"\n            [pass]=\"satisfiesAAACondition\">\n        </div>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [LocalizationService])
     ], ContrastComponent);

package/dist/es/colorpicker/events/cancel-event.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ */
+var ColorPickerCancelEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(ColorPickerCancelEvent, _super);
+    function ColorPickerCancelEvent(originalEvent) {
+        var _this = _super.call(this) || this;
+        _this.originalEvent = originalEvent;
+        return _this;
+    }
+    return ColorPickerCancelEvent;
+}(PreventableEvent));
+export { ColorPickerCancelEvent };

package/dist/es/colorpicker/events/close-event.js

@@ -0,0 +1,17 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `close` event of the ColorPicker component.
+ */
+var ColorPickerCloseEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(ColorPickerCloseEvent, _super);
+    function ColorPickerCloseEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ColorPickerCloseEvent;
+}(PreventableEvent));
+export { ColorPickerCloseEvent };

package/dist/es/colorpicker/events/open-event.js

@@ -0,0 +1,17 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `open` event of the ColorPicker component.
+ */
+var ColorPickerOpenEvent = /** @class */ (function (_super) {
+    tslib_1.__extends(ColorPickerOpenEvent, _super);
+    function ColorPickerOpenEvent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ColorPickerOpenEvent;
+}(PreventableEvent));
+export { ColorPickerOpenEvent };

package/dist/es/colorpicker/events.js

@@ -0,0 +1,8 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export * from './events/cancel-event';
+export * from './events/close-event';
+export * from './events/open-event';
+export * from './events/active-color-click-event';

package/dist/es/colorpicker/flatcolorpicker-actions.component.js

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, HostBinding, EventEmitter, Output, ElementRef, ViewChild } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+/**
+ * @hidden
+ */
+var FlatColorPickerActionButtonsComponent = /** @class */ (function () {
+    function FlatColorPickerActionButtonsComponent(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.actionButtonClick = new EventEmitter();
+    }
+    FlatColorPickerActionButtonsComponent.prototype.getText = function (text) {
+        return this.localizationService.get(text);
+    };
+    FlatColorPickerActionButtonsComponent.prototype.onActionButtonClick = function (type, ev) {
+        var args = {
+            target: type,
+            originalEvent: ev
+        };
+        this.actionButtonClick.emit(args);
+    };
+    tslib_1.__decorate([
+        HostBinding('class.k-coloreditor-footer'),
+        HostBinding('class.k-actions'),
+        HostBinding('class.k-hstack'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerActionButtonsComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerActionButtonsComponent.prototype, "actionButtonClick", void 0);
+    tslib_1.__decorate([
+        ViewChild('last', { read: ElementRef, static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], FlatColorPickerActionButtonsComponent.prototype, "lastButton", void 0);
+    FlatColorPickerActionButtonsComponent = tslib_1.__decorate([
+        Component({
+            selector: '[kendoFlatColorPickerActionButtons]',
+            template: "\n        <button\n            class=\"k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base\"\n            [attr.title]=\"getText('cancelButton')\"\n            (click)=\"onActionButtonClick('cancel', $event)\"\n        >{{getText('cancelButton')}}</button>\n        <button #last\n            class=\"k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary\"\n            [attr.title]=\"getText('applyButton')\"\n            (click)=\"onActionButtonClick('apply', $event)\"\n        >{{getText('applyButton')}}</button>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [LocalizationService])
+    ], FlatColorPickerActionButtonsComponent);
+    return FlatColorPickerActionButtonsComponent;
+}());
+export { FlatColorPickerActionButtonsComponent };

package/dist/es/colorpicker/flatcolorpicker-header.component.js

@@ -0,0 +1,94 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewChildren, QueryList, ElementRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+/**
+ * @hidden
+ */
+var FlatColorPickerHeaderComponent = /** @class */ (function () {
+    function FlatColorPickerHeaderComponent(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.viewChange = new EventEmitter();
+        this.valuePaneClick = new EventEmitter();
+        this.clearButtonClick = new EventEmitter();
+    }
+    FlatColorPickerHeaderComponent.prototype.onViewButtonClick = function (view) {
+        this.activeView = view;
+        this.viewChange.emit(view);
+    };
+    Object.defineProperty(FlatColorPickerHeaderComponent.prototype, "viewButtons", {
+        get: function () {
+            return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FlatColorPickerHeaderComponent.prototype.getViewButtonIcon = function (view) {
+        return view === 'gradient' ? 'k-i-color-canvas' : 'k-i-palette';
+    };
+    FlatColorPickerHeaderComponent.prototype.getText = function (text) {
+        return this.localizationService.get(text);
+    };
+    tslib_1.__decorate([
+        HostBinding('class.k-coloreditor-header'),
+        HostBinding('class.k-hstack'),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerHeaderComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerHeaderComponent.prototype, "clearButton", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], FlatColorPickerHeaderComponent.prototype, "activeView", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Array)
+    ], FlatColorPickerHeaderComponent.prototype, "views", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], FlatColorPickerHeaderComponent.prototype, "preview", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], FlatColorPickerHeaderComponent.prototype, "value", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], FlatColorPickerHeaderComponent.prototype, "selection", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerHeaderComponent.prototype, "viewChange", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerHeaderComponent.prototype, "valuePaneClick", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], FlatColorPickerHeaderComponent.prototype, "clearButtonClick", void 0);
+    tslib_1.__decorate([
+        ViewChildren('viewButtons', { read: ElementRef }),
+        tslib_1.__metadata("design:type", QueryList)
+    ], FlatColorPickerHeaderComponent.prototype, "viewButtonsCollection", void 0);
+    tslib_1.__decorate([
+        ViewChild('clearButton', { read: ElementRef, static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], FlatColorPickerHeaderComponent.prototype, "clearButtonElement", void 0);
+    FlatColorPickerHeaderComponent = tslib_1.__decorate([
+        Component({
+            selector: '[kendoFlatColorPickerHeader]',
+            template: "\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <div *ngIf=\"viewButtons\" class=\"k-button-group k-button-group-flat\">\n                <button *ngFor=\"let view of views\"\n                    #viewButtons\n                    (click)=\"onViewButtonClick(view)\"\n                    class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button\"\n                    [attr.title]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-label]=\"getText(view === 'gradient' ? 'gradientView' : 'paletteView')\"\n                    [attr.aria-pressed]=\"activeView === view\"\n                    [ngClass]=\"activeView === view ? 'k-state-selected' : ''\"\n                >\n                    <span\n                        class=\"k-button-icon k-icon\"\n                        [ngClass]=\"getViewButtonIcon(view)\">\n                    </span>\n                </button>\n            </div>\n        </div>\n        <div class=\"k-spacer\"></div>\n        <div class=\"k-coloreditor-header-actions k-hstack\">\n            <button *ngIf=\"clearButton\"\n                #clearButton\n                class=\"k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset\"\n                [attr.aria-label]=\"getText('clearButton')\"\n                [attr.title]=\"getText('clearButton')\"\n                (click)=\"clearButtonClick.emit()\">\n                    <span class=\"k-button-icon k-icon k-i-reset-color\"></span>\n            </button>\n            <div class=\"k-coloreditor-preview k-vstack\" *ngIf=\"preview\">\n                <span\n                    class=\"k-coloreditor-preview-color k-color-preview\"\n                    [attr.title]=\"getText('previewColor')\"\n                    [style.background-color]=\"selection\">\n                </span>\n                <span class=\"k-coloreditor-current-color k-color-preview\"\n                    [style.background-color]=\"value\"\n                    [attr.title]=\"getText('revertSelection')\"\n                    (click)=\"valuePaneClick.emit($event)\">\n                </span>\n            </div>\n        </div>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [LocalizationService])
+    ], FlatColorPickerHeaderComponent);
+    return FlatColorPickerHeaderComponent;
+}());
+export { FlatColorPickerHeaderComponent };