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

package/esm2022/splitbutton/splitbutton.component.mjs

@@ -1,761 +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, ElementRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, NgZone, ChangeDetectorRef, Renderer2, forwardRef } from '@angular/core';
-import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { ListButton } from './../listbutton/list-button';
-import { ButtonItemTemplateDirective } from './../listbutton/button-item-template.directive';
-import { FocusService } from './../focusable/focus.service';
-import { NavigationService } from './../navigation/navigation.service';
-import { NAVIGATION_CONFIG } from './../navigation/navigation-config';
-import { isDocumentAvailable, guid, isChanged, anyChanged, MultiTabStop, replaceMessagePlaceholder } from '@progress/kendo-angular-common';
-import { closest, isPresent } from './../util';
-import { Keys } from '@progress/kendo-angular-common';
-import { getStylingClasses } from '../util';
-import { PopupContainerService } from '../listbutton/container.service';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
-import { ListComponent } from '../listbutton/list.component';
-import { NgClass } from '@angular/common';
-import { ButtonComponent } from '../button/button.component';
-import { LocalizedSplitButtonMessagesDirective } from './localization/localized-messages.directive';
-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_ROUNDED = 'medium';
-const DEFAULT_FILL_MODE = 'solid';
-/**
- * Represents the Kendo UI SplitButton component for Angular.
- *
- * @example
- * ```ts
- * @Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-splitbutton [data]="items" (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
- * `
- * })
- *
- * class AppComponent {
- *   public items: Array<any> = [{
- *       text: 'Keep Text Only',
- *       icon: 'clipboard-text',
- *       click: () => { console.log('Keep Text Only click handler'); }
- *   }, {
- *       text: 'Paste as HTML',
- *       icon: 'clipboard-code'
- *     }
- *  ];
- *
- *   public onSplitButtonClick(dataItem: any): void {
- *       console.log('Paste');
- *   }
- * }
- * ```
- */
-export class SplitButtonComponent extends ListButton {
-    localization;
-    renderer;
-    /**
-     * Sets the text displayed within the SplitButton.
-     */
-    text = '';
-    /**
-     * Specifies an icon to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
-     */
-    icon = '';
-    /**
-     * Specifies an `SVGIcon` to display next to the button text.
-     */
-    svgIcon;
-    /**
-     * Specifies a custom CSS class for the icon displayed next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
-     */
-    iconClass;
-    /**
-     * Specifies the `type` attribute of the main button.
-     */
-    type = 'button';
-    /**
-     * Specifies the URL of an image to display next to the button text ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
-     */
-    imageUrl = '';
-    /**
-     * Configures the padding of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#size)).
-     *
-     * @default 'medium'
-     */
-    size = 'medium';
-    /**
-     * Configures the border radius of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#rounded)).
-     *
-     * @default 'medium'
-     */
-    set rounded(rounded) {
-        const newRounded = rounded || DEFAULT_ROUNDED;
-        this.handleClasses(newRounded, 'rounded');
-        this._rounded = newRounded;
-    }
-    get rounded() {
-        return this._rounded;
-    }
-    /**
-     * Configures the background and border styles of the SplitButton ([see example]({% slug api_buttons_splitbuttoncomponent %}#fillMode)).
-     *
-     * @default 'solid'
-     */
-    set fillMode(fillMode) {
-        const newFillMode = fillMode || DEFAULT_FILL_MODE;
-        this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
-    }
-    get fillMode() {
-        return this._fillMode;
-    }
-    /**
-     * Configures the theme color of the SplitButton. The theme color applies to the background, border, and text ([see example]({% slug api_buttons_splitbuttoncomponent %}#themeColor)).
-     *
-     * @default 'base'
-     */
-    themeColor = 'base';
-    /**
-     * Disables the SplitButton when set to `true` ([see example]({% slug databinding_splitbutton %}#arrays-of-complex-data)).
-     */
-    set disabled(value) {
-        if (this.isOpen) {
-            this.toggle(false);
-        }
-        this._disabled = value;
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    /**
-     * Configures the popup settings of the SplitButton.
-     */
-    set popupSettings(settings) {
-        this._popupSettings = { animate: true, popupClass: '', ...settings };
-    }
-    get popupSettings() {
-        return this._popupSettings;
-    }
-    /**
-     * Specifies the [`tabindex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
-     */
-    tabIndex = 0;
-    /**
-     * Configures the text field of the button-list popup.
-     */
-    textField;
-    /**
-     * Sets the data for the SplitButton. Provide the data as an array-like list.
-     */
-    set data(data) {
-        this._data = data || [];
-    }
-    get data() {
-        if (!this._data) {
-            this.data = [];
-        }
-        return this._data;
-    }
-    /**
-     * Specifies the CSS classes for the button that opens the popup.
-     * Supports values compatible with [`ngClass`](link:site.data.urls.angular['ngclassapi']).
-     */
-    arrowButtonClass;
-    /**
-     * Specifies the name of the font icon displayed on the button that opens the popup.
-     */
-    arrowButtonIcon = 'caret-alt-down';
-    /**
-     * Specifies the [`SVGIcon`](slug:api_icons_svgiconcomponent) displayed on the button that opens the popup.
-     */
-    arrowButtonSvgIcon = caretAltDownIcon;
-    /**
-     * Sets attributes for the main button.
-     */
-    set buttonAttributes(buttonAttributes) {
-        const newButtonAttributes = buttonAttributes || null;
-        this.handleButtonAttributes(newButtonAttributes);
-        this._buttonAttributes = newButtonAttributes;
-    }
-    get buttonAttributes() {
-        return this._buttonAttributes;
-    }
-    /**
-     * Emits an event when the main button is clicked.
-     */
-    buttonClick = new EventEmitter();
-    /**
-     * Emits an event when an item in the drop-down list is clicked. The event data contains the clicked item's data.
-     */
-    itemClick = new EventEmitter();
-    /**
-     * Emits an event when the SplitButton gains focus.
-     */
-    onFocus = new EventEmitter();
-    /**
-     * Emits an event when the SplitButton is blurred.
-     */
-    onBlur = new EventEmitter();
-    /**
-     * Emits an event before the popup opens. This event is preventable.
-     */
-    open = new EventEmitter();
-    /**
-     * Emits an event before the popup closes. This event is preventable.
-     */
-    close = new EventEmitter();
-    /**
-     * Specifies a template to customize the content of the items in the drop-down list.
-     */
-    itemTemplate;
-    activeArrow = false;
-    listId = guid();
-    /**
-     * @hidden
-     */
-    get hasContent() {
-        return this.button?.nativeElement.childElementCount > 0;
-    }
-    /**
-     * @hidden
-     */
-    get active() {
-        return this._active;
-    }
-    /**
-     * @hidden
-     */
-    get componentTabIndex() {
-        return this.disabled ? -1 : this.tabIndex;
-    }
-    buttonText = '';
-    arrowButtonClicked = false;
-    _rounded = DEFAULT_ROUNDED;
-    _fillMode = DEFAULT_FILL_MODE;
-    _buttonAttributes = null;
-    documentMouseUpSub;
-    set isFocused(value) {
-        this._isFocused = value;
-    }
-    get isFocused() {
-        return this._isFocused && !this._disabled && isDocumentAvailable() && this.wrapperContains(document.activeElement);
-    }
-    get widgetClasses() {
-        return true;
-    }
-    get dir() {
-        return this.direction;
-    }
-    /**
-     * @hidden
-     */
-    get ariaLabel() {
-        const localizationMsg = this.messageFor('splitButtonLabel') || '';
-        return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
-    }
-    /**
-     * @hidden
-     */
-    messageFor(key) {
-        return this.localization.get(key);
-    }
-    /**
-     * @hidden
-     */
-    onButtonFocus(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
-     */
-    onArrowButtonClick() {
-        this.togglePopupVisibility();
-        this.arrowButtonClicked = false;
-        if (!this.isOpen) {
-            this.focus();
-        }
-    }
-    /**
-     * @hidden
-     */
-    toggleButtonActiveState(enable) {
-        this._active = enable;
-    }
-    /**
-     * @hidden
-     */
-    toggleArrowButtonActiveState(enable) {
-        this.arrowButtonClicked = true;
-        this.activeArrow = enable;
-    }
-    /**
-     * @hidden
-     */
-    onButtonClick() {
-        this.buttonClick.emit();
-    }
-    /**
-     * @hidden
-     */
-    onButtonBlur() {
-        if (!this.isOpen && !this.arrowButtonClicked) {
-            this.blurWrapper();
-        }
-    }
-    /**
-     * @hidden
-     */
-    keydown(event) {
-        this.keyDownHandler(event, true);
-        if (event.code === Keys.Space) {
-            this._active = true;
-        }
-    }
-    /**
-     * @hidden
-     */
-    keyup(event) {
-        this._active = false;
-        if (event.code !== Keys.Space) {
-            this.keyUpHandler(event);
-        }
-    }
-    ngDoCheck() {
-        this.updateButtonText();
-    }
-    ngAfterViewInit() {
-        this.containerService.container = this.container;
-        this.containerService.template = this.popupTemplate;
-        this.handleClasses(this.rounded, 'rounded');
-        this.handleButtonAttributes(this.buttonAttributes);
-    }
-    ngOnChanges(changes) {
-        if (changes.hasOwnProperty('text')) {
-            this.updateButtonText();
-        }
-        if (anyChanged(['text', 'icon', 'svgIcon', 'iconClass', 'imageUrl'], changes)) {
-            this.toggleButtonIconClass();
-        }
-        if (isChanged('popupSettings', changes) && isPresent(this.popupRef)) {
-            const popup = this.popupRef.popup.instance;
-            const newSettings = changes['popupSettings'].currentValue;
-            popup.popupClass = newSettings.popupClass;
-            popup.animate = newSettings.animate;
-            popup.popupAlign = this.popupAlign;
-        }
-    }
-    /**
-     * @hidden
-     */
-    ngOnDestroy() {
-        if (this.documentMouseUpSub) {
-            this.documentMouseUpSub();
-        }
-        super.ngOnDestroy();
-    }
-    /**
-     * @hidden
-     */
-    onNavigationEnterUp(args) {
-        if (args.target !== this.button.nativeElement) {
-            super.onNavigationEnterUp(args);
-        }
-    }
-    /**
-     * @hidden
-     */
-    togglePopupVisibility() {
-        if (isDocumentAvailable() && this.wrapperContains(document.activeElement) && this.arrowButtonClicked) {
-            this.button.nativeElement.focus();
-        }
-        super.togglePopupVisibility();
-    }
-    /**
-     * @hidden
-     */
-    wrapperContains(element) {
-        return (this.wrapper === element || this.wrapper.contains(element));
-    }
-    /**
-     * @hidden
-     */
-    get anchorAlign() {
-        const align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
-            align.horizontal = 'right';
-        }
-        return align;
-    }
-    /**
-     * @hidden
-     */
-    get popupAlign() {
-        const align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
-        if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
-            align.horizontal = 'right';
-        }
-        return align;
-    }
-    /**
-     * @hidden
-     */
-    get isIconButton() {
-        const hasIcon = this.icon || this.svgIcon || this.iconClass || this.imageUrl;
-        const hasTextContent = isDocumentAvailable() && this.button?.nativeElement.textContent.trim().length > 0;
-        return hasIcon && !hasTextContent;
-    }
-    /**
-     * Focuses the SplitButton component.
-     */
-    focus() {
-        if (isDocumentAvailable()) {
-            this.button.nativeElement.focus();
-        }
-    }
-    /**
-     * Blurs the SplitButton component.
-     */
-    blur() {
-        if (isDocumentAvailable()) {
-            this.button.nativeElement.blur();
-            this.blurWrapper();
-        }
-    }
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer, containerService) {
-        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
-        this.localization = localization;
-        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);
-                }
-                if (this.activeArrow) {
-                    zone.run(() => this.activeArrow = false);
-                }
-            });
-        });
-    }
-    /**
-     * Returns the current open state of the popup.
-     */
-    get isOpen() {
-        return this.openState;
-    }
-    updateButtonText() {
-        if (isDocumentAvailable()) {
-            const innerText = this.wrapper?.innerText
-                .split('\n')
-                .join('')
-                .trim();
-            if (innerText !== this.buttonText) {
-                this.buttonText = innerText;
-            }
-        }
-    }
-    handleClasses(value, input) {
-        const elem = this.wrapperRef.nativeElement;
-        const classes = getStylingClasses('button', input, this[input], value);
-        if (classes.toRemove) {
-            this.renderer.removeClass(elem, classes.toRemove);
-        }
-        if (classes.toAdd) {
-            this.renderer.addClass(elem, classes.toAdd);
-        }
-    }
-    toggleButtonIconClass() {
-        this.button.nativeElement.classList[this.isIconButton ? 'add' : 'remove']('k-button-icon');
-    }
-    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]);
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, 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: i0.Renderer2 }, { token: i5.PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, isStandalone: true, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon", buttonAttributes: "buttonAttributes" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
-            FocusService,
-            NavigationService,
-            NAVIGATION_SETTINGS_PROVIDER,
-            LocalizationService,
-            {
-                provide: L10N_PREFIX,
-                useValue: 'kendo.splitbutton'
-            },
-            PopupContainerService,
-            {
-                provide: MultiTabStop,
-                useExisting: forwardRef(() => SplitButtonComponent)
-            }
-        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <ng-container kendoSplitButtonLocalizedMessages
-          i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
-          splitButtonLabel="{{ '{buttonText} splitbutton' }}"
-          i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
-          toggleButtonLabel="Toggle options"
-        ></ng-container>
-        <button
-          kendoButton
-          #button
-          [type]="type"
-          [tabindex]="componentTabIndex"
-          [disabled]="disabled"
-          [size]="size"
-          [rounded]="rounded"
-          [fillMode]="fillMode"
-          [themeColor]="themeColor"
-          [icon]="icon"
-          [svgIcon]="svgIcon"
-          [class.k-active]="active"
-          [iconClass]="iconClass"
-          [imageUrl]="imageUrl"
-          [ngClass]="buttonClass"
-          (focus)="onButtonFocus($event)"
-          (click)="onButtonClick()"
-          (blur)="onButtonBlur()"
-          (mousedown)="toggleButtonActiveState(true)"
-          (mouseup)="toggleButtonActiveState(false)"
-          [attr.aria-expanded]="openState"
-          [attr.aria-controls]="listId"
-          [attr.aria-label]="ariaLabel"
-          >
-          @if (text) {
-            <span class="k-button-text">
-            {{ text }} </span>
-            }<ng-content></ng-content>
-          </button>
-          <button kendoButton #arrowButton type="button"
-            class="k-split-button-arrow"
-            [class.k-active]="activeArrow"
-            [ngClass]="arrowButtonClass"
-            [disabled]="disabled"
-            [icon]="arrowButtonIcon"
-            [svgIcon]="arrowButtonSvgIcon"
-            [size]="size"
-            [rounded]="rounded"
-            [fillMode]="fillMode"
-            [themeColor]="themeColor"
-            [tabindex]="-1"
-            [attr.aria-label]="messageFor('toggleButtonLabel')"
-            (click)="onArrowButtonClick()"
-            (mousedown)="toggleArrowButtonActiveState(true)"
-            (mouseup)="toggleArrowButtonActiveState(false)"
-            (keydown.enter)="$event.stopImmediatePropagation(); $event.preventDefault();"
-          ></button>
-          <ng-template #popupTemplate>
-            <kendo-button-list
-              [id]="listId"
-              [data]="data"
-              [textField]="textField"
-              [itemTemplate]="itemTemplate"
-              (onItemClick)="onItemClick($event)"
-              (keydown)="keyDownHandler($event)"
-              (keyup)="keyUpHandler($event)"
-              [attr.dir]="dir"
-              [size]="size"
-              >
-            </kendo-button-list>
-          </ng-template>
-          <ng-container #container></ng-container>
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { 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: SplitButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoSplitButton',
-                    providers: [
-                        FocusService,
-                        NavigationService,
-                        NAVIGATION_SETTINGS_PROVIDER,
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.splitbutton'
-                        },
-                        PopupContainerService,
-                        {
-                            provide: MultiTabStop,
-                            useExisting: forwardRef(() => SplitButtonComponent)
-                        }
-                    ],
-                    selector: 'kendo-splitbutton',
-                    template: `
-        <ng-container kendoSplitButtonLocalizedMessages
-          i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
-          splitButtonLabel="{{ '{buttonText} splitbutton' }}"
-          i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
-          toggleButtonLabel="Toggle options"
-        ></ng-container>
-        <button
-          kendoButton
-          #button
-          [type]="type"
-          [tabindex]="componentTabIndex"
-          [disabled]="disabled"
-          [size]="size"
-          [rounded]="rounded"
-          [fillMode]="fillMode"
-          [themeColor]="themeColor"
-          [icon]="icon"
-          [svgIcon]="svgIcon"
-          [class.k-active]="active"
-          [iconClass]="iconClass"
-          [imageUrl]="imageUrl"
-          [ngClass]="buttonClass"
-          (focus)="onButtonFocus($event)"
-          (click)="onButtonClick()"
-          (blur)="onButtonBlur()"
-          (mousedown)="toggleButtonActiveState(true)"
-          (mouseup)="toggleButtonActiveState(false)"
-          [attr.aria-expanded]="openState"
-          [attr.aria-controls]="listId"
-          [attr.aria-label]="ariaLabel"
-          >
-          @if (text) {
-            <span class="k-button-text">
-            {{ text }} </span>
-            }<ng-content></ng-content>
-          </button>
-          <button kendoButton #arrowButton type="button"
-            class="k-split-button-arrow"
-            [class.k-active]="activeArrow"
-            [ngClass]="arrowButtonClass"
-            [disabled]="disabled"
-            [icon]="arrowButtonIcon"
-            [svgIcon]="arrowButtonSvgIcon"
-            [size]="size"
-            [rounded]="rounded"
-            [fillMode]="fillMode"
-            [themeColor]="themeColor"
-            [tabindex]="-1"
-            [attr.aria-label]="messageFor('toggleButtonLabel')"
-            (click)="onArrowButtonClick()"
-            (mousedown)="toggleArrowButtonActiveState(true)"
-            (mouseup)="toggleArrowButtonActiveState(false)"
-            (keydown.enter)="$event.stopImmediatePropagation(); $event.preventDefault();"
-          ></button>
-          <ng-template #popupTemplate>
-            <kendo-button-list
-              [id]="listId"
-              [data]="data"
-              [textField]="textField"
-              [itemTemplate]="itemTemplate"
-              (onItemClick)="onItemClick($event)"
-              (keydown)="keyDownHandler($event)"
-              (keyup)="keyUpHandler($event)"
-              [attr.dir]="dir"
-              [size]="size"
-              >
-            </kendo-button-list>
-          </ng-template>
-          <ng-container #container></ng-container>
-        `,
-                    standalone: true,
-                    imports: [LocalizedSplitButtonMessagesDirective, 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: i0.Renderer2 }, { type: i5.PopupContainerService }], propDecorators: { text: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], imageUrl: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], rounded: [{
-                type: Input
-            }], fillMode: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], popupSettings: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], arrowButtonClass: [{
-                type: Input
-            }], arrowButtonIcon: [{
-                type: Input
-            }], arrowButtonSvgIcon: [{
-                type: Input
-            }], buttonAttributes: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
-            }], itemClick: [{
-                type: Output
-            }], onFocus: [{
-                type: Output,
-                args: ['focus']
-            }], onBlur: [{
-                type: Output,
-                args: ['blur']
-            }], open: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], itemTemplate: [{
-                type: ContentChild,
-                args: [ButtonItemTemplateDirective]
-            }], isFocused: [{
-                type: HostBinding,
-                args: ['class.k-focus']
-            }], widgetClasses: [{
-                type: HostBinding,
-                args: ['class.k-split-button']
-            }, {
-                type: HostBinding,
-                args: ['class.k-button-group']
-            }], dir: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], keydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], keyup: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });