@progress/kendo-angular-toolbar 17.0.0-develop.3 → 17.0.0-develop.30

package/{esm2020 → esm2022}/tools/toolbar-dropdownbutton.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, ElementRef, TemplateRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode } from '@angular/core';
+import { Component, ElementRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode, Renderer2 } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
@@ -13,89 +13,17 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
-    constructor() {
-        super();
-        /**
-         * Allows showing the default arrow icon or providing alternative one instead.
-         * @default false
-         */
-        this.arrowIcon = false;
-        /**
-         * Sets the `title` attribute of the underlying button element.
-         * @default ''
-         */
-        this.title = '';
-        /**
-         * Defines the location of the button icon that will 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
-         * ([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';
-        /**
-         * Fires each time the user clicks a DropDownButton item.
-         * 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;
-    }
+    renderer;
+    /**
+     * Allows showing the default arrow icon or providing alternative one instead.
+     * @default false
+     */
+    arrowIcon = false;
+    /**
+     * Sets the `title` attribute of the underlying button element.
+     * @default ''
+     */
+    title = '';
     // showText and showIcon showIcon should be declared first
     /**
      * Defines the location of the button text that will be displayed.
@@ -107,6 +35,10 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     get showText() {
         return this._showText;
     }
+    /**
+     * Defines the location of the button icon that will be displayed.
+     */
+    showIcon = 'both';
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons).
@@ -182,6 +114,51 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     set primary(primary) {
         this.themeColor = primary ? 'primary' : 'base';
     }
+    /**
+     * 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
+     * ([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).
+     */
+    themeColor = 'base';
+    /**
+     * 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;
+    /**
+     * Sets the data item field that represents the item text.
+     * If the data contains only primitive values, do not define it.
+     */
+    textField;
+    /**
+     * Sets the disabled state of the DropDownButton.
+     */
+    disabled;
     /**
      * Sets the data of the DropDownButton
      * ([see example]({% slug controltypes_toolbar %}#toc-dropdownbuttons)).
@@ -197,12 +174,62 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
         return this._data;
     }
+    /**
+     * Fires each time the user clicks a DropDownButton item.
+     * 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();
+    dropdownButton;
+    dropDownButtonComponent;
+    overflowListItems;
+    toolbarOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
+    overflowOptions = {
+        text: '',
+        icon: '',
+        iconClass: '',
+        svgIcon: null,
+        imageUrl: ''
+    };
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngAfterViewInit() {
+        this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+    }
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
+    toolbarDropDownButton;
+    _data;
+    _popupSettings = { animate: true, popupClass: '' };
+    focusedIndex = -1;
+    _showText = 'both';
+    _text;
+    getNextKey;
+    getPrevKey;
+    constructor(renderer) {
+        super();
+        this.renderer = renderer;
+        this.getNextKey = getNextKey();
+        this.getPrevKey = getPrevKey();
+        this.isBuiltInTool = true;
+    }
     /**
      * @hidden
      */
@@ -275,13 +302,11 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
-}
-ToolBarDropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -344,7 +369,8 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             </ng-container>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { 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: ToolBarDropDownButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarDropDownButton',
@@ -354,7 +380,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
                 #toolbarDropDownButton
-                class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -420,7 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -462,12 +487,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 }]
             }], dropdownButton: [{
                 type: ViewChild,
                 args: ['dropdownButton', { read: ElementRef, static: true }]

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

@@ -2,13 +2,14 @@
 * 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, ElementRef } from '@angular/core';
+import { Component, forwardRef, ViewChild, ElementRef } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar Separator for Angular]({% slug controltypes_toolbar %}#toc-separators).
  */
 export class ToolBarSeparatorComponent extends ToolBarToolComponent {
+    separator;
     constructor() {
         super();
         this.isBuiltInTool = true;
@@ -38,9 +39,8 @@ export class ToolBarSeparatorComponent extends ToolBarToolComponent {
             this.popupTemplate = this.toolbarTemplate;
         }
     }
-}
-ToolBarSeparatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSeparatorComponent, isStandalone: true, selector: "kendo-toolbar-separator", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "separator", first: true, predicate: ["separator"], descendants: true }], exportAs: ["kendoToolBarSeparator"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSeparatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSeparatorComponent, isStandalone: true, selector: "kendo-toolbar-separator", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSeparatorComponent) }], viewQueries: [{ propertyName: "separator", first: true, predicate: ["separator"], descendants: true }], exportAs: ["kendoToolBarSeparator"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <div class="k-separator"></div>
         </ng-template>
@@ -51,7 +51,8 @@ ToolBarSeparatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
             </div>
         </ng-template>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSeparatorComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarSeparator',
@@ -70,13 +71,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     `,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }], separator: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { separator: [{
                 type: ViewChild,
                 args: ['separator', { static: false }]
             }] } });

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

@@ -2,19 +2,19 @@
 * 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 } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar Spacer for Angular]({% slug controltypes_toolbar %}#toc-separators).
  */
 export class ToolBarSpacerComponent extends ToolBarToolComponent {
+    /**
+     * @hidden
+     */
+    __isSpacer = true;
     constructor() {
         super();
-        /**
-         * @hidden
-         */
-        this.__isSpacer = true;
         this.isBuiltInTool = true;
     }
     /**
@@ -42,14 +42,14 @@ export class ToolBarSpacerComponent extends ToolBarToolComponent {
             this.popupTemplate = this.toolbarTemplate;
         }
     }
-}
-ToolBarSpacerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolBarSpacerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToolBarSpacerComponent, isStandalone: true, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarSpacerComponent, isStandalone: true, selector: "kendo-toolbar-spacer", providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarSpacerComponent) }], exportAs: ["kendoToolBarSpacer"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <div class="k-spacer"></div>
         </ng-template>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSpacerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoToolBarSpacer',
@@ -62,10 +62,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
     `,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { toolbarTemplate: [{
-                type: ViewChild,
-                args: ['toolbarTemplate', { static: true }]
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate', { static: true }]
-            }] } });
+        }], ctorParameters: function () { return []; } });