@progress/kendo-angular-buttons 6.4.0 → 7.0.0-dev.202201101733

package/dist/es2015/chip/chip.component.js

@@ -3,12 +3,12 @@
 * 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, ElementRef, Renderer2, NgZone } from '@angular/core';
+import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, NgZone, isDevMode } from '@angular/core';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { closest } from '../util';
+import { closest, getStylingClasses, getThemeColorClasses } from '../util';
 /**
  * Displays a Chip that represents an input, attribute or an action.
  */
@@ -18,38 +18,20 @@ let ChipComponent = class ChipComponent {
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.localizationService = localizationService;
-        /**
-         * Changes the visual appearance by using alternative styling options.
-         *
-         * The available values are:
-         * * `solid`
-         * * `outline`
-         * * `filled` (The `filled` option will be deprecated. To apply identical styling, use `solid` instead).
-         * * `outlined` (The `outlined` option will be deprecated. To apply identical styling, use `outline` instead).
-         */
-        this.look = 'solid';
         /**
          * Specifies the selected state of the Chip.
+         * @default false
          */
         this.selected = false;
         /**
          * Specifies if the Chip will be removable or not.
          * If the property is set to `true`, the Chip renders a remove icon.
+         * @default false
          */
         this.removable = false;
-        /**
-         * Specifies the Chip type.
-         *
-         * The possible values are:
-         * - `none` (default)
-         * - `success`
-         * - `error`
-         * - `warning`
-         * - `info`
-         */
-        this.type = 'none';
         /**
          * If set to `true`, the Chip will be disabled.
+         * @default false
          */
         this.disabled = false;
         /**
@@ -62,21 +44,90 @@ let ChipComponent = class ChipComponent {
         this.contentClick = new EventEmitter();
         this.tabIndex = 0;
         this.hostClass = true;
+        this._size = 'medium';
+        this._rounded = 'medium';
+        this._fillMode = 'solid';
+        this._themeColor = 'base';
         this.focused = false;
         validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
-    get ariaChecked() {
-        return this.selected;
+    /**
+     * The size property specifies the height, padding and line height of the Chip
+     * ([see example]({% slug appearance_chip %}#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 Chip
+     * ([see example]({% slug appearance_chip %}#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 Chip
+     * ([see example]({% slug appearance_chip %}#toc-fillMode)).
+     *
+     * The possible values are:
+     * * `'solid'` (default)
+     * * `'outline'`
+     * * `null`
+     */
+    set fillMode(fillMode) {
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
+    /**
+     * The Chip allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug appearance_chip %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `'base'` (default)
+     * * `'info'`
+     * * `'success'`
+     * * `'warning'`
+     * * `'error'`
+     * * `null`
+     */
+    set themeColor(themeColor) {
+        this.handleThemeColor(themeColor);
+        this._themeColor = themeColor;
     }
-    get outlineClass() {
-        return this.look === 'outline' || this.look === 'outlined';
+    get themeColor() {
+        return this._themeColor;
     }
-    get solidClass() {
-        return this.look === 'solid' || this.look === 'filled';
+    get ariaChecked() {
+        return this.selected;
     }
     get hasIconClass() {
-        return this.icon || this.iconClass ? true : false;
+        return this.icon || this.iconClass || this.avatarClass ? true : false;
     }
     get disabledClass() {
         return this.disabled;
@@ -101,54 +152,41 @@ let ChipComponent = class ChipComponent {
     }
     ngAfterViewInit() {
         const chip = this.element.nativeElement;
-        const typeClass = this.typeClass();
-        if (this.type !== 'none') {
-            this.renderer.addClass(chip, typeClass);
-        }
+        const stylingOptions = ['size', 'rounded', 'fillMode'];
+        stylingOptions.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
         this.attachElementEventHandlers(chip);
     }
     /**
      * @hidden
      */
-    get iconClasses() {
-        const classes = [];
-        if (this.iconClass) {
-            classes.push(`${this.iconClass}`);
-        }
-        if (this.icon) {
-            classes.push(`k-icon k-i-${this.icon}`);
-        }
-        return classes;
+    get kendoIconClass() {
+        this.verifyIconSettings([this.iconClass, this.avatarClass]);
+        return `k-i-${this.icon}`;
     }
     /**
      * @hidden
      */
-    get selectedIconClasses() {
-        if (this.selectedIcon) {
-            return `${this.selectedIcon}`;
-        }
-        return `k-icon k-i-check`;
+    get customIconClass() {
+        this.verifyIconSettings([this.icon, this.avatarClass]);
+        return `${this.iconClass}`;
     }
     /**
      * @hidden
      */
-    get removeIconClasses() {
-        if (this.removeIcon) {
-            return `${this.removeIcon}`;
-        }
-        return `k-icon k-i-close-circle`;
+    get chipAvatarClass() {
+        this.verifyIconSettings([this.icon, this.iconClass]);
+        return `${this.avatarClass}`;
     }
     /**
      * @hidden
      */
-    typeClass() {
-        return {
-            'none': '',
-            'success': 'k-chip-success',
-            'warning': 'k-chip-warning',
-            'error': 'k-chip-error',
-            'info': 'k-chip-info'
-        }[this.type];
+    get removeIconClass() {
+        if (this.removeIcon) {
+            return `${this.removeIcon}`;
+        }
+        return `k-i-close-circle`;
     }
     /**
      * Focuses the Chip component.
@@ -183,7 +221,7 @@ let ChipComponent = class ChipComponent {
                 this.renderer.removeClass(chip, 'k-focus');
             });
             const contentClickListener = this.renderer.listen(chip, 'click', (e) => {
-                const isRemoveClicked = closest(e.target, '.k-remove-icon');
+                const isRemoveClicked = closest(e.target, '.k-chip-remove-action');
                 if (!isRemoveClicked) {
                     this.ngZone.run(() => {
                         this.contentClick.emit({ sender: this, originalEvent: e });
@@ -197,11 +235,43 @@ let ChipComponent = class ChipComponent {
             };
         });
     }
+    /**
+     * @hidden
+     */
+    verifyIconSettings(iconsToCheck) {
+        if (isDevMode()) {
+            if (iconsToCheck.filter(icon => icon !== null && icon !== undefined).length > 0) {
+                this.renderer.removeClass(this.element.nativeElement, 'k-chip-has-icon');
+                throw new Error('Invalid configuration: Having multiple icons is not supported. Only a single icon on a chip can be displayed.');
+            }
+        }
+    }
+    handleClasses(value, input) {
+        const elem = this.element.nativeElement;
+        const classes = getStylingClasses('chip', input, this[input], value);
+        if (input === 'fillMode') {
+            this.handleThemeColor(this.themeColor, this[input], value);
+        }
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
+    handleThemeColor(value, prevFillMode, fillMode) {
+        const elem = this.element.nativeElement;
+        const removeFillMode = prevFillMode ? prevFillMode : this.fillMode;
+        const addFillMode = fillMode ? fillMode : this.fillMode;
+        const themeColorClass = getThemeColorClasses('chip', removeFillMode, addFillMode, this.themeColor, value);
+        this.renderer.removeClass(elem, themeColorClass.toRemove);
+        if (addFillMode !== null && fillMode !== null) {
+            if (themeColorClass.toAdd) {
+                this.renderer.addClass(elem, themeColorClass.toAdd);
+            }
+        }
+    }
 };
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ChipComponent.prototype, "look", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
@@ -216,12 +286,12 @@ tslib_1.__decorate([
 ], ChipComponent.prototype, "iconClass", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ChipComponent.prototype, "selected", void 0);
+    tslib_1.__metadata("design:type", String)
+], ChipComponent.prototype, "avatarClass", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", String)
-], ChipComponent.prototype, "selectedIcon", void 0);
+    tslib_1.__metadata("design:type", Boolean)
+], ChipComponent.prototype, "selected", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
@@ -230,14 +300,30 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ChipComponent.prototype, "removeIcon", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ChipComponent.prototype, "type", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean)
 ], ChipComponent.prototype, "disabled", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ChipComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ChipComponent.prototype, "rounded", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ChipComponent.prototype, "fillMode", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ChipComponent.prototype, "themeColor", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -259,16 +345,6 @@ tslib_1.__decorate([
     HostBinding('class.k-chip'),
     tslib_1.__metadata("design:type", Boolean)
 ], ChipComponent.prototype, "hostClass", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-chip-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ChipComponent.prototype, "outlineClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-chip-solid'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ChipComponent.prototype, "solidClass", null);
 tslib_1.__decorate([
     HostBinding('class.k-chip-has-icon'),
     tslib_1.__metadata("design:type", Boolean),
@@ -298,20 +374,27 @@ ChipComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-chip',
         template: `
-        <span class="k-selected-icon-wrapper">
-            <span *ngIf="selected"
-                class="k-selected-icon"
-                [ngClass]="selectedIconClasses"
-            >
-            </span>
+        <span
+            *ngIf="icon"
+            class="k-chip-icon k-icon"
+            [ngClass]="kendoIconClass"
+        >
         </span>
 
-        <span *ngIf="icon || iconClass"
+        <span
+            *ngIf="iconClass"
             class="k-chip-icon"
-            [ngClass]="iconClasses"
+            [ngClass]="customIconClass"
         >
         </span>
 
+        <span
+            *ngIf="avatarClass"
+            class="k-chip-avatar k-avatar k-rounded-full"
+        >
+            <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
+        </span>
+
         <span class="k-chip-content">
             <span class="k-chip-label" *ngIf="label">
                 {{ label }}
@@ -319,11 +402,17 @@ ChipComponent = tslib_1.__decorate([
             <ng-content *ngIf="!label"></ng-content>
         </span>
 
-        <span *ngIf="removable"
-            class="k-remove-icon"
-            (click)="onRemoveClick($event)"
-        >
-            <span [ngClass]="removeIconClasses"></span>
+        <span class="k-chip-actions">
+            <span class="k-chip-action k-chip-remove-action"
+                *ngIf="removable"
+                (click)="onRemoveClick($event)"
+                >
+                <span
+                    class="k-icon"
+                    [ngClass]="removeIconClass"
+                >
+                </span>
+            </span>
         </span>
     `,
         providers: [

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

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* 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 buttons.
+ */
+export declare type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link';
+/**
+ * Represents the possible fillMode options of the Chip.
+ */
+export declare type ChipFillMode = 'solid' | 'outline';

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

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* 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 buttons.
+ */
+export declare type ButtonRounded = 'small' | 'medium' | 'large' | 'full';
+/**
+ * Represents the possible rounded options of the Chip.
+ */
+export declare type ChipRounded = 'small' | 'medium' | 'large' | 'full';

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/shape.d.ts

@@ -3,14 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the shape of the Button.
- *
- * The possible values are:
- * * `pill`
- * * `circle`
- * * `rounded`
- * * `rectangle`
- * * `square`
+ * Represents the possible shapes of the buttons.
  *
  */
-export declare type ButtonShape = 'pill' | 'circle' | 'rounded' | 'rectangle' | 'square';
+export declare type ButtonShape = 'rectangle' | 'square';

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

@@ -3,12 +3,15 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the size of the Button.
- *
- * The possible values are:
- * * `small`
- * * `medium`
- * * `large`
+ * Specifies the possible sizes of the buttons.
  *
  */
 export declare type ButtonSize = 'small' | 'medium' | 'large';
+/**
+ * Specifies the possible sizes of the Chip.
+ */
+export declare type ChipSize = 'small' | 'medium' | 'large';
+/**
+ * Specifies the possible gap between Chips in a ChipList.
+ */
+export declare type ChipListSize = 'small' | 'medium' | 'large';

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 ButtonStylingClasses {
+    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/theme-color.d.ts

@@ -3,13 +3,13 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Specifies the theme color of the Button.
+ * Specifies the possible theme colors of the buttons.
  *
  * The possible values are:
- * * `primary` (Default)—Applies coloring based on the `primary` theme color.
+ * * `base` —Applies coloring based on the `base` theme color.
+ * * `primary` —Applies coloring based on the `primary` theme color.
  * * `secondary`—Applies coloring based on the `secondary` theme color.
  * * `tertiary`— Applies coloring based on the `tertiary` theme color.
- * * `inherit`— Applies inherited coloring value.
  * * `info`—Applies coloring based on the `info` theme color.
  * * `success`— Applies coloring based on the `success` theme color.
  * * `warning`— Applies coloring based on the `warning` theme color.
@@ -19,4 +19,15 @@
  * * `inverse`— Applies coloring based on the `inverse` theme color.
  *
  */
-export declare type ButtonThemeColor = 'primary' | 'secondary' | 'tertiary' | 'inherit' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+export declare type ButtonThemeColor = 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+/**
+ * Specifies the possible theme colors of the Chip.
+ *
+ * The possible values are:
+ * * `base` —Applies coloring based on the `base` theme color.
+ * * `info`—Applies coloring based on the `info` theme color.
+ * * `success`— Applies coloring based on the `success` theme color.
+ * * `warning`— Applies coloring based on the `warning` theme color.
+ * * `error`— Applies coloring based on the `error` theme color.
+ */
+export declare type ChipThemeColor = 'base' | 'info' | 'success' | 'warning' | 'error';

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

package/dist/es2015/dropdownbutton/dropdownbutton.component.d.ts

@@ -13,7 +13,7 @@ import { ListComponent } from '../listbutton/list.component';
 import { FocusService } from '../focusable/focus.service';
 import { NavigationService } from '../navigation/navigation.service';
 import { PreventableEvent } from '../preventable-event';
-import { ButtonLook } from '../button-look';
+import { ButtonFillMode, ButtonRounded, ButtonSize, ButtonThemeColor, ButtonShape } from '../common/models';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -83,17 +83,70 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      */
     data: any;
     /**
-     * Adds visual weight to the default button and makes it primary.
+     * The size property specifies the width and height of the DropDownButton
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
      */
-    primary: boolean;
+    size: ButtonSize;
     /**
-     * Changes the visual appearance by using alternative styling options.
+     * The shape property specifies if the DropDownButton will be a square or rectangle.
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-shape)).
+     *
+     * The possible values are:
+     * * `'rectangle'` (default)
+     * * `'square'`
+     * * `null`
+     */
+    shape: ButtonShape;
+    /**
+     * The rounded property specifies the border radius of the DropDownButton
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `'full'`
+     * * `null`
+     */
+    rounded: ButtonRounded;
+    /**
+     * The fillMode property specifies the background and border styles of the DropDownButton
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
      *
      * The available values are:
+     * * `solid` (default)
      * * `flat`
      * * `outline`
+     * * `link`
+     * * `null`
      */
-    look: ButtonLook;
+    fillMode: ButtonFillMode;
+    /**
+     * The DropDownButton allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` —Applies coloring based on the `base` theme color. (default)
+     * * `primary` —Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `null` —Removes the default CSS class (no class would be rendered).
+     */
+    themeColor: ButtonThemeColor;
     /**
      * The CSS classes that will be rendered on the main button.
      * Supports the type of values that are supported by [`ngClass`]({{ site.data.urls.angular['ngclassapi'] }}).
@@ -138,8 +191,6 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
      */
     onBlur: EventEmitter<any>;
     readonly focused: boolean;
-    readonly isFlat: boolean;
-    readonly isOutline: boolean;
     readonly widgetClasses: boolean;
     readonly dir: Direction;
     /**