@progress/kendo-angular-toolbar 21.1.1-develop.2 → 21.2.0-develop.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/esm2022/package-metadata.mjs +2 -2
  2. package/esm2022/toolbar.component.mjs +146 -104
  3. package/esm2022/tools/toolbar-button.component.mjs +220 -192
  4. package/esm2022/tools/toolbar-buttongroup.component.mjs +195 -183
  5. package/esm2022/tools/toolbar-dropdownbutton.component.mjs +177 -165
  6. package/esm2022/tools/toolbar-splitbutton.component.mjs +191 -179
  7. package/fesm2022/progress-kendo-angular-toolbar.mjs +927 -821
  8. package/package.json +9 -9
package/esm2022/tools/toolbar-buttongroup.component.mjs CHANGED
@@ -9,7 +9,7 @@ import { ToolBarButtonComponent } from './toolbar-button.component';
9
9
  import { makePeeker, getIndexOfFocused, seekFocusedIndex, getNextKey, getPrevKey, areEqual } from '../util';
10
10
  import { ButtonGroupComponent, ButtonComponent } from '@progress/kendo-angular-buttons';
11
11
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
- import { NgFor, NgStyle, NgClass, NgIf } from '@angular/common';
12
+ import { NgStyle, NgClass } from '@angular/common';
13
13
  import { ToolBarComponent } from '../toolbar.component';
14
14
  import * as i0 from "@angular/core";
15
15
  import * as i1 from "@progress/kendo-angular-l10n";
@@ -199,107 +199,113 @@ export class ToolBarButtonGroupComponent extends ToolBarToolComponent {
199
199
  }
200
200
  }
201
201
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonGroupComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
202
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: `
202
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
203
203
  <ng-template #toolbarTemplate>
204
- <kendo-buttongroup
205
- class="k-toolbar-button-group k-button-group-{{fillMode}}"
206
- #toolbarButtonGroup
207
- [tabIndex]="-1"
208
- [selection]="selection"
209
- [disabled]="disabled"
210
- [width]="width"
211
- (navigate)="onNavigate($event)"
212
- (focus)="onFocus()"
204
+ <kendo-buttongroup
205
+ class="k-toolbar-button-group k-button-group-{{fillMode}}"
206
+ #toolbarButtonGroup
207
+ [tabIndex]="-1"
208
+ [selection]="selection"
209
+ [disabled]="disabled"
210
+ [width]="width"
211
+ (navigate)="onNavigate($event)"
212
+ (focus)="onFocus()"
213
213
  >
214
- <button
215
- kendoButton
216
- type="button"
217
- *ngFor="let button of buttonComponents"
218
- [ngStyle]="button.style"
219
- [ngClass]="button.className"
220
- [attr.title]="button.title"
221
- [disabled]="button.disabled"
222
- [size]="size"
223
- [togglable]="button.togglable"
224
- [selected]="button.selected"
225
- [attr.aria-pressed]="button.selected ? true : false"
226
- [fillMode]="button.fillMode"
227
- [themeColor]="button.fillMode ? button.themeColor : null"
228
- [icon]="button.toolbarOptions.icon"
229
- [iconClass]="button.toolbarOptions.iconClass"
230
- [svgIcon]="button.toolbarOptions.svgIcon"
231
- [imageUrl]="button.toolbarOptions.imageUrl"
232
- (click)="button.click.emit($event); onButtonClick($event)"
233
- (pointerdown)="button.pointerdown.emit($event)"
234
- (selectedChange)="selectedChangeHandler($event, button)"
214
+ @for (button of buttonComponents; track button) {
215
+ <button
216
+ kendoButton
217
+ type="button"
218
+ [ngStyle]="button.style"
219
+ [ngClass]="button.className"
220
+ [attr.title]="button.title"
221
+ [disabled]="button.disabled"
222
+ [size]="size"
223
+ [togglable]="button.togglable"
224
+ [selected]="button.selected"
225
+ [attr.aria-pressed]="button.selected ? true : false"
226
+ [fillMode]="button.fillMode"
227
+ [themeColor]="button.fillMode ? button.themeColor : null"
228
+ [icon]="button.toolbarOptions.icon"
229
+ [iconClass]="button.toolbarOptions.iconClass"
230
+ [svgIcon]="button.toolbarOptions.svgIcon"
231
+ [imageUrl]="button.toolbarOptions.imageUrl"
232
+ (click)="button.click.emit($event); onButtonClick($event)"
233
+ (pointerdown)="button.pointerdown.emit($event)"
234
+ (selectedChange)="selectedChangeHandler($event, button)"
235
235
  >
236
- {{ button.toolbarOptions.text }}
237
- </button>
238
- </kendo-buttongroup>
236
+ {{ button.toolbarOptions.text }}
237
+ </button>
238
+ }
239
+ </kendo-buttongroup>
239
240
  </ng-template>
240
241
  <ng-template #popupTemplate>
241
- <div
242
- *ngFor="let button of buttonComponents"
243
- #listItem
244
- tabindex="-1"
245
- role="menuitem"
246
- class="k-item k-menu-item"
247
- [class.k-disabled]="disabled || button.disabled"
248
- [ngStyle]="button.style"
249
- [ngClass]="button.className"
250
- (click)="handleClick($event, button)">
251
- <span
252
- class="k-link k-menu-link"
253
- [class.k-selected]="button.selected"
254
- >
255
- <kendo-icon-wrapper
256
- *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
257
- [name]="button.overflowOptions.icon"
258
- [customFontClass]="button.overflowOptions.iconClass"
259
- [svgIcon]="button.overflowOptions.svgIcon"
260
- ></kendo-icon-wrapper>
261
- <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
262
- </span>
263
- </div>
242
+ @for (button of buttonComponents; track button) {
243
+ <div
244
+ #listItem
245
+ tabindex="-1"
246
+ role="menuitem"
247
+ class="k-item k-menu-item"
248
+ [class.k-disabled]="disabled || button.disabled"
249
+ [ngStyle]="button.style"
250
+ [ngClass]="button.className"
251
+ (click)="handleClick($event, button)">
252
+ <span
253
+ class="k-link k-menu-link"
254
+ [class.k-selected]="button.selected"
255
+ >
256
+ @if (button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon) {
257
+ <kendo-icon-wrapper
258
+ [name]="button.overflowOptions.icon"
259
+ [customFontClass]="button.overflowOptions.iconClass"
260
+ [svgIcon]="button.overflowOptions.svgIcon"
261
+ ></kendo-icon-wrapper>
262
+ }
263
+ @if (button.overflowOptions.text) {
264
+ <span class="k-menu-link-text">{{button.overflowOptions.text}}</span>
265
+ }
266
+ </span>
267
+ </div>
268
+ }
264
269
  </ng-template>
265
270
  <ng-template #sectionTemplate>
266
- <kendo-buttongroup
267
- class="k-toolbar-button-group k-button-group-{{fillMode}}"
268
- #sectionButtonGroup
269
- [tabIndex]="-1"
270
- [selection]="selection"
271
- [disabled]="disabled"
272
- [width]="width"
273
- (navigate)="onNavigate($event)"
274
- (focus)="onFocus()"
271
+ <kendo-buttongroup
272
+ class="k-toolbar-button-group k-button-group-{{fillMode}}"
273
+ #sectionButtonGroup
274
+ [tabIndex]="-1"
275
+ [selection]="selection"
276
+ [disabled]="disabled"
277
+ [width]="width"
278
+ (navigate)="onNavigate($event)"
279
+ (focus)="onFocus()"
275
280
  >
276
- <button
277
- kendoButton
278
- type="button"
279
- *ngFor="let button of buttonComponents"
280
- [ngStyle]="button.style"
281
- [ngClass]="button.className"
282
- [attr.title]="button.title"
283
- [disabled]="button.disabled"
284
- [size]="size"
285
- [togglable]="button.togglable"
286
- [selected]="button.selected"
287
- [attr.aria-pressed]="button.selected ? true : false"
288
- [fillMode]="button.fillMode"
289
- [themeColor]="button.fillMode ? button.themeColor : null"
290
- [icon]="button.toolbarOptions.icon"
291
- [iconClass]="button.toolbarOptions.iconClass"
292
- [svgIcon]="button.toolbarOptions.svgIcon"
293
- [imageUrl]="button.toolbarOptions.imageUrl"
294
- (click)="button.click.emit($event); onButtonClick($event)"
295
- (pointerdown)="button.pointerdown.emit($event)"
296
- (selectedChange)="selectedChangeHandler($event, button)"
281
+ @for (button of buttonComponents; track button) {
282
+ <button
283
+ kendoButton
284
+ type="button"
285
+ [ngStyle]="button.style"
286
+ [ngClass]="button.className"
287
+ [attr.title]="button.title"
288
+ [disabled]="button.disabled"
289
+ [size]="size"
290
+ [togglable]="button.togglable"
291
+ [selected]="button.selected"
292
+ [attr.aria-pressed]="button.selected ? true : false"
293
+ [fillMode]="button.fillMode"
294
+ [themeColor]="button.fillMode ? button.themeColor : null"
295
+ [icon]="button.toolbarOptions.icon"
296
+ [iconClass]="button.toolbarOptions.iconClass"
297
+ [svgIcon]="button.toolbarOptions.svgIcon"
298
+ [imageUrl]="button.toolbarOptions.imageUrl"
299
+ (click)="button.click.emit($event); onButtonClick($event)"
300
+ (pointerdown)="button.pointerdown.emit($event)"
301
+ (selectedChange)="selectedChangeHandler($event, button)"
297
302
  >
298
- {{ button.toolbarOptions.text }}
299
- </button>
300
- </kendo-buttongroup>
303
+ {{ button.toolbarOptions.text }}
304
+ </button>
305
+ }
306
+ </kendo-buttongroup>
301
307
  </ng-template>
302
- `, isInline: true, dependencies: [{ kind: "component", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
308
+ `, 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", "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"] }] });
303
309
  }
304
310
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
305
311
  type: Component,
@@ -309,107 +315,113 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
309
315
  selector: 'kendo-toolbar-buttongroup',
310
316
  template: `
311
317
  <ng-template #toolbarTemplate>
312
- <kendo-buttongroup
313
- class="k-toolbar-button-group k-button-group-{{fillMode}}"
314
- #toolbarButtonGroup
315
- [tabIndex]="-1"
316
- [selection]="selection"
317
- [disabled]="disabled"
318
- [width]="width"
319
- (navigate)="onNavigate($event)"
320
- (focus)="onFocus()"
318
+ <kendo-buttongroup
319
+ class="k-toolbar-button-group k-button-group-{{fillMode}}"
320
+ #toolbarButtonGroup
321
+ [tabIndex]="-1"
322
+ [selection]="selection"
323
+ [disabled]="disabled"
324
+ [width]="width"
325
+ (navigate)="onNavigate($event)"
326
+ (focus)="onFocus()"
321
327
  >
322
- <button
323
- kendoButton
324
- type="button"
325
- *ngFor="let button of buttonComponents"
326
- [ngStyle]="button.style"
327
- [ngClass]="button.className"
328
- [attr.title]="button.title"
329
- [disabled]="button.disabled"
330
- [size]="size"
331
- [togglable]="button.togglable"
332
- [selected]="button.selected"
333
- [attr.aria-pressed]="button.selected ? true : false"
334
- [fillMode]="button.fillMode"
335
- [themeColor]="button.fillMode ? button.themeColor : null"
336
- [icon]="button.toolbarOptions.icon"
337
- [iconClass]="button.toolbarOptions.iconClass"
338
- [svgIcon]="button.toolbarOptions.svgIcon"
339
- [imageUrl]="button.toolbarOptions.imageUrl"
340
- (click)="button.click.emit($event); onButtonClick($event)"
341
- (pointerdown)="button.pointerdown.emit($event)"
342
- (selectedChange)="selectedChangeHandler($event, button)"
328
+ @for (button of buttonComponents; track button) {
329
+ <button
330
+ kendoButton
331
+ type="button"
332
+ [ngStyle]="button.style"
333
+ [ngClass]="button.className"
334
+ [attr.title]="button.title"
335
+ [disabled]="button.disabled"
336
+ [size]="size"
337
+ [togglable]="button.togglable"
338
+ [selected]="button.selected"
339
+ [attr.aria-pressed]="button.selected ? true : false"
340
+ [fillMode]="button.fillMode"
341
+ [themeColor]="button.fillMode ? button.themeColor : null"
342
+ [icon]="button.toolbarOptions.icon"
343
+ [iconClass]="button.toolbarOptions.iconClass"
344
+ [svgIcon]="button.toolbarOptions.svgIcon"
345
+ [imageUrl]="button.toolbarOptions.imageUrl"
346
+ (click)="button.click.emit($event); onButtonClick($event)"
347
+ (pointerdown)="button.pointerdown.emit($event)"
348
+ (selectedChange)="selectedChangeHandler($event, button)"
343
349
  >
344
- {{ button.toolbarOptions.text }}
345
- </button>
346
- </kendo-buttongroup>
350
+ {{ button.toolbarOptions.text }}
351
+ </button>
352
+ }
353
+ </kendo-buttongroup>
347
354
  </ng-template>
348
355
  <ng-template #popupTemplate>
349
- <div
350
- *ngFor="let button of buttonComponents"
351
- #listItem
352
- tabindex="-1"
353
- role="menuitem"
354
- class="k-item k-menu-item"
355
- [class.k-disabled]="disabled || button.disabled"
356
- [ngStyle]="button.style"
357
- [ngClass]="button.className"
358
- (click)="handleClick($event, button)">
359
- <span
360
- class="k-link k-menu-link"
361
- [class.k-selected]="button.selected"
362
- >
363
- <kendo-icon-wrapper
364
- *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
365
- [name]="button.overflowOptions.icon"
366
- [customFontClass]="button.overflowOptions.iconClass"
367
- [svgIcon]="button.overflowOptions.svgIcon"
368
- ></kendo-icon-wrapper>
369
- <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
370
- </span>
371
- </div>
356
+ @for (button of buttonComponents; track button) {
357
+ <div
358
+ #listItem
359
+ tabindex="-1"
360
+ role="menuitem"
361
+ class="k-item k-menu-item"
362
+ [class.k-disabled]="disabled || button.disabled"
363
+ [ngStyle]="button.style"
364
+ [ngClass]="button.className"
365
+ (click)="handleClick($event, button)">
366
+ <span
367
+ class="k-link k-menu-link"
368
+ [class.k-selected]="button.selected"
369
+ >
370
+ @if (button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon) {
371
+ <kendo-icon-wrapper
372
+ [name]="button.overflowOptions.icon"
373
+ [customFontClass]="button.overflowOptions.iconClass"
374
+ [svgIcon]="button.overflowOptions.svgIcon"
375
+ ></kendo-icon-wrapper>
376
+ }
377
+ @if (button.overflowOptions.text) {
378
+ <span class="k-menu-link-text">{{button.overflowOptions.text}}</span>
379
+ }
380
+ </span>
381
+ </div>
382
+ }
372
383
  </ng-template>
373
384
  <ng-template #sectionTemplate>
374
- <kendo-buttongroup
375
- class="k-toolbar-button-group k-button-group-{{fillMode}}"
376
- #sectionButtonGroup
377
- [tabIndex]="-1"
378
- [selection]="selection"
379
- [disabled]="disabled"
380
- [width]="width"
381
- (navigate)="onNavigate($event)"
382
- (focus)="onFocus()"
385
+ <kendo-buttongroup
386
+ class="k-toolbar-button-group k-button-group-{{fillMode}}"
387
+ #sectionButtonGroup
388
+ [tabIndex]="-1"
389
+ [selection]="selection"
390
+ [disabled]="disabled"
391
+ [width]="width"
392
+ (navigate)="onNavigate($event)"
393
+ (focus)="onFocus()"
383
394
  >
384
- <button
385
- kendoButton
386
- type="button"
387
- *ngFor="let button of buttonComponents"
388
- [ngStyle]="button.style"
389
- [ngClass]="button.className"
390
- [attr.title]="button.title"
391
- [disabled]="button.disabled"
392
- [size]="size"
393
- [togglable]="button.togglable"
394
- [selected]="button.selected"
395
- [attr.aria-pressed]="button.selected ? true : false"
396
- [fillMode]="button.fillMode"
397
- [themeColor]="button.fillMode ? button.themeColor : null"
398
- [icon]="button.toolbarOptions.icon"
399
- [iconClass]="button.toolbarOptions.iconClass"
400
- [svgIcon]="button.toolbarOptions.svgIcon"
401
- [imageUrl]="button.toolbarOptions.imageUrl"
402
- (click)="button.click.emit($event); onButtonClick($event)"
403
- (pointerdown)="button.pointerdown.emit($event)"
404
- (selectedChange)="selectedChangeHandler($event, button)"
395
+ @for (button of buttonComponents; track button) {
396
+ <button
397
+ kendoButton
398
+ type="button"
399
+ [ngStyle]="button.style"
400
+ [ngClass]="button.className"
401
+ [attr.title]="button.title"
402
+ [disabled]="button.disabled"
403
+ [size]="size"
404
+ [togglable]="button.togglable"
405
+ [selected]="button.selected"
406
+ [attr.aria-pressed]="button.selected ? true : false"
407
+ [fillMode]="button.fillMode"
408
+ [themeColor]="button.fillMode ? button.themeColor : null"
409
+ [icon]="button.toolbarOptions.icon"
410
+ [iconClass]="button.toolbarOptions.iconClass"
411
+ [svgIcon]="button.toolbarOptions.svgIcon"
412
+ [imageUrl]="button.toolbarOptions.imageUrl"
413
+ (click)="button.click.emit($event); onButtonClick($event)"
414
+ (pointerdown)="button.pointerdown.emit($event)"
415
+ (selectedChange)="selectedChangeHandler($event, button)"
405
416
  >
406
- {{ button.toolbarOptions.text }}
407
- </button>
408
- </kendo-buttongroup>
417
+ {{ button.toolbarOptions.text }}
418
+ </button>
419
+ }
420
+ </kendo-buttongroup>
409
421
  </ng-template>
410
- `,
422
+ `,
411
423
  standalone: true,
412
- imports: [ButtonGroupComponent, NgFor, ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent]
424
+ imports: [ButtonGroupComponent, ButtonComponent, NgStyle, NgClass, IconWrapperComponent]
413
425
  }]
414
426
  }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.ToolBarComponent }], propDecorators: { disabled: [{
415
427
  type: Input