@progress/kendo-angular-buttons 7.0.0-next.202111120840 → 7.0.2-dev.202201201235

package/dist/npm/splitbutton/splitbutton.component.js

@@ -0,0 +1,832 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+/* tslint:disable:no-access-missing-member */
+var core_1 = require("@angular/core");
+var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
+var kendo_angular_popup_1 = require("@progress/kendo-angular-popup");
+var list_button_1 = require("./../listbutton/list-button");
+var button_item_template_directive_1 = require("./../listbutton/button-item-template.directive");
+var focus_service_1 = require("./../focusable/focus.service");
+var navigation_service_1 = require("./../navigation/navigation.service");
+var navigation_config_1 = require("./../navigation/navigation-config");
+var kendo_angular_common_1 = require("@progress/kendo-angular-common");
+var util_1 = require("./../util");
+var preventable_event_1 = require("../preventable-event");
+var kendo_angular_common_2 = require("@progress/kendo-angular-common");
+var util_2 = require("../util");
+var NAVIGATION_SETTINGS = {
+    useLeftRightArrows: true
+};
+var ɵ0 = NAVIGATION_SETTINGS;
+exports.ɵ0 = ɵ0;
+var NAVIGATION_SETTINGS_PROVIDER = {
+    provide: navigation_config_1.NAVIGATION_CONFIG,
+    useValue: ɵ0
+};
+/**
+ * Represents the Kendo UI SplitButton component for Angular.
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-splitbutton [data]="data" icon="paste"
+ *      (itemClick)="onSplitButtonItemClick($event)"
+ *      (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
+ * `
+ * })
+ *
+ * class AppComponent {
+ *   public data: Array<any> = [{
+ *       text: 'Keep Text Only',
+ *       icon: 'paste-plain-text',
+ *       click: () => { console.log('Keep Text Only click handler'); }
+ *   }, {
+ *       text: 'Paste as HTML',
+ *       icon: 'paste-as-html'
+ *   }, {
+ *       text: 'Paste Markdown',
+ *       icon: 'paste-markdown'
+ *   }, {
+ *       text: 'Set Default Paste'
+ *   }];
+ *
+ *   public onSplitButtonClick(dataItem: any): void {
+ *       console.log('Paste');
+ *   }
+ *
+ *   public onSplitButtonItemClick(dataItem: any): void {
+ *       if (dataItem) {
+ *           console.log(dataItem.text);
+ *       }
+ *   }
+ * }
+ * ```
+ */
+var SplitButtonComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(SplitButtonComponent, _super);
+    function SplitButtonComponent(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, renderer) {
+        var _this = _super.call(this, focusService, navigationService, wrapperRef, zone, localization, cdr) || this;
+        _this.popupService = popupService;
+        _this.elRef = elRef;
+        _this.localization = localization;
+        _this.renderer = renderer;
+        /**
+         * Sets the text of the SplitButton.
+         */
+        _this.text = '';
+        /**
+         * Defines an icon to be rendered next to the button text
+         * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+         */
+        _this.icon = '';
+        /**
+         * Defines an icon with a custom CSS class to be rendered next to the button text
+         * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+         */
+        _this.iconClass = '';
+        /**
+         * Defines the type attribute of the main button
+         */
+        _this.type = 'button';
+        /**
+         * Defines the location of an image to be displayed next to the button text
+         * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+         */
+        _this.imageUrl = '';
+        /**
+         * The size property specifies the padding of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-size)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `null`
+         */
+        _this.size = 'medium';
+        /**
+         * The SplitButton allows you to specify predefined theme colors.
+         * The theme color will be applied as a background and border color while also amending the text color accordingly
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-themeColor)).
+         *
+         * The possible values are:
+         * * `base` &mdash;Applies coloring based on the `base` theme color. (default)
+         * * `primary` &mdash;Applies coloring based on the `primary` theme color.
+         * * `secondary`&mdash;Applies coloring based on the `secondary` theme color.
+         * * `tertiary`&mdash; Applies coloring based on the `tertiary` theme color.
+         * * `info`&mdash;Applies coloring based on the `info` theme color.
+         * * `success`&mdash; Applies coloring based on the `success` theme color.
+         * * `warning`&mdash; Applies coloring based on the `warning` theme color.
+         * * `error`&mdash; Applies coloring based on the `error` theme color.
+         * * `dark`&mdash; Applies coloring based on the `dark` theme color.
+         * * `light`&mdash; Applies coloring based on the `light` theme color.
+         * * `inverse`&mdash; Applies coloring based on the `inverse` theme color.
+         */
+        _this.themeColor = 'base';
+        /**
+         * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+         */
+        _this.tabIndex = 0;
+        /**
+         * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will
+         * be rendered for the button which opens the popup.
+         */
+        _this.arrowButtonIcon = 'arrow-s';
+        /**
+         * Fires each time the user clicks the main button.
+         *
+         * @example
+         * ```ts
+         * _@Component({
+         *    selector: 'my-app',
+         *    template: `
+         *        <kendo-splitbutton (buttonClick)="onSplitButtonClick()" [data]="data">
+         *            Reply
+         *        </kendo-splitbutton>
+         *    `
+         * })
+         * class AppComponent {
+         *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
+         *
+         *    public onSplitButtonClick(): void {
+         *      console.log('SplitButton click');
+         *    }
+         * }
+         * ```
+         *
+         */
+        _this.buttonClick = new core_1.EventEmitter();
+        /**
+         * Fires each time the user clicks on the drop-down list. The event data contains the data item bound to the clicked list item.
+         *
+         * @example
+         * ```ts
+         * _@Component({
+         *     selector: 'my-app',
+         *    template: `
+         *        <kendo-splitbutton (itemClick)="onSplitButtonItemClick($event)" [data]="data">
+         *          Reply
+         *      </kendo-splitbutton>
+         *    `
+         * })
+         * class AppComponent {
+         *    public data: Array<any> = ['Reply All', 'Forward', 'Reply & Delete'];
+         *
+         *   public onSplitButtonItemClick(dataItem?: string): void {
+         *        if (dataItem) {
+         *            console.log(dataItem);
+         *       }
+         *    }
+         * }
+         * ```
+         *
+         */
+        _this.itemClick = new core_1.EventEmitter();
+        /**
+         * Fires each time the SplitButton gets focused.
+         */
+        _this.onFocus = new core_1.EventEmitter(); //tslint:disable-line:no-output-rename
+        /**
+         * Fires each time the SplitButton gets blurred.
+         */
+        _this.onBlur = new core_1.EventEmitter(); //tslint:disable-line:no-output-rename
+        /**
+         * 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 core_1.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 core_1.EventEmitter();
+        /**
+         * @hidden
+         */
+        _this.activeArrow = false;
+        _this.listId = kendo_angular_common_1.guid();
+        _this.buttonText = '';
+        _this.lockFocus = false;
+        _this._rounded = 'medium';
+        _this._fillMode = "solid";
+        _this._itemClick = _this.itemClick;
+        _this._blur = _this.onBlur;
+        return _this;
+    }
+    Object.defineProperty(SplitButtonComponent.prototype, "rounded", {
+        get: function () {
+            return this._rounded;
+        },
+        /**
+         * The rounded property specifies the border radius of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-rounded)).
+         *
+         * The possible values are:
+         * * `'small'`
+         * * `'medium'` (default)
+         * * `'large'`
+         * * `'full'`
+         * * `null`
+         */
+        set: function (rounded) {
+            this.handleClasses(rounded, 'rounded');
+            this._rounded = rounded;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the SplitButton
+         * ([see example]({% slug api_buttons_splitbuttoncomponent %}#toc-fillMode)).
+         *
+         * The available values are:
+         * * `solid` (default)
+         * * `flat`
+         * * `outline`
+         * * `link`
+         */
+        set: function (fillMode) {
+            this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "disabled", {
+        get: function () {
+            return this._disabled;
+        },
+        /**
+         * When set to `true`, disables a SplitButton item
+         * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
+         */
+        set: function (value) {
+            if (this.isOpen) {
+                this.toggle(false);
+            }
+            this._disabled = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "popupSettings", {
+        get: function () {
+            return this._popupSettings;
+        },
+        /**
+         * Configures the popup of the SplitButton.
+         *
+         * The available options are:
+         * - `animate: Boolean`&mdash;Controls the popup animation. By default, the open and close animations are enabled.
+         * - `popupClass: String`&mdash;Specifies a list of CSS classes that are used to style the popup.
+         * - `appendTo: "root" | "component" | ViewContainerRef`&mdash;Specifies the component to which the popup will be appended.
+         * - `align: "left" | "center" | "right"`&mdash;Specifies the alignment of the popup.
+         */
+        set: function (settings) {
+            this._popupSettings = Object.assign({ animate: true, popupClass: '' }, settings);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "data", {
+        get: function () {
+            if (!this._data) {
+                this.data = [];
+            }
+            return this._data;
+        },
+        /**
+         * Sets the data of the SplitButton.
+         *
+         * > The data has to be provided in an array-like list.
+         */
+        set: function (data) {
+            this._data = data || [];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "openState", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._open;
+        },
+        /**
+         * @hidden
+         */
+        set: function (open) {
+            if (this.disabled) {
+                return;
+            }
+            var eventArgs = new preventable_event_1.PreventableEvent();
+            if (open) {
+                this.open.emit(eventArgs);
+            }
+            else {
+                this.close.emit(eventArgs);
+            }
+            if (eventArgs.isDefaultPrevented()) {
+                return;
+            }
+            this._toggle(open);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "active", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this._active;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "componentTabIndex", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.disabled ? -1 : this.tabIndex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "isFocused", {
+        get: function () {
+            return this._isFocused && !this._disabled;
+        },
+        set: function (value) {
+            this._isFocused = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "widgetClasses", {
+        get: function () {
+            return true;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "dir", {
+        get: function () {
+            return this.direction;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "ariaLabel", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            var localizationMsg = this.localization.get('splitButtonLabel') || '';
+            return util_2.replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.onButtonFocus = function () {
+        if (!this.isFocused) {
+            this._isFocused = true;
+            this.onFocus.emit();
+        }
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.onArrowButtonClick = function () {
+        this.lockFocus = true;
+        this.togglePopupVisibility();
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.toggleButtonActiveState = function (enable) {
+        this._active = enable;
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.toggleArrowButtonActiveState = function (enable) {
+        this.activeArrow = enable;
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.onButtonClick = function () {
+        this.lockFocus = true;
+        this.buttonClick.emit();
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.onButtonBlur = function () {
+        if (!this.isOpen && !this.lockFocus) {
+            this.blurWrapper();
+        }
+        this.lockFocus = false;
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.keydown = function (event) {
+        this.keyDownHandler(event);
+        if (event.keyCode === kendo_angular_common_2.Keys.Space) {
+            this._active = true;
+        }
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.keypress = function (event) {
+        this.keyPressHandler(event);
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.keyup = function (event) {
+        this._active = false;
+        if (event.keyCode !== kendo_angular_common_2.Keys.Space) {
+            this.keyUpHandler(event);
+        }
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.ngAfterViewInit = function () {
+        this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.ngOnChanges = function (changes) {
+        if (changes.hasOwnProperty('text')) {
+            this.updateButtonText();
+        }
+        if (kendo_angular_common_1.isChanged("popupSettings", changes) && util_1.isPresent(this.popupRef)) {
+            var popup = this.popupRef.popup.instance;
+            var newSettings = changes.popupSettings.currentValue;
+            popup.popupClass = newSettings.popupClass;
+            popup.animate = newSettings.animate;
+            popup.popupAlign = this.popupAlign;
+        }
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.togglePopupVisibility = function () {
+        _super.prototype.togglePopupVisibility.call(this);
+        if (kendo_angular_common_1.isDocumentAvailable() && this.lockFocus) {
+            this.button.nativeElement.focus();
+        }
+    };
+    /**
+     * @hidden
+     */
+    SplitButtonComponent.prototype.wrapperContains = function (element) {
+        return (this.wrapper === element || this.wrapper.contains(element) || (this.popupRef && this.popupRef.popupElement.contains(element)));
+    };
+    Object.defineProperty(SplitButtonComponent.prototype, "anchorAlign", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            var align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
+            if (this.direction === 'rtl' && !util_1.isPresent(this.popupSettings.align)) {
+                align.horizontal = 'right';
+            }
+            return align;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(SplitButtonComponent.prototype, "popupAlign", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            var align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
+            if (this.direction === 'rtl' && !util_1.isPresent(this.popupSettings.align)) {
+                align.horizontal = 'right';
+            }
+            return align;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Focuses the SplitButton component.
+     */
+    SplitButtonComponent.prototype.focus = function () {
+        if (kendo_angular_common_1.isDocumentAvailable()) {
+            this.button.nativeElement.focus();
+        }
+    };
+    /**
+     * Blurs the SplitButton component.
+     */
+    SplitButtonComponent.prototype.blur = function () {
+        if (kendo_angular_common_1.isDocumentAvailable()) {
+            this.button.nativeElement.blur();
+            this.blurWrapper();
+        }
+    };
+    SplitButtonComponent.prototype.ngOnDestroy = function () {
+        _super.prototype.ngOnDestroy.call(this);
+        this.destroyPopup();
+    };
+    /**
+     * Toggles the visibility of the popup.
+     * If the `toggle` method is used to open or close the popup, the `open` and `close` events will not be fired.
+     *
+     * @param open - The state of the popup.
+     */
+    SplitButtonComponent.prototype.toggle = function (open) {
+        var _this = this;
+        if (this.disabled) {
+            return;
+        }
+        util_1.tick(function () { return _this._toggle(open === undefined ? !_this._open : open); });
+    };
+    Object.defineProperty(SplitButtonComponent.prototype, "isOpen", {
+        /**
+         * Returns the current open state of the popup.
+         */
+        get: function () {
+            return this.openState;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SplitButtonComponent.prototype.enterHandler = function () {
+        if (this.disabled) {
+            return;
+        }
+        if (this.openState) {
+            var focused = this.focusService.focused;
+            if (util_1.isPresent(focused) && focused !== -1) {
+                this.emitItemClickHandler(focused);
+            }
+        }
+        else {
+            this.buttonClick.emit();
+        }
+    };
+    SplitButtonComponent.prototype.updateButtonText = function () {
+        var _this = this;
+        if (kendo_angular_common_1.isDocumentAvailable()) {
+            var innerText_1 = this.wrapper.innerText
+                .split('\n')
+                .join('')
+                .trim();
+            //setTimout is needed because of `Expression has changed after it was checked.` error;
+            setTimeout(function () { return (_this.buttonText = innerText_1); }, 0);
+        }
+    };
+    Object.defineProperty(SplitButtonComponent.prototype, "appendTo", {
+        get: function () {
+            var appendTo = this.popupSettings.appendTo;
+            if (!appendTo || appendTo === 'root') {
+                return undefined;
+            }
+            return appendTo === 'component' ? this.containerRef : appendTo;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    SplitButtonComponent.prototype._toggle = function (open) {
+        this._open = open;
+        this.destroyPopup();
+        if (this._open) {
+            this.createPopup();
+        }
+    };
+    SplitButtonComponent.prototype.createPopup = function () {
+        var _this = this;
+        this.popupRef = this.popupService.open({
+            anchor: this.elRef,
+            anchorAlign: this.anchorAlign,
+            animate: this.popupSettings.animate,
+            appendTo: this.appendTo,
+            content: this.popupTemplate,
+            popupAlign: this.popupAlign,
+            popupClass: this.popupClasses
+        });
+        this.popupRef.popupAnchorViewportLeave.subscribe(function () { return (_this.openState = false); });
+        this.popupRef.popupOpen.subscribe(this.focusFirstItem.bind(this));
+    };
+    SplitButtonComponent.prototype.destroyPopup = function () {
+        if (this.popupRef) {
+            this.popupRef.close();
+            this.popupRef = null;
+        }
+    };
+    SplitButtonComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.wrapperRef.nativeElement;
+        var classes = util_2.getStylingClasses('button', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    };
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "text", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "icon", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "iconClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "type", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "imageUrl", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "size", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SplitButtonComponent.prototype, "rounded", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SplitButtonComponent.prototype, "fillMode", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "themeColor", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [Boolean])
+    ], SplitButtonComponent.prototype, "disabled", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [Object])
+    ], SplitButtonComponent.prototype, "popupSettings", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], SplitButtonComponent.prototype, "tabIndex", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "textField", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object),
+        tslib_1.__metadata("design:paramtypes", [Object])
+    ], SplitButtonComponent.prototype, "data", null);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], SplitButtonComponent.prototype, "buttonClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], SplitButtonComponent.prototype, "arrowButtonClass", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], SplitButtonComponent.prototype, "arrowButtonIcon", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SplitButtonComponent.prototype, "buttonClick", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SplitButtonComponent.prototype, "itemClick", void 0);
+    tslib_1.__decorate([
+        core_1.Output('focus'),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SplitButtonComponent.prototype, "onFocus", void 0);
+    tslib_1.__decorate([
+        core_1.Output('blur'),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SplitButtonComponent.prototype, "onBlur", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SplitButtonComponent.prototype, "open", void 0);
+    tslib_1.__decorate([
+        core_1.Output(),
+        tslib_1.__metadata("design:type", core_1.EventEmitter)
+    ], SplitButtonComponent.prototype, "close", void 0);
+    tslib_1.__decorate([
+        core_1.ContentChild(button_item_template_directive_1.ButtonItemTemplateDirective, { static: false }),
+        tslib_1.__metadata("design:type", button_item_template_directive_1.ButtonItemTemplateDirective)
+    ], SplitButtonComponent.prototype, "itemTemplate", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('button', { static: true }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], SplitButtonComponent.prototype, "button", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('arrowButton', { static: true, read: core_1.ElementRef }),
+        tslib_1.__metadata("design:type", core_1.ElementRef)
+    ], SplitButtonComponent.prototype, "arrowButton", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('popupTemplate', { static: true }),
+        tslib_1.__metadata("design:type", core_1.TemplateRef)
+    ], SplitButtonComponent.prototype, "popupTemplate", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('container', { read: core_1.ViewContainerRef, static: true }),
+        tslib_1.__metadata("design:type", core_1.ViewContainerRef)
+    ], SplitButtonComponent.prototype, "containerRef", void 0);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-focus'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [Boolean])
+    ], SplitButtonComponent.prototype, "isFocused", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('class.k-split-button'),
+        core_1.HostBinding('class.k-button-group'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], SplitButtonComponent.prototype, "widgetClasses", null);
+    tslib_1.__decorate([
+        core_1.HostBinding('attr.dir'),
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], SplitButtonComponent.prototype, "dir", null);
+    tslib_1.__decorate([
+        core_1.HostListener('keydown', ['$event']),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", [Object]),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], SplitButtonComponent.prototype, "keydown", null);
+    tslib_1.__decorate([
+        core_1.HostListener('keypress', ['$event']),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", [Object]),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], SplitButtonComponent.prototype, "keypress", null);
+    tslib_1.__decorate([
+        core_1.HostListener('keyup', ['$event']),
+        tslib_1.__metadata("design:type", Function),
+        tslib_1.__metadata("design:paramtypes", [Object]),
+        tslib_1.__metadata("design:returntype", void 0)
+    ], SplitButtonComponent.prototype, "keyup", null);
+    SplitButtonComponent = tslib_1.__decorate([
+        core_1.Component({
+            exportAs: 'kendoSplitButton',
+            providers: [
+                focus_service_1.FocusService,
+                navigation_service_1.NavigationService,
+                NAVIGATION_SETTINGS_PROVIDER,
+                kendo_angular_l10n_1.LocalizationService,
+                {
+                    provide: kendo_angular_l10n_1.L10N_PREFIX,
+                    useValue: 'kendo.splitbutton'
+                }
+            ],
+            selector: 'kendo-splitbutton',
+            template: "\n        <ng-container kendoSplitButtonLocalizedMessages\n            i18n-splitButtonLabel=\"kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label\"\n            splitButtonLabel=\"{{ '{buttonText} splitbutton' }}\">\n        </ng-container>\n        <button\n            kendoButton\n            #button\n            [type]=\"type\"\n            [tabindex]=\"componentTabIndex\"\n            [disabled]=\"disabled\"\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"themeColor\"\n            [icon]=\"icon\"\n            [class.k-active]=\"active\"\n            [class.k-icon-button]=\"!text && icon\"\n            [iconClass]=\"iconClass\"\n            [imageUrl]=\"imageUrl\"\n            [ngClass]=\"buttonClass\"\n            (focus)=\"onButtonFocus()\"\n            (click)=\"onButtonClick()\"\n            (blur)=\"onButtonBlur()\"\n            (mousedown)=\"toggleButtonActiveState(true)\"\n            (mouseup)=\"toggleButtonActiveState(false)\"\n            [attr.aria-disabled]=\"disabled\"\n            [attr.aria-expanded]=\"openState\"\n            [attr.aria-haspopup]=\"true\"\n            [attr.aria-owns]=\"listId\"\n            [attr.aria-label]=\"ariaLabel\"\n        >\n            <span *ngIf=\"text\" class=\"k-button-text\">\n                {{ text }}\n            </span><ng-content></ng-content>\n        </button>\n        <button\n            kendoButton\n            #arrowButton\n            type=\"button\"\n            [class.k-active]=\"activeArrow\"\n            [disabled]=\"disabled\"\n            [icon]=\"arrowButtonIcon\"\n            [size]=\"size\"\n            [rounded]=\"rounded\"\n            [fillMode]=\"fillMode\"\n            [themeColor]=\"fillMode ? themeColor : null\"\n            [tabindex]=\"-1\"\n            [ngClass]=\"arrowButtonClass\"\n            (click)=\"onArrowButtonClick()\"\n            (mousedown)=\"toggleArrowButtonActiveState(true)\"\n            (mouseup)=\"toggleArrowButtonActiveState(false)\"\n        ></button>\n        <ng-template #popupTemplate>\n            <kendo-button-list\n                [id]=\"listId\"\n                [data]=\"data\"\n                [textField]=\"textField\"\n                [itemTemplate]=\"itemTemplate\"\n                (onItemClick)=\"onItemClick($event)\"\n                (keydown)=\"keyDownHandler($event)\"\n                (keypress)=\"keyPressHandler($event)\"\n                (keyup)=\"keyUpHandler($event)\"\n                [attr.dir]=\"dir\"\n                [size]=\"size\"\n            >\n            </kendo-button-list>\n        </ng-template>\n        <ng-container #container></ng-container>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [focus_service_1.FocusService,
+            navigation_service_1.NavigationService,
+            core_1.ElementRef,
+            core_1.NgZone,
+            kendo_angular_popup_1.PopupService,
+            core_1.ElementRef,
+            kendo_angular_l10n_1.LocalizationService,
+            core_1.ChangeDetectorRef,
+            core_1.Renderer2])
+    ], SplitButtonComponent);
+    return SplitButtonComponent;
+}(list_button_1.ListButton));
+exports.SplitButtonComponent = SplitButtonComponent;