@progress/kendo-angular-inputs 8.0.9-dev.202203231216 → 9.0.0-dev.202204191046

package/esm2015/colorpicker/contrast.component.js

@@ -0,0 +1,95 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { getContrastFromTwoRGBAs, getRGBA } from './utils';
+import { AA_RATIO, AAA_RATIO } from './constants';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./contrast-validation.component";
+import * as i3 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ContrastComponent {
+    constructor(localization) {
+        this.localization = localization;
+    }
+    get formatedRatio() {
+        return this.contrastRatio.toFixed(2);
+    }
+    get contrastRatioText() {
+        return `${this.localization.get('contrastRatio')}: ${this.value ? this.formatedRatio : 'n/a'}`;
+    }
+    get satisfiesAACondition() {
+        return this.contrastRatio >= AA_RATIO;
+    }
+    get satisfiesAAACondition() {
+        return this.contrastRatio >= AAA_RATIO;
+    }
+    get contrastRatio() {
+        let contrast = getContrastFromTwoRGBAs(getRGBA(this.value), getRGBA(this.ratio));
+        return contrast;
+    }
+}
+ContrastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ContrastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ContrastComponent, selector: "[kendoContrastTool]", inputs: { value: "value", ratio: "ratio" }, ngImport: i0, template: `
+        <div class="k-contrast-ratio">
+            <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"
+            [value]="value"
+            [pass]="satisfiesAACondition">
+        </div>
+        <div kendoContrastValidation
+            type="AAA"
+            [value]="value"
+            [pass]="satisfiesAAACondition">
+        </div>
+    `, isInline: true, components: [{ type: i2.ContrastValidationComponent, selector: "[kendoContrastValidation]", inputs: ["type", "pass", "value"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ContrastComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoContrastTool]',
+                    template: `
+        <div class="k-contrast-ratio">
+            <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"
+            [value]="value"
+            [pass]="satisfiesAACondition">
+        </div>
+        <div kendoContrastValidation
+            type="AAA"
+            [value]="value"
+            [pass]="satisfiesAAACondition">
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { value: [{
+                type: Input
+            }], ratio: [{
+                type: Input
+            }] } });

package/{dist/es2015 → esm2015}/colorpicker/events/kendo-drag-event.js

@@ -2,3 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+export {};

package/esm2015/colorpicker/flatcolorpicker-actions.component.js

@@ -0,0 +1,77 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, EventEmitter, Output, ElementRef, ViewChild } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+/**
+ * @hidden
+ */
+export 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);
+    }
+}
+FlatColorPickerActionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerActionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerActionButtonsComponent, selector: "[kendoFlatColorPickerActionButtons]", outputs: { actionButtonClick: "actionButtonClick" }, host: { properties: { "class.k-coloreditor-footer": "this.hostClasses", "class.k-actions": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "lastButton", first: true, predicate: ["last"], descendants: true, read: ElementRef }], ngImport: i0, 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)"
+            type="button"
+        >{{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)"
+            type="button"
+        >{{getText('applyButton')}}</button>
+    `, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerActionButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    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)"
+            type="button"
+        >{{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)"
+            type="button"
+        >{{getText('applyButton')}}</button>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-coloreditor-footer']
+            }, {
+                type: HostBinding,
+                args: ['class.k-actions']
+            }, {
+                type: HostBinding,
+                args: ['class.k-hstack']
+            }], actionButtonClick: [{
+                type: Output
+            }], lastButton: [{
+                type: ViewChild,
+                args: ['last', { read: ElementRef, static: false }]
+            }] } });

package/esm2015/colorpicker/flatcolorpicker-header.component.js

@@ -0,0 +1,161 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ViewChildren, ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@angular/common";
+/**
+ * @hidden
+ */
+export 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);
+    }
+}
+FlatColorPickerHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerHeaderComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FlatColorPickerHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FlatColorPickerHeaderComponent, selector: "[kendoFlatColorPickerHeader]", inputs: { clearButton: "clearButton", activeView: "activeView", views: "views", preview: "preview", value: "value", selection: "selection" }, outputs: { viewChange: "viewChange", valuePaneClick: "valuePaneClick", clearButtonClick: "clearButtonClick" }, host: { properties: { "class.k-coloreditor-header": "this.hostClasses", "class.k-hstack": "this.hostClasses" } }, viewQueries: [{ propertyName: "clearButtonElement", first: true, predicate: ["clearButton"], descendants: true, read: ElementRef }, { propertyName: "viewButtonsCollection", predicate: ["viewButtons"], descendants: true, read: ElementRef }], ngImport: i0, 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
+                    type="button"
+                    (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
+                type="button"
+                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>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FlatColorPickerHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    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
+                    type="button"
+                    (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
+                type="button"
+                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>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-coloreditor-header']
+            }, {
+                type: HostBinding,
+                args: ['class.k-hstack']
+            }], clearButton: [{
+                type: Input
+            }], activeView: [{
+                type: Input
+            }], views: [{
+                type: Input
+            }], preview: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], viewChange: [{
+                type: Output
+            }], valuePaneClick: [{
+                type: Output
+            }], clearButtonClick: [{
+                type: Output
+            }], viewButtonsCollection: [{
+                type: ViewChildren,
+                args: ['viewButtons', { read: ElementRef }]
+            }], clearButtonElement: [{
+                type: ViewChild,
+                args: ['clearButton', { read: ElementRef, static: false }]
+            }] } });