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

package/dist/es2015/listbutton/list-button.js

@@ -32,7 +32,7 @@ export class ListButton {
         this.subscribeEvents();
     }
     get popupClasses() {
-        const popupClasses = ['k-list-container', 'k-reset', 'k-group'];
+        const popupClasses = ['k-menu-popup'];
         if (this._popupSettings.popupClass) {
             popupClasses.push(this._popupSettings.popupClass);
         }

package/dist/es2015/listbutton/list.component.d.ts

@@ -5,6 +5,7 @@
 import { EventEmitter } from '@angular/core';
 import { ListItemModel } from './list-item-model';
 import { ButtonItemTemplateDirective } from './button-item-template.directive';
+import { ButtonSize } from '../common/models';
 /**
  * @hidden
  */
@@ -14,6 +15,8 @@ export declare class ListComponent {
     itemTemplate: ButtonItemTemplateDirective;
     onItemClick: EventEmitter<number>;
     onItemBlur: EventEmitter<any>;
+    size: ButtonSize;
+    sizeClass: string;
     constructor();
     getText(dataItem: any): any;
     getIconClasses(dataItem: ListItemModel): any;

package/dist/es2015/listbutton/list.component.js

@@ -7,6 +7,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { ButtonItemTemplateDirective } from './button-item-template.directive';
+import { SIZES } from '../util';
 /**
  * @hidden
  */
@@ -14,8 +15,17 @@ let ListComponent = class ListComponent {
     constructor() {
         this.onItemClick = new EventEmitter();
         this.onItemBlur = new EventEmitter();
+        this.sizeClass = '';
         validatePackage(packageMetadata);
     }
+    set size(size) {
+        if (size) {
+            this.sizeClass = `k-menu-group-${SIZES[size]}`;
+        }
+        else {
+            this.sizeClass = '';
+        }
+    }
     getText(dataItem) {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
@@ -55,37 +65,44 @@ tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
 ], ListComponent.prototype, "onItemBlur", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], ListComponent.prototype, "size", null);
 ListComponent = tslib_1.__decorate([
     Component({
         selector: 'kendo-button-list',
         template: `
-        <ul class="k-list k-reset" unselectable="on" role="menu">
-            <li role="menuitem" unselectable="on" tabindex="-1"
+        <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
+            <li role="menuitem" unselectable="on"
                 kendoButtonFocusable
                 *ngFor="let dataItem of data; let index = index;"
-                [index]="index"
-                [ngClass]="{'k-item': true, 'k-state-disabled': dataItem.disabled}"
+                class="k-item k-menu-item"
                 (click)="onClick(index)"
                 (blur)="onBlur()"
                 [attr.aria-disabled]="dataItem.disabled ? true : false">
-                <ng-template *ngIf="itemTemplate?.templateRef"
-                    [templateContext]="{
-                        templateRef: itemTemplate?.templateRef,
-                        $implicit: dataItem
-                    }">
+                <ng-template [ngIf]="itemTemplate?.templateRef">
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <ng-template [templateContext]="{templateRef: itemTemplate?.templateRef, $implicit: dataItem}"></ng-template>
+                    </span>
                 </ng-template>
                 <ng-template [ngIf]="!itemTemplate?.templateRef">
-                    <span
-                        *ngIf="dataItem.icon || dataItem.iconClass"
-                        [ngClass]="getIconClasses(dataItem)"
-                    ></span>
-                    <img
-                        *ngIf="dataItem.imageUrl"
-                        class="k-image"
-                        [src]="dataItem.imageUrl"
-                        alt=""
-                    >
-                    {{ getText(dataItem) }}
+                    <span kendoButtonFocusable [index]="index" class="k-link k-menu-link" [class.k-disabled]="dataItem.disabled" tabindex="-1">
+                        <span
+                            *ngIf="dataItem.icon || dataItem.iconClass"
+                            [ngClass]="getIconClasses(dataItem)"
+                        ></span>
+                        <img
+                            *ngIf="dataItem.imageUrl"
+                            class="k-image"
+                            [src]="dataItem.imageUrl"
+                            alt=""
+                        >
+                        <span *ngIf="getText(dataItem)" class="k-menu-link-text">
+                        {{ getText(dataItem) }}
+                        </span>
+                    </span>
                 </ng-template>
             </li>
         </ul>

package/dist/es2015/main.d.ts

@@ -12,7 +12,6 @@ export { SplitButtonModule } from './splitbutton/splitbutton.module';
 export { SplitButtonCustomMessagesComponent } from './splitbutton/localization/custom-messages.component';
 export { DropDownButtonComponent, DropDownButtonComponent as DropDownButton } from './dropdownbutton/dropdownbutton.component';
 export { DropDownButtonModule } from './dropdownbutton/dropdownbutton.module';
-export { ButtonLook } from './button-look';
 export { ListItemModel } from './listbutton/list-item-model';
 export { PopupSettings } from './listbutton/popup-settings';
 export { ChipComponent } from './chip/chip.component';
@@ -21,7 +20,6 @@ export { ChipModule } from './chip/chip.module';
 export { ChipListSelection } from './chip/models/selection';
 export { ChipRemoveEvent } from './chip/chip-remove-event-args.interface';
 export { ChipListRemoveEvent } from './chip/chip-list-remove-event-args.interface';
-export { ChipType } from './chip/models/type';
 export { FloatingActionButtonModule } from './floatingactionbutton/floatingactionbutton.module';
 export { FloatingActionButtonComponent } from './floatingactionbutton/floatingactionbutton.component';
 export { FloatingActionButtonTemplateDirective } from './floatingactionbutton/templates/fab-template.directive';
@@ -32,6 +30,8 @@ export { DialItemAnimation } from './floatingactionbutton/models/item-animation.
 export { FabAlign } from './floatingactionbutton/models/align';
 export { FabPositionMode } from './floatingactionbutton/models/position-mode';
 export { FabOffset } from './floatingactionbutton/models/offset';
-export { ButtonSize } from './common/models/size';
-export { ButtonThemeColor } from './common/models/theme-color';
+export { ButtonSize, ChipSize } from './common/models/size';
+export { ButtonRounded, ChipRounded } from './common/models/rounded';
+export { ButtonFillMode, ChipFillMode } from './common/models/fillmode';
+export { ButtonThemeColor, ChipThemeColor } from './common/models/theme-color';
 export { ButtonShape } from './common/models/shape';

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635404316,
+    publishDate: 1641486598,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

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

@@ -11,7 +11,7 @@ import { ButtonItemTemplateDirective } from './../listbutton/button-item-templat
 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 } from '../common/models';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -81,13 +81,58 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      */
     imageUrl: string;
     /**
-     * Changes the visual appearance by using alternative styling options.
+     * The size property specifies the width and height of the SplitButton
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
+     *
+     * The possible values are:
+     * * `'small'`
+     * * `'medium'` (default)
+     * * `'large'`
+     * * `null`
+     */
+    size: ButtonSize;
+    /**
+     * The rounded property specifies the border radius of the SplitButton
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#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 SplitButton
+     * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
      *
      * The available values are:
+     * * `solid` (default)
      * * `flat`
      * * `outline`
+     * * `link`
      */
-    look: ButtonLook;
+    fillMode: ButtonFillMode;
+    /**
+     * The SplitButton 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_splitbuttoncomponent %}#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.
+     */
+    themeColor: ButtonThemeColor;
     /**
      * When set to `true`, disables a SplitButton item
      * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
@@ -232,8 +277,6 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
     private buttonText;
     private lockFocus;
     isFocused: boolean;
-    readonly isFlat: boolean;
-    readonly isOutline: boolean;
     readonly widgetClasses: boolean;
     readonly dir: string;
     /**

package/dist/es2015/splitbutton/splitbutton.component.js

@@ -96,13 +96,58 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
          */
         this.imageUrl = '';
         /**
-         * Changes the visual appearance by using alternative styling options.
+         * The size property specifies the width and height of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        this.size = 'medium';
+        /**
+         * The rounded property specifies the border radius of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        this.rounded = 'medium';
+        /**
+         * The fillMode property specifies the background and border styles of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
          *
          * The available values are:
+         * * `solid` (default)
          * * `flat`
          * * `outline`
+         * * `link`
          */
-        this.look = 'default';
+        this.fillMode = 'solid';
+        /**
+         * The SplitButton 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_splitbuttoncomponent %}#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.
+         */
+        this.themeColor = 'base';
         /**
          * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
          */
@@ -275,12 +320,6 @@ let SplitButtonComponent = class SplitButtonComponent extends ListButton {
     get isFocused() {
         return this._isFocused && !this._disabled;
     }
-    get isFlat() {
-        return this.look === 'flat';
-    }
-    get isOutline() {
-        return this.look === 'outline';
-    }
     get widgetClasses() {
         return true;
     }
@@ -538,7 +577,19 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)
-], SplitButtonComponent.prototype, "look", void 0);
+], SplitButtonComponent.prototype, "size", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], SplitButtonComponent.prototype, "rounded", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], SplitButtonComponent.prototype, "fillMode", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], SplitButtonComponent.prototype, "themeColor", void 0);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Boolean),
@@ -619,20 +670,10 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", ViewContainerRef)
 ], SplitButtonComponent.prototype, "containerRef", 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", [Boolean])
 ], SplitButtonComponent.prototype, "isFocused", null);
-tslib_1.__decorate([
-    HostBinding('class.k-flat'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "isFlat", null);
-tslib_1.__decorate([
-    HostBinding('class.k-outline'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], SplitButtonComponent.prototype, "isOutline", null);
 tslib_1.__decorate([
     HostBinding('class.k-split-button'),
     HostBinding('class.k-button-group'),
@@ -685,11 +726,15 @@ SplitButtonComponent = tslib_1.__decorate([
             kendoButton
             #button
             [type]="type"
-            [look]="look"
             [tabindex]="componentTabIndex"
             [disabled]="disabled"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="themeColor"
             [icon]="icon"
-            [class.k-state-active]="active"
+            [class.k-active]="active"
+            [class.k-icon-button]="!text && icon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -704,16 +749,21 @@ SplitButtonComponent = tslib_1.__decorate([
             [attr.aria-owns]="listId"
             [attr.aria-label]="ariaLabel"
         >
-            {{ text }}<ng-content></ng-content>
+            <span *ngIf="text" class="k-button-text">
+                {{ text }}
+            </span><ng-content></ng-content>
         </button>
         <button
             kendoButton
             #arrowButton
             type="button"
-            [class.k-state-active]="activeArrow"
+            [class.k-active]="activeArrow"
             [disabled]="disabled"
             [icon]="arrowButtonIcon"
-            [look]="look"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
             [tabindex]="-1"
             [ngClass]="arrowButtonClass"
             (click)="onArrowButtonClick()"
@@ -731,6 +781,7 @@ SplitButtonComponent = tslib_1.__decorate([
                 (keypress)="keyPressHandler($event)"
                 (keyup)="keyUpHandler($event)"
                 [attr.dir]="dir"
+                [size]="size"
             >
             </kendo-button-list>
         </ng-template>

package/dist/es2015/util.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { ButtonStylingClasses } from "./common/models";
 /**
  * @hidden
  */
@@ -18,3 +19,23 @@ export declare function closest(element: any, selector: string): any;
  * @hidden
  */
 export declare const replaceMessagePlaceholder: (message: string, name: string, value: string) => string;
+/**
+ * @hidden
+ */
+export declare const SIZES: {
+    small: string;
+    medium: string;
+    large: string;
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export declare const getStylingClasses: (componentType: any, stylingOption: string, previousValue: any, newValue: any) => ButtonStylingClasses;
+/**
+ * @hidden
+ *
+ * Returns the themeColor classes to be added and removed
+ */
+export declare const getThemeColorClasses: (componentType: any, prevFillMode: any, fillMode: any, previousValue: any, newValue: any) => ButtonStylingClasses;

package/dist/es2015/util.js

@@ -41,3 +41,55 @@ export function closest(element, selector) {
  * @hidden
  */
 export const replaceMessagePlaceholder = (message, name, value) => message.replace(new RegExp(`\{\\s*${name}\\s*\}`, 'g'), value);
+/**
+ * @hidden
+ */
+export const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+const ROUNDNESS = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg',
+    full: 'full'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
+                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
+            };
+        case 'rounded':
+            return {
+                toRemove: `k-rounded-${ROUNDNESS[previousValue]}`,
+                toAdd: newValue ? `k-rounded-${ROUNDNESS[newValue]}` : null
+            };
+        case 'fillMode':
+        case 'shape':
+            return {
+                toRemove: `k-${componentType}-${previousValue}`,
+                toAdd: newValue ? `k-${componentType}-${newValue}` : null
+            };
+        default:
+            break;
+    }
+};
+/**
+ * @hidden
+ *
+ * Returns the themeColor classes to be added and removed
+ */
+export const getThemeColorClasses = (componentType, prevFillMode, fillMode, previousValue, newValue) => {
+    return {
+        toRemove: `k-${componentType}-${prevFillMode}-${previousValue}`,
+        toAdd: newValue ? `k-${componentType}-${fillMode}-${newValue}` : null
+    };
+};