@progress/kendo-angular-toolbar 11.0.0-develop.102 → 11.0.0-develop.103

package/esm2020/tools/toolbar-splitbutton.component.mjs

@@ -2,15 +2,13 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, TemplateRef, forwardRef, ViewChild, Input, ElementRef, Output, EventEmitter } from '@angular/core';
+import { Component, TemplateRef, forwardRef, ViewChild, Input, ElementRef, Output, EventEmitter, ViewChildren, QueryList } from '@angular/core';
 import { SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { ToolBarToolComponent } from './toolbar-tool.component';
-import { ToolBarButtonListComponent } from './toolbar-buttonlist.component';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
-import * as i2 from "./toolbar-buttonlist.component";
-import * as i3 from "@angular/common";
+import * as i2 from "@angular/common";
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
  */
@@ -173,7 +171,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.setTextDisplayMode();
     }
     get overflowButtons() {
-        return [this.overflowSplitButton, ...this.overflowSplitButtonButtonList.buttons.toArray().filter(b => !b.nativeElement.disabled)];
+        return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
     /**
      * @hidden
@@ -223,6 +221,47 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             return !isUnmodified(this.focusedIndex);
         }
     }
+    /**
+     * @hidden
+     */
+    getIconClasses(item) {
+        if (item) {
+            if (item.icon) {
+                return `k-icon k-i-${item.icon}`;
+            }
+            else if (item.iconClass) {
+                return item.iconClass;
+            }
+        }
+        else {
+            if (this.overflowOptions.icon) {
+                return `k-icon k-i-${this.overflowOptions.icon}`;
+            }
+            else if (this.overflowOptions.iconClass) {
+                return this.overflowOptions.iconClass;
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    getText(dataItem) {
+        if (dataItem) {
+            return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
+        }
+        return undefined;
+    }
+    /**
+     * @hidden
+     */
+    handleClick(ev, item, index) {
+        this.onButtonListClick(ev);
+        const dataItem = this.data[index];
+        if (item.click) {
+            item.click(dataItem);
+        }
+        this.itemClick.emit(dataItem);
+    }
     focusButton(index, ev) {
         if (!ev.type || ev.type === 'focus' || ev.type === 'keydown' || ev.type === 'click') {
             this.overflowButtons[index].nativeElement.focus();
@@ -234,10 +273,11 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowSplitButton", first: true, predicate: ["overflowSplitButton"], descendants: true, read: ElementRef }, { propertyName: "overflowSplitButtonButtonList", first: true, predicate: ["overflowSplitButtonButtonList"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarSplitButtonComponent, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarSplitButton", first: true, predicate: ["toolbarSplitButton"], descendants: true }, { propertyName: "overflowMainButton", first: true, predicate: ["overflowMainButton"], descendants: true, read: ElementRef }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarSplitButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
+                class="k-toolbar-split-button"
                 [data]="data"
                 [text]="toolbarOptions.text"
                 [icon]="toolbarOptions.icon"
@@ -260,36 +300,35 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             </kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #overflowSplitButton
-                type="button"
+            <div #overflowMainButton
                 tabindex="-1"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                kendoButton
-                class="k-overflow-button"
-                [disabled]="disabled"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
-            <kendo-toolbar-buttonlist
-                #overflowSplitButtonButtonList
-                [data]="data"
-                [disabled]="disabled"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [textField]="textField"
-                (itemClick)="itemClick.emit($event)"
-                (click)="onButtonListClick($event)"
-            >
-            </kendo-toolbar-buttonlist>
+                (click)="onMainButtonClick($event)">
+                <span
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
+                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
+                </span>
+            </div>
+            <ng-container *ngFor="let item of data; let i = index">
+            <div #listItem
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled || item.disabled"
+                (click)="handleClick($event, item, i)">
+                <span
+                    class="k-link k-menu-link">
+                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                </span>
+            </div>
+            </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.ToolBarButtonListComponent, selector: "kendo-toolbar-buttonlist", inputs: ["data", "textField", "disabled", "fillMode", "themeColor"], outputs: ["itemClick"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -300,6 +339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <ng-template #toolbarTemplate>
             <kendo-splitbutton
                 #toolbarSplitButton
+                class="k-toolbar-split-button"
                 [data]="data"
                 [text]="toolbarOptions.text"
                 [icon]="toolbarOptions.icon"
@@ -322,34 +362,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             </kendo-splitbutton>
         </ng-template>
         <ng-template #popupTemplate>
-            <button
-                #overflowSplitButton
-                type="button"
+            <div #overflowMainButton
                 tabindex="-1"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                kendoButton
-                class="k-overflow-button"
-                [disabled]="disabled"
-                [icon]="overflowOptions.icon"
-                [iconClass]="overflowOptions.iconClass"
-                [imageUrl]="overflowOptions.imageUrl"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled"
                 [ngClass]="buttonClass"
-                (click)="onMainButtonClick($event)"
-            >
-                {{ overflowOptions.text }}
-            </button>
-            <kendo-toolbar-buttonlist
-                #overflowSplitButtonButtonList
-                [data]="data"
-                [disabled]="disabled"
-                [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
-                [textField]="textField"
-                (itemClick)="itemClick.emit($event)"
-                (click)="onButtonListClick($event)"
-            >
-            </kendo-toolbar-buttonlist>
+                (click)="onMainButtonClick($event)">
+                <span
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
+                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
+                </span>
+            </div>
+            <ng-container *ngFor="let item of data; let i = index">
+            <div #listItem
+                tabindex="-1"
+                role="menuitem"
+                class="k-item k-menu-item"
+                [class.k-disabled]="disabled || item.disabled"
+                (click)="handleClick($event, item, i)">
+                <span
+                    class="k-link k-menu-link">
+                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
+                </span>
+            </div>
+            </ng-container>
         </ng-template>
     `
                 }]
@@ -402,10 +441,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toolbarSplitButton: [{
                 type: ViewChild,
                 args: ['toolbarSplitButton', { static: false }]
-            }], overflowSplitButton: [{
-                type: ViewChild,
-                args: ['overflowSplitButton', { read: ElementRef, static: false }]
-            }], overflowSplitButtonButtonList: [{
+            }], overflowMainButton: [{
                 type: ViewChild,
-                args: ['overflowSplitButtonButtonList', { static: false }]
+                args: ['overflowMainButton', { read: ElementRef }]
+            }], overflowListItems: [{
+                type: ViewChildren,
+                args: ['listItem']
             }] } });

package/esm2020/util.mjs

@@ -185,3 +185,27 @@ export const getValueForLocation = (property, displayMode, overflows) => {
             return property;
     }
 };
+/**
+ * @hidden
+ */
+export const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @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 !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+            };
+        default:
+            break;
+    }
+};