@progress/kendo-angular-toolbar 22.1.0-develop.18 → 22.1.0-develop.19

package/common/fillmode.d.ts

@@ -5,4 +5,4 @@
 /**
  * Represents the possible fill mode options of the ToolBar.
  */
-export type ToolbarFillMode = 'solid' | 'flat' | 'outline' | 'none';
+export type ToolbarFillMode = 'solid' | 'flat' | 'outline';

package/common/size.d.ts

@@ -6,4 +6,4 @@
  * Represents the possible size options of the ToolBar.
  * @default `medium`
  */
-export type ToolbarSize = 'small' | 'medium' | 'large' | 'none';
+export type ToolbarSize = 'small' | 'medium' | 'large';

package/fesm2022/progress-kendo-angular-toolbar.mjs

@@ -27,7 +27,7 @@ const packageMetadata = {
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
     publishDate: 0,
-    version: '22.1.0-develop.18',
+    version: '22.1.0-develop.19',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -247,16 +247,18 @@ const SIZES = {
  */
 const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
     switch (stylingOption) {
-        case 'size':
+        case 'size': {
             return {
-                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+                toRemove: previousValue ? `k-${componentType}-${SIZES[previousValue]}` : null,
+                toAdd: newValue ? `k-${componentType}-${SIZES[newValue]}` : null
             };
-        case 'fillMode':
+        }
+        case 'fillMode': {
             return {
-                toRemove: `k-${componentType}-${previousValue}`,
-                toAdd: newValue !== 'none' ? `k-${componentType}-${newValue}` : ''
+                toRemove: previousValue ? `k-${componentType}-${previousValue}` : null,
+                toAdd: newValue ? `k-${componentType}-${newValue}` : null
             };
+        }
         default:
             break;
     }
@@ -1111,8 +1113,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             }] } });
 
 /* eslint-disable no-case-declarations */
-const DEFAULT_SIZE = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
 const immediateResizeThreshold = 300;
 const getInitialPopupSettings = (isRtl) => ({
     animate: true,
@@ -1158,7 +1158,7 @@ class ToolBarComponent {
     toolsService;
     scrollService;
     get overflowClass() {
-        return `k-button-${SIZES[this.size]}`;
+        return this.size ? `k-button-${SIZES[this.size]}` : '';
     }
     /**
      * Sets the overflow mode for the ToolBar.
@@ -1238,12 +1238,11 @@ class ToolBarComponent {
      * Sets the fill mode for the ToolBar.
      * This property controls the background and border styles of the ToolBar
      * ([see example](slug:appearance_toolbar#toc-fill-mode)).
-     * @default 'solid'
+     * @default undefined
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
-        this.handleClasses(newFillMode, 'fillMode');
-        this._fillMode = newFillMode;
+        this.handleClasses(fillMode, 'fillMode');
+        this._fillMode = fillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -1257,12 +1256,11 @@ class ToolBarComponent {
     /**
      * Sets the size for all ToolBar elements.
      * Use this property to control the padding of the ToolBar elements.
-     * @default 'medium'
+     * @default undefined
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE;
-        this.handleClasses(newSize, 'size');
-        this._size = newSize;
+        this.handleClasses(size, 'size');
+        this._size = size;
     }
     get size() {
         return this._size;
@@ -1384,8 +1382,8 @@ class ToolBarComponent {
     sectionKeydownListener;
     cancelRenderedToolsSubscription$ = new Subject();
     cachedGap;
-    _size = DEFAULT_SIZE;
-    _fillMode = DEFAULT_FILL_MODE;
+    _size = undefined;
+    _fillMode = undefined;
     _showText = 'always';
     _showIcon = 'always';
     overflowButtonClickedTime = null;
@@ -1539,10 +1537,6 @@ class ToolBarComponent {
             }
         }));
         this.navigationService.setRenderedTools(this.toolsService.renderedTools);
-        const stylingOptions = ['size', 'fillMode'];
-        stylingOptions.forEach(option => {
-            this.handleClasses(this[option], option);
-        });
     }
     ngOnInit() {
         this.subscriptions.add(this.localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
@@ -1591,7 +1585,7 @@ class ToolBarComponent {
      * @hidden
      */
     get sectionSizeClass() {
-        return this.size === 'none' ? '' : `k-toolbar-items-list-${SIZES[this.size]}`;
+        return `k-toolbar-items-list-${SIZES[this.size]}`;
     }
     /**
      * @hidden
@@ -2132,26 +2126,26 @@ class ToolBarComponent {
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
                 </span>
             }
             @if (hasScrollButtons.position === 'start') {
-                <div class="k-button-group k-button-group-solid" #startButtonGroup>
+                <div class="k-button-group" #startButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2161,10 +2155,10 @@ class ToolBarComponent {
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2241,26 +2235,26 @@ class ToolBarComponent {
                 [prev]="false"
                 [overflow]="normalizedOverflow"
                 [title]="getScrollButtonTitle('next')"
-                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                class="k-toolbar-next k-icon-button k-button"
                 [ngClass]="{
                     'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
+                    'k-button-md': size === 'medium',
                     'k-button-lg': size === 'large'
                 }"
                 (onClick)="scrollTools($event)">
             </span>
             }
             @if (hasScrollButtons.position === 'end') {
-                <div class="k-button-group k-button-group-solid" #endButtonGroup>
+                <div class="k-button-group" #endButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2270,10 +2264,10 @@ class ToolBarComponent {
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2283,7 +2277,7 @@ class ToolBarComponent {
         }
         <ng-template #popupTemplate>
             <div
-                class="k-menu-group k-menu-group-md"
+                class="k-menu-group"
                 role="menu"
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
@@ -2369,26 +2363,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
                 </span>
             }
             @if (hasScrollButtons.position === 'start') {
-                <div class="k-button-group k-button-group-solid" #startButtonGroup>
+                <div class="k-button-group" #startButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2398,10 +2392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2478,26 +2472,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [prev]="false"
                 [overflow]="normalizedOverflow"
                 [title]="getScrollButtonTitle('next')"
-                class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                class="k-toolbar-next k-icon-button k-button"
                 [ngClass]="{
                     'k-button-sm': size === 'small',
-                    'k-button-md': size === 'medium' || !size,
+                    'k-button-md': size === 'medium',
                     'k-button-lg': size === 'large'
                 }"
                 (onClick)="scrollTools($event)">
             </span>
             }
             @if (hasScrollButtons.position === 'end') {
-                <div class="k-button-group k-button-group-solid" #endButtonGroup>
+                <div class="k-button-group" #endButtonGroup>
                 <span #prevScrollButton
                     kendoToolbarScrollableButton
                     [prev]="true"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('prev')"
-                    class="k-toolbar-prev k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-prev k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2507,10 +2501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     [prev]="false"
                     [overflow]="normalizedOverflow"
                     [title]="getScrollButtonTitle('next')"
-                    class="k-toolbar-next k-icon-button k-button k-button-solid k-button-solid-base k-rounded-md"
+                    class="k-toolbar-next k-icon-button k-button"
                     [ngClass]="{
                         'k-button-sm': size === 'small',
-                        'k-button-md': size === 'medium' || !size,
+                        'k-button-md': size === 'medium',
                         'k-button-lg': size === 'large'
                     }"
                     (onClick)="scrollTools($event)">
@@ -2520,7 +2514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         }
         <ng-template #popupTemplate>
             <div
-                class="k-menu-group k-menu-group-md"
+                class="k-menu-group"
                 role="menu"
                 [id]="popupId"
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
@@ -2767,22 +2761,22 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     /**
      * Specifies the background and border styles of the Button.
      * Accepts a `ButtonFillMode` value.
-     * @default 'solid'
+     * @default undefined
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
      * Specifies the border radius of the Button.
      * Accepts a `ButtonRounded` value.
      *
-     * @default 'medium'
+     * @default undefined
      */
-    rounded = 'medium';
+    rounded = undefined;
     /**
      * Specifies the predefined theme color of the Button.
      * Accepts a `ButtonThemeColor` value.
-     * @default 'base'
+     * @default undefined
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Defines the name for an existing icon in a Kendo UI theme
      * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
@@ -2973,7 +2967,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3008,7 +3002,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3073,7 +3067,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3107,7 +3101,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3149,7 +3143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3184,7 +3178,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3249,7 +3243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [disabled]="disabled"
                 [toggleable]="toggleable"
                 [fillMode]="fillMode"
-                [themeColor]="fillMode ? themeColor : null"
+                [themeColor]="themeColor"
                 [rounded]="rounded"
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
@@ -3283,7 +3277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
               [disabled]="disabled"
               [toggleable]="toggleable"
               [fillMode]="fillMode"
-              [themeColor]="fillMode ? themeColor : null"
+              [themeColor]="themeColor"
               [rounded]="rounded"
               [selected]="selected"
               [icon]="toolbarOptions.icon"
@@ -3387,9 +3381,9 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      *
      * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
-     * @default 'solid'
+     * @default undefined
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
      * Sets the selection mode of the ButtonGroup.
      * @default 'multiple'
@@ -3544,7 +3538,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: ToolBarButtonGroupComponent, isStandalone: true, selector: "kendo-toolbar-buttongroup", inputs: { disabled: "disabled", fillMode: "fillMode", selection: "selection", width: "width", look: "look" }, providers: [LocalizationService, { provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonGroupComponent) }], queries: [{ propertyName: "buttonComponents", predicate: i0.forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonGroup", first: true, predicate: ["toolbarButtonGroup"], descendants: true }, { propertyName: "sectionButtonGroup", first: true, predicate: ["sectionButtonGroup"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarButtonGroup"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #toolbarButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3566,7 +3561,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3611,7 +3606,8 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
         </ng-template>
         <ng-template #sectionTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #sectionButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3633,7 +3629,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3658,7 +3654,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #toolbarButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3680,7 +3677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3725,7 +3722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
         </ng-template>
         <ng-template #sectionTemplate>
           <kendo-buttongroup
-            class="k-toolbar-button-group k-button-group-{{fillMode}}"
+            class="k-toolbar-button-group"
+            [ngClass]="fillMode ? 'k-button-group-' + fillMode : ''"
             #sectionButtonGroup
             [tabIndex]="-1"
             [selection]="selection"
@@ -3747,7 +3745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
                 [selected]="button.selected"
                 [attr.aria-pressed]="button.selected ? true : false"
                 [fillMode]="button.fillMode"
-                [themeColor]="button.fillMode ? button.themeColor : null"
+                [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
                 [iconClass]="button.toolbarOptions.iconClass"
                 [svgIcon]="button.toolbarOptions.svgIcon"
@@ -3914,16 +3912,16 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     /**
      * Sets the fill mode for the button.
      * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * @default undefined
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text
      * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-     * @default 'base'
+     * @default undefined
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * Sets the CSS classes for the main button.
      * Accepts values supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
@@ -4125,7 +4123,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4197,7 +4195,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4230,7 +4228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4302,7 +4300,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
             (itemClick)="itemClick.emit($event)"
@@ -4477,15 +4475,15 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     /**
      * Sets the fill mode for the button.
      * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * @default undefined
      */
-    fillMode = 'solid';
+    fillMode = undefined;
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text.
-     * @default 'base'
+     * @default undefined
      */
-    themeColor = 'base';
+    themeColor = undefined;
     /**
      * @hidden
      */
@@ -4706,7 +4704,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
@@ -4782,7 +4780,7 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
@@ -4818,7 +4816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"
@@ -4894,7 +4892,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImpo
             [textField]="textField"
             [popupSettings]="popupSettings"
             [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
+            [themeColor]="themeColor"
             (buttonClick)="buttonClick.emit($event)"
             (open)="open.emit($event)"
             (close)="close.emit($event)"

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1770112358,
-  "version": "22.1.0-develop.18",
+  "publishDate": 1770219730,
+  "version": "22.1.0-develop.19",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "22.1.0-develop.18",
+  "version": "22.1.0-develop.19",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -45,7 +45,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1770112358,
+      "publishDate": 1770219730,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -55,17 +55,17 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.10.0",
-    "@progress/kendo-angular-buttons": "22.1.0-develop.18",
-    "@progress/kendo-angular-common": "22.1.0-develop.18",
-    "@progress/kendo-angular-l10n": "22.1.0-develop.18",
-    "@progress/kendo-angular-icons": "22.1.0-develop.18",
-    "@progress/kendo-angular-indicators": "22.1.0-develop.18",
-    "@progress/kendo-angular-popup": "22.1.0-develop.18",
+    "@progress/kendo-angular-buttons": "22.1.0-develop.19",
+    "@progress/kendo-angular-common": "22.1.0-develop.19",
+    "@progress/kendo-angular-l10n": "22.1.0-develop.19",
+    "@progress/kendo-angular-icons": "22.1.0-develop.19",
+    "@progress/kendo-angular-indicators": "22.1.0-develop.19",
+    "@progress/kendo-angular-popup": "22.1.0-develop.19",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "22.1.0-develop.18"
+    "@progress/kendo-angular-schematics": "22.1.0-develop.19"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-toolbar.mjs",

package/toolbar.component.d.ts

@@ -105,7 +105,7 @@ export declare class ToolBarComponent {
      * Sets the fill mode for the ToolBar.
      * This property controls the background and border styles of the ToolBar
      * ([see example](slug:appearance_toolbar#toc-fill-mode)).
-     * @default 'solid'
+     * @default undefined
      */
     set fillMode(fillMode: ToolbarFillMode);
     get fillMode(): ToolbarFillMode;
@@ -118,7 +118,7 @@ export declare class ToolBarComponent {
     /**
      * Sets the size for all ToolBar elements.
      * Use this property to control the padding of the ToolBar elements.
-     * @default 'medium'
+     * @default undefined
      */
     set size(size: ToolbarSize);
     get size(): ToolbarSize;

package/tools/toolbar-button.component.d.ts

@@ -97,20 +97,20 @@ export declare class ToolBarButtonComponent extends ToolBarToolComponent {
     /**
      * Specifies the background and border styles of the Button.
      * Accepts a `ButtonFillMode` value.
-     * @default 'solid'
+     * @default undefined
      */
     fillMode: ButtonFillMode;
     /**
      * Specifies the border radius of the Button.
      * Accepts a `ButtonRounded` value.
      *
-     * @default 'medium'
+     * @default undefined
      */
     rounded: ButtonRounded;
     /**
      * Specifies the predefined theme color of the Button.
      * Accepts a `ButtonThemeColor` value.
-     * @default 'base'
+     * @default undefined
      */
     themeColor: ButtonThemeColor;
     /**

package/tools/toolbar-buttongroup.component.d.ts

@@ -41,7 +41,7 @@ export declare class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      * @hidden
      *
      * Used to set different fillmode in Spreadsheet and Toolbar to comply with referent rendering.
-     * @default 'solid'
+     * @default undefined
      */
     fillMode: 'solid' | 'flat';
     /**

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -92,14 +92,14 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     /**
      * Sets the fill mode for the button.
      * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * @default undefined
      */
     fillMode: ButtonFillMode;
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text
      * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-     * @default 'base'
+     * @default undefined
      */
     themeColor: ButtonThemeColor;
     /**

package/tools/toolbar-splitbutton.component.d.ts

@@ -76,13 +76,13 @@ export declare class ToolBarSplitButtonComponent extends ToolBarToolComponent im
     /**
      * Sets the fill mode for the button.
      * The fill mode represents the background and border styles.
-     * @default 'solid'
+     * @default undefined
      */
     fillMode: ButtonFillMode;
     /**
      * Sets the predefined theme color for the button.
      * The theme color applies to the background, border, and text.
-     * @default 'base'
+     * @default undefined
      */
     themeColor: ButtonThemeColor;
     /**