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

package/dist/es/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
  */
@@ -26,23 +28,13 @@ var ButtonGroupComponent = /** @class */ (function () {
          * 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(function (_a) {
             var rtl = _a.rtl;
             return _this.direction = rtl ? 'rtl' : 'ltr';
@@ -83,27 +75,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isFlat", {
-        get: function () {
-            return this.look === 'flat';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isBare", {
-        get: function () {
-            return this.look === 'bare';
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ButtonGroupComponent.prototype, "isOutline", {
-        get: function () {
-            return this.look === 'outline';
-        },
-        enumerable: true,
-        configurable: true
-    });
     Object.defineProperty(ButtonGroupComponent.prototype, "getRole", {
         get: function () {
             return this.isSelectionSingle() ? 'radiogroup' : 'group';
@@ -169,7 +140,6 @@ var ButtonGroupComponent = /** @class */ (function () {
     };
     ButtonGroupComponent.prototype.ngOnInit = function () {
         var _this = this;
-        this.service.setButtonLook(this.look);
         this.subscription = this.service.buttonClicked$.subscribe(function (button) {
             var newSelectionValue;
             if (_this.isSelectionSingle()) {
@@ -183,7 +153,7 @@ var ButtonGroupComponent = /** @class */ (function () {
             if (button.togglable) {
                 button.setSelected(newSelectionValue);
             }
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
         });
     };
     ButtonGroupComponent.prototype.ngOnChanges = function (change) {
@@ -199,10 +169,10 @@ var ButtonGroupComponent = /** @class */ (function () {
     ButtonGroupComponent.prototype.ngAfterContentInit = function () {
         this.buttons.forEach(function (button) {
             if (button.selected) {
-                button.setAttribute(tabindex, "0");
+                button.setAttribute(tabindex, '0');
             }
             else {
-                button.setAttribute(tabindex, "-1");
+                button.setAttribute(tabindex, '-1');
             }
         });
     };
@@ -246,24 +216,24 @@ var ButtonGroupComponent = /** @class */ (function () {
     ButtonGroupComponent.prototype.deactivate = function (buttons) {
         buttons.forEach(function (button) {
             button.setSelected(false);
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     };
     ButtonGroupComponent.prototype.activate = function (buttons) {
         buttons.forEach(function (button) {
             button.setSelected(true);
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     };
     ButtonGroupComponent.prototype.defocus = function (buttons) {
         buttons.forEach(function (button) {
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     };
     ButtonGroupComponent.prototype.focus = function (buttons) {
         buttons.forEach(function (button) {
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     };
@@ -289,10 +259,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         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),
@@ -312,7 +278,7 @@ var ButtonGroupComponent = /** @class */ (function () {
         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);
@@ -321,21 +287,6 @@ var ButtonGroupComponent = /** @class */ (function () {
         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/es/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';
 var ChipListComponent = /** @class */ (function () {
-    function ChipListComponent(localizationService, renderer) {
+    function ChipListComponent(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,31 @@ var ChipListComponent = /** @class */ (function () {
          */
         this.remove = new EventEmitter();
         this.role = 'listbox';
+        this._size = 'medium';
+        validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
+    Object.defineProperty(ChipListComponent.prototype, "size", {
+        get: function () {
+            return this._size;
+        },
+        /**
+         * 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: function (size) {
+            this.handleClasses(size, 'size');
+            this._size = size;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(ChipListComponent.prototype, "single", {
         get: function () {
             return this.selection === 'single';
@@ -51,7 +77,7 @@ var ChipListComponent = /** @class */ (function () {
      */
     ChipListComponent.prototype.onClick = function ($event) {
         var target = $event.target;
-        var isRemoveClicked = closest(target, '.k-remove-icon');
+        var isRemoveClicked = closest(target, '.k-chip-remove-action');
         var clickedChip = closest(target, '.k-chip');
         var chip = this.chips.find(function (chip) { return clickedChip === chip.element.nativeElement; });
         if (isRemoveClicked && clickedChip) {
@@ -70,6 +96,13 @@ var ChipListComponent = /** @class */ (function () {
             return _this.direction = rtl ? 'rtl' : 'ltr';
         });
     };
+    ChipListComponent.prototype.ngAfterViewInit = function () {
+        var _this = this;
+        var stylingInputs = ['size'];
+        stylingInputs.forEach(function (input) {
+            _this.handleClasses(_this[input], input);
+        });
+    };
     ChipListComponent.prototype.ngAfterContentInit = function () {
         var _this = this;
         this.chips.forEach(function (chip) {
@@ -101,6 +134,16 @@ var ChipListComponent = /** @class */ (function () {
             }
         });
     };
+    ChipListComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.element.nativeElement;
+        var 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)
@@ -113,6 +156,11 @@ var ChipListComponent = /** @class */ (function () {
         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)
@@ -147,17 +195,19 @@ var ChipListComponent = /** @class */ (function () {
     ], ChipListComponent.prototype, "onClick", null);
     ChipListComponent = tslib_1.__decorate([
         Component({
-            selector: 'kendo-chip-list, kendo-chiplist',
+            selector: 'kendo-chiplist, kendo-chip-list',
             template: "\n        <ng-content></ng-content>\n    ",
             providers: [
                 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);
     return ChipListComponent;
 }());