@progress/kendo-angular-buttons 7.0.0-next.202111120840 → 7.0.2-dev.202201201235

package/{chip → dist/es2015/chip}/chip-list.component.d.ts

@@ -2,15 +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';
-import * as i0 from "@angular/core";
-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
@@ -25,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.
      */
@@ -34,16 +46,18 @@ export declare class ChipListComponent implements OnInit, AfterContentInit, OnDe
      */
     remove: EventEmitter<ChipListRemoveEvent>;
     chips: QueryList<ChipComponent>;
-    get single(): boolean;
-    get multiple(): boolean;
+    readonly single: boolean;
+    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;
@@ -52,6 +66,5 @@ export declare class ChipListComponent implements OnInit, AfterContentInit, OnDe
      */
     private setSelection;
     private clearSelection;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ChipListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChipListComponent, "kendo-chip-list, kendo-chiplist", never, { "selection": "selection"; }, { "selectedChange": "selectedChange"; "remove": "remove"; }, ["chips"], ["*"]>;
+    private handleClasses;
 }

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

@@ -0,0 +1,197 @@
+/**-----------------------------------------------------------------------------------------
+* 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, 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, getStylingClasses } from '../util';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
+let ChipListComponent = class ChipListComponent {
+    constructor(localizationService, renderer, element) {
+        this.localizationService = localizationService;
+        this.renderer = renderer;
+        this.element = element;
+        this.hostClass = true;
+        /**
+         * Sets the selection mode of the ChipList.
+         *
+         * The available values are:
+         * * `none` (default)
+         * * `single`
+         * * `multiple`
+         */
+        this.selection = 'none';
+        /**
+         * Fires each time when the ChipList selection is changed.
+         */
+        this.selectedChange = new EventEmitter();
+        /**
+         * Fires each time the user clicks on the remove icon of the Chip.
+         */
+        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';
+    }
+    get multiple() {
+        return this.selection === 'multiple';
+    }
+    /**
+     * @hidden
+     */
+    onClick($event) {
+        const target = $event.target;
+        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) {
+            const removeEventArgs = { sender: this, originalEvent: $event, removedChip: chip };
+            this.remove.emit(removeEventArgs);
+        }
+        if (this.selection !== 'none' && clickedChip && !isRemoveClicked) {
+            this.setSelection(chip);
+        }
+    }
+    ngOnInit() {
+        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');
+        });
+    }
+    ngOnDestroy() {
+        if (this.dynamicRTLSubscription) {
+            this.dynamicRTLSubscription.unsubscribe();
+        }
+    }
+    selectedChips() {
+        return this.chips.reduce((acc, cur, idx) => { return cur.selected ? acc.concat(idx) : acc; }, []);
+    }
+    /**
+     * Updates the selection on click of a Chip. Emits events.
+     */
+    setSelection(chip) {
+        if (this.selection === 'single') {
+            this.clearSelection(chip);
+        }
+        chip.selected = !chip.selected;
+        this.selectedChange.emit(this.selectedChips());
+    }
+    clearSelection(chip) {
+        this.chips.forEach((c) => {
+            if (chip !== c) {
+                c.selected = false;
+            }
+        });
+    }
+    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'),
+    tslib_1.__metadata("design:type", Boolean)
+], ChipListComponent.prototype, "hostClass", void 0);
+tslib_1.__decorate([
+    HostBinding('attr.dir'),
+    tslib_1.__metadata("design:type", String)
+], ChipListComponent.prototype, "direction", void 0);
+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)
+], ChipListComponent.prototype, "selectedChange", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ChipListComponent.prototype, "remove", void 0);
+tslib_1.__decorate([
+    ContentChildren(ChipComponent),
+    tslib_1.__metadata("design:type", QueryList)
+], ChipListComponent.prototype, "chips", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-selection-single'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ChipListComponent.prototype, "single", null);
+tslib_1.__decorate([
+    HostBinding('class.k-selection-multiple'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ChipListComponent.prototype, "multiple", null);
+tslib_1.__decorate([
+    HostBinding('attr.role'),
+    tslib_1.__metadata("design:type", String)
+], ChipListComponent.prototype, "role", void 0);
+tslib_1.__decorate([
+    HostListener('click', ['$event']),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [Object]),
+    tslib_1.__metadata("design:returntype", void 0)
+], ChipListComponent.prototype, "onClick", null);
+ChipListComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-chiplist, kendo-chip-list',
+        template: `
+        <ng-content></ng-content>
+    `,
+        providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.chiplist'
+            }
+        ]
+    }),
+    tslib_1.__metadata("design:paramtypes", [LocalizationService,
+        Renderer2,
+        ElementRef])
+], ChipListComponent);
+export { ChipListComponent };

package/dist/es2015/chip/chip-remove-event-args.interface.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/{chip → dist/es2015/chip}/chip.component.d.ts

@@ -5,10 +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 * as i0 from "@angular/core";
+import { ChipFillMode, ChipRounded, ChipSize, ChipThemeColor } from '../common/models';
 /**
  * Displays a Chip that represents an input, attribute or an action.
  */
@@ -17,14 +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:
-     * * `filled`
-     * * `outlined`
-     */
-    look: ChipLook;
     /**
      * Sets the label text of the Chip.
      */
@@ -41,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;
     /**
@@ -60,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 padding 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.
      */
@@ -83,18 +111,20 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      */
     contentClick: EventEmitter<ChipContentClickEvent>;
     tabIndex: number;
-    get ariaChecked(): boolean;
+    readonly ariaChecked: boolean;
     hostClass: boolean;
-    get outlineClass(): boolean;
-    get filledClass(): boolean;
-    get hasIconClass(): boolean;
-    get disabledClass(): boolean;
-    get selectedClass(): boolean;
-    get focusedClass(): boolean;
+    readonly hasIconClass: boolean;
+    readonly disabledClass: boolean;
+    readonly selectedClass: boolean;
+    readonly focusedClass: boolean;
     /**
      * @hidden
      */
     direction: string;
+    private _size;
+    private _rounded;
+    private _fillMode;
+    private _themeColor;
     private focused;
     private dynamicRTLSubscription;
     private detachDomEvents;
@@ -105,19 +135,19 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
     /**
      * @hidden
      */
-    get iconClasses(): string[];
+    readonly kendoIconClass: string;
     /**
      * @hidden
      */
-    get selectedIconClasses(): string;
+    readonly customIconClass: string;
     /**
      * @hidden
      */
-    get removeIconClasses(): string;
+    readonly chipAvatarClass: string;
     /**
      * @hidden
      */
-    typeClass(): string;
+    readonly removeIconClass: string;
     /**
      * Focuses the Chip component.
      */
@@ -131,6 +161,10 @@ export declare class ChipComponent implements OnInit, AfterViewInit {
      */
     onRemoveClick(e: any): void;
     private attachElementEventHandlers;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "kendo-chip", never, { "look": "look"; "label": "label"; "icon": "icon"; "iconClass": "iconClass"; "selected": "selected"; "selectedIcon": "selectedIcon"; "removable": "removable"; "removeIcon": "removeIcon"; "type": "type"; "disabled": "disabled"; }, { "remove": "remove"; "contentClick": "contentClick"; }, never, ["*"]>;
+    /**
+     * @hidden
+     */
+    private verifyIconSettings;
+    private handleClasses;
+    private handleThemeColor;
 }