@progress/kendo-angular-toolbar 24.0.0-develop.2 → 24.0.0-develop.20

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

@@ -6,7 +6,7 @@ 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';
@@ -26,8 +26,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1776936105,
-    version: '24.0.0-develop.2',
+    publishDate: 1778149413,
+    version: '24.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1435,6 +1435,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 +1456,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;
     }
@@ -2179,36 +2189,36 @@ class ToolBarComponent {
         @if (isScrollMode) {
             <div class="k-toolbar-items k-toolbar-items-scroll" tabindex="-1" #scrollContainer>
                 @for (tool of allTools; track tool; let index = $index) {
+                    <ng-template #wrapper>
+                        <div class="k-toolbar-item">
+                            <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                        </div>
+                    </ng-template>
                     <ng-container
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-                <ng-template #wrapper>
-                    <div class="k-toolbar-item">
-                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                    </div>
-                </ng-template>
-            </ng-container>
-            }
-        </div>
+                        kendoToolbarRenderer
+                        [tool]="tool"
+                        location="toolbar"
+                        [resizable]="resizable"
+                        (rendererClick)="onRendererClick($event)"
+                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                    </ng-container>
+                }
+            </div>
         } @else {
             @for (tool of allTools; track tool; let index = $index) {
-                <ng-container
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
                 <ng-template #wrapper>
                     <div class="k-toolbar-item">
                         <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
                     </div>
                 </ng-template>
-            </ng-container>
+                <ng-container
+                    kendoToolbarRenderer
+                    [tool]="tool"
+                    location="toolbar"
+                    [resizable]="resizable"
+                    (rendererClick)="onRendererClick($event)"
+                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                </ng-container>
             }
         }
         @if (showOverflowSeparator) {
@@ -2230,7 +2240,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()"
         >
@@ -2317,6 +2327,9 @@ class ToolBarComponent {
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 @for (tool of overflowTools; track tool; let index = $index) {
+                    <ng-template #wrapper>
+                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
+                    </ng-template>
                     <ng-container
                         kendoToolbarRenderer
                         [tool]="tool"
@@ -2324,9 +2337,6 @@ class ToolBarComponent {
                         [resizable]="resizable"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
-                        <ng-template #wrapper>
-                            <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
-                        </ng-template>
                     </ng-container>
                 }
             </span>
@@ -2335,7 +2345,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", "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"] }, { 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,
@@ -2416,36 +2429,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
         @if (isScrollMode) {
             <div class="k-toolbar-items k-toolbar-items-scroll" tabindex="-1" #scrollContainer>
                 @for (tool of allTools; track tool; let index = $index) {
+                    <ng-template #wrapper>
+                        <div class="k-toolbar-item">
+                            <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
+                        </div>
+                    </ng-template>
                     <ng-container
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
-                <ng-template #wrapper>
-                    <div class="k-toolbar-item">
-                        <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
-                    </div>
-                </ng-template>
-            </ng-container>
-            }
-        </div>
+                        kendoToolbarRenderer
+                        [tool]="tool"
+                        location="toolbar"
+                        [resizable]="resizable"
+                        (rendererClick)="onRendererClick($event)"
+                        [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                    </ng-container>
+                }
+            </div>
         } @else {
             @for (tool of allTools; track tool; let index = $index) {
-                <ng-container
-                kendoToolbarRenderer
-                [tool]="tool"
-                location="toolbar"
-                [resizable]="resizable"
-                (rendererClick)="onRendererClick($event)"
-                [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
                 <ng-template #wrapper>
                     <div class="k-toolbar-item">
                         <ng-container [ngTemplateOutlet]="tool.toolbarTemplate"></ng-container>
                     </div>
                 </ng-template>
-            </ng-container>
+                <ng-container
+                    kendoToolbarRenderer
+                    [tool]="tool"
+                    location="toolbar"
+                    [resizable]="resizable"
+                    (rendererClick)="onRendererClick($event)"
+                    [ngTemplateOutlet]="tool.isBuiltInTool ? tool.toolbarTemplate : wrapper">
+                </ng-container>
             }
         }
         @if (showOverflowSeparator) {
@@ -2467,7 +2480,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()"
         >
@@ -2554,6 +2567,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                 [attr.dir]="direction === 'rtl' ? 'rtl' : null"
                 [attr.aria-labelledby]="overflowBtnId">
                 @for (tool of overflowTools; track tool; let index = $index) {
+                    <ng-template #wrapper>
+                        <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
+                    </ng-template>
                     <ng-container
                         kendoToolbarRenderer
                         [tool]="tool"
@@ -2561,9 +2577,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         [resizable]="resizable"
                         (rendererClick)="onRendererClick($event)"
                         [ngTemplateOutlet]="tool.isBuiltInTool ? tool.sectionTemplate : wrapper">
-                        <ng-template #wrapper>
-                            <ng-container [ngTemplateOutlet]="tool.sectionTemplate"></ng-container>
-                        </ng-template>
                     </ng-container>
                 }
             </span>
@@ -2572,9 +2585,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
@@ -3564,7 +3580,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 +3648,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"
@@ -3680,7 +3696,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 +3764,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"

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1776936105,
-  "version": "24.0.0-develop.2",
+  "publishDate": 1778149413,
+  "version": "24.0.0-develop.20",
   "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.2",
+  "version": "24.0.0-develop.20",
   "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": 1776936105,
+      "publishDate": 1778149413,
       "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.2",
-    "@progress/kendo-angular-common": "24.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "24.0.0-develop.2",
-    "@progress/kendo-angular-icons": "24.0.0-develop.2",
-    "@progress/kendo-angular-indicators": "24.0.0-develop.2",
-    "@progress/kendo-angular-popup": "24.0.0-develop.2",
+    "@progress/kendo-angular-buttons": "24.0.0-develop.20",
+    "@progress/kendo-angular-common": "24.0.0-develop.20",
+    "@progress/kendo-angular-l10n": "24.0.0-develop.20",
+    "@progress/kendo-angular-icons": "24.0.0-develop.20",
+    "@progress/kendo-angular-indicators": "24.0.0-develop.20",
+    "@progress/kendo-angular-popup": "24.0.0-develop.20",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "24.0.0-develop.20"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-toolbar.mjs",

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;