@progress/kendo-angular-buttons 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.
- package/esm2022/button/button.component.mjs +47 -29
- package/esm2022/chip/chip.component.mjs +105 -85
- package/esm2022/floatingactionbutton/dial-item.component.mjs +39 -29
- package/esm2022/floatingactionbutton/dial-list.component.mjs +31 -31
- package/esm2022/floatingactionbutton/floatingactionbutton.component.mjs +97 -87
- package/esm2022/listbutton/list.component.mjs +93 -83
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/splitbutton/splitbutton.component.mjs +101 -97
- package/fesm2022/progress-kendo-angular-buttons.mjs +509 -437
- package/package.json +7 -7
|
@@ -12,7 +12,7 @@ import { validatePackage } from '@progress/kendo-licensing';
|
|
|
12
12
|
import { packageMetadata } from '../package-metadata';
|
|
13
13
|
import { getStylingClasses, getThemeColorClasses, toggleClass } from '../util';
|
|
14
14
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
15
|
-
import {
|
|
15
|
+
import { NgClass } from '@angular/common';
|
|
16
16
|
import * as i0 from "@angular/core";
|
|
17
17
|
import * as i1 from "./button.service";
|
|
18
18
|
import * as i2 from "@progress/kendo-angular-l10n";
|
|
@@ -415,31 +415,40 @@ export class ButtonComponent {
|
|
|
415
415
|
}
|
|
416
416
|
}
|
|
417
417
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.KendoButtonService, optional: true }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
418
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, isStandalone: true, selector: "button[kendoButton]", inputs: { arrowIcon: "arrowIcon", toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
|
|
419
419
|
LocalizationService,
|
|
420
420
|
{
|
|
421
421
|
provide: L10N_PREFIX,
|
|
422
422
|
useValue: 'kendo.button'
|
|
423
423
|
}
|
|
424
424
|
], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
|
|
425
|
-
|
|
426
|
-
|
|
425
|
+
@if (icon || svgIcon) {
|
|
426
|
+
<kendo-icon-wrapper
|
|
427
427
|
innerCssClass="k-button-icon"
|
|
428
428
|
[name]="icon"
|
|
429
|
-
|
|
430
|
-
|
|
429
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
430
|
+
}
|
|
431
|
+
@if (imageUrl) {
|
|
432
|
+
<span class="k-button-icon k-icon">
|
|
431
433
|
<img [src]="imageUrl" class="k-image" role="presentation" />
|
|
432
|
-
|
|
433
|
-
|
|
434
|
+
</span>
|
|
435
|
+
}
|
|
436
|
+
@if (iconClass) {
|
|
437
|
+
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
438
|
+
}
|
|
434
439
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
435
|
-
|
|
436
|
-
|
|
440
|
+
@if ($any(arrowIcon).iconClass) {
|
|
441
|
+
<span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
|
|
442
|
+
}
|
|
443
|
+
@if (arrowIcon && !$any(arrowIcon).iconClass) {
|
|
444
|
+
<span class="k-button-arrow">
|
|
437
445
|
<kendo-icon-wrapper
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
446
|
+
[name]="$any(arrowIcon).icon || 'caret-alt-down'"
|
|
447
|
+
[svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
|
|
448
|
+
</span>
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
`, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
443
452
|
}
|
|
444
453
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
445
454
|
type: Component,
|
|
@@ -454,26 +463,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
454
463
|
],
|
|
455
464
|
selector: 'button[kendoButton]',
|
|
456
465
|
template: `
|
|
457
|
-
|
|
458
|
-
|
|
466
|
+
@if (icon || svgIcon) {
|
|
467
|
+
<kendo-icon-wrapper
|
|
459
468
|
innerCssClass="k-button-icon"
|
|
460
469
|
[name]="icon"
|
|
461
|
-
|
|
462
|
-
|
|
470
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
471
|
+
}
|
|
472
|
+
@if (imageUrl) {
|
|
473
|
+
<span class="k-button-icon k-icon">
|
|
463
474
|
<img [src]="imageUrl" class="k-image" role="presentation" />
|
|
464
|
-
|
|
465
|
-
|
|
475
|
+
</span>
|
|
476
|
+
}
|
|
477
|
+
@if (iconClass) {
|
|
478
|
+
<span class="k-button-icon" [ngClass]="iconClass"></span>
|
|
479
|
+
}
|
|
466
480
|
<span class="k-button-text"><ng-content></ng-content></span>
|
|
467
|
-
|
|
468
|
-
|
|
481
|
+
@if ($any(arrowIcon).iconClass) {
|
|
482
|
+
<span class="k-button-icon" [ngClass]="$any(arrowIcon).iconClass"></span>
|
|
483
|
+
}
|
|
484
|
+
@if (arrowIcon && !$any(arrowIcon).iconClass) {
|
|
485
|
+
<span class="k-button-arrow">
|
|
469
486
|
<kendo-icon-wrapper
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
487
|
+
[name]="$any(arrowIcon).icon || 'caret-alt-down'"
|
|
488
|
+
[svgIcon]="$any(arrowIcon).svgIcon || caretAltDownIcon"></kendo-icon-wrapper>
|
|
489
|
+
</span>
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
`,
|
|
475
493
|
standalone: true,
|
|
476
|
-
imports: [
|
|
494
|
+
imports: [IconWrapperComponent, NgClass]
|
|
477
495
|
}]
|
|
478
496
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.KendoButtonService, decorators: [{
|
|
479
497
|
type: Optional
|
|
@@ -11,7 +11,7 @@ import { packageMetadata } from '../package-metadata';
|
|
|
11
11
|
import { closest, getStylingClasses, getThemeColorClasses, isObjectEmpty } from '../util';
|
|
12
12
|
import { moreVerticalIcon, xCircleIcon } from '@progress/kendo-svg-icons';
|
|
13
13
|
import { IconWrapperComponent } from '@progress/kendo-angular-icons';
|
|
14
|
-
import {
|
|
14
|
+
import { NgStyle } from '@angular/common';
|
|
15
15
|
import * as i0 from "@angular/core";
|
|
16
16
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
17
17
|
const DEFAULT_SIZE = 'medium';
|
|
@@ -365,129 +365,149 @@ export class ChipComponent {
|
|
|
365
365
|
}
|
|
366
366
|
}
|
|
367
367
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipComponent, isStandalone: true, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarSettings: "avatarSettings", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", hasMenu: "hasMenu", menuIcon: "menuIcon", menuSvgIcon: "menuSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", menuToggle: "menuToggle", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
|
|
369
369
|
LocalizationService,
|
|
370
370
|
{
|
|
371
371
|
provide: L10N_PREFIX,
|
|
372
372
|
useValue: 'kendo.chip'
|
|
373
373
|
}
|
|
374
374
|
], usesOnChanges: true, ngImport: i0, template: `
|
|
375
|
-
|
|
376
|
-
|
|
375
|
+
@if (icon || svgIcon) {
|
|
376
|
+
<kendo-icon-wrapper
|
|
377
377
|
size="small"
|
|
378
378
|
innerCssClass="k-chip-icon"
|
|
379
379
|
[name]="icon"
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
380
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
@if (iconClass) {
|
|
384
|
+
<kendo-icon-wrapper
|
|
384
385
|
size="small"
|
|
385
386
|
innerCssClass="k-chip-icon"
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
387
|
+
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
388
|
+
}
|
|
389
|
+
@if (avatarSettings) {
|
|
390
|
+
<span
|
|
389
391
|
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
390
392
|
[ngStyle]="avatarSettings.cssStyle">
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
393
|
+
@if (avatarSettings?.imageSrc) {
|
|
394
|
+
<span class="k-avatar-image">
|
|
395
|
+
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
396
|
+
</span>
|
|
397
|
+
}
|
|
398
|
+
@if (avatarSettings?.initials) {
|
|
399
|
+
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
400
|
+
}
|
|
401
|
+
</span>
|
|
402
|
+
}
|
|
403
|
+
|
|
402
404
|
<span class="k-chip-content">
|
|
403
|
-
|
|
404
|
-
|
|
405
|
+
@if (label) {
|
|
406
|
+
<span class="k-chip-label">
|
|
407
|
+
{{ label }}
|
|
405
408
|
</span>
|
|
406
|
-
|
|
409
|
+
}
|
|
410
|
+
@if (!label) {
|
|
411
|
+
<ng-content></ng-content>
|
|
412
|
+
}
|
|
407
413
|
</span>
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
414
|
+
|
|
415
|
+
@if (hasMenu || removable) {
|
|
416
|
+
<span class="k-chip-actions">
|
|
417
|
+
@if (hasMenu) {
|
|
418
|
+
<span class="k-chip-action k-chip-more-action"
|
|
412
419
|
(click)="onMenuClick($event)">
|
|
413
420
|
<kendo-icon-wrapper
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
+
name="more-vertical"
|
|
422
|
+
size="small"
|
|
423
|
+
[svgIcon]="defaultMenuIcon || menuSvgIcon"
|
|
424
|
+
[customFontClass]="menuIcon"></kendo-icon-wrapper>
|
|
425
|
+
</span>
|
|
426
|
+
}
|
|
427
|
+
@if (removable) {
|
|
428
|
+
<span class="k-chip-action k-chip-remove-action"
|
|
421
429
|
(click)="onRemoveClick($event)">
|
|
422
430
|
<kendo-icon-wrapper
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
431
|
+
name="x-circle"
|
|
432
|
+
size="small"
|
|
433
|
+
[svgIcon]="removeSvgIcon || defaultRemoveIcon"
|
|
434
|
+
[customFontClass]="removeIcon"></kendo-icon-wrapper>
|
|
435
|
+
</span>
|
|
436
|
+
}
|
|
437
|
+
</span>
|
|
438
|
+
}
|
|
439
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
430
440
|
}
|
|
431
441
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipComponent, decorators: [{
|
|
432
442
|
type: Component,
|
|
433
443
|
args: [{
|
|
434
444
|
selector: 'kendo-chip',
|
|
435
445
|
template: `
|
|
436
|
-
|
|
437
|
-
|
|
446
|
+
@if (icon || svgIcon) {
|
|
447
|
+
<kendo-icon-wrapper
|
|
438
448
|
size="small"
|
|
439
449
|
innerCssClass="k-chip-icon"
|
|
440
450
|
[name]="icon"
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
451
|
+
[svgIcon]="svgIcon"></kendo-icon-wrapper>
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
@if (iconClass) {
|
|
455
|
+
<kendo-icon-wrapper
|
|
445
456
|
size="small"
|
|
446
457
|
innerCssClass="k-chip-icon"
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
458
|
+
[customFontClass]="customIconClass"></kendo-icon-wrapper>
|
|
459
|
+
}
|
|
460
|
+
@if (avatarSettings) {
|
|
461
|
+
<span
|
|
450
462
|
class="k-chip-avatar k-avatar k-avatar-sm k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
451
463
|
[ngStyle]="avatarSettings.cssStyle">
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
464
|
+
@if (avatarSettings?.imageSrc) {
|
|
465
|
+
<span class="k-avatar-image">
|
|
466
|
+
<img src="{{ avatarSettings.imageSrc }}" [ngStyle]="avatarSettings.imageCssStyle" [attr.alt]="avatarSettings.imageAltText" />
|
|
467
|
+
</span>
|
|
468
|
+
}
|
|
469
|
+
@if (avatarSettings?.initials) {
|
|
470
|
+
<span class="k-avatar-text" [ngStyle]="avatarSettings.initialsCssStyle">{{ avatarSettings.initials.substring(0, 2) }}</span>
|
|
471
|
+
}
|
|
472
|
+
</span>
|
|
473
|
+
}
|
|
474
|
+
|
|
463
475
|
<span class="k-chip-content">
|
|
464
|
-
|
|
465
|
-
|
|
476
|
+
@if (label) {
|
|
477
|
+
<span class="k-chip-label">
|
|
478
|
+
{{ label }}
|
|
466
479
|
</span>
|
|
467
|
-
|
|
480
|
+
}
|
|
481
|
+
@if (!label) {
|
|
482
|
+
<ng-content></ng-content>
|
|
483
|
+
}
|
|
468
484
|
</span>
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
485
|
+
|
|
486
|
+
@if (hasMenu || removable) {
|
|
487
|
+
<span class="k-chip-actions">
|
|
488
|
+
@if (hasMenu) {
|
|
489
|
+
<span class="k-chip-action k-chip-more-action"
|
|
473
490
|
(click)="onMenuClick($event)">
|
|
474
491
|
<kendo-icon-wrapper
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
492
|
+
name="more-vertical"
|
|
493
|
+
size="small"
|
|
494
|
+
[svgIcon]="defaultMenuIcon || menuSvgIcon"
|
|
495
|
+
[customFontClass]="menuIcon"></kendo-icon-wrapper>
|
|
496
|
+
</span>
|
|
497
|
+
}
|
|
498
|
+
@if (removable) {
|
|
499
|
+
<span class="k-chip-action k-chip-remove-action"
|
|
482
500
|
(click)="onRemoveClick($event)">
|
|
483
501
|
<kendo-icon-wrapper
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
502
|
+
name="x-circle"
|
|
503
|
+
size="small"
|
|
504
|
+
[svgIcon]="removeSvgIcon || defaultRemoveIcon"
|
|
505
|
+
[customFontClass]="removeIcon"></kendo-icon-wrapper>
|
|
506
|
+
</span>
|
|
507
|
+
}
|
|
508
|
+
</span>
|
|
509
|
+
}
|
|
510
|
+
`,
|
|
491
511
|
providers: [
|
|
492
512
|
LocalizationService,
|
|
493
513
|
{
|
|
@@ -496,7 +516,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
496
516
|
}
|
|
497
517
|
],
|
|
498
518
|
standalone: true,
|
|
499
|
-
imports: [
|
|
519
|
+
imports: [NgStyle, IconWrapperComponent]
|
|
500
520
|
}]
|
|
501
521
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { label: [{
|
|
502
522
|
type: Input
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { Component, ElementRef, HostBinding, Input, Renderer2, TemplateRef } from "@angular/core";
|
|
6
6
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { IconWrapperComponent } from "@progress/kendo-angular-icons";
|
|
8
|
-
import {
|
|
8
|
+
import { NgTemplateOutlet } from "@angular/common";
|
|
9
9
|
import * as i0 from "@angular/core";
|
|
10
10
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
11
11
|
/**
|
|
@@ -70,23 +70,28 @@ export class DialItemComponent {
|
|
|
70
70
|
return directions[dir][align];
|
|
71
71
|
}
|
|
72
72
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
73
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
74
|
-
|
|
73
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
|
|
74
|
+
@if (dialItemTemplate) {
|
|
75
|
+
<ng-template
|
|
75
76
|
[ngTemplateOutlet]="dialItemTemplate"
|
|
76
77
|
[ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
>
|
|
79
|
+
</ng-template>
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@if (!dialItemTemplate) {
|
|
83
|
+
@if (item.label) {
|
|
84
|
+
<span class="k-fab-item-text">{{ item.label }}</span>
|
|
85
|
+
}
|
|
86
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
82
87
|
<kendo-icon-wrapper
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
88
|
+
[name]="item.icon"
|
|
89
|
+
innerCssClass="k-fab-item-icon"
|
|
90
|
+
[customFontClass]="item.iconClass"
|
|
91
|
+
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
|
|
90
95
|
}
|
|
91
96
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialItemComponent, decorators: [{
|
|
92
97
|
type: Component,
|
|
@@ -94,24 +99,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
94
99
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
95
100
|
selector: '[kendoDialItem]',
|
|
96
101
|
template: `
|
|
97
|
-
|
|
102
|
+
@if (dialItemTemplate) {
|
|
103
|
+
<ng-template
|
|
98
104
|
[ngTemplateOutlet]="dialItemTemplate"
|
|
99
105
|
[ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
106
|
+
>
|
|
107
|
+
</ng-template>
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@if (!dialItemTemplate) {
|
|
111
|
+
@if (item.label) {
|
|
112
|
+
<span class="k-fab-item-text">{{ item.label }}</span>
|
|
113
|
+
}
|
|
114
|
+
@if (item.icon || item.iconClass || item.svgIcon) {
|
|
105
115
|
<kendo-icon-wrapper
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
116
|
+
[name]="item.icon"
|
|
117
|
+
innerCssClass="k-fab-item-icon"
|
|
118
|
+
[customFontClass]="item.iconClass"
|
|
119
|
+
[svgIcon]="item.svgIcon"></kendo-icon-wrapper>
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
`,
|
|
113
123
|
standalone: true,
|
|
114
|
-
imports: [
|
|
124
|
+
imports: [NgTemplateOutlet, IconWrapperComponent]
|
|
115
125
|
}]
|
|
116
126
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { hostClass: [{
|
|
117
127
|
type: HostBinding,
|
|
@@ -7,7 +7,7 @@ import { Subscription } from 'rxjs';
|
|
|
7
7
|
import { FocusService } from '../focusable/focus.service';
|
|
8
8
|
import { DialItemComponent } from "./dial-item.component";
|
|
9
9
|
import { FocusableDirective } from "../focusable/focusable.directive";
|
|
10
|
-
import {
|
|
10
|
+
import { NgClass, NgStyle } from "@angular/common";
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
12
|
import * as i1 from "../focusable/focus.service";
|
|
13
13
|
/**
|
|
@@ -39,22 +39,22 @@ export class DialListComponent {
|
|
|
39
39
|
this.subscriptions.unsubscribe();
|
|
40
40
|
}
|
|
41
41
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialListComponent, deps: [{ token: i1.FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
42
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
|
|
43
|
+
@for (item of dialItems; track item; let idx = $index) {
|
|
44
|
+
<li
|
|
45
|
+
kendoButtonFocusable
|
|
46
|
+
kendoDialItem
|
|
47
|
+
[item]="dialItems[idx]"
|
|
48
|
+
[index]="idx"
|
|
49
|
+
[dialItemTemplate]="dialItemTemplate"
|
|
50
|
+
[isFocused]="isFocused(idx)"
|
|
51
|
+
[ngClass]='item.cssClass'
|
|
52
|
+
[ngStyle]='item.cssStyle'
|
|
53
|
+
[align]="align"
|
|
54
54
|
>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
55
|
+
</li>
|
|
56
|
+
}
|
|
57
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "component", type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
58
58
|
}
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialListComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
@@ -62,23 +62,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
62
62
|
// eslint-disable-next-line @angular-eslint/component-selector
|
|
63
63
|
selector: '[kendoDialList]',
|
|
64
64
|
template: `
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
65
|
+
@for (item of dialItems; track item; let idx = $index) {
|
|
66
|
+
<li
|
|
67
|
+
kendoButtonFocusable
|
|
68
|
+
kendoDialItem
|
|
69
|
+
[item]="dialItems[idx]"
|
|
70
|
+
[index]="idx"
|
|
71
|
+
[dialItemTemplate]="dialItemTemplate"
|
|
72
|
+
[isFocused]="isFocused(idx)"
|
|
73
|
+
[ngClass]='item.cssClass'
|
|
74
|
+
[ngStyle]='item.cssStyle'
|
|
75
|
+
[align]="align"
|
|
76
76
|
>
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
77
|
+
</li>
|
|
78
|
+
}
|
|
79
|
+
`,
|
|
80
80
|
standalone: true,
|
|
81
|
-
imports: [
|
|
81
|
+
imports: [FocusableDirective, DialItemComponent, NgClass, NgStyle]
|
|
82
82
|
}]
|
|
83
83
|
}], ctorParameters: () => [{ type: i1.FocusService }, { type: i0.ChangeDetectorRef }], propDecorators: { hostClass: [{
|
|
84
84
|
type: HostBinding,
|