@progress/kendo-angular-buttons 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/common/models.mjs

@@ -1,10 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export * from './models/size';
-export * from './models/theme-color';
-export * from './models/fillmode';
-export * from './models/rounded';
-export * from './models/styling-classes';
-export * from './models/arrow-settings';

package/esm2022/direction.mjs

@@ -1,5 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-export {};

package/esm2022/directives.mjs

@@ -1,176 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
-import { ButtonComponent } from './button/button.component';
-import { ButtonGroupComponent } from './buttongroup/buttongroup.component';
-import { ChipListComponent } from './chip/chip-list.component';
-import { ChipComponent } from './chip/chip.component';
-import { DropDownButtonComponent } from './dropdownbutton/dropdownbutton.component';
-import { FloatingActionButtonComponent } from './floatingactionbutton/floatingactionbutton.component';
-import { DialItemTemplateDirective } from './floatingactionbutton/templates/dial-item-template.directive';
-import { FloatingActionButtonTemplateDirective } from './floatingactionbutton/templates/fab-template.directive';
-import { SplitButtonCustomMessagesComponent } from './splitbutton/localization/custom-messages.component';
-import { SplitButtonComponent } from './splitbutton/splitbutton.component';
-import { ButtonItemTemplateDirective } from './listbutton/button-item-template.directive';
-import { SpeechToTextButtonComponent } from './speechtotextbutton/speechtotextbutton.component';
-/**
- * Use the `KENDO_BUTTON` utility array to add all Button-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_BUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_BUTTON = [
-    ButtonComponent
-];
-/**
- * Use the `KENDO_BUTTONGROUP` utility array to add all ButtonGroup-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_BUTTONGROUP],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_BUTTONGROUP = [
-    ButtonComponent,
-    ButtonGroupComponent
-];
-/**
- * Use the `KENDO_DROPDOWNBUTTON` utility array to add all DropDownButton-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_DROPDOWNBUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_DROPDOWNBUTTON = [
-    DropDownButtonComponent,
-    ButtonItemTemplateDirective
-];
-/**
- * Use the `KENDO_CHIP` utility array to add all Chip-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_CHIP],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_CHIP = [
-    ChipComponent
-];
-/**
- * Use the `KENDO_CHIPLIST` utility array to add all ChipList-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_CHIPLIST],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_CHIPLIST = [
-    ChipComponent,
-    ChipListComponent
-];
-/**
- * Use the `KENDO_FLOATINGACTIONBUTTON` utility array to add all FloatingActionButton-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_FLOATINGACTIONBUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_FLOATINGACTIONBUTTON = [
-    FloatingActionButtonComponent,
-    DialItemTemplateDirective,
-    FloatingActionButtonTemplateDirective
-];
-/**
- * Use the `KENDO_SPLITBUTTON` utility array to add all SplitButton-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_SPLITBUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_SPLITBUTTON = [
-    SplitButtonComponent,
-    SplitButtonCustomMessagesComponent,
-    ToggleButtonTabStopDirective,
-    ButtonItemTemplateDirective
-];
-/**
- * Use the `KENDO_SPEECHTOTEXTBUTTON` utility array to add all SpeechToTextButton-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_SPEECHTOTEXTBUTTON],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_SPEECHTOTEXTBUTTON = [
-    SpeechToTextButtonComponent
-];
-/**
- * Use the `KENDO_BUTTONS` utility array to add all `@progress/kendo-angular-buttons`-related components and directives to a standalone Angular component.
- *
- * @example
- * ```typescript
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_BUTTONS],
- *   // ...
- * })
- * export class MyComponent {}
- * ```
- */
-export const KENDO_BUTTONS = [
-    ...KENDO_BUTTON,
-    ...KENDO_BUTTONGROUP,
-    ...KENDO_DROPDOWNBUTTON,
-    ...KENDO_CHIP,
-    ...KENDO_CHIPLIST,
-    ...KENDO_FLOATINGACTIONBUTTON,
-    ...KENDO_SPLITBUTTON,
-    ...KENDO_SPEECHTOTEXTBUTTON
-];

package/esm2022/dropdownbutton/dropdownbutton.component.mjs

@@ -1,482 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { isDocumentAvailable, Keys, isPresent, normalizeKeys } from '@progress/kendo-angular-common';
-import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
-import { closest } from '../util';
-import { ListButton } from '../listbutton/list-button';
-import { ListComponent } from '../listbutton/list.component';
-import { FocusService } from '../focusable/focus.service';
-import { NavigationService } from '../navigation/navigation.service';
-import { NAVIGATION_CONFIG } from '../navigation/navigation-config';
-import { PopupContainerService } from '../listbutton/container.service';
-import { NgClass } from '@angular/common';
-import { ButtonComponent } from '../button/button.component';
-import * as i0 from "@angular/core";
-import * as i1 from "../focusable/focus.service";
-import * as i2 from "../navigation/navigation.service";
-import * as i3 from "@progress/kendo-angular-popup";
-import * as i4 from "@progress/kendo-angular-l10n";
-import * as i5 from "../listbutton/container.service";
-const NAVIGATION_SETTINGS = {
-    useLeftRightArrows: true
-};
-const NAVIGATION_SETTINGS_PROVIDER = {
-    provide: NAVIGATION_CONFIG,
-    useValue: NAVIGATION_SETTINGS
-};
-const DEFAULT_FILL_MODE = 'solid';
-/**
- * Represents the Kendo UI DropDownButton component for Angular.
- *
- * Use the DropDownButton to display a button with a popup list of actions.
- *
- * @example
- * ```ts
- * @Component({
- *   selector: 'my-app',
- *   template: `
- *     <kendo-dropdownbutton [data]="data">
- *       User Settings
- *     </kendo-dropdownbutton>
- *   `
- * })
- * class AppComponent {
- *   public data: Array<any> = [
- *     { text: 'My Profile' },
- *     { text: 'Friend Requests' },
- *     { text: 'Account Settings' },
- *     { text: 'Support' },
- *     { text: 'Log Out' }
- *   ];
- * }
- * ```
- */
-export class DropDownButtonComponent extends ListButton {
-    containerService;
-    renderer;
-    /**
-     * Displays the default arrow icon or a custom one.
-     * @default false
-     */
-    arrowIcon = false;
-    /**
-     * Specifies the name of an existing icon in the Kendo UI theme.
-     */
-    icon = '';
-    /**
-     * Specifies an [`SVGIcon`](slug:api_icons_svgicon) to render within the button.
-     */
-    svgIcon;
-    /**
-     * Specifies a list of CSS classes for styling the button with custom icons.
-     */
-    iconClass = '';
-    /**
-     * Specifies a URL for styling the button with a custom image.
-     */
-    imageUrl = '';
-    /**
-     * Sets the data item field that represents the item text.
-     * If the data contains only primitive values, leave this undefined.
-     */
-    textField;
-    /**
-     * Sets or gets the data of the DropDownButton. Provide the data as an array-like list.
-     */
-    set data(data) {
-        this._data = data || [];
-    }
-    get data() {
-        return this._data;
-    }
-    /**
-     * Specifies the padding of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#size).
-     * @default 'medium'
-     */
-    size = 'medium';
-    /**
-     * Specifies the border radius of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#roundness).
-     * @default 'medium'
-     */
-    rounded = 'medium';
-    /**
-     * Specifies the background and border styles of the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#fill-mode).
-     * @default 'solid'
-     */
-    set fillMode(fillMode) {
-        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
-    /**
-     * Specifies predefined theme colors for the DropDownButton. See [DropDownButton Appearance](slug:appearance_dropdownbutton#theme-colors).
-     * @default 'base'
-     */
-    themeColor = 'base';
-    /**
-     * Sets attributes for the main button.
-     */
-    set buttonAttributes(buttonAttributes) {
-        const newButtonAttributes = buttonAttributes || null;
-        this.handleButtonAttributes(newButtonAttributes);
-        this._buttonAttributes = newButtonAttributes;
-    }
-    get buttonAttributes() {
-        return this._buttonAttributes;
-    }
-    /**
-     * Fires when the user clicks a drop-down list item.
-     * The event data contains the data item bound to the clicked list item.
-     */
-    itemClick = new EventEmitter();
-    /**
-     * Fires when the DropDownButton is focused.
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Fires when the DropDownButton is blurred.
-     */
-    onBlur = new EventEmitter();
-    get focused() {
-        return this._isFocused && !this._disabled;
-    }
-    hostDisplayStyle = 'inline-flex';
-    get dir() {
-        return this.direction;
-    }
-    /**
-     * @hidden
-     */
-    get active() {
-        return this._active;
-    }
-    itemTemplate;
-    _fillMode = DEFAULT_FILL_MODE;
-    _buttonAttributes = null;
-    documentMouseUpSub;
-    /**
-     * @hidden
-     */
-    keydown(event) {
-        this.keyDownHandler(event, true);
-        const code = normalizeKeys(event);
-        if (code === Keys.Space) {
-            this._active = true;
-        }
-        if (code === Keys.Enter) {
-            this._active = true;
-            event.preventDefault();
-        }
-    }
-    /**
-     * @hidden
-     */
-    keyup(event) {
-        this.keyUpHandler(event);
-        this._active = false;
-    }
-    /**
-     * @hidden
-     */
-    mousedown(event) {
-        if (this._disabled) {
-            event.preventDefault();
-        }
-        else {
-            this._active = true;
-        }
-    }
-    /**
-     * @hidden
-     */
-    mouseup(event) {
-        if (this._disabled) {
-            event.preventDefault();
-        }
-        this._active = false;
-    }
-    /**
-     * @hidden
-     */
-    openPopup() {
-        this._isFocused = true;
-        this.togglePopupVisibility();
-    }
-    /**
-     * @hidden
-     */
-    onButtonBlur() {
-        if (!this.openState) {
-            this.blurWrapper();
-        }
-    }
-    /**
-     * Focuses the DropDownButton.
-     */
-    focus() {
-        if (isDocumentAvailable()) {
-            this.button.nativeElement.focus();
-        }
-    }
-    /**
-     * Blurs the DropDownButton.
-     */
-    blur() {
-        if (isDocumentAvailable()) {
-            this.button.nativeElement.blur();
-            this.blurWrapper();
-        }
-    }
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService, renderer) {
-        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
-        this.containerService = containerService;
-        this.renderer = renderer;
-        this._itemClick = this.itemClick;
-        this._blur = this.onBlur;
-        zone.runOutsideAngular(() => {
-            this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
-                if (this.active) {
-                    zone.run(() => this._active = false);
-                }
-            });
-        });
-    }
-    ngAfterViewInit() {
-        this.containerService.container = this.container;
-        this.containerService.template = this.popupTemplate;
-        this.handleButtonAttributes(this.buttonAttributes);
-        const arrowWrapper = this.button.nativeElement.querySelector('.k-button-arrow');
-        if (arrowWrapper) {
-            this.renderer.addClass(arrowWrapper, 'k-menu-button-arrow');
-        }
-    }
-    /**
-     * @hidden
-     */
-    handleFocus(event) {
-        if (!this._disabled) {
-            if (!this._isFocused) {
-                this.onFocus.emit();
-            }
-            this._isFocused = true;
-            this.focusService.resetFocus();
-            const relatedTargetInList = event.relatedTarget && closest(event.relatedTarget, '.k-popup kendo-button-list');
-            if (this.openState && !relatedTargetInList) {
-                this.focusService.focus(0);
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    wrapperContains(element) {
-        return this.wrapper === element
-            || this.wrapper.contains(element)
-            || this.popupRef?.popupElement.contains(element);
-    }
-    handleButtonAttributes(newButtonAttributes) {
-        const mainButton = this.button?.nativeElement;
-        if (isPresent(this.buttonAttributes) && isPresent(mainButton)) {
-            for (const attr in this.buttonAttributes) {
-                this.renderer.removeAttribute(mainButton, attr, this.buttonAttributes[attr]);
-            }
-        }
-        if (isPresent(newButtonAttributes) && isPresent(mainButton)) {
-            for (const attr in newButtonAttributes) {
-                this.renderer.setAttribute(mainButton, attr, newButtonAttributes[attr]);
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        if (this.documentMouseUpSub) {
-            this.documentMouseUpSub();
-        }
-        super.ngOnDestroy();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i5.PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "style.display": "this.hostDisplayStyle", "attr.dir": "this.dir" } }, providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.dropdownbutton'
-            },
-            PopupContainerService
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
-        <button kendoButton #button
-            type="button"
-            [id]="buttonId"
-            [tabindex]="componentTabIndex"
-            class="k-menu-button"
-            [class.k-active]="active"
-            [disabled]="disabled"
-            [icon]="icon"
-            [svgIcon]="svgIcon"
-            [arrowIcon]="arrowIcon"
-            [iconClass]="iconClass"
-            [imageUrl]="imageUrl"
-            [ngClass]="buttonClass"
-            [size]="size"
-            [rounded]="rounded"
-            [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
-            (click)="openPopup()"
-            (focus)="handleFocus($event)"
-            (blur)="onButtonBlur()"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-expanded]="openState"
-            [attr.aria-controls]="listId"
-        >
-            <ng-content></ng-content>
-        </button>
-        <ng-template #popupTemplate>
-            <kendo-button-list
-                #buttonList
-                [id]="listId"
-                [data]="data"
-                [textField]="textField"
-                [itemTemplate]="itemTemplate"
-                (onItemClick)="onItemClick($event)"
-                (keydown)="keyDownHandler($event)"
-                (keyup)="keyUpHandler($event)"
-                [attr.dir]="dir"
-                [attr.aria-labelledby]="buttonId"
-                [size]="size"
-            >
-            </kendo-button-list>
-        </ng-template>
-        <ng-container #container></ng-container>
-    `, 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DropDownButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoDropDownButton',
-                    providers: [
-                        FocusService,
-                        NavigationService,
-                        NAVIGATION_SETTINGS_PROVIDER,
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.dropdownbutton'
-                        },
-                        PopupContainerService
-                    ],
-                    selector: 'kendo-dropdownbutton',
-                    template: `
-        <button kendoButton #button
-            type="button"
-            [id]="buttonId"
-            [tabindex]="componentTabIndex"
-            class="k-menu-button"
-            [class.k-active]="active"
-            [disabled]="disabled"
-            [icon]="icon"
-            [svgIcon]="svgIcon"
-            [arrowIcon]="arrowIcon"
-            [iconClass]="iconClass"
-            [imageUrl]="imageUrl"
-            [ngClass]="buttonClass"
-            [size]="size"
-            [rounded]="rounded"
-            [fillMode]="fillMode"
-            [themeColor]="fillMode ? themeColor : null"
-            (click)="openPopup()"
-            (focus)="handleFocus($event)"
-            (blur)="onButtonBlur()"
-            [attr.aria-disabled]="disabled"
-            [attr.aria-expanded]="openState"
-            [attr.aria-controls]="listId"
-        >
-            <ng-content></ng-content>
-        </button>
-        <ng-template #popupTemplate>
-            <kendo-button-list
-                #buttonList
-                [id]="listId"
-                [data]="data"
-                [textField]="textField"
-                [itemTemplate]="itemTemplate"
-                (onItemClick)="onItemClick($event)"
-                (keydown)="keyDownHandler($event)"
-                (keyup)="keyUpHandler($event)"
-                [attr.dir]="dir"
-                [attr.aria-labelledby]="buttonId"
-                [size]="size"
-            >
-            </kendo-button-list>
-        </ng-template>
-        <ng-container #container></ng-container>
-    `,
-                    standalone: true,
-                    imports: [ButtonComponent, NgClass, ListComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.FocusService }, { type: i2.NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i4.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i5.PopupContainerService }, { type: i0.Renderer2 }], propDecorators: { arrowIcon: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], imageUrl: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], rounded: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], buttonAttributes: [{
-                type: Input
-            }], itemClick: [{
-                type: Output
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], focused: [{
-                type: HostBinding,
-                args: ['class.k-focus']
-            }], hostDisplayStyle: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], dir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [ButtonItemTemplateDirective]
-            }], keydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], keyup: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }], mousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], mouseup: [{
-                type: HostListener,
-                args: ['mouseup', ['$event']]
-            }] } });