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

package/dist/es2015/colorpicker/constants.d.ts

@@ -23,3 +23,15 @@ export declare const AAA_RATIO = 7;
  * @hidden
  */
 export declare const AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_PRESET = "office";
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ACCESSIBLE_PRESET = "accessible";
+/**
+ * @hidden
+ */
+export declare const STEP_COUNT = 16;

package/dist/es2015/colorpicker/constants.js

@@ -22,3 +22,15 @@ export const AAA_RATIO = 7.0;
  * @hidden
  */
 export const AA_RATIO = 4.5;
+/**
+ * @hidden
+ */
+export const DEFAULT_PRESET = 'office';
+/**
+ * @hidden
+ */
+export const DEFAULT_ACCESSIBLE_PRESET = 'accessible';
+/**
+ * @hidden
+ */
+export const STEP_COUNT = 16;

package/dist/es2015/colorpicker/contrast-validation.component.d.ts

@@ -9,8 +9,8 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 export declare class ContrastValidationComponent {
     private localization;
     type: string;
-    ratio: number;
     pass: boolean;
+    value: string;
     constructor(localization: LocalizationService);
     readonly passMessage: string;
     readonly failMessage: string;

package/dist/es2015/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';
 /**
@@ -19,34 +20,37 @@ let ContrastValidationComponent = class ContrastValidationComponent {
         return this.localization.get('failContrast');
     }
     get contrastText() {
-        return `${this.type}: ${this.ratio.toFixed(1)}`;
+        let ratio = this.type === 'AA' ? AA_RATIO : AAA_RATIO;
+        return `${this.type}: ${ratio.toFixed(1)}`;
     }
 };
 tslib_1.__decorate([
     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: `
         <span>{{contrastText}}</span>
-                <span class="k-contrast-validation k-text-success" *ngIf="pass">
-                    {{passMessage}}
-                    <span class="k-icon k-i-check"></span>
-                </span>
-                <span class="k-contrast-validation k-text-error" *ngIf="!pass">
-                    {{failMessage}}
+        <ng-container *ngIf="value">
+            <span class="k-contrast-validation k-text-success" *ngIf="pass">
+                {{passMessage}}
+                <span class="k-icon k-i-check"></span>
+            </span>
+            <span class="k-contrast-validation k-text-error" *ngIf="!pass">
+                {{failMessage}}
                 <span class="k-icon k-i-close"></span>
-        </span>
+            </span>
+        </ng-container>
     `
     }),
     tslib_1.__metadata("design:paramtypes", [LocalizationService])

package/dist/es2015/colorpicker/contrast.component.d.ts

@@ -10,11 +10,9 @@ export declare class ContrastComponent {
     private localization;
     value: string;
     ratio: string;
-    aaRatio: number;
-    aaaRatio: number;
     constructor(localization: LocalizationService);
     readonly formatedRatio: string;
-    readonly contrastRatioMessage: string;
+    readonly contrastRatioText: string;
     readonly satisfiesAACondition: boolean;
     readonly satisfiesAAACondition: boolean;
     readonly contrastRatio: number;

package/dist/es2015/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,20 +13,18 @@ import { AA_RATIO, AAA_RATIO } from './constants';
 let ContrastComponent = class ContrastComponent {
     constructor(localization) {
         this.localization = localization;
-        this.aaRatio = AA_RATIO;
-        this.aaaRatio = AAA_RATIO;
     }
     get formatedRatio() {
         return this.contrastRatio.toFixed(2);
     }
-    get contrastRatioMessage() {
-        return this.localization.get('contrastRatio');
+    get contrastRatioText() {
+        return `${this.localization.get('contrastRatio')}: ${this.value ? this.formatedRatio : 'n/a'}`;
     }
     get satisfiesAACondition() {
-        return this.contrastRatio >= this.aaRatio;
+        return this.contrastRatio >= AA_RATIO;
     }
     get satisfiesAAACondition() {
-        return this.contrastRatio >= this.aaaRatio;
+        return this.contrastRatio >= AAA_RATIO;
     }
     get contrastRatio() {
         let contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
@@ -46,23 +44,25 @@ ContrastComponent = tslib_1.__decorate([
         selector: '[kendoContrastTool]',
         template: `
         <div class="k-contrast-ratio">
-            <span class="k-contrast-ratio-text">{{contrastRatioMessage}}: {{formatedRatio}}</span>
-            <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
-                <span class="k-icon k-i-check"></span>
-                <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
-            </span>
-            <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
-                <span class="k-icon k-i-close"></span>
-            </span>
+            <span class="k-contrast-ratio-text">{{contrastRatioText}}</span>
+            <ng-container *ngIf="value">
+                <span class="k-contrast-validation k-text-success" *ngIf="satisfiesAACondition">
+                    <span class="k-icon k-i-check"></span>
+                    <span class="k-icon k-i-check" *ngIf="satisfiesAAACondition"></span>
+                </span>
+                <span class="k-contrast-validation k-text-error" *ngIf="!satisfiesAACondition">
+                    <span class="k-icon k-i-close"></span>
+                </span>
+            </ng-container>
         </div>
         <div kendoContrastValidation
             type="AA"
-            [ratio]="aaaRatio"
+            [value]="value"
             [pass]="satisfiesAACondition">
         </div>
         <div kendoContrastValidation
             type="AAA"
-            [ratio]="aaaRatio"
+            [value]="value"
             [pass]="satisfiesAAACondition">
         </div>
     `

package/dist/es2015/colorpicker/events/cancel-event.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ */
+export declare class ColorPickerCancelEvent extends PreventableEvent {
+    /**
+     * The DOM event that triggered the `cancel` event.
+     */
+    originalEvent: any;
+    constructor(originalEvent: any);
+}

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

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `cancel` event of the ColorPicker and FlatColorPicker components.
+ */
+export class ColorPickerCancelEvent extends PreventableEvent {
+    constructor(originalEvent) {
+        super();
+        this.originalEvent = originalEvent;
+    }
+}

package/dist/es2015/colorpicker/events/close-event.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `close` event of the ColorPicker component.
+ */
+export declare class ColorPickerCloseEvent extends PreventableEvent {
+}

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

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `close` event of the ColorPicker component.
+ */
+export class ColorPickerCloseEvent extends PreventableEvent {
+}

package/dist/es2015/colorpicker/events/kendo-drag-event.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es2015/colorpicker/events/open-event.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `open` event of the ColorPicker component.
+ */
+export declare class ColorPickerOpenEvent extends PreventableEvent {
+}

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

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PreventableEvent } from "@progress/kendo-angular-common";
+/**
+ * Arguments for the `open` event of the ColorPicker component.
+ */
+export class ColorPickerOpenEvent extends PreventableEvent {
+}

package/dist/es2015/colorpicker/events.d.ts

@@ -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/es2015/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/es2015/colorpicker/flatcolorpicker-actions.component.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, ElementRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+/**
+ * @hidden
+ */
+export declare class FlatColorPickerActionButtonsComponent {
+    localizationService: LocalizationService;
+    hostClasses: boolean;
+    actionButtonClick: EventEmitter<any>;
+    lastButton: ElementRef;
+    constructor(localizationService: LocalizationService);
+    getText(text: string): string;
+    onActionButtonClick(type: string, ev: any): void;
+}

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

@@ -0,0 +1,60 @@
+/**-----------------------------------------------------------------------------------------
+* 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
+ */
+let FlatColorPickerActionButtonsComponent = class FlatColorPickerActionButtonsComponent {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.actionButtonClick = new EventEmitter();
+    }
+    getText(text) {
+        return this.localizationService.get(text);
+    }
+    onActionButtonClick(type, ev) {
+        let 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: `
+        <button
+            class="k-coloreditor-cancel k-button k-button-md k-button-solid k-button-solid-base"
+            [attr.title]="getText('cancelButton')"
+            (click)="onActionButtonClick('cancel', $event)"
+        >{{getText('cancelButton')}}</button>
+        <button #last
+            class="k-coloreditor-apply k-button k-button-md k-button-solid k-button-solid-primary"
+            [attr.title]="getText('applyButton')"
+            (click)="onActionButtonClick('apply', $event)"
+        >{{getText('applyButton')}}</button>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService])
+], FlatColorPickerActionButtonsComponent);
+export { FlatColorPickerActionButtonsComponent };

package/dist/es2015/colorpicker/flatcolorpicker-header.component.d.ts

@@ -0,0 +1,30 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter, QueryList, ElementRef } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { ColorPickerView } from './models';
+/**
+ * @hidden
+ */
+export declare class FlatColorPickerHeaderComponent {
+    private localizationService;
+    hostClasses: boolean;
+    clearButton: boolean;
+    activeView: ColorPickerView;
+    views: Array<ColorPickerView>;
+    preview: boolean;
+    value: string;
+    selection: string;
+    viewChange: EventEmitter<string>;
+    valuePaneClick: EventEmitter<any>;
+    clearButtonClick: EventEmitter<any>;
+    viewButtonsCollection: QueryList<ElementRef>;
+    clearButtonElement: ElementRef;
+    constructor(localizationService: LocalizationService);
+    onViewButtonClick(view: ColorPickerView): void;
+    readonly viewButtons: boolean;
+    getViewButtonIcon(view: string): string;
+    getText(text: string): string;
+}

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

@@ -0,0 +1,131 @@
+/**-----------------------------------------------------------------------------------------
+* 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
+ */
+let FlatColorPickerHeaderComponent = class FlatColorPickerHeaderComponent {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.hostClasses = true;
+        this.viewChange = new EventEmitter();
+        this.valuePaneClick = new EventEmitter();
+        this.clearButtonClick = new EventEmitter();
+    }
+    onViewButtonClick(view) {
+        this.activeView = view;
+        this.viewChange.emit(view);
+    }
+    get viewButtons() {
+        return this.views && this.views.indexOf('gradient') >= 0 && this.views.indexOf('palette') >= 0;
+    }
+    getViewButtonIcon(view) {
+        return view === 'gradient' ? 'k-i-color-canvas' : 'k-i-palette';
+    }
+    getText(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: `
+        <div class="k-coloreditor-header-actions k-hstack">
+            <div *ngIf="viewButtons" class="k-button-group k-button-group-flat">
+                <button *ngFor="let view of views"
+                    #viewButtons
+                    (click)="onViewButtonClick(view)"
+                    class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button"
+                    [attr.title]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-label]="getText(view === 'gradient' ? 'gradientView' : 'paletteView')"
+                    [attr.aria-pressed]="activeView === view"
+                    [ngClass]="activeView === view ? 'k-state-selected' : ''"
+                >
+                    <span
+                        class="k-button-icon k-icon"
+                        [ngClass]="getViewButtonIcon(view)">
+                    </span>
+                </button>
+            </div>
+        </div>
+        <div class="k-spacer"></div>
+        <div class="k-coloreditor-header-actions k-hstack">
+            <button *ngIf="clearButton"
+                #clearButton
+                class="k-button k-button-md k-button-flat k-button-flat-base k-icon-button k-coloreditor-reset"
+                [attr.aria-label]="getText('clearButton')"
+                [attr.title]="getText('clearButton')"
+                (click)="clearButtonClick.emit()">
+                    <span class="k-button-icon k-icon k-i-reset-color"></span>
+            </button>
+            <div class="k-coloreditor-preview k-vstack" *ngIf="preview">
+                <span
+                    class="k-coloreditor-preview-color k-color-preview"
+                    [attr.title]="getText('previewColor')"
+                    [style.background-color]="selection">
+                </span>
+                <span class="k-coloreditor-current-color k-color-preview"
+                    [style.background-color]="value"
+                    [attr.title]="getText('revertSelection')"
+                    (click)="valuePaneClick.emit($event)">
+                </span>
+            </div>
+        </div>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService])
+], FlatColorPickerHeaderComponent);
+export { FlatColorPickerHeaderComponent };