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

package/dist/es2015/colorpicker/colorpicker.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 var ColorPickerComponent_1;
-import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone } from '@angular/core';
+import { Component, HostBinding, Input, Output, EventEmitter, ViewChild, ElementRef, TemplateRef, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, Renderer2 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FlatColorPickerComponent } from './flatcolorpicker.component';
 import { PopupService } from '@progress/kendo-angular-popup';
@@ -15,7 +15,7 @@ import { packageMetadata } from '../package-metadata';
 import { PALETTEPRESETS } from './models';
 import { ActiveColorClickEvent, ColorPickerCloseEvent, ColorPickerOpenEvent } from './events';
 import { parseColor } from './utils';
-import { isPresent } from '../common/utils';
+import { getStylingClasses, isPresent } from '../common/utils';
 import { ColorPickerLocalizationService } from './localization/colorpicker-localization.service';
 import { DEFAULT_ACCESSIBLE_PRESET, DEFAULT_PRESET } from './constants';
 let serial = 0;
@@ -26,11 +26,13 @@ let serial = 0;
  * which are rendered in its popup. It supports previewing the selected color, reverting it to its previous state or clearing it completely.
  */
 let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
-    constructor(popupService, cdr, localizationService, ngZone) {
+    constructor(host, popupService, cdr, localizationService, ngZone, renderer) {
+        this.host = host;
         this.popupService = popupService;
         this.cdr = cdr;
         this.localizationService = localizationService;
         this.ngZone = ngZone;
+        this.renderer = renderer;
         this.hostClasses = true;
         /**
          * @hidden
@@ -135,6 +137,9 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
         this._popupSettings = { animate: true };
         this._paletteSettings = {};
         this._gradientSettings = { opacity: true, delay: 0 };
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
         this.notifyNgTouched = () => { };
         this.notifyNgChanged = () => { };
         validatePackage(packageMetadata);
@@ -191,6 +196,58 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     get tabindex() {
         return !this.disabled ? this._tabindex : undefined;
     }
+    /**
+     * The size property specifies the font size and line height of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    set size(size) {
+        this.handleClasses(size, 'size');
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
+    /**
+     * The rounded property specifies the border radius of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
+    /**
+     * The fillMode property specifies the background and border styles of the ColorPicker
+     * ([see example]({% slug appearance_colorpicker %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `'flat'`
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     */
+    set fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * Indicates whether the ColorPicker popup is open.
      */
@@ -220,6 +277,12 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
             columns: this._paletteSettings.columns || presetColumns || 10
         };
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size', 'rounded', 'fillMode'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
     ngOnChanges(changes) {
         if (changes.format && changes.format.currentValue === 'name') {
             this.activeView = 'palette';
@@ -409,6 +472,16 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
     isEmpty() {
         return false;
     }
+    handleClasses(value, input) {
+        const elem = this.host.nativeElement;
+        const classes = getStylingClasses('picker', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
     popupBlurInvalid(ev) {
         const focusInPopupElement = this.popupRef.popupElement.contains(ev.relatedTarget);
         const wrapperClicked = ev.relatedTarget === this.wrapper.nativeElement;
@@ -492,6 +565,8 @@ let ColorPickerComponent = ColorPickerComponent_1 = class ColorPickerComponent {
 };
 tslib_1.__decorate([
     HostBinding('class.k-colorpicker'),
+    HostBinding('class.k-icon-picker'),
+    HostBinding('class.k-picker'),
     tslib_1.__metadata("design:type", Boolean)
 ], ColorPickerComponent.prototype, "hostClasses", void 0);
 tslib_1.__decorate([
@@ -567,6 +642,21 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ColorPickerComponent.prototype, "actionsLayout", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ColorPickerComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -675,9 +765,9 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
         <span
             #wrapper
             [ngClass]="{
-                'k-picker-wrap': true,
-                'k-state-disabled': this.disabled,
-                'k-state-focused': this.isFocused
+                'k-input-inner': true,
+                'k-disabled': this.disabled,
+                'k-focus': this.isFocused
             }"
             role="listbox"
             [attr.aria-expanded]="isOpen"
@@ -691,16 +781,21 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
             (mousedown)="$event.preventDefault()"
             (keydown)="handleWrapperKeyDown($event)"
         >
-            <span *ngIf="!iconStyles" class="k-selected-color" [style.background]="value" (click)="handleActiveColorClick()">
-                <span class="k-icon k-i-line" *ngIf="!value"></span>
-            </span>
-            <span *ngIf="iconStyles" class="k-tool-icon" [ngClass]="iconStyles" (click)="handleActiveColorClick()">
-                <span class="k-selected-color" [style.background-color]="value"></span>
-            </span>
-            <span class="k-select" (click)="togglePopup()">
-                <span class="k-icon k-i-arrow-s"></span>
+            <span
+                class="k-value-icon k-color-preview"
+                [ngClass]="{'k-icon-color-preview': iconStyles, 'k-no-color': !value}"
+                (click)="handleActiveColorClick()">
+                <span *ngIf="iconClass || icon" class="k-color-preview-icon k-icon" [ngClass]="iconStyles"></span>
+                <span class="k-color-preview-mask" [style.background-color]="value"></span>
             </span>
         </span>
+        <button
+            type="button"
+            class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button"
+            [attr.aria-label]="colorPickerAriaLabel"
+            (click)="togglePopup()">
+                <span class="k-button-icon k-icon k-i-arrow-s"></span>
+        </button>
         <ng-template #popupTemplate>
             <kendo-flatcolorpicker
                 #flatColorPicker
@@ -724,9 +819,11 @@ ColorPickerComponent = ColorPickerComponent_1 = tslib_1.__decorate([
         <ng-container #container></ng-container>
     `
     }),
-    tslib_1.__metadata("design:paramtypes", [PopupService,
+    tslib_1.__metadata("design:paramtypes", [ElementRef,
+        PopupService,
         ChangeDetectorRef,
         LocalizationService,
-        NgZone])
+        NgZone,
+        Renderer2])
 ], ColorPickerComponent);
 export { ColorPickerComponent };

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

@@ -44,12 +44,12 @@ FlatColorPickerActionButtonsComponent = tslib_1.__decorate([
         selector: '[kendoFlatColorPickerActionButtons]',
         template: `
         <button
-            class="k-coloreditor-cancel k-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-primary"
+            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>

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

@@ -88,7 +88,7 @@ FlatColorPickerHeaderComponent = tslib_1.__decorate([
                 <button *ngFor="let view of views"
                     #viewButtons
                     (click)="onViewButtonClick(view)"
-                    class="k-button k-icon-button k-flat"
+                    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"
@@ -105,7 +105,7 @@ FlatColorPickerHeaderComponent = tslib_1.__decorate([
         <div class="k-coloreditor-header-actions k-hstack">
             <button *ngIf="clearButton"
                 #clearButton
-                class="k-button k-icon-button k-flat k-coloreditor-reset"
+                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()">

package/dist/es2015/common/models/fillmode.d.ts

@@ -0,0 +1,13 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible fillMode options of the inputs.
+ *
+ * The possible values are:
+ * - `solid`
+ * - `flat`
+ * - `outline`
+ */
+export declare type InputFillMode = 'solid' | 'flat' | 'outline';

package/dist/es2015/common/models/fillmode.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/common/models/rounded.d.ts

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible rounded options of the inputs.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ * - `'full'`
+ */
+export declare type InputRounded = 'small' | 'medium' | 'large' | 'full';
+/**
+ * Represents the possible rounded options of the CheckBox.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ */
+export declare type CheckBoxRounded = 'small' | 'medium' | 'large';

package/dist/es2015/common/models/rounded.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/common/models/size.d.ts

@@ -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
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible size options of the inputs.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ * - `null`
+ */
+export declare type InputSize = 'small' | 'medium' | 'large' | null;

package/dist/es2015/common/models/size.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/common/models/styling-classes.d.ts

@@ -0,0 +1,11 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export interface InputStylingClasses {
+    toRemove?: string;
+    toAdd?: string;
+}

package/dist/es2015/common/models/styling-classes.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/common/models.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 './models/fillmode';
+export * from './models/rounded';
+export * from './models/size';
+export * from './models/styling-classes';

package/dist/es2015/common/models.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/common/utils.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { InputStylingClasses } from "./models";
 /**
  * @hidden
  *
@@ -26,3 +27,9 @@ export declare const requiresZoneOnBlur: (ngControl: any) => any;
  * @param max The inclusive upper bound number.
  */
 export declare const fitIntoBounds: (contender: number, min: number, max: number) => number;
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export declare const getStylingClasses: (componentType: any, stylingOption: string, previousValue: any, newValue: any) => InputStylingClasses;

package/dist/es2015/common/utils.js

@@ -32,3 +32,40 @@ export const fitIntoBounds = (contender, min, max) => {
     }
     return contender <= min ? min : contender >= max ? max : contender;
 };
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+const ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
+                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+            };
+        case 'rounded':
+            return {
+                toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
+                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+            };
+        case 'fillMode':
+            return {
+                toRemove: `k-${componentType}-${previousValue}`,
+                toAdd: newValue ? `k-${componentType}-${newValue}` : null
+            };
+        default:
+            break;
+    }
+};