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

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.
@@ -9,7 +9,7 @@ import { ButtonComponent } from '@progress/kendo-angular-buttons';
9
9
  import { take } from 'rxjs/operators';
10
10
  import { IconWrapperComponent } from '@progress/kendo-angular-icons';
11
11
  import { BadgeComponent, BadgeContainerComponent } from '@progress/kendo-angular-indicators';
12
- import { 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 "../toolbar.component";
@@ -312,39 +312,9 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
312
312
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.ToolBarComponent }], target: i0.ɵɵFactoryTarget.Component });
313
313
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ToolBarButtonComponent, isStandalone: true, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", rounded: "rounded", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "sectionButtonElement", first: true, predicate: ["sectionButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
314
314
  <ng-template #toolbarTemplate>
315
- <kendo-badge-container *ngIf="hasBadgeContainer">
316
- <button
317
- #toolbarButton
318
- [class.k-toolbar-button]="!toggleable"
319
- [class.k-toolbar-toggle-button]="toggleable"
320
- [tabindex]="tabIndex"
321
- type="button"
322
- kendoButton
323
- [size]="size"
324
- [ngStyle]="style"
325
- [ngClass]="className"
326
- [attr.title]="title"
327
- [disabled]="disabled"
328
- [toggleable]="toggleable"
329
- [fillMode]="fillMode"
330
- [themeColor]="fillMode ? themeColor : null"
331
- [rounded]="rounded"
332
- [selected]="selected"
333
- [icon]="toolbarOptions.icon"
334
- [iconClass]="toolbarOptions.iconClass"
335
- [svgIcon]="toolbarOptions.svgIcon"
336
- [imageUrl]="toolbarOptions.imageUrl"
337
- (click)="click.emit($event)"
338
- (pointerdown)="pointerdown.emit($event)"
339
- (selectedChange)="selectedChangeHandler($event)"
340
- (blur)="onBlur()"
341
- >
342
- {{ toolbarOptions.text }}
343
- </button>
344
- <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
345
- </kendo-badge-container>
346
-
347
- <button *ngIf="!hasBadgeContainer"
315
+ @if (hasBadgeContainer) {
316
+ <kendo-badge-container>
317
+ <button
348
318
  #toolbarButton
349
319
  [class.k-toolbar-button]="!toggleable"
350
320
  [class.k-toolbar-toggle-button]="toggleable"
@@ -369,73 +339,82 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
369
339
  (pointerdown)="pointerdown.emit($event)"
370
340
  (selectedChange)="selectedChangeHandler($event)"
371
341
  (blur)="onBlur()"
372
- >
342
+ >
373
343
  {{ toolbarOptions.text }}
344
+ </button>
345
+ @if (showBadge) {
346
+ <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
347
+ }
348
+ </kendo-badge-container>
349
+ }
350
+
351
+ @if (!hasBadgeContainer) {
352
+ <button
353
+ #toolbarButton
354
+ [class.k-toolbar-button]="!toggleable"
355
+ [class.k-toolbar-toggle-button]="toggleable"
356
+ [tabindex]="tabIndex"
357
+ type="button"
358
+ kendoButton
359
+ [size]="size"
360
+ [ngStyle]="style"
361
+ [ngClass]="className"
362
+ [attr.title]="title"
363
+ [disabled]="disabled"
364
+ [toggleable]="toggleable"
365
+ [fillMode]="fillMode"
366
+ [themeColor]="fillMode ? themeColor : null"
367
+ [rounded]="rounded"
368
+ [selected]="selected"
369
+ [icon]="toolbarOptions.icon"
370
+ [iconClass]="toolbarOptions.iconClass"
371
+ [svgIcon]="toolbarOptions.svgIcon"
372
+ [imageUrl]="toolbarOptions.imageUrl"
373
+ (click)="click.emit($event)"
374
+ (pointerdown)="pointerdown.emit($event)"
375
+ (selectedChange)="selectedChangeHandler($event)"
376
+ (blur)="onBlur()"
377
+ >
378
+ {{ toolbarOptions.text }}
374
379
  </button>
380
+ }
375
381
  </ng-template>
376
382
  <ng-template #popupTemplate>
377
- <div
378
- #overflowButton
379
- tabindex="-1"
380
- role="menuitem"
381
- class="k-item k-menu-item"
382
- [class.k-disabled]="disabled"
383
- [ngClass]="className"
384
- [ngStyle]="style"
385
- (click)="handleClick($event)">
386
- <span
387
- class="k-link k-menu-link"
388
- [class.k-selected]="selected"
389
- >
390
- <kendo-icon-wrapper
391
- *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
392
- [name]="overflowOptions.icon"
393
- [customFontClass]="overflowOptions.iconClass"
394
- [svgIcon]="overflowOptions.svgIcon"
395
- ></kendo-icon-wrapper>
396
- @if (overflowOptions.imageUrl) {
397
- <span class="k-icon k-button-icon">
398
- <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
399
- </span>
400
- }
401
- <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
383
+ <div
384
+ #overflowButton
385
+ tabindex="-1"
386
+ role="menuitem"
387
+ class="k-item k-menu-item"
388
+ [class.k-disabled]="disabled"
389
+ [ngClass]="className"
390
+ [ngStyle]="style"
391
+ (click)="handleClick($event)">
392
+ <span
393
+ class="k-link k-menu-link"
394
+ [class.k-selected]="selected"
395
+ >
396
+ @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
397
+ <kendo-icon-wrapper
398
+ [name]="overflowOptions.icon"
399
+ [customFontClass]="overflowOptions.iconClass"
400
+ [svgIcon]="overflowOptions.svgIcon"
401
+ ></kendo-icon-wrapper>
402
+ }
403
+ @if (overflowOptions.imageUrl) {
404
+ <span class="k-icon k-button-icon">
405
+ <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
402
406
  </span>
403
- </div>
407
+ }
408
+ @if (overflowOptions.text) {
409
+ <span class="k-menu-link-text">{{overflowOptions.text}}</span>
410
+ }
411
+ </span>
412
+ </div>
404
413
  </ng-template>
405
414
  <ng-template #sectionTemplate>
406
- <kendo-badge-container *ngIf="hasBadgeContainer">
407
- <button
408
- #sectionButton
409
- [class.k-toolbar-button]="!toggleable"
410
- [class.k-toolbar-toggle-button]="toggleable"
411
- [tabindex]="tabIndex"
412
- type="button"
413
- kendoButton
414
- [size]="size"
415
- [ngStyle]="style"
416
- [ngClass]="className"
417
- [attr.title]="title"
418
- [disabled]="disabled"
419
- [toggleable]="toggleable"
420
- [fillMode]="fillMode"
421
- [themeColor]="fillMode ? themeColor : null"
422
- [rounded]="rounded"
423
- [selected]="selected"
424
- [icon]="toolbarOptions.icon"
425
- [iconClass]="toolbarOptions.iconClass"
426
- [svgIcon]="toolbarOptions.svgIcon"
427
- [imageUrl]="toolbarOptions.imageUrl"
428
- (click)="click.emit($event)"
429
- (pointerdown)="pointerdown.emit($event)"
430
- (selectedChange)="selectedChangeHandler($event)"
431
- (blur)="onBlur()"
432
- >
433
- {{ toolbarOptions.text }}
434
- </button>
435
- <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
436
- </kendo-badge-container>
437
- <button
438
- *ngIf="!hasBadgeContainer"
415
+ @if (hasBadgeContainer) {
416
+ <kendo-badge-container>
417
+ <button
439
418
  #sectionButton
440
419
  [class.k-toolbar-button]="!toggleable"
441
420
  [class.k-toolbar-toggle-button]="toggleable"
@@ -460,11 +439,46 @@ export class ToolBarButtonComponent extends ToolBarToolComponent {
460
439
  (pointerdown)="pointerdown.emit($event)"
461
440
  (selectedChange)="selectedChangeHandler($event)"
462
441
  (blur)="onBlur()"
463
- >
442
+ >
464
443
  {{ toolbarOptions.text }}
444
+ </button>
445
+ @if (showBadge) {
446
+ <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
447
+ }
448
+ </kendo-badge-container>
449
+ }
450
+ @if (!hasBadgeContainer) {
451
+ <button
452
+ #sectionButton
453
+ [class.k-toolbar-button]="!toggleable"
454
+ [class.k-toolbar-toggle-button]="toggleable"
455
+ [tabindex]="tabIndex"
456
+ type="button"
457
+ kendoButton
458
+ [size]="size"
459
+ [ngStyle]="style"
460
+ [ngClass]="className"
461
+ [attr.title]="title"
462
+ [disabled]="disabled"
463
+ [toggleable]="toggleable"
464
+ [fillMode]="fillMode"
465
+ [themeColor]="fillMode ? themeColor : null"
466
+ [rounded]="rounded"
467
+ [selected]="selected"
468
+ [icon]="toolbarOptions.icon"
469
+ [iconClass]="toolbarOptions.iconClass"
470
+ [svgIcon]="toolbarOptions.svgIcon"
471
+ [imageUrl]="toolbarOptions.imageUrl"
472
+ (click)="click.emit($event)"
473
+ (pointerdown)="pointerdown.emit($event)"
474
+ (selectedChange)="selectedChangeHandler($event)"
475
+ (blur)="onBlur()"
476
+ >
477
+ {{ toolbarOptions.text }}
465
478
  </button>
479
+ }
466
480
  </ng-template>
467
- `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
481
+ `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: BadgeComponent, selector: "kendo-badge", inputs: ["align", "size", "fill", "themeColor", "rounded", "position", "cutoutBorder"] }, { kind: "component", type: BadgeContainerComponent, selector: "kendo-badge-container" }] });
468
482
  }
469
483
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
470
484
  type: Component,
@@ -474,39 +488,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
474
488
  selector: 'kendo-toolbar-button',
475
489
  template: `
476
490
  <ng-template #toolbarTemplate>
477
- <kendo-badge-container *ngIf="hasBadgeContainer">
478
- <button
479
- #toolbarButton
480
- [class.k-toolbar-button]="!toggleable"
481
- [class.k-toolbar-toggle-button]="toggleable"
482
- [tabindex]="tabIndex"
483
- type="button"
484
- kendoButton
485
- [size]="size"
486
- [ngStyle]="style"
487
- [ngClass]="className"
488
- [attr.title]="title"
489
- [disabled]="disabled"
490
- [toggleable]="toggleable"
491
- [fillMode]="fillMode"
492
- [themeColor]="fillMode ? themeColor : null"
493
- [rounded]="rounded"
494
- [selected]="selected"
495
- [icon]="toolbarOptions.icon"
496
- [iconClass]="toolbarOptions.iconClass"
497
- [svgIcon]="toolbarOptions.svgIcon"
498
- [imageUrl]="toolbarOptions.imageUrl"
499
- (click)="click.emit($event)"
500
- (pointerdown)="pointerdown.emit($event)"
501
- (selectedChange)="selectedChangeHandler($event)"
502
- (blur)="onBlur()"
503
- >
504
- {{ toolbarOptions.text }}
505
- </button>
506
- <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
507
- </kendo-badge-container>
508
-
509
- <button *ngIf="!hasBadgeContainer"
491
+ @if (hasBadgeContainer) {
492
+ <kendo-badge-container>
493
+ <button
510
494
  #toolbarButton
511
495
  [class.k-toolbar-button]="!toggleable"
512
496
  [class.k-toolbar-toggle-button]="toggleable"
@@ -531,73 +515,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
531
515
  (pointerdown)="pointerdown.emit($event)"
532
516
  (selectedChange)="selectedChangeHandler($event)"
533
517
  (blur)="onBlur()"
534
- >
518
+ >
535
519
  {{ toolbarOptions.text }}
520
+ </button>
521
+ @if (showBadge) {
522
+ <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
523
+ }
524
+ </kendo-badge-container>
525
+ }
526
+
527
+ @if (!hasBadgeContainer) {
528
+ <button
529
+ #toolbarButton
530
+ [class.k-toolbar-button]="!toggleable"
531
+ [class.k-toolbar-toggle-button]="toggleable"
532
+ [tabindex]="tabIndex"
533
+ type="button"
534
+ kendoButton
535
+ [size]="size"
536
+ [ngStyle]="style"
537
+ [ngClass]="className"
538
+ [attr.title]="title"
539
+ [disabled]="disabled"
540
+ [toggleable]="toggleable"
541
+ [fillMode]="fillMode"
542
+ [themeColor]="fillMode ? themeColor : null"
543
+ [rounded]="rounded"
544
+ [selected]="selected"
545
+ [icon]="toolbarOptions.icon"
546
+ [iconClass]="toolbarOptions.iconClass"
547
+ [svgIcon]="toolbarOptions.svgIcon"
548
+ [imageUrl]="toolbarOptions.imageUrl"
549
+ (click)="click.emit($event)"
550
+ (pointerdown)="pointerdown.emit($event)"
551
+ (selectedChange)="selectedChangeHandler($event)"
552
+ (blur)="onBlur()"
553
+ >
554
+ {{ toolbarOptions.text }}
536
555
  </button>
556
+ }
537
557
  </ng-template>
538
558
  <ng-template #popupTemplate>
539
- <div
540
- #overflowButton
541
- tabindex="-1"
542
- role="menuitem"
543
- class="k-item k-menu-item"
544
- [class.k-disabled]="disabled"
545
- [ngClass]="className"
546
- [ngStyle]="style"
547
- (click)="handleClick($event)">
548
- <span
549
- class="k-link k-menu-link"
550
- [class.k-selected]="selected"
551
- >
552
- <kendo-icon-wrapper
553
- *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
554
- [name]="overflowOptions.icon"
555
- [customFontClass]="overflowOptions.iconClass"
556
- [svgIcon]="overflowOptions.svgIcon"
557
- ></kendo-icon-wrapper>
558
- @if (overflowOptions.imageUrl) {
559
- <span class="k-icon k-button-icon">
560
- <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
561
- </span>
562
- }
563
- <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
559
+ <div
560
+ #overflowButton
561
+ tabindex="-1"
562
+ role="menuitem"
563
+ class="k-item k-menu-item"
564
+ [class.k-disabled]="disabled"
565
+ [ngClass]="className"
566
+ [ngStyle]="style"
567
+ (click)="handleClick($event)">
568
+ <span
569
+ class="k-link k-menu-link"
570
+ [class.k-selected]="selected"
571
+ >
572
+ @if (overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon) {
573
+ <kendo-icon-wrapper
574
+ [name]="overflowOptions.icon"
575
+ [customFontClass]="overflowOptions.iconClass"
576
+ [svgIcon]="overflowOptions.svgIcon"
577
+ ></kendo-icon-wrapper>
578
+ }
579
+ @if (overflowOptions.imageUrl) {
580
+ <span class="k-icon k-button-icon">
581
+ <img [src]="overflowOptions.imageUrl" role="presentation" class="k-image" />
564
582
  </span>
565
- </div>
583
+ }
584
+ @if (overflowOptions.text) {
585
+ <span class="k-menu-link-text">{{overflowOptions.text}}</span>
586
+ }
587
+ </span>
588
+ </div>
566
589
  </ng-template>
567
590
  <ng-template #sectionTemplate>
568
- <kendo-badge-container *ngIf="hasBadgeContainer">
569
- <button
570
- #sectionButton
571
- [class.k-toolbar-button]="!toggleable"
572
- [class.k-toolbar-toggle-button]="toggleable"
573
- [tabindex]="tabIndex"
574
- type="button"
575
- kendoButton
576
- [size]="size"
577
- [ngStyle]="style"
578
- [ngClass]="className"
579
- [attr.title]="title"
580
- [disabled]="disabled"
581
- [toggleable]="toggleable"
582
- [fillMode]="fillMode"
583
- [themeColor]="fillMode ? themeColor : null"
584
- [rounded]="rounded"
585
- [selected]="selected"
586
- [icon]="toolbarOptions.icon"
587
- [iconClass]="toolbarOptions.iconClass"
588
- [svgIcon]="toolbarOptions.svgIcon"
589
- [imageUrl]="toolbarOptions.imageUrl"
590
- (click)="click.emit($event)"
591
- (pointerdown)="pointerdown.emit($event)"
592
- (selectedChange)="selectedChangeHandler($event)"
593
- (blur)="onBlur()"
594
- >
595
- {{ toolbarOptions.text }}
596
- </button>
597
- <kendo-badge *ngIf="showBadge" [cutoutBorder]="true" rounded="full"></kendo-badge>
598
- </kendo-badge-container>
599
- <button
600
- *ngIf="!hasBadgeContainer"
591
+ @if (hasBadgeContainer) {
592
+ <kendo-badge-container>
593
+ <button
601
594
  #sectionButton
602
595
  [class.k-toolbar-button]="!toggleable"
603
596
  [class.k-toolbar-toggle-button]="toggleable"
@@ -622,13 +615,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
622
615
  (pointerdown)="pointerdown.emit($event)"
623
616
  (selectedChange)="selectedChangeHandler($event)"
624
617
  (blur)="onBlur()"
625
- >
618
+ >
626
619
  {{ toolbarOptions.text }}
620
+ </button>
621
+ @if (showBadge) {
622
+ <kendo-badge [cutoutBorder]="true" rounded="full"></kendo-badge>
623
+ }
624
+ </kendo-badge-container>
625
+ }
626
+ @if (!hasBadgeContainer) {
627
+ <button
628
+ #sectionButton
629
+ [class.k-toolbar-button]="!toggleable"
630
+ [class.k-toolbar-toggle-button]="toggleable"
631
+ [tabindex]="tabIndex"
632
+ type="button"
633
+ kendoButton
634
+ [size]="size"
635
+ [ngStyle]="style"
636
+ [ngClass]="className"
637
+ [attr.title]="title"
638
+ [disabled]="disabled"
639
+ [toggleable]="toggleable"
640
+ [fillMode]="fillMode"
641
+ [themeColor]="fillMode ? themeColor : null"
642
+ [rounded]="rounded"
643
+ [selected]="selected"
644
+ [icon]="toolbarOptions.icon"
645
+ [iconClass]="toolbarOptions.iconClass"
646
+ [svgIcon]="toolbarOptions.svgIcon"
647
+ [imageUrl]="toolbarOptions.imageUrl"
648
+ (click)="click.emit($event)"
649
+ (pointerdown)="pointerdown.emit($event)"
650
+ (selectedChange)="selectedChangeHandler($event)"
651
+ (blur)="onBlur()"
652
+ >
653
+ {{ toolbarOptions.text }}
627
654
  </button>
655
+ }
628
656
  </ng-template>
629
- `,
657
+ `,
630
658
  standalone: true,
631
- imports: [ButtonComponent, NgStyle, NgClass, NgIf, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
659
+ imports: [ButtonComponent, NgStyle, NgClass, IconWrapperComponent, BadgeComponent, BadgeContainerComponent],
632
660
  }]
633
661
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1.ToolBarComponent }], propDecorators: { showText: [{
634
662
  type: Input