@progress/kendo-angular-toolbar 5.0.4 → 6.0.0-dev.202204190531

package/{dist/es2015 → esm2015}/tools/toolbar-button.component.js

@@ -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 * as tslib_1 from "tslib";
-var ToolBarButtonComponent_1;
-import { Component, TemplateRef, forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { Component, forwardRef, ViewChild, Input, Output, EventEmitter, ElementRef } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { getValueForLocation } from '../util';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-buttons";
+import * as i2 from "@angular/common";
 /**
  * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
  */
-let ToolBarButtonComponent = ToolBarButtonComponent_1 = class ToolBarButtonComponent extends ToolBarToolComponent {
+export class ToolBarButtonComponent extends ToolBarToolComponent {
     constructor() {
         super();
         // showText and showIcon showIcon should be declared first
@@ -170,112 +171,66 @@ let ToolBarButtonComponent = ToolBarButtonComponent_1 = class ToolBarButtonCompo
     getButton() {
         return (this.overflows ? this.overflowButtonElement : this.toolbarButtonElement).nativeElement;
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "showText", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "showIcon", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "text", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ToolBarButtonComponent.prototype, "style", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Object)
-], ToolBarButtonComponent.prototype, "className", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "title", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "disabled", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "toggleable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "look", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [Boolean])
-], ToolBarButtonComponent.prototype, "togglable", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], ToolBarButtonComponent.prototype, "selected", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "fillMode", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], ToolBarButtonComponent.prototype, "themeColor", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "icon", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "iconClass", null);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String),
-    tslib_1.__metadata("design:paramtypes", [String])
-], ToolBarButtonComponent.prototype, "imageUrl", null);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ToolBarButtonComponent.prototype, "click", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ToolBarButtonComponent.prototype, "pointerdown", void 0);
-tslib_1.__decorate([
-    Output(),
-    tslib_1.__metadata("design:type", EventEmitter)
-], ToolBarButtonComponent.prototype, "selectedChange", void 0);
-tslib_1.__decorate([
-    ViewChild('toolbarTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ToolBarButtonComponent.prototype, "toolbarTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
-    tslib_1.__metadata("design:type", TemplateRef)
-], ToolBarButtonComponent.prototype, "popupTemplate", void 0);
-tslib_1.__decorate([
-    ViewChild('toolbarButton', { read: ElementRef, static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ToolBarButtonComponent.prototype, "toolbarButtonElement", void 0);
-tslib_1.__decorate([
-    ViewChild('overflowButton', { read: ElementRef, static: false }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ToolBarButtonComponent.prototype, "overflowButtonElement", void 0);
-ToolBarButtonComponent = ToolBarButtonComponent_1 = tslib_1.__decorate([
-    Component({
-        exportAs: 'kendoToolBarButton',
-        // tslint:disable-next-line:no-forward-ref
-        providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent_1) }],
-        selector: 'kendo-toolbar-button',
-        template: `
+}
+ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <button
+                #toolbarButton
+                [tabindex]="tabIndex"
+                type="button"
+                kendoButton
+                [ngStyle]="style"
+                [ngClass]="className"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [toggleable]="toggleable"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                [selected]="selected"
+                [icon]="toolbarOptions.icon"
+                [iconClass]="toolbarOptions.iconClass"
+                [imageUrl]="toolbarOptions.imageUrl"
+                (click)="click.emit($event)"
+                (pointerdown)="pointerdown.emit($event)"
+                (selectedChange)="selectedChange.emit($event)"
+                (blur)="onBlur()"
+            >
+                {{ toolbarOptions.text }}
+            </button>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <button
+                #overflowButton
+                tabindex="-1"
+                type="button"
+                kendoButton
+                class="k-overflow-button"
+                [ngStyle]="style"
+                [ngClass]="className"
+                [attr.title]="title"
+                [disabled]="disabled"
+                [toggleable]="toggleable"
+                [fillMode]="fillMode"
+                [themeColor]="fillMode ? themeColor : null"
+                [selected]="selected"
+                [icon]="overflowOptions.icon"
+                [iconClass]="overflowOptions.iconClass"
+                [imageUrl]="overflowOptions.imageUrl"
+                (click)="click.emit($event)"
+                (selectedChange)="selectedChange.emit($event)"
+            >
+                {{ overflowOptions.text }}
+            </button>
+        </ng-template>
+    `, isInline: true, directives: [{ type: i1.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarButton',
+                    providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }],
+                    selector: 'kendo-toolbar-button',
+                    template: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -326,7 +281,55 @@ ToolBarButtonComponent = ToolBarButtonComponent_1 = tslib_1.__decorate([
             </button>
         </ng-template>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [])
-], ToolBarButtonComponent);
-export { ToolBarButtonComponent };
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], toggleable: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }], togglable: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], imageUrl: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }], pointerdown: [{
+                type: Output
+            }], selectedChange: [{
+                type: Output
+            }], toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], toolbarButtonElement: [{
+                type: ViewChild,
+                args: ['toolbarButton', { read: ElementRef, static: false }]
+            }], overflowButtonElement: [{
+                type: ViewChild,
+                args: ['overflowButton', { read: ElementRef, static: false }]
+            }] } });

package/esm2015/tools/toolbar-buttongroup.component.js

@@ -0,0 +1,267 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef, ViewChild, ContentChildren, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { ToolBarToolComponent } from './toolbar-tool.component';
+import { ToolBarButtonComponent } from './toolbar-button.component';
+import { makePeeker, getIndexOfFocused, seekFocusedIndex, getNextKey, getPrevKey, areEqual } from '../util';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@angular/common";
+/**
+ * Represents the Kendo UI Toolbar ButtonGroup for Angular.
+ */
+export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
+    constructor(localization) {
+        super();
+        this.localization = localization;
+        /**
+         * By default, the selection mode of the ButtonGroup is set to `multiple`.
+         */
+        this.selection = 'multiple';
+        this.focusedIndex = -1;
+        this.getNextKey = getNextKey(this.localization.rtl);
+        this.getPrevKey = getPrevKey(this.localization.rtl);
+    }
+    /**
+     * @hidden
+     */
+    set look(look) {
+        if (look) {
+            this.buttonComponents.forEach(b => b.fillMode = look === 'default' ? 'solid' : look);
+        }
+    }
+    get buttonElements() {
+        return this.getButtonGroup()
+            .buttons.filter(b => !b.isDisabled)
+            .map(b => b.element);
+    }
+    /**
+     * @hidden
+     */
+    onFocus() {
+        // triggered on tabin
+        this.focusedIndex = 0;
+    }
+    /**
+     * @hidden
+     */
+    onNavigate(ev) {
+        ev.preventDefault();
+    }
+    /**
+     * @hidden
+     */
+    selectedChangeHandler(state, button) {
+        button.selected = state;
+        button.selectedChange.emit(state);
+    }
+    /**
+     * @hidden
+     */
+    onButtonClick(ev) {
+        this.focusedIndex = this.buttonElements.findIndex(be => be === ev.target || be.contains(ev.target));
+        this.focusButton(this.focusedIndex, ev);
+    }
+    /**
+     * @hidden
+     */
+    canFocus() {
+        return !(this.disabled || this.buttonElements.length === 0);
+    }
+    /**
+     * @hidden
+     */
+    focus(ev = {}) {
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
+        this.focusedIndex = getIndexOfFocused(prevKey, nextKey, this.buttonElements)(ev);
+        this.focusButton(this.focusedIndex, ev);
+    }
+    /**
+     * @hidden
+     */
+    handleKey(ev) {
+        const nextKey = this.getNextKey(this.overflows);
+        const prevKey = this.getPrevKey(this.overflows);
+        const peekAtIndex = makePeeker(this.buttonElements);
+        const isUnmodified = areEqual(this.focusedIndex);
+        this.focusedIndex = seekFocusedIndex(prevKey, nextKey, peekAtIndex)(this.focusedIndex, ev);
+        this.focusButton(this.focusedIndex, ev);
+        return !isUnmodified(this.focusedIndex);
+    }
+    getButtonGroup() {
+        return this.overflows ? this.overflowButtonGroup : this.toolbarButtonGroup;
+    }
+    focusButton(index, ev) {
+        // Guard against focusing twice on mousedown.
+        if (!ev.type || ev.type === 'focus' || ev.type === 'keydown') {
+            this.buttonElements[index].focus();
+        }
+    }
+}
+ToolBarButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarButtonGroupComponent, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(function () { return ToolBarButtonComponent; }) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "overflowButtonGroup", first: true, predicate: ["overflowButtonGroup"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #toolbarTemplate>
+            <kendo-buttongroup
+                #toolbarButtonGroup
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+                (navigate)="onNavigate($event)"
+                (focus)="onFocus()"
+            >
+                <span
+                    kendoButton
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.toolbarOptions.icon"
+                    [iconClass]="button.toolbarOptions.iconClass"
+                    [imageUrl]="button.toolbarOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (pointerdown)="button.pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.toolbarOptions.text }}
+                </span>
+            </kendo-buttongroup>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <kendo-buttongroup
+                #overflowButtonGroup
+                class="k-overflow-button"
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+            >
+                <span
+                    kendoButton
+                    class="k-overflow-button"
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.overflowOptions.icon"
+                    [iconClass]="button.overflowOptions.iconClass"
+                    [imageUrl]="button.overflowOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.overflowOptions.text }}
+                </span>
+            </kendo-buttongroup>
+        </ng-template>
+    `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoToolBarButtonGroup',
+                    providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }],
+                    selector: 'kendo-toolbar-buttongroup',
+                    template: `
+        <ng-template #toolbarTemplate>
+            <kendo-buttongroup
+                #toolbarButtonGroup
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+                (navigate)="onNavigate($event)"
+                (focus)="onFocus()"
+            >
+                <span
+                    kendoButton
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.toolbarOptions.icon"
+                    [iconClass]="button.toolbarOptions.iconClass"
+                    [imageUrl]="button.toolbarOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (pointerdown)="button.pointerdown.emit($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.toolbarOptions.text }}
+                </span>
+            </kendo-buttongroup>
+        </ng-template>
+        <ng-template #popupTemplate>
+            <kendo-buttongroup
+                #overflowButtonGroup
+                class="k-overflow-button"
+                [tabIndex]="-1"
+                [selection]="selection"
+                [disabled]="disabled"
+                [width]="width"
+            >
+                <span
+                    kendoButton
+                    class="k-overflow-button"
+                    *ngFor="let button of buttonComponents"
+                    [ngStyle]="button.style"
+                    [ngClass]="button.className"
+                    [attr.title]="button.title"
+                    [disabled]="button.disabled"
+                    [togglable]="button.togglable"
+                    [selected]="button.selected"
+                    [fillMode]="button.fillMode"
+                    [themeColor]="button.fillMode ? button.themeColor : null"
+                    [icon]="button.overflowOptions.icon"
+                    [iconClass]="button.overflowOptions.iconClass"
+                    [imageUrl]="button.overflowOptions.imageUrl"
+                    (click)="button.click.emit($event); onButtonClick($event)"
+                    (selectedChange)="selectedChangeHandler($event, button)"
+                >
+                    {{ button.overflowOptions.text }}
+                </span>
+            </kendo-buttongroup>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; }, propDecorators: { disabled: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], look: [{
+                type: Input
+            }], toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], buttonComponents: [{
+                type: ContentChildren,
+                args: [forwardRef(() => ToolBarButtonComponent)]
+            }], toolbarButtonGroup: [{
+                type: ViewChild,
+                args: ['toolbarButtonGroup', { static: false }]
+            }], overflowButtonGroup: [{
+                type: ViewChild,
+                args: ['overflowButtonGroup', { static: false }]
+            }] } });

package/esm2015/tools/toolbar-buttonlist.component.js

@@ -0,0 +1,94 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input, Output, EventEmitter, ViewChildren } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-buttons";
+/**
+ * @hidden
+ */
+export class ToolBarButtonListComponent {
+    constructor() {
+        this.disabled = false;
+        this.fillMode = 'solid';
+        this.themeColor = 'base';
+        this.itemClick = new EventEmitter();
+    }
+    getText(dataItem) {
+        if (dataItem) {
+            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
+        }
+        return undefined;
+    }
+    onClick(item, index) {
+        const dataItem = this.data[index];
+        if (item.click) {
+            item.click(dataItem);
+        }
+        this.itemClick.emit(dataItem);
+    }
+}
+ToolBarButtonListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: { data: "data", textField: "textField", disabled: "disabled", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "buttons", predicate: ["button"], descendants: true }], ngImport: i0, template: `
+        <button
+            #button
+            type="button"
+            tabindex="-1"
+            kendoButton
+            style="padding-left: 16px"
+            class="k-overflow-button"
+            *ngFor="let item of data; let i = index"
+            [disabled]="disabled || item.disabled"
+            [icon]="item.icon"
+            [iconClass]="item.iconClass"
+            [imageUrl]="item.imageUrl"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (click)="onClick(item, i)"
+        >
+            {{ getText(item) }}
+        </button>
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-toolbar-buttonlist',
+                    template: `
+        <button
+            #button
+            type="button"
+            tabindex="-1"
+            kendoButton
+            style="padding-left: 16px"
+            class="k-overflow-button"
+            *ngFor="let item of data; let i = index"
+            [disabled]="disabled || item.disabled"
+            [icon]="item.icon"
+            [iconClass]="item.iconClass"
+            [imageUrl]="item.imageUrl"
+            [fillMode]="fillMode"
+            [themeColor]="fillMode ? themeColor : null"
+            (click)="onClick(item, i)"
+        >
+            {{ getText(item) }}
+        </button>
+    `
+                }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], textField: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fillMode: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], itemClick: [{
+                type: Output
+            }], buttons: [{
+                type: ViewChildren,
+                args: ['button']
+            }] } });