@progress/kendo-angular-buttons 6.4.1 → 7.0.0-dev.202201180832

package/dist/es2015/button/button.service.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 import { Injectable } from '@angular/core';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 /**
  * @hidden
  */
@@ -13,16 +13,12 @@ let KendoButtonService = class KendoButtonService {
      * @hidden
      */
     constructor() {
-        this.buttonLookChange = new BehaviorSubject('default');
         this.buttonClicked = new Subject();
         this.buttonClicked$ = this.buttonClicked.asObservable();
     }
     click(button) {
         this.buttonClicked.next(button);
     }
-    setButtonLook(look) {
-        this.buttonLookChange.next(look);
-    }
 };
 KendoButtonService = tslib_1.__decorate([
     Injectable()

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

@@ -7,7 +7,6 @@ import { EventEmitter, QueryList, OnInit, OnDestroy, AfterContentChecked, AfterV
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ButtonGroupSelection } from '../button/selection-settings';
 import { KendoButtonService } from '../button/button.service';
-import { ButtonLook } from '../button-look';
 import { PreventableEvent } from '../preventable-event';
 /**
  * Represents the Kendo UI ButtonGroup component for Angular.
@@ -39,17 +38,6 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
      * - The buttons acquire the same width.
      */
     width: string;
-    /**
-     * Changes the visual appearance by using alternative styling options
-     * ([more information and examples]({% slug styling_buttongroup %})).
-     * The `look` property of the ButtonGroup takes precedence over the `look` property
-     * of the individual buttons that are part of the group.
-     *
-     * The available values are:
-     * * `flat`
-     * * `outline`
-     */
-    look: ButtonLook;
     /**
      * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
      */
@@ -67,9 +55,6 @@ export declare class ButtonGroupComponent implements OnInit, OnDestroy, AfterCon
     readonly wrapperClass: boolean;
     readonly disabledClass: boolean;
     readonly stretchedClass: boolean;
-    readonly isFlat: boolean;
-    readonly isBare: boolean;
-    readonly isOutline: boolean;
     readonly getRole: string;
     readonly dir: string;
     readonly ariaDisabled: boolean;

package/dist/es2015/buttongroup/buttongroup.component.js

@@ -10,6 +10,8 @@ import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
 import { isPresent } from '../util';
 import { PreventableEvent } from '../preventable-event';
+import { packageMetadata } from '../package-metadata';
+import { validatePackage } from '@progress/kendo-licensing';
 /**
  * @hidden
  */
@@ -25,23 +27,13 @@ let ButtonGroupComponent = class ButtonGroupComponent {
          * By default, the selection mode of the ButtonGroup is set to `multiple`.
          */
         this.selection = 'multiple';
-        /**
-         * Changes the visual appearance by using alternative styling options
-         * ([more information and examples]({% slug styling_buttongroup %})).
-         * The `look` property of the ButtonGroup takes precedence over the `look` property
-         * of the individual buttons that are part of the group.
-         *
-         * The available values are:
-         * * `flat`
-         * * `outline`
-         */
-        this.look = 'default';
         /**
          * Fires every time keyboard navigation occurs.
          */
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        validatePackage(packageMetadata);
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
     }
     /**
@@ -63,15 +55,6 @@ let ButtonGroupComponent = class ButtonGroupComponent {
     get stretchedClass() {
         return !!this.width;
     }
-    get isFlat() {
-        return this.look === 'flat';
-    }
-    get isBare() {
-        return this.look === 'bare';
-    }
-    get isOutline() {
-        return this.look === 'outline';
-    }
     get getRole() {
         return this.isSelectionSingle() ? 'radiogroup' : 'group';
     }
@@ -116,7 +99,6 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         }
     }
     ngOnInit() {
-        this.service.setButtonLook(this.look);
         this.subscription = this.service.buttonClicked$.subscribe((button) => {
             let newSelectionValue;
             if (this.isSelectionSingle()) {
@@ -130,7 +112,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
             if (button.togglable) {
                 button.setSelected(newSelectionValue);
             }
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
         });
     }
     ngOnChanges(change) {
@@ -145,10 +127,10 @@ let ButtonGroupComponent = class ButtonGroupComponent {
     ngAfterContentInit() {
         this.buttons.forEach((button) => {
             if (button.selected) {
-                button.setAttribute(tabindex, "0");
+                button.setAttribute(tabindex, '0');
             }
             else {
-                button.setAttribute(tabindex, "-1");
+                button.setAttribute(tabindex, '-1');
             }
         });
     }
@@ -192,24 +174,24 @@ let ButtonGroupComponent = class ButtonGroupComponent {
     deactivate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(false);
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     }
     activate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(true);
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     }
     defocus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     }
     focus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     }
@@ -236,10 +218,6 @@ tslib_1.__decorate([
     Input('width'),
     tslib_1.__metadata("design:type", String)
 ], ButtonGroupComponent.prototype, "width", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ButtonGroupComponent.prototype, "look", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Number),
@@ -259,7 +237,7 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonGroupComponent.prototype, "wrapperClass", null);
 tslib_1.__decorate([
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonGroupComponent.prototype, "disabledClass", null);
@@ -268,21 +246,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], ButtonGroupComponent.prototype, "stretchedClass", null);
-tslib_1.__decorate([
-    HostBinding('class.k-button-group-flat'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "isFlat", null);
-tslib_1.__decorate([
-    HostBinding('class.k-button-group-bare'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "isBare", null);
-tslib_1.__decorate([
-    HostBinding('class.k-button-group-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], ButtonGroupComponent.prototype, "isOutline", null);
 tslib_1.__decorate([
     HostBinding('attr.role'),
     tslib_1.__metadata("design:type", String),

package/dist/es2015/chip/chip-list.component.d.ts

@@ -2,14 +2,16 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { QueryList, EventEmitter, OnDestroy, OnInit, Renderer2, AfterContentInit } from '@angular/core';
+import { QueryList, EventEmitter, OnDestroy, OnInit, Renderer2, AfterContentInit, AfterViewInit, ElementRef } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ChipComponent } from './chip.component';
 import { ChipListSelection } from './models/selection';
 import { ChipListRemoveEvent } from './chip-list-remove-event-args.interface';
-export declare class ChipListComponent implements OnInit, AfterContentInit, OnDestroy {
+import { ChipListSize } from '../common/models';
+export declare class ChipListComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy {
     private localizationService;
     private renderer;
+    private element;
     hostClass: boolean;
     /**
      * @hidden
@@ -24,6 +26,17 @@ export declare class ChipListComponent implements OnInit, AfterContentInit, OnDe
      * * `multiple`
      */
     selection: ChipListSelection;
+    /**
+     * The size property specifies the gap between the Chips in the ChipList
+     * ([see example]({% slug appearance_chiplist %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: ChipListSize;
     /**
      * Fires each time when the ChipList selection is changed.
      */
@@ -37,12 +50,14 @@ export declare class ChipListComponent implements OnInit, AfterContentInit, OnDe
     readonly multiple: boolean;
     role: string;
     private dynamicRTLSubscription;
+    private _size;
     /**
      * @hidden
      */
     onClick($event: any): void;
-    constructor(localizationService: LocalizationService, renderer: Renderer2);
+    constructor(localizationService: LocalizationService, renderer: Renderer2, element: ElementRef);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     private selectedChips;
@@ -51,4 +66,5 @@ export declare class ChipListComponent implements OnInit, AfterContentInit, OnDe
      */
     private setSelection;
     private clearSelection;
+    private handleClasses;
 }

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

@@ -3,14 +3,17 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-import { Component, Input, HostBinding, ContentChildren, QueryList, EventEmitter, Output, HostListener, Renderer2 } from '@angular/core';
+import { Component, Input, HostBinding, ContentChildren, QueryList, EventEmitter, Output, HostListener, Renderer2, ElementRef } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { ChipComponent } from './chip.component';
-import { closest } from '../util';
+import { closest, getStylingClasses } from '../util';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
 let ChipListComponent = class ChipListComponent {
-    constructor(localizationService, renderer) {
+    constructor(localizationService, renderer, element) {
         this.localizationService = localizationService;
         this.renderer = renderer;
+        this.element = element;
         this.hostClass = true;
         /**
          * Sets the selection mode of the ChipList.
@@ -30,8 +33,27 @@ let ChipListComponent = class ChipListComponent {
          */
         this.remove = new EventEmitter();
         this.role = 'listbox';
+        this._size = 'medium';
+        validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    /**
+     * The size property specifies the gap between the Chips in the ChipList
+     * ([see example]({% slug appearance_chiplist %}#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;
+    }
     get single() {
         return this.selection === 'single';
     }
@@ -43,7 +65,7 @@ let ChipListComponent = class ChipListComponent {
      */
     onClick($event) {
         const target = $event.target;
-        const isRemoveClicked = closest(target, '.k-remove-icon');
+        const isRemoveClicked = closest(target, '.k-chip-remove-action');
         const clickedChip = closest(target, '.k-chip');
         const chip = this.chips.find((chip) => clickedChip === chip.element.nativeElement);
         if (isRemoveClicked && clickedChip) {
@@ -58,6 +80,12 @@ let ChipListComponent = class ChipListComponent {
         this.dynamicRTLSubscription = this.localizationService.changes
             .subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
     }
+    ngAfterViewInit() {
+        const stylingInputs = ['size'];
+        stylingInputs.forEach(input => {
+            this.handleClasses(this[input], input);
+        });
+    }
     ngAfterContentInit() {
         this.chips.forEach((chip) => {
             this.renderer.setAttribute(chip.element.nativeElement, 'role', 'option');
@@ -88,6 +116,16 @@ let ChipListComponent = class ChipListComponent {
             }
         });
     }
+    handleClasses(value, input) {
+        const elem = this.element.nativeElement;
+        const classes = getStylingClasses('chip-list', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 };
 tslib_1.__decorate([
     HostBinding('class.k-chip-list'),
@@ -101,6 +139,11 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
 ], ChipListComponent.prototype, "selection", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ChipListComponent.prototype, "size", null);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -135,7 +178,7 @@ tslib_1.__decorate([
 ], ChipListComponent.prototype, "onClick", null);
 ChipListComponent = tslib_1.__decorate([
     Component({
-        selector: 'kendo-chip-list, kendo-chiplist',
+        selector: 'kendo-chiplist, kendo-chip-list',
         template: `
         <ng-content></ng-content>
     `,
@@ -143,10 +186,12 @@ ChipListComponent = tslib_1.__decorate([
             LocalizationService,
             {
                 provide: L10N_PREFIX,
-                useValue: 'kendo.chip-list'
+                useValue: 'kendo.chiplist'
             }
         ]
     }),
-    tslib_1.__metadata("design:paramtypes", [LocalizationService, Renderer2])
+    tslib_1.__metadata("design:paramtypes", [LocalizationService,
+        Renderer2,
+        ElementRef])
 ], ChipListComponent);
 export { ChipListComponent };

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

@@ -5,9 +5,8 @@
 import { EventEmitter, ElementRef, Renderer2, AfterViewInit, OnInit, NgZone } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ChipRemoveEvent } from './chip-remove-event-args.interface';
-import { ChipLook } from './models/chip-look';
-import { ChipType } from './models/type';
 import { ChipContentClickEvent } from './chip-content-click-event-args.interface';
+import { ChipFillMode, ChipRounded, ChipSize, ChipThemeColor } from '../common/models';
 /**
  * Displays a Chip that represents an input, attribute or an action.
  */
@@ -16,16 +15,6 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
     private renderer;
     private ngZone;
     private 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).
-     */
-    look: ChipLook;
     /**
      * Sets the label text of the Chip.
      */
@@ -42,17 +31,18 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      */
     iconClass: string;
     /**
-     * Specifies the selected state of the Chip.
+     * The avatarClass allows the usage of avatar icons rendered in the Chip.
      */
-    selected: boolean;
+    avatarClass: string;
     /**
-     * Specifies a custom select icon that will be rendered when the Chip is selected.
-     * [see example]({% slug icons %})
+     * Specifies the selected state of the Chip.
+     * @default false
      */
-    selectedIcon: string;
+    selected: boolean;
     /**
      * Specifies if the Chip will be removable or not.
      * If the property is set to `true`, the Chip renders a remove icon.
+     * @default false
      */
     removable: boolean;
     /**
@@ -61,20 +51,57 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      */
     removeIcon: string;
     /**
-     * Specifies the Chip type.
+     * If set to `true`, the Chip will be disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * The size property specifies the height, padding and line height of the Chip
+     * ([see example]({% slug appearance_chip %}#toc-size)).
      *
      * The possible values are:
-     * - `none` (default)
-     * - `success`
-     * - `error`
-     * - `warning`
-     * - `info`
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
      */
-    type: ChipType;
+    size: ChipSize;
     /**
-     * If set to `true`, the Chip will be disabled.
+     * 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`
      */
-    disabled: boolean;
+    rounded: ChipRounded;
+    /**
+     * 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`
+     */
+    fillMode: ChipFillMode;
+    /**
+     * 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`
+     */
+    themeColor: ChipThemeColor;
     /**
      * Fires each time the user clicks the remove icon of the Chip.
      */
@@ -86,8 +113,6 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
     tabIndex: number;
     readonly ariaChecked: boolean;
     hostClass: boolean;
-    readonly outlineClass: boolean;
-    readonly solidClass: boolean;
     readonly hasIconClass: boolean;
     readonly disabledClass: boolean;
     readonly selectedClass: boolean;
@@ -96,6 +121,10 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      * @hidden
      */
     direction: string;
+    private _size;
+    private _rounded;
+    private _fillMode;
+    private _themeColor;
     private focused;
     private dynamicRTLSubscription;
     private detachDomEvents;
@@ -106,19 +135,19 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
     /**
      * @hidden
      */
-    readonly iconClasses: string[];
+    readonly kendoIconClass: string;
     /**
      * @hidden
      */
-    readonly selectedIconClasses: string;
+    readonly customIconClass: string;
     /**
      * @hidden
      */
-    readonly removeIconClasses: string;
+    readonly chipAvatarClass: string;
     /**
      * @hidden
      */
-    typeClass(): string;
+    readonly removeIconClass: string;
     /**
      * Focuses the Chip component.
      */
@@ -132,4 +161,10 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      */
     onRemoveClick(e: any): void;
     private attachElementEventHandlers;
+    /**
+     * @hidden
+     */
+    private verifyIconSettings;
+    private handleClasses;
+    private handleThemeColor;
 }