@progress/kendo-angular-buttons 21.1.1-develop.2 → 21.2.0-develop.10
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/buttongroup/buttongroup.component.mjs +2 -2
- package/esm2022/chip/chip-list.component.mjs +2 -2
- package/esm2022/chip/chip.component.mjs +107 -87
- package/esm2022/dropdownbutton/dropdownbutton.component.mjs +2 -2
- package/esm2022/floatingactionbutton/dial-item.component.mjs +39 -29
- package/esm2022/floatingactionbutton/dial-list.component.mjs +31 -31
- package/esm2022/floatingactionbutton/floatingactionbutton.component.mjs +99 -89
- package/esm2022/listbutton/list-button.mjs +2 -2
- 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 +516 -444
- 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
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { ButtonComponent } from '../button/button.component';
|
|
6
6
|
import { Component, EventEmitter, Output, Input, ContentChildren, QueryList, HostBinding, isDevMode, ElementRef, Renderer2 } from '@angular/core';
|
|
7
7
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
8
|
-
import { isChanged, Keys,
|
|
8
|
+
import { isChanged, Keys, normalizeKeys } from '@progress/kendo-angular-common';
|
|
9
9
|
import { KendoButtonService } from '../button/button.service';
|
|
10
10
|
import { fromEvent, Subscription } from 'rxjs';
|
|
11
11
|
import { filter } from 'rxjs/operators';
|
|
@@ -193,7 +193,7 @@ export class ButtonGroupComponent {
|
|
|
193
193
|
const firstIndex = 0;
|
|
194
194
|
const lastIndex = navigationButtons.length - 1;
|
|
195
195
|
const eventArgs = new PreventableEvent();
|
|
196
|
-
const code =
|
|
196
|
+
const code = normalizeKeys(event);
|
|
197
197
|
if (code === Keys.ArrowRight && focusedIndex < lastIndex) {
|
|
198
198
|
this.navigate.emit(eventArgs);
|
|
199
199
|
if (!eventArgs.isDefaultPrevented()) {
|
|
@@ -9,7 +9,7 @@ import { ChipComponent } from './chip.component';
|
|
|
9
9
|
import { closest, getStylingClasses } from '../util';
|
|
10
10
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
11
11
|
import { packageMetadata } from '../package-metadata';
|
|
12
|
-
import { isDocumentAvailable, Keys,
|
|
12
|
+
import { isDocumentAvailable, Keys, normalizeKeys } from '@progress/kendo-angular-common';
|
|
13
13
|
import * as i0 from "@angular/core";
|
|
14
14
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
15
15
|
/**
|
|
@@ -194,7 +194,7 @@ export class ChipListComponent {
|
|
|
194
194
|
}
|
|
195
195
|
keyDownHandler(e) {
|
|
196
196
|
// on some keyboards, arrow keys, page up/down, home/end, Enter are mapped to numpad keys
|
|
197
|
-
const code =
|
|
197
|
+
const code = normalizeKeys(e);
|
|
198
198
|
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
199
199
|
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
200
200
|
const isLeftArrow = code === Keys.ArrowLeft;
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, HostBinding, Input, Output, EventEmitter, ElementRef, Renderer2, NgZone, isDevMode } from '@angular/core';
|
|
6
6
|
import { Subscription } from 'rxjs';
|
|
7
|
-
import { isDocumentAvailable, Keys,
|
|
7
|
+
import { isDocumentAvailable, Keys, normalizeKeys } from '@progress/kendo-angular-common';
|
|
8
8
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
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';
|
|
@@ -347,7 +347,7 @@ export class ChipComponent {
|
|
|
347
347
|
}
|
|
348
348
|
}
|
|
349
349
|
keyDownHandler(e) {
|
|
350
|
-
const code =
|
|
350
|
+
const code = normalizeKeys(e);
|
|
351
351
|
const isEnterOrSpace = code === Keys.Enter || code === Keys.Space;
|
|
352
352
|
const isDeleteOrBackspace = code === Keys.Delete || code === Keys.Backspace;
|
|
353
353
|
if (this.disabled) {
|
|
@@ -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, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
|
|
6
6
|
import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
7
7
|
import { PopupService } from '@progress/kendo-angular-popup';
|
|
8
|
-
import { isDocumentAvailable, Keys, isPresent,
|
|
8
|
+
import { isDocumentAvailable, Keys, isPresent, normalizeKeys } from '@progress/kendo-angular-common';
|
|
9
9
|
import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
|
|
10
10
|
import { closest } from '../util';
|
|
11
11
|
import { ListButton } from '../listbutton/list-button';
|
|
@@ -165,7 +165,7 @@ export class DropDownButtonComponent extends ListButton {
|
|
|
165
165
|
*/
|
|
166
166
|
keydown(event) {
|
|
167
167
|
this.keyDownHandler(event, true);
|
|
168
|
-
const code =
|
|
168
|
+
const code = normalizeKeys(event);
|
|
169
169
|
if (code === Keys.Space) {
|
|
170
170
|
this._active = true;
|
|
171
171
|
}
|
|
@@ -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,
|