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

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

@@ -6,13 +6,13 @@ import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, inject, ElementRef, Input, ViewChild, Directive, Output, forwardRef, HostBinding, Component, ViewContainerRef, HostListener, ContentChildren, isDevMode, ViewChildren, NgModule } from '@angular/core';
 import * as i2 from '@progress/kendo-angular-popup';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { normalizeKeys, Keys, isPresent as isPresent$1, isDocumentAvailable, guid, parseCSSClassNames, ResizeSensorComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { normalizeKeys, Keys, isPresent as isPresent$1, isDocumentAvailable, getLicenseMessage, shouldShowValidationUI, guid, parseCSSClassNames, ResizeSensorComponent, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import { caretAltLeftIcon, caretAltRightIcon, moreHorizontalIcon, moreVerticalIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { chevronLeftIcon, chevronRightIcon, moreHorizontalIcon, moreVerticalIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, ButtonGroupComponent, DropDownButtonComponent, SplitButtonComponent } from '@progress/kendo-angular-buttons';
 import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776940459,
-    version: '24.0.0-develop.3',
+    publishDate: 1778841641,
+    version: '24.0.0-develop.31',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -756,6 +756,10 @@ class ToolBarRendererComponent {
                 this.renderer.setStyle(this.internalComponentRef, 'visibility', this.tool.visibility);
                 this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.toolbarDisplay);
             }
+            else if (this.location === 'section') {
+                this.renderer.setStyle(this.internalComponentRef, 'visibility', 'visible');
+                this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflows ? 'inline-flex' : 'none');
+            }
             else {
                 this.renderer.setStyle(this.internalComponentRef, 'display', this.tool.overflowDisplay);
             }
@@ -979,8 +983,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });
 
 const DIRECTION_CLASSES = {
-    left: 'caret-alt-left',
-    right: 'caret-alt-right'
+    left: 'chevron-left',
+    right: 'chevron-right'
 };
 /**
  * @hidden
@@ -1009,8 +1013,8 @@ class ToolbarScrollableButtonComponent {
     get svgIcon() {
         return this.scrollButtonSVGIcon;
     }
-    caretAltLeftIcon = caretAltLeftIcon;
-    caretAltRightIcon = caretAltRightIcon;
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
     subs = new Subscription();
     constructor(host, renderer, ngZone, localization) {
         this.host = host;
@@ -1062,11 +1066,11 @@ class ToolbarScrollableButtonComponent {
     }
     get scrollButtonSVGIcon() {
         const defaultPrevSVGIcon = !this.localization.rtl ?
-            this.caretAltLeftIcon :
-            this.caretAltRightIcon;
+            this.chevronLeftIcon :
+            this.chevronRightIcon;
         const defaultNextSVGIcon = !this.localization.rtl ?
-            this.caretAltRightIcon :
-            this.caretAltLeftIcon;
+            this.chevronRightIcon :
+            this.chevronLeftIcon;
         if (typeof this.overflow === 'object') {
             const prevIcon = this.overflow.prevSVGButtonIcon !== undefined ? this.overflow.prevSVGButtonIcon : defaultPrevSVGIcon;
             const nextIcon = this.overflow.nextSVGButtonIcon !== undefined ? this.overflow.nextSVGButtonIcon : defaultNextSVGIcon;
@@ -1362,11 +1366,11 @@ class ToolBarComponent {
     /**
      * @hidden
      */
-    prevButtonIcon = caretAltLeftIcon;
+    prevButtonIcon = chevronLeftIcon;
     /**
      * @hidden
      */
-    nextButtonIcon = caretAltRightIcon;
+    nextButtonIcon = chevronRightIcon;
     /**
      * @hidden
      */
@@ -1435,6 +1439,14 @@ class ToolBarComponent {
     get resizableClass() {
         return this.resizable;
     }
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    /**
+     * @hidden
+     */
+    licenseMessage;
     constructor(localization, popupService, refreshService, navigationService, 
     // Needs to be public as it is being accessed in the Editor component
     element, zone, renderer, _cdr, toolsService, scrollService) {
@@ -1448,7 +1460,9 @@ class ToolBarComponent {
         this._cdr = _cdr;
         this.toolsService = toolsService;
         this.scrollService = scrollService;
-        validatePackage(packageMetadata);
+        const isValid = validatePackage(packageMetadata);
+        this.licenseMessage = getLicenseMessage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.scrollService.owner = this;
     }
@@ -2230,7 +2244,7 @@ class ToolBarComponent {
             [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
-            class="k-toolbar-overflow-button"
+            class="k-toolbar-overflow-button k-rounded-none"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
@@ -2335,7 +2349,10 @@ class ToolBarComponent {
         @if (overflowEnabled) {
             <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }] });
+        @if (showLicenseWatermark) {
+            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { kind: "directive", type: ToolBarRendererComponent, selector: "[kendoToolbarRenderer]", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: ToolbarScrollableButtonComponent, selector: "[kendoToolbarScrollableButton]", inputs: ["prev", "overflow"], outputs: ["onClick"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
@@ -2467,7 +2484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             [attr.aria-haspopup]="normalizedOverflow.mode === 'section' ? null : 'menu'"
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
-            class="k-toolbar-overflow-button"
+            class="k-toolbar-overflow-button k-rounded-none"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
@@ -2572,9 +2589,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         @if (overflowEnabled) {
             <kendo-resize-sensor #resizeSensor></kendo-resize-sensor>
         }
+        @if (showLicenseWatermark) {
+            <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
+        }
     `,
                     standalone: true,
-                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, ToolBarRendererComponent, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent]
+                    imports: [NgTemplateOutlet, LocalizedToolbarMessagesDirective, ToolBarRendererComponent, ButtonComponent, NgClass, ResizeSensorComponent, ToolbarScrollableButtonComponent, WatermarkOverlayComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: ToolbarToolsService }, { type: ScrollService }], propDecorators: { overflow: [{
                 type: Input
@@ -3122,7 +3142,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             </button>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
@@ -3564,7 +3584,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 [size]="size"
                 [togglable]="button.togglable"
                 [selected]="button.selected"
-                [attr.aria-pressed]="button.selected ? true : false"
+                [attr.aria-pressed]="button.togglable ? (button.selected ? true : false) : null"
                 [fillMode]="button.fillMode"
                 [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
@@ -3632,7 +3652,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
                 [size]="size"
                 [togglable]="button.togglable"
                 [selected]="button.selected"
-                [attr.aria-pressed]="button.selected ? true : false"
+                [attr.aria-pressed]="button.togglable ? (button.selected ? true : false) : null"
                 [fillMode]="button.fillMode"
                 [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
@@ -3648,7 +3668,7 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
             }
           </kendo-buttongroup>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
@@ -3680,7 +3700,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [size]="size"
                 [togglable]="button.togglable"
                 [selected]="button.selected"
-                [attr.aria-pressed]="button.selected ? true : false"
+                [attr.aria-pressed]="button.togglable ? (button.selected ? true : false) : null"
                 [fillMode]="button.fillMode"
                 [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
@@ -3748,7 +3768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [size]="size"
                 [togglable]="button.togglable"
                 [selected]="button.selected"
-                [attr.aria-pressed]="button.selected ? true : false"
+                [attr.aria-pressed]="button.togglable ? (button.selected ? true : false) : null"
                 [fillMode]="button.fillMode"
                 [themeColor]="button.themeColor"
                 [icon]="button.toolbarOptions.icon"
@@ -4509,11 +4529,11 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
     /**
      * Sets the name of the [font icon](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list) for the arrow button.
      */
-    arrowButtonIcon = 'caret-alt-down';
+    arrowButtonIcon = 'chevron-down';
     /**
      * Sets the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) for the arrow button.
      */
-    arrowButtonSvgIcon = caretAltDownIcon;
+    arrowButtonSvgIcon = chevronDownIcon;
     /**
      * Sets the text field for the button-list popup.
      * @default 'text'

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1776940459,
-  "version": "24.0.0-develop.3",
+  "publishDate": 1778841641,
+  "version": "24.0.0-develop.31",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "24.0.0-develop.3",
+  "version": "24.0.0-develop.31",
   "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",
@@ -43,7 +43,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1776940459,
+      "publishDate": 1778841641,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -53,17 +53,17 @@
     "@angular/core": "19 - 21",
     "@angular/platform-browser": "19 - 21",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.0.0-develop.3",
-    "@progress/kendo-angular-common": "24.0.0-develop.3",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.3",
-    "@progress/kendo-angular-icons": "24.0.0-develop.3",
-    "@progress/kendo-angular-indicators": "24.0.0-develop.3",
-    "@progress/kendo-angular-popup": "24.0.0-develop.3",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.31",
+    "@progress/kendo-angular-common": "24.0.0-develop.31",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.31",
+    "@progress/kendo-angular-icons": "24.0.0-develop.31",
+    "@progress/kendo-angular-indicators": "24.0.0-develop.31",
+    "@progress/kendo-angular-popup": "24.0.0-develop.31",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.3"
+    "@progress/kendo-angular-schematics": "24.0.0-develop.31"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-toolbar.mjs",

package/scrollable-button.component.d.ts

@@ -25,8 +25,8 @@ export declare class ToolbarScrollableButtonComponent implements AfterViewInit,
     get iconClass(): string;
     get customIconClass(): string;
     get svgIcon(): SVGIcon;
-    caretAltLeftIcon: SVGIcon;
-    caretAltRightIcon: SVGIcon;
+    chevronLeftIcon: SVGIcon;
+    chevronRightIcon: SVGIcon;
     private subs;
     constructor(host: ElementRef, renderer: Renderer2, ngZone: NgZone, localization: LocalizationService);
     ngAfterViewInit(): void;

package/toolbar.component.d.ts

@@ -6,6 +6,7 @@ import { TemplateRef, ElementRef, QueryList, EventEmitter, ViewContainerRef, NgZ
 import { PopupService, PopupRef } from '@progress/kendo-angular-popup';
 import { ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { LicenseMessage } from '@progress/kendo-licensing';
 import { RefreshService } from './refresh.service';
 import { NavigationService } from './navigation.service';
 import { PopupSettings } from './popup-settings';
@@ -216,6 +217,14 @@ export declare class ToolBarComponent {
     role: string;
     get getDir(): string;
     get resizableClass(): boolean;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark: boolean;
+    /**
+     * @hidden
+     */
+    licenseMessage?: LicenseMessage;
     constructor(localization: LocalizationService, popupService: PopupService, refreshService: RefreshService, navigationService: NavigationService, element: ElementRef, zone: NgZone, renderer: Renderer2, _cdr: ChangeDetectorRef, toolsService: ToolbarToolsService, scrollService: ScrollService);
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;