@progress/kendo-angular-toolbar 19.0.0-develop.3 → 19.0.0-develop.31

package/esm2022/tools/toolbar-dropdownbutton.component.mjs

@@ -9,13 +9,16 @@ import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNext
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgClass, NgIf, NgFor } from '@angular/common';
 import { take } from 'rxjs/operators';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
+import * as i1 from "../toolbar.component";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular](slug:controltypes_toolbar#drop-down-buttons).
  */
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     zone;
     renderer;
+    host;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
      * @default false
@@ -28,7 +31,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     title = '';
     // showText and showIcon showIcon should be declared first
     /**
-     * Defines the location of the button text that will be displayed.
+     * Specifies the button text visibility.
      */
     set showText(value) {
         this._showText = value;
@@ -38,9 +41,14 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         return this._showText;
     }
     /**
-     * Defines the location of the button icon that will be displayed.
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        this._showIcon = value;
+    }
+    get showIcon() {
+        return this._showIcon;
+    }
     /**
      * Sets the text of the DropDownButton
      * ([see example](slug:controltypes_toolbar#toc-drop-down-buttons)).
@@ -215,26 +223,40 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
-    _showText = 'both';
+    _showText;
+    _showIcon;
     _text;
+    propertyChangeSub;
     getNextKey;
     getPrevKey;
-    constructor(zone, renderer) {
+    constructor(zone, renderer, host) {
         super();
         this.zone = zone;
         this.renderer = renderer;
+        this.host = host;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
+        this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
+            if (change.property === 'showText' || change.property === 'showIcon') {
+                this[change.property] = change.value;
+            }
+        });
     }
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngOnDestroy() {
+        if (this.propertyChangeSub) {
+            this.propertyChangeSub.unsubscribe();
+            this.propertyChangeSub = null;
+        }
+    }
     ngAfterViewInit() {
         this.zone.onStable.pipe(take(1)).subscribe(() => {
-            const dropDownButton = this[`${this.location}DropDownButton`];
-            if (dropDownButton) {
-                this.renderer.addClass(dropDownButton.button.nativeElement, 'k-toolbar-menu-button');
+            const dropdownButton = this[`${this.location}DropDownButton`];
+            if (dropdownButton?.button) {
+                this.renderer.addClass(dropdownButton.button.nativeElement, 'k-toolbar-menu-button');
             }
         });
     }
@@ -246,6 +268,12 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             .toArray()
             .findIndex(b => b.nativeElement.contains(ev.target));
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * @hidden
      */
@@ -288,7 +316,6 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -307,10 +334,10 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         }
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.ToolBarComponent }], 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: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "sectionDropDownButton", first: true, predicate: ["sectionDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton #toolbarDropDownButton
@@ -321,6 +348,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -386,6 +414,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -418,6 +447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -483,6 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowIcon]="arrowIcon"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [data]="data"
                 [buttonAttributes]="{'title': title}"
@@ -501,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.ToolBarComponent }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input

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

@@ -9,14 +9,17 @@ import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNext
 import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgClass, NgIf, NgFor } from '@angular/common';
+import { ToolBarComponent } from '../toolbar.component';
 import * as i0 from "@angular/core";
+import * as i1 from "../toolbar.component";
 /**
  * Represents the [Kendo UI ToolBar SplitButton for Angular](slug:controltypes_toolbar#toc-split-buttons).
  */
 export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
+    host;
     // showText and showIcon showIcon should be declared first
     /**
-     * Specifies where button text should be displayed
+     * Specifies the button text visibility.
      */
     set showText(value) {
         this._showText = value;
@@ -26,9 +29,15 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         return this._showText;
     }
     /**
-     * Specifies where button icon should be displayed
+     * Specifies the button icon visibility.
      */
-    showIcon = 'both';
+    set showIcon(value) {
+        this._showIcon = value;
+        this.setTextDisplayMode();
+    }
+    get showIcon() {
+        return this._showIcon;
+    }
     /**
      * Sets the text of the SplitButton ([see example](slug:controltypes_toolbar#toc-split-buttons)).
      */
@@ -209,25 +218,39 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     ngOnInit() {
         this.setTextDisplayMode();
     }
+    ngOnDestroy() {
+        if (this.propertyChangeSub) {
+            this.propertyChangeSub.unsubscribe();
+            this.propertyChangeSub = null;
+        }
+    }
     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';
+    _showText;
+    _showIcon;
     _text;
+    propertyChangeSub;
     getNextKey;
     getPrevKey;
     toolbarSplitButton;
     sectionSplitButton;
     overflowMainButton;
     overflowListItems;
-    constructor() {
+    constructor(host) {
         super();
+        this.host = host;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
+        this.propertyChangeSub = this.host.propertyChange.subscribe(change => {
+            if (change.property === 'showText' || change.property === 'showIcon') {
+                this[change.property] = change.value;
+            }
+        });
     }
     /**
      * @hidden
@@ -248,6 +271,12 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     canFocus() {
         return !this.disabled;
     }
+    /**
+     * @hidden
+     */
+    get size() {
+        return this.host.size;
+    }
     /**
      * @hidden
      */
@@ -284,7 +313,6 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         if (dataItem) {
             return this.textField ? dataItem[this.textField] : dataItem.text || dataItem;
         }
-        return undefined;
     }
     /**
      * @hidden
@@ -303,10 +331,10 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
         }
     }
     setTextDisplayMode() {
-        this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
-        this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
+        this.toolbarOptions.text = this.showText === 'menu' || this.showText === 'never' ? undefined : this.text;
+        this.overflowOptions.text = this.showText === 'toolbar' || this.showText === 'never' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarSplitButtonComponent, deps: [{ token: i1.ToolBarComponent }], 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: "sectionSplitButton", first: true, predicate: ["sectionSplitButton"], 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
@@ -323,6 +351,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
@@ -392,6 +421,7 @@ export class ToolBarSplitButtonComponent extends ToolBarToolComponent {
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
@@ -427,6 +457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
@@ -496,6 +527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 [arrowButtonIcon]="arrowButtonIcon"
                 [arrowButtonSvgIcon]="arrowButtonSvgIcon"
                 [disabled]="disabled"
+                [size]="size"
                 [tabIndex]="-1"
                 [textField]="textField"
                 [popupSettings]="popupSettings"
@@ -511,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [SplitButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { showText: [{
+        }], ctorParameters: function () { return [{ type: i1.ToolBarComponent }]; }, propDecorators: { showText: [{
                 type: Input
             }], showIcon: [{
                 type: Input

package/esm2022/tools/toolbar-tool.component.mjs

@@ -17,6 +17,10 @@ export class ToolBarToolComponent {
     visibility;
     element;
     isBuiltInTool = false;
+    /**
+     * @hidden
+     */
+    isHidden = false;
     /**
      * @hidden
      */

package/esm2022/util.mjs

@@ -179,8 +179,10 @@ export const getValueForLocation = (property, displayMode, overflows) => {
     switch (displayMode) {
         case 'toolbar':
             return overflows ? undefined : property;
-        case 'overflow':
+        case 'menu':
             return overflows ? property : undefined;
+        case 'never':
+            return;
         default:
             return property;
     }