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

package/dist/es2015/dropdownbutton/dropdownbutton.component.js

@@ -71,17 +71,58 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
          */
         this.imageUrl = '';
         /**
-         * 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`
+         */
+        this.size = 'medium';
+        /**
+         * 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`
          */
-        this.primary = false;
+        this.shape = 'rectangle';
         /**
-         * Changes the visual appearance by using alternative styling options.
+         * The rounded property specifies the border radius of the DropDownButton
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
          *
-         * The available values are:
-         * * `flat`
-         * * `outline`
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
          */
-        this.look = 'default';
+        this.rounded = 'medium';
+        /**
+         * 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).
+         */
+        this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -109,6 +150,7 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
          */
         this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
         this.listId = guid();
+        this._fillMode = 'solid';
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -150,6 +192,24 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
     get data() {
         return this._data;
     }
+    /**
+     * 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`
+     */
+    set fillMode(fillMode) {
+        // Temporary workaround for missing 'clear' styles
+        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -191,12 +251,6 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
     get focused() {
         return this._isFocused && !this._disabled;
     }
-    get isFlat() {
-        return this.look === 'flat';
-    }
-    get isOutline() {
-        return this.look === 'outline';
-    }
     get widgetClasses() {
         return true;
     }
@@ -449,12 +503,25 @@ tslib_1.__decorate([
 ], DropDownButtonComponent.prototype, "data", null);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], DropDownButtonComponent.prototype, "primary", void 0);
+    tslib_1.__metadata("design:type", String)
+], DropDownButtonComponent.prototype, "size", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
-], DropDownButtonComponent.prototype, "look", void 0);
+], DropDownButtonComponent.prototype, "shape", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], DropDownButtonComponent.prototype, "rounded", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownButtonComponent.prototype, "fillMode", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], DropDownButtonComponent.prototype, "themeColor", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
@@ -484,20 +551,10 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", EventEmitter)
 ], DropDownButtonComponent.prototype, "onBlur", void 0);
 tslib_1.__decorate([
-    HostBinding('class.k-state-focused'),
+    HostBinding('class.k-focus'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], DropDownButtonComponent.prototype, "focused", null);
-tslib_1.__decorate([
-    HostBinding('class.k-flat'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "isFlat", null);
-tslib_1.__decorate([
-    HostBinding('class.k-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], DropDownButtonComponent.prototype, "isOutline", null);
 tslib_1.__decorate([
     HostBinding('class.k-dropdown-button'),
     tslib_1.__metadata("design:type", Boolean),
@@ -577,12 +634,17 @@ DropDownButtonComponent = tslib_1.__decorate([
             role="menu"
             type="button"
             [tabindex]="componentTabIndex"
-            [class.k-state-active]="active"
+            [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
+            [size]="size"
+            [shape]="shape"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
             (click)="openPopup()"
             (focus)="handleFocus()"
             (blur)="onButtonBlur()"
@@ -590,9 +652,7 @@ DropDownButtonComponent = tslib_1.__decorate([
             [attr.aria-expanded]="openState"
             [attr.aria-haspopup]="true"
             [attr.aria-owns]="listId"
-            [look]="look"
-            [primary]="primary"
-            >
+        >
             <ng-content></ng-content>
         </button>
         <ng-template #popupTemplate>
@@ -607,6 +667,7 @@ DropDownButtonComponent = tslib_1.__decorate([
                 (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
+                [size]="size"
             >
             </kendo-button-list>
         </ng-template>

package/dist/es2015/floatingactionbutton/dial-item.component.js

@@ -67,7 +67,7 @@ tslib_1.__decorate([
 ], DialItemComponent.prototype, "role", void 0);
 tslib_1.__decorate([
     HostBinding('attr.aria-disabled'),
-    HostBinding('class.k-state-disabled'),
+    HostBinding('class.k-disabled'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])
 ], DialItemComponent.prototype, "disabledClass", null);

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

@@ -20,6 +20,7 @@ import { ButtonShape } from '../common/models/shape';
 import { PreventableEvent } from '../preventable-event';
 import { DialItemTemplateDirective } from './templates/dial-item-template.directive';
 import { FloatingActionButtonTemplateDirective } from './templates/fab-template.directive';
+import { ButtonRounded } from '../common/models';
 /**
  *
  * Represents the [Kendo UI FloatingActionButton component for Angular]({% slug overview_floatingactionbutton %}).
@@ -48,18 +49,16 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
      * The theme color will be applied as background color of the component.
      *
      * The possible values are:
-     * * `primary` (Default)—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.
-     * * `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.
-     *
+     * * `'primary'` (Default)—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.
      */
     themeColor: ButtonThemeColor;
     /**
@@ -67,21 +66,28 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
      *
      * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     *
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
      */
     size: ButtonSize;
+    /**
+     * The rounded property specifies the border radius of the FloatingActionButton.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `'full'` (default)
+     * * `null`
+     */
+    rounded: ButtonRounded;
     /**
      * Specifies the shape of the FloatingActionButton
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-shape)).
      *
      * The possible values are:
-     * * `pill` (Default)—Applies border radius equal to half of the height of the FloatingActionButton.
-     * * `circle`—Applies circle shape on the FloatingActionButton.
-     * * `rectangle`—Applies rectangular shape on the FloatingActionButton.
-     * * `rounded`—Applies rounded shape on the FloatingActionButton.
+     * * `rectangle` (Default)—Applies rectangular shape on the FloatingActionButton.
      * * `square`—Applies square shape on the FloatingActionButton.
      *
      */
@@ -202,11 +208,13 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
     private _disabled;
     private _align;
     private _offset;
+    private _rounded;
     private subscriptions;
     private popupMouseDownListener;
     private rtl;
     private animationEnd;
     private popupRef;
+    private initialSetup;
     constructor(renderer: Renderer2, element: ElementRef, focusService: FocusService, navigationService: NavigationService, ngZone: NgZone, popupService: PopupService, builder: AnimationBuilder, localizationService: LocalizationService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -279,7 +287,6 @@ export declare class FloatingActionButtonComponent implements AfterViewInit, OnD
     private onNavigationEnterPress;
     private onNavigationClose;
     private alignClass;
-    private applyClasses;
     private toggleDialWithEvents;
     private openPopup;
     private closePopup;

package/dist/es2015/floatingactionbutton/floatingactionbutton.component.js

@@ -36,12 +36,16 @@ const SIZE_CLASSES = {
     large: 'k-fab-lg'
 };
 const SHAPE_CLASSES = {
-    pill: 'k-fab-pill',
-    circle: 'k-fab-circle',
     rectangle: 'k-fab-rectangle',
-    square: 'k-fab-square',
-    rounded: 'k-fab-rounded'
+    square: 'k-fab-square'
 };
+const ROUNDED_CLASSES = {
+    small: 'k-rounded-sm',
+    medium: 'k-rounded-md',
+    large: 'k-rounded-lg',
+    full: 'k-rounded-full'
+};
+const FILLMODE_CLASS = 'k-fab-solid';
 const DEFAULT_DURATION = 180;
 const DEFAULT_ITEM_GAP = 90;
 const DEFAULT_OFFSET = '16px';
@@ -121,13 +125,15 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         this.id = `k-${guid()}`;
         this._themeColor = 'primary';
         this._size = 'medium';
-        this._shape = 'pill';
+        this._shape = 'rectangle';
         this._disabled = false;
         this._align = { horizontal: 'end', vertical: 'bottom' };
         this._offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+        this._rounded = 'full';
         this.subscriptions = new Subscription();
         this.rtl = false;
         this.animationEnd = new EventEmitter();
+        this.initialSetup = true;
         validatePackage(packageMetadata);
         this.subscribeNavigationEvents();
         this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
@@ -147,18 +153,16 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * The theme color will be applied as background color of the component.
      *
      * The possible values are:
-     * * `primary` (Default)—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.
-     * * `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.
-     *
+     * * `'primary'` (Default)—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.
      */
     set themeColor(themeColor) {
         this.handleClasses(themeColor, 'themeColor');
@@ -172,10 +176,9 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-size)).
      *
      * The possible values are:
-     * * `small`
-     * * `medium` (Default)
-     * * `large`
-     *
+     * * `'small'`
+     * * `'medium'` (Default)
+     * * `'large'`
      */
     set size(size) {
         this.handleClasses(size, 'size');
@@ -184,15 +187,29 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
     get size() {
         return this._size;
     }
+    /**
+     * The rounded property specifies the border radius of the FloatingActionButton.
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'`
+     * * `'large'`
+     * * `'full'` (default)
+     * * `null`
+     */
+    set rounded(rounded) {
+        this.handleClasses(rounded, 'rounded');
+        this._rounded = rounded;
+    }
+    get rounded() {
+        return this._rounded;
+    }
     /**
      * Specifies the shape of the FloatingActionButton
      * ([see example]({% slug appearance_floatingactionbutton %}#toc-shape)).
      *
      * The possible values are:
-     * * `pill` (Default)—Applies border radius equal to half of the height of the FloatingActionButton.
-     * * `circle`—Applies circle shape on the FloatingActionButton.
-     * * `rectangle`—Applies rectangular shape on the FloatingActionButton.
-     * * `rounded`—Applies rounded shape on the FloatingActionButton.
+     * * `rectangle` (Default)—Applies rectangular shape on the FloatingActionButton.
      * * `square`—Applies square shape on the FloatingActionButton.
      *
      */
@@ -250,8 +267,10 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         return this.disabled ? (-1) : this.tabIndex;
     }
     ngAfterViewInit() {
-        this.applyClasses();
+        ['shape', 'size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
+        this.renderer.addClass(this.element.nativeElement, this.alignClass());
         this.offsetStyles();
+        this.initialSetup = false;
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
@@ -393,20 +412,24 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
         this.toggleDialWithEvents(false);
     }
     handleClasses(inputValue, input) {
-        if (isPresent(this.button) && (this[input] !== inputValue)) {
+        if (isPresent(this.button) && (this[input] !== inputValue || this.initialSetup)) {
             const button = this.button.nativeElement;
             const classesToRemove = {
-                themeColor: `k-fab-${this.themeColor}`,
+                themeColor: `${FILLMODE_CLASS}-${this.themeColor}`,
                 size: SIZE_CLASSES[this.size],
-                shape: SHAPE_CLASSES[this.shape]
+                shape: SHAPE_CLASSES[this.shape],
+                rounded: ROUNDED_CLASSES[this.rounded]
             };
             const classesToAdd = {
-                themeColor: `k-fab-${inputValue}`,
+                themeColor: inputValue ? `${FILLMODE_CLASS}-${inputValue}` : null,
                 size: SIZE_CLASSES[inputValue],
-                shape: SHAPE_CLASSES[inputValue]
+                shape: SHAPE_CLASSES[inputValue],
+                rounded: ROUNDED_CLASSES[inputValue]
             };
             this.renderer.removeClass(button, classesToRemove[input]);
-            this.renderer.addClass(button, classesToAdd[input]);
+            if (classesToAdd[input]) {
+                this.renderer.addClass(button, classesToAdd[input]);
+            }
         }
     }
     onEnterPressed() {
@@ -461,14 +484,6 @@ let FloatingActionButtonComponent = class FloatingActionButtonComponent {
     alignClass() {
         return `k-pos-${this.align.vertical}-${this.align.horizontal}`;
     }
-    applyClasses() {
-        const hostElement = this.element.nativeElement;
-        const button = this.button.nativeElement;
-        this.renderer.addClass(button, SHAPE_CLASSES[this.shape]);
-        this.renderer.addClass(button, `k-fab-${this.themeColor}`);
-        this.renderer.addClass(button, SIZE_CLASSES[this.size]);
-        this.renderer.addClass(hostElement, this.alignClass());
-    }
     toggleDialWithEvents(open) {
         if (open === this.isOpen) {
             return;
@@ -688,6 +703,11 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", String),
     tslib_1.__metadata("design:paramtypes", [String])
 ], FloatingActionButtonComponent.prototype, "size", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], FloatingActionButtonComponent.prototype, "rounded", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String),
@@ -784,8 +804,8 @@ FloatingActionButtonComponent = tslib_1.__decorate([
             [attr.role]="role"
             [tabIndex]="componentTabIndex"
             type="button"
-            [class.k-fab]="true"
-            [class.k-state-disabled]="disabled"
+            class="k-fab k-fab-solid"
+            [class.k-disabled]="disabled"
             [ngClass]="buttonClass"
             [disabled]="disabled"
             [attr.aria-disabled]="disabled"

package/dist/es2015/focusable/focusable.directive.js

@@ -18,10 +18,10 @@ let FocusableDirective = class FocusableDirective {
     }
     ngOnInit() {
         if (this.index === this.focusService.focused) {
-            this.renderer.addClass(this.element, 'k-state-focused');
+            this.renderer.addClass(this.element, 'k-focus');
         }
         else {
-            this.renderer.removeClass(this.element, 'k-state-focused');
+            this.renderer.removeClass(this.element, 'k-focus');
         }
     }
     /**
@@ -36,11 +36,11 @@ let FocusableDirective = class FocusableDirective {
         }
         this.focusSubscription = this.focusService.onFocus.subscribe((index) => {
             if (this.index === index) {
-                this.renderer.addClass(this.element, 'k-state-focused');
+                this.renderer.addClass(this.element, 'k-focus');
                 this.element.focus();
             }
             else {
-                this.renderer.removeClass(this.element, 'k-state-focused');
+                this.renderer.removeClass(this.element, 'k-focus');
             }
         });
     }