@progress/kendo-angular-toolbar 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/tools/toolbar-splitbutton.component.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 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, ViewChildren, QueryList, isDevMode } from '@angular/core';
+import { Component, forwardRef, ViewChild, Input, ElementRef, Output, EventEmitter, ViewChildren, QueryList, isDevMode } from '@angular/core';
 import { SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
@@ -14,96 +14,6 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI ToolBar SplitButton for Angular]({% slug controltypes_toolbar %}#toc-splitbuttons).
  */
 export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
-    constructor() {
-        super();
-        /**
-         * Specifies where button icon should be displayed
-         */
-        this.showIcon = 'both';
-        /**
-         * The fillMode property specifies the background and border styles of the Button.
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
-        /**
-         * The Button 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.
-         *
-         * 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 name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonIcon = 'caret-alt-down';
-        /**
-         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
-         * be rendered for the button which opens the popup.
-         */
-        this.arrowButtonSvgIcon = caretAltDownIcon;
-        /**
-         * Configures the text field of the button-list popup.
-         */
-        this.textField = 'text';
-        /**
-         * Fires each time the user clicks the main button.
-         */
-        this.buttonClick = new EventEmitter();
-        /**
-         * Fires each time the user clicks the drop-down list.
-         * The event data contains the data item that is bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        this.toolbarOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this.overflowOptions = {
-            text: '',
-            icon: '',
-            iconClass: '',
-            svgIcon: null,
-            imageUrl: ''
-        };
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.focusedIndex = -1;
-        this._showText = 'both';
-        this.getNextKey = getNextKey();
-        this.getPrevKey = getPrevKey();
-        this.isBuiltInTool = true;
-    }
     // showText and showIcon showIcon should be declared first
     /**
      * Specifies where button text should be displayed
@@ -115,6 +25,10 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     get showText() {
         return this._showText;
     }
+    /**
+     * Specifies where button icon should be displayed
+     */
+    showIcon = 'both';
     /**
      * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons).
      */
@@ -163,6 +77,10 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, false);
         this.overflowOptions.imageUrl = getValueForLocation(imageUrl, this.showIcon, true);
     }
+    /**
+     * When set to `true`, disables a SplitButton item.
+     */
+    disabled;
     /**
      * Configures the popup of the SplitButton.
      *
@@ -179,6 +97,36 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._popupSettings;
     }
+    /**
+     * The fillMode property specifies the background and border styles of the Button.
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    fillMode = 'solid';
+    /**
+     * The Button 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.
+     *
+     * 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).
+     */
+    themeColor = 'base';
     /**
      * @hidden
      */
@@ -187,6 +135,30 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             this.fillMode = look === 'default' ? 'solid' : look;
         }
     }
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * The CSS classes that will be rendered on the button which opens the popup.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    arrowButtonClass;
+    /**
+     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
+     * be rendered for the button which opens the popup.
+     */
+    arrowButtonIcon = 'caret-alt-down';
+    /**
+     * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+     * be rendered for the button which opens the popup.
+     */
+    arrowButtonSvgIcon = caretAltDownIcon;
+    /**
+     * Configures the text field of the button-list popup.
+     */
+    textField = 'text';
     /**
      * Sets the data of the SplitButton ([see example]({% slug controltypes_toolbar %}#toc-splitbuttons)).
      *
@@ -201,12 +173,61 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    /**
+     * Fires each time the user clicks the main button.
+     */
+    buttonClick = new EventEmitter();
+    /**
+     * Fires each time the user clicks the drop-down list.
+     * The event data contains the data item that is bound to the clicked list item.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    toolbarOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    overflowOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
     ngOnInit() {
         this.setTextDisplayMode();
     }
     get overflowButtons() {
         return [this.overflowMainButton, ...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
+    _data;
+    _popupSettings = { animate: true, popupClass: '' };
+    focusedIndex = -1;
+    _showText = 'both';
+    _text;
+    getNextKey;
+    getPrevKey;
+    toolbarSplitButton;
+    overflowMainButton;
+    overflowListItems;
+    constructor() {
+        super();
+        this.getNextKey = getNextKey();
+        this.getPrevKey = getPrevKey();
+        this.isBuiltInTool = true;
+    }
     /**
      * @hidden
      */
@@ -284,9 +305,8 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
-}
-ToolBarSplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSplitButtonComponent, isStandalone: true, selector: "kendo-toolbar-splitbutton", inputs: { showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", popupSettings: "popupSettings", fillMode: "fillMode", themeColor: "themeColor", look: "look", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", textField: "textField", data: "data" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSplitButtonComponent) }], viewQueries: [{ 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
@@ -356,8 +376,9 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon", "buttonAttributes"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarSplitButton',
@@ -481,12 +502,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], close: [{
                 type: Output
-            }], toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
             }], toolbarSplitButton: [{
                 type: ViewChild,
                 args: ['toolbarSplitButton', { static: false }]

package/{esm2020 → esm2022}/tools/toolbar-tool.component.mjs

@@ -2,24 +2,28 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Input, Directive, ElementRef, inject } from '@angular/core';
+import { TemplateRef, Input, Directive, ElementRef, inject, ViewChild } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Represents the Base ToolBar Tool component for Angular.
  * Extend this class to create custom tools.
  */
 export class ToolBarToolComponent {
+    toolbarTemplate;
+    popupTemplate;
+    tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
+    overflows = true;
+    visibility;
+    element;
+    isBuiltInTool = false;
     constructor() {
-        this.tabIndex = -1; //Focus movement inside the toolbar is managed using roving tabindex.
-        this.overflows = true;
-        this.isBuiltInTool = false;
-        // this should be replaced with showTool: DisplayMode = 'both';
-        /**
-         * @hidden
-         */
-        this.responsive = true;
         this.element = inject(ElementRef);
     }
+    // this should be replaced with showTool: DisplayMode = 'both';
+    /**
+     * @hidden
+     */
+    responsive = true;
     get toolbarDisplay() {
         return this.overflows ? 'none' : 'inline-flex';
     }
@@ -52,14 +56,20 @@ export class ToolBarToolComponent {
     handleKey(ev) {
         return false;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0 });
 }
-ToolBarToolComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ToolBarToolComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarToolComponent, isStandalone: true, inputs: { responsive: "responsive" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarToolComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarToolComponent, decorators: [{
             type: Directive,
             args: [{
                     standalone: true
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { responsive: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
+                type: ViewChild,
+                args: ['toolbarTemplate', { static: true }]
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate', { static: true }]
+            }], responsive: [{
                 type: Input
             }] } });

package/{esm2020 → esm2022}/tools/tools.service.mjs

@@ -9,16 +9,14 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class ToolbarToolsService {
-    constructor() {
-        this.renderedToolsChange = new Subject();
-        this.overflowToolsChange = new Subject();
-        this.renderedTools = [];
-        this.overflowTools = [];
-        this.allTools = [];
-    }
+    renderedToolsChange = new Subject();
+    overflowToolsChange = new Subject();
+    renderedTools = [];
+    overflowTools = [];
+    allTools = [];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService });
 }
-ToolbarToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ToolbarToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarToolsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarToolsService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/util.mjs

@@ -205,6 +205,11 @@ export const getStylingClasses = (componentType, stylingOption, previousValue, n
                 toRemove: `k-${componentType}-${SIZES[previousValue]}`,
                 toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
             };
+        case 'fillMode':
+            return {
+                toRemove: `k-${componentType}-${previousValue}`,
+                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
+            };
         default:
             break;
     }