@progress/kendo-angular-buttons 17.0.0-develop.3 → 17.0.0-develop.31

package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.component.mjs

@@ -63,101 +63,25 @@ const DEFAULT_THEME_COLOR = 'primary';
  *
  */
 export class FloatingActionButtonComponent {
-    constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
-        this.renderer = renderer;
-        this.element = element;
-        this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.ngZone = ngZone;
-        this.popupService = popupService;
-        this.builder = builder;
-        this.localizationService = localizationService;
-        /**
-         * Specifies the positionMode of the FloatingActionButton
-         * ([see example](slug:positioning_floatingactionbutton#toc-position-mode)).
-         *
-         * * The possible values are:
-         * * `absolute`—Positions the FloatingActionButton absolutely to its first positioned parent element.
-         * * `fixed` (Default)—Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.
-         */
-        this.positionMode = 'fixed';
-        /**
-         * Specifies the animation settings of the FloatingActionButton dial items.
-         * ([see example]({% slug dialitems_floatingactionbutton %}#toc-animation)).
-         *
-         * The possible values are:
-         * * Boolean
-         *    * (Default) `true`—Applies the default [`DialItemAnimation`]({% slug api_buttons_dialitemanimation %}) settings.
-         *    * `false`
-         * * `DialItemAnimation`
-         *    * `duration`—Specifies the animation duration in milliseconds for each dial item. Defaults to `180ms`.
-         *    * `gap`—Specifies the animation duration gap in milliseconds after each dial item is animated. Defaults to `90ms`.
-         */
-        this.dialItemAnimation = true;
-        /**
-         * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FloatingActionButton.
-         */
-        this.tabIndex = 0;
-        /**
-         * Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.
-         */
-        this.dialItems = [];
-        /**
-         * Fires each time the FloatingActionButton gets blurred.
-         */
-        this.onBlur = new EventEmitter();
-        /**
-         * Fires each time the FloatingActionButton gets focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time a dial item is clicked.
-         */
-        this.dialItemClick = new EventEmitter();
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed
-         * ([more information and example](slug:events_floatingactionbutton)).
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open
-         * ([more information and example](slug:events_floatingactionbutton)).
-         */
-        this.close = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.id = `k-${guid()}`;
-        /**
-         * @hidden
-         */
-        this.dialListId = `k-dial-list-${guid()}`;
-        this._themeColor = DEFAULT_THEME_COLOR;
-        this._size = DEFAULT_SIZE;
-        this._rounded = DEFAULT_ROUNDED;
-        this._disabled = false;
-        this._align = { horizontal: 'end', vertical: 'bottom' };
-        this._offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
-        this.subscriptions = new Subscription();
-        this.rtl = false;
-        this.animationEnd = new EventEmitter();
-        this.initialSetup = true;
-        this.focusChangedProgrammatically = false;
-        validatePackage(packageMetadata);
-        this.subscribeNavigationEvents();
-        this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-            this.direction = this.rtl ? 'rtl' : 'ltr';
-        }));
-    }
+    renderer;
+    element;
+    focusService;
+    navigationService;
+    ngZone;
+    popupService;
+    builder;
+    localizationService;
     get fixedClass() {
         return this.positionMode === 'fixed';
     }
     get absoluteClass() {
         return this.positionMode === 'absolute';
     }
+    direction;
+    button;
+    popupTemplate;
+    dialItemTemplate;
+    fabTemplate;
     /**
      * Specifies the theme color of the FloatingActionButton
      * ([see example](slug:appearance_floatingactionbutton#toc-theme-colors)).
@@ -260,12 +184,131 @@ export class FloatingActionButtonComponent {
     get offset() {
         return this._offset;
     }
+    /**
+     * Specifies the positionMode of the FloatingActionButton
+     * ([see example](slug:positioning_floatingactionbutton#toc-position-mode)).
+     *
+     * * The possible values are:
+     * * `absolute`—Positions the FloatingActionButton absolutely to its first positioned parent element.
+     * * `fixed` (Default)—Positions the FloatingActionButton relative to the viewport. It always stays in the same place even if the page is scrolled.
+     */
+    positionMode = 'fixed';
+    /**
+     * Defines the name of an existing icon in a Kendo UI theme.
+     * If provided, the icon will be rendered inside the FloatingActionButton by a `span.k-icon` element.
+     */
+    icon;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the FloatingActionButton.
+     */
+    svgIcon;
+    /**
+     * Defines a CSS class or multiple classes separated by spaces which are applied to a `span` element.
+     * Allows the usage of custom icons, rendered inside the FloatingActionButton by a `span` element.
+     */
+    iconClass;
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * The CSS classes that will be rendered on the dial items `ul` element.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    dialClass;
+    /**
+     * Specifies the text content of the FloatingActionButton.
+     */
+    text;
+    /**
+     * Specifies the animation settings of the FloatingActionButton dial items.
+     * ([see example]({% slug dialitems_floatingactionbutton %}#toc-animation)).
+     *
+     * The possible values are:
+     * * Boolean
+     *    * (Default) `true`—Applies the default [`DialItemAnimation`]({% slug api_buttons_dialitemanimation %}) settings.
+     *    * `false`
+     * * `DialItemAnimation`
+     *    * `duration`—Specifies the animation duration in milliseconds for each dial item. Defaults to `180ms`.
+     *    * `gap`—Specifies the animation duration gap in milliseconds after each dial item is animated. Defaults to `90ms`.
+     */
+    dialItemAnimation = true;
+    /**
+     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the FloatingActionButton.
+     */
+    tabIndex = 0;
+    /**
+     * Specifies the collection of the dial items that will be rendered in the FloatingActionButton popup.
+     */
+    dialItems = [];
+    /**
+     * Fires each time the FloatingActionButton gets blurred.
+     */
+    onBlur = new EventEmitter();
+    /**
+     * Fires each time the FloatingActionButton gets focused.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time a dial item is clicked.
+     */
+    dialItemClick = new EventEmitter();
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup will remain closed
+     * ([more information and example](slug:events_floatingactionbutton)).
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open
+     * ([more information and example](slug:events_floatingactionbutton)).
+     */
+    close = new EventEmitter();
     /**
      * @hidden
      */
     get componentTabIndex() {
         return this.disabled ? (-1) : this.tabIndex;
     }
+    /**
+     * @hidden
+     */
+    id = `k-${guid()}`;
+    /**
+     * @hidden
+     */
+    dialListId = `k-dial-list-${guid()}`;
+    _themeColor = DEFAULT_THEME_COLOR;
+    _size = DEFAULT_SIZE;
+    _rounded = DEFAULT_ROUNDED;
+    _disabled = false;
+    _align = { horizontal: 'end', vertical: 'bottom' };
+    _offset = { x: DEFAULT_OFFSET, y: DEFAULT_OFFSET };
+    subscriptions = new Subscription();
+    popupMouseDownListener;
+    rtl = false;
+    animationEnd = new EventEmitter();
+    popupRef;
+    initialSetup = true;
+    focusChangedProgrammatically = false;
+    constructor(renderer, element, focusService, navigationService, ngZone, popupService, builder, localizationService) {
+        this.renderer = renderer;
+        this.element = element;
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.ngZone = ngZone;
+        this.popupService = popupService;
+        this.builder = builder;
+        this.localizationService = localizationService;
+        validatePackage(packageMetadata);
+        this.subscribeNavigationEvents();
+        this.subscriptions.add(this.localizationService.changes.subscribe(({ rtl }) => {
+            this.rtl = rtl;
+            this.direction = this.rtl ? 'rtl' : 'ltr';
+        }));
+    }
     ngAfterViewInit() {
         ['size', 'rounded', 'themeColor'].forEach(option => this.handleClasses(this[option], option));
         this.renderer.addClass(this.element.nativeElement, this.alignClass());
@@ -721,18 +764,17 @@ export class FloatingActionButtonComponent {
         }
         return DEFAULT_DURATION;
     }
-}
-FloatingActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i5.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
-        FocusService,
-        NavigationService,
-        NAVIGATION_SETTINGS_PROVIDER,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.floatingactionbutton'
-        }
-    ], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i5.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FloatingActionButtonComponent, isStandalone: true, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
+            FocusService,
+            NavigationService,
+            NAVIGATION_SETTINGS_PROVIDER,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.floatingactionbutton'
+            }
+        ], queries: [{ propertyName: "dialItemTemplate", first: true, predicate: DialItemTemplateDirective, descendants: true }, { propertyName: "fabTemplate", first: true, predicate: FloatingActionButtonTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }], ngImport: i0, template: `
         <button
             #button
             [attr.id]="id"
@@ -790,7 +832,8 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             </ul>
         </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-floatingactionbutton',

package/{esm2020 → esm2022}/floatingactionbutton/floatingactionbutton.module.mjs

@@ -41,11 +41,11 @@ import * as i3 from "./templates/fab-template.directive";
  * ```
  */
 export class FloatingActionButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, imports: [i1.FloatingActionButtonComponent, i2.DialItemTemplateDirective, i3.FloatingActionButtonTemplateDirective], exports: [i1.FloatingActionButtonComponent, i2.DialItemTemplateDirective, i3.FloatingActionButtonTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.FloatingActionButtonComponent] });
 }
-FloatingActionButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FloatingActionButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, imports: [i1.FloatingActionButtonComponent, i2.DialItemTemplateDirective, i3.FloatingActionButtonTemplateDirective], exports: [i1.FloatingActionButtonComponent, i2.DialItemTemplateDirective, i3.FloatingActionButtonTemplateDirective] });
-FloatingActionButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.FloatingActionButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_FLOATINGACTIONBUTTON],

package/{esm2020 → esm2022}/floatingactionbutton/templates/dial-item-template.directive.mjs

@@ -11,13 +11,14 @@ import * as i0 from "@angular/core";
  * ([see example]({% slug templates_floatingactionbutton %}#toc-dial-item-template)).
  */
 export class DialItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
 }
-DialItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DialItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: DialItemTemplateDirective, isStandalone: true, selector: "[kendoDialItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDialItemTemplate]',

package/{esm2020 → esm2022}/floatingactionbutton/templates/fab-template.directive.mjs

@@ -11,13 +11,14 @@ import * as i0 from "@angular/core";
  * ([see example]({% slug templates_floatingactionbutton %}#toc-floatingactionbutton-template)).
  */
 export class FloatingActionButtonTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
 }
-FloatingActionButtonTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FloatingActionButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FloatingActionButtonTemplateDirective, isStandalone: true, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFloatingActionButtonTemplate]',

package/{esm2020 → esm2022}/focusable/focus.service.mjs

@@ -8,9 +8,8 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class FocusService {
-    constructor() {
-        this.onFocus = new EventEmitter();
-    }
+    onFocus = new EventEmitter();
+    focusedIndex;
     isFocused(index) {
         return index === this.focused;
     }
@@ -31,9 +30,9 @@ export class FocusService {
         this.focusedIndex = index;
         this.onFocus.emit(index);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusService });
 }
-FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FocusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/focusable/focusable.directive.mjs

@@ -12,10 +12,14 @@ import * as i1 from "./focus.service";
  * @hidden
  */
 export class FocusableDirective {
+    focusService;
+    renderer;
+    index;
+    element;
+    subs = new Subscription();
     constructor(focusService, elementRef, renderer) {
         this.focusService = focusService;
         this.renderer = renderer;
-        this.subs = new Subscription();
         this.element = elementRef.nativeElement;
         this.subscribeEvents();
     }
@@ -49,10 +53,10 @@ export class FocusableDirective {
             }
         }));
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusableDirective, deps: [{ token: i1.FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
 }
-FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusableDirective, deps: [{ token: i1.FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusableDirective, isStandalone: true, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoButtonFocusable]',

package/{esm2020 → esm2022}/listbutton/button-item-template.directive.mjs

@@ -53,13 +53,14 @@ import * as i0 from "@angular/core";
  * For more examples, refer to the article on the [DropDownButton templates](slug:itemstemplates_dropdownbutton).
  */
 export class ButtonItemTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
 }
-ButtonItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ButtonItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ButtonItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]',

package/{esm2020 → esm2022}/listbutton/container.service.mjs

@@ -8,9 +8,11 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class PopupContainerService {
+    container;
+    template;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerService });
 }
-PopupContainerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PopupContainerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PopupContainerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PopupContainerService, decorators: [{
             type: Injectable
         }] });

package/{esm2020 → esm2022}/listbutton/list-button.mjs

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, ElementRef, NgZone, ChangeDetectorRef, Component, Input, Output } from '@angular/core';
+import { EventEmitter, ElementRef, NgZone, ChangeDetectorRef, Component, Input, ViewContainerRef, Output, ViewChild, TemplateRef } from '@angular/core';
 import { Subscription, fromEvent, merge } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 import { FocusService } from './../focusable/focus.service';
@@ -18,6 +18,7 @@ import { PopupService } from '@progress/kendo-angular-popup';
 import { isPresent } from '../util';
 import { PopupContainerService } from './container.service';
 import { MultiTabStop } from '@progress/kendo-angular-common';
+import { ListComponent } from './list.component';
 import * as i0 from "@angular/core";
 import * as i1 from "./../focusable/focus.service";
 import * as i2 from "./../navigation/navigation.service";
@@ -28,52 +29,33 @@ import * as i5 from "./container.service";
  * @hidden
  */
 export class ListButton extends MultiTabStop {
-    constructor(focusService, navigationService, wrapperRef, _zone, popupService, elRef, localization, cdr, containerService) {
-        super();
-        this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.wrapperRef = wrapperRef;
-        this._zone = _zone;
-        this.popupService = popupService;
-        this.elRef = elRef;
-        this.cdr = cdr;
-        this.containerService = containerService;
-        this._open = false;
-        this._disabled = false;
-        this._active = false;
-        this._popupSettings = { animate: true, popupClass: '' };
-        this.listId = guid();
-        this._isFocused = false;
-        this.subs = new Subscription();
-        this.popupSubs = new Subscription();
-        /**
-         * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-         */
-        this.tabIndex = 0;
-        /**
-         * Fires each time the popup is about to open.
-         * This event is preventable. If you cancel the event, the popup will remain closed.
-         */
-        this.open = new EventEmitter();
-        /**
-         * Fires each time the popup is about to close.
-         * This event is preventable. If you cancel the event, the popup will remain open.
-         */
-        this.close = new EventEmitter();
-        /**
-         * Needed by the kendoToggleButtonTabStop directive
-         *
-         * @hidden
-         */
-        this.escape = new EventEmitter();
-        this.isClosePrevented = false;
-        validatePackage(packageMetadata);
-        this.focusService = focusService;
-        this.navigationService = navigationService;
-        this.wrapper = wrapperRef.nativeElement;
-        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
-        this.subscribeEvents();
-    }
+    focusService;
+    navigationService;
+    wrapperRef;
+    _zone;
+    popupService;
+    elRef;
+    cdr;
+    containerService;
+    listId = guid();
+    buttonId = guid();
+    _data;
+    _open = false;
+    _disabled = false;
+    _active = false;
+    _popupSettings = { animate: true, popupClass: '' };
+    _isFocused = false;
+    _itemClick;
+    _blur;
+    wrapper;
+    subs = new Subscription();
+    direction;
+    popupRef;
+    popupSubs = new Subscription();
+    button;
+    buttonList;
+    popupTemplate;
+    container;
     /**
      * Sets the disabled state of the DropDownButton.
      */
@@ -86,6 +68,31 @@ export class ListButton extends MultiTabStop {
     get disabled() {
         return this._disabled;
     }
+    /**
+     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     */
+    tabIndex = 0;
+    /**
+     * The CSS classes that will be rendered on the main button.
+     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     */
+    buttonClass;
+    /**
+     * Fires each time the popup is about to open.
+     * This event is preventable. If you cancel the event, the popup will remain closed.
+     */
+    open = new EventEmitter();
+    /**
+     * Fires each time the popup is about to close.
+     * This event is preventable. If you cancel the event, the popup will remain open.
+     */
+    close = new EventEmitter();
+    /**
+     * Needed by the kendoToggleButtonTabStop directive
+     *
+     * @hidden
+     */
+    escape = new EventEmitter();
     /**
      * @hidden
      */
@@ -134,6 +141,24 @@ export class ListButton extends MultiTabStop {
         }
         return align;
     }
+    isClosePrevented = false;
+    constructor(focusService, navigationService, wrapperRef, _zone, popupService, elRef, localization, cdr, containerService) {
+        super();
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.wrapperRef = wrapperRef;
+        this._zone = _zone;
+        this.popupService = popupService;
+        this.elRef = elRef;
+        this.cdr = cdr;
+        this.containerService = containerService;
+        validatePackage(packageMetadata);
+        this.focusService = focusService;
+        this.navigationService = navigationService;
+        this.wrapper = wrapperRef.nativeElement;
+        this.subs.add(localization.changes.subscribe(({ rtl }) => (this.direction = rtl ? 'rtl' : 'ltr')));
+        this.subscribeEvents();
+    }
     ngOnChanges(changes) {
         if (isChanged("popupSettings", changes) && isPresent(this.popupRef)) {
             const popup = this.popupRef.popup.instance;
@@ -394,15 +419,27 @@ export class ListButton extends MultiTabStop {
             this.isClosePrevented = false;
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListButton, 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 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListButton, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
 }
-ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListButton, 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 }], target: i0.ɵɵFactoryTarget.Component });
-ListButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ListButton, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close", escape: "escape" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListButton, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ 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 }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ 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 }]; }, propDecorators: { button: [{
+                type: ViewChild,
+                args: ['button', { read: ElementRef }]
+            }], buttonList: [{
+                type: ViewChild,
+                args: ['buttonList']
+            }], popupTemplate: [{
+                type: ViewChild,
+                args: ['popupTemplate']
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef }]
+            }], disabled: [{
                 type: Input
             }], tabIndex: [{
                 type: Input