@progress/kendo-angular-buttons 7.0.0-dev.202201061631 → 7.0.0-dev.202201181837

package/dist/es/button/button.directive.js

@@ -9,7 +9,7 @@ import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/ke
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { getStylingClasses, getThemeColorClasses } from '../util';
+import { getStylingClasses, getThemeColorClasses, isPresent } from '../util';
 var SPAN_TAG_NAME = 'SPAN';
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -372,9 +372,6 @@ var ButtonDirective = /** @class */ (function () {
                 case 'default':
                     this.fillMode = 'solid';
                     break;
-                case 'clear':
-                    this.fillMode = 'link';
-                    break;
                 default:
                     this.fillMode = value;
                     break;
@@ -494,15 +491,6 @@ var ButtonDirective = /** @class */ (function () {
             return false;
         }
     };
-    Object.defineProperty(ButtonDirective.prototype, "text", {
-        get: function () {
-            if (isDocumentAvailable()) {
-                return this.element.innerHTML.trim();
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
     ButtonDirective.prototype.addImgIcon = function (imageUrl) {
         var renderer = this.renderer;
         this.iconSpanNode = renderer.createElement('span');
@@ -532,8 +520,11 @@ var ButtonDirective = /** @class */ (function () {
         }
     };
     ButtonDirective.prototype.addTextSpan = function () {
-        if (isDocumentAvailable() && this.hasText()) {
-            this.element.innerHTML = "<span class='k-button-text'>" + this.text + "</span>";
+        if (isDocumentAvailable() && this.hasText() && isPresent(this.element.append)) {
+            var span = this.renderer.createElement('span');
+            this.renderer.addClass(span, 'k-button-text');
+            span.append.apply(span, Array.from(this.element.childNodes));
+            this.element.append(span);
         }
     };
     ButtonDirective.prototype.prependChild = function (node) {

package/dist/es/buttongroup/buttongroup.component.js

@@ -10,6 +10,8 @@ import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
 import { isPresent } from '../util';
 import { PreventableEvent } from '../preventable-event';
+import { packageMetadata } from '../package-metadata';
+import { validatePackage } from '@progress/kendo-licensing';
 /**
  * @hidden
  */
@@ -32,6 +34,7 @@ var ButtonGroupComponent = /** @class */ (function () {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        validatePackage(packageMetadata);
         this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
             var rtl = _a.rtl;
             return _this.direction = rtl ? 'rtl' : 'ltr';
@@ -150,7 +153,7 @@ var ButtonGroupComponent = /** @class */ (function () {
             if (button.togglable) {
                 button.setSelected(newSelectionValue);
             }
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
         });
     };
     ButtonGroupComponent.prototype.ngOnChanges = function (change) {
@@ -166,10 +169,10 @@ var ButtonGroupComponent = /** @class */ (function () {
     ButtonGroupComponent.prototype.ngAfterContentInit = function () {
         this.buttons.forEach(function (button) {
             if (button.selected) {
-                button.setAttribute(tabindex, "0");
+                button.setAttribute(tabindex, '0');
             }
             else {
-                button.setAttribute(tabindex, "-1");
+                button.setAttribute(tabindex, '-1');
             }
         });
     };
@@ -213,24 +216,24 @@ var ButtonGroupComponent = /** @class */ (function () {
     ButtonGroupComponent.prototype.deactivate = function (buttons) {
         buttons.forEach(function (button) {
             button.setSelected(false);
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     };
     ButtonGroupComponent.prototype.activate = function (buttons) {
         buttons.forEach(function (button) {
             button.setSelected(true);
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     };
     ButtonGroupComponent.prototype.defocus = function (buttons) {
         buttons.forEach(function (button) {
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     };
     ButtonGroupComponent.prototype.focus = function (buttons) {
         buttons.forEach(function (button) {
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     };

package/dist/es/chip/chip-list.component.js

@@ -7,6 +7,8 @@ import { Component, Input, HostBinding, ContentChildren, QueryList, EventEmitter
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { ChipComponent } from './chip.component';
 import { closest, getStylingClasses } from '../util';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
 var ChipListComponent = /** @class */ (function () {
     function ChipListComponent(localizationService, renderer, element) {
         this.localizationService = localizationService;
@@ -32,6 +34,7 @@ var ChipListComponent = /** @class */ (function () {
         this.remove = new EventEmitter();
         this.role = 'listbox';
         this._size = 'medium';
+        validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     Object.defineProperty(ChipListComponent.prototype, "size", {

package/dist/es/dropdownbutton/dropdownbutton.component.js

@@ -104,18 +104,6 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
          * * `null`
          */
         _this.rounded = 'medium';
-        /**
-         * The fillMode property specifies the background and border styles of the DropDownButton
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        _this.fillMode = 'solid';
         /**
          * The DropDownButton 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
@@ -163,6 +151,7 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
          */
         _this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
         _this.listId = guid();
+        _this._fillMode = 'solid';
         _this._itemClick = _this.itemClick;
         _this._blur = _this.onBlur;
         return _this;
@@ -217,6 +206,28 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(DropDownButtonComponent.prototype, "fillMode", {
+        get: function () {
+            return this._fillMode;
+        },
+        /**
+         * The fillMode property specifies the background and border styles of the DropDownButton
+         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
+         *
+         * The available values are:
+         * * `solid` (default)
+         * * `flat`
+         * * `outline`
+         * * `link`
+         * * `null`
+         */
+        set: function (fillMode) {
+            // Temporary workaround for missing 'clear' styles
+            this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DropDownButtonComponent.prototype, "openState", {
         /**
          * @hidden
@@ -563,8 +574,9 @@ var DropDownButtonComponent = /** @class */ (function (_super) {
     ], DropDownButtonComponent.prototype, "rounded", void 0);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", String)
-    ], DropDownButtonComponent.prototype, "fillMode", void 0);
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], DropDownButtonComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)

package/dist/es/listbutton/list-button.js

@@ -9,6 +9,8 @@ import { KeyEvents } from './../navigation/key-events';
 import { NavigationAction } from './../navigation/navigation-action';
 import { isDocumentAvailable, guid, Keys } from '@progress/kendo-angular-common';
 import { isPresent } from './../util';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
  */
@@ -26,6 +28,7 @@ var ListButton = /** @class */ (function () {
         this._popupSettings = { animate: true, popupClass: '' };
         this.listId = guid();
         this._isFocused = false;
+        validatePackage(packageMetadata);
         this.focusService = focusService;
         this.navigationService = navigationService;
         this.wrapper = wrapperRef.nativeElement;

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641486598,
+    publishDate: 1642530954,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es/splitbutton/splitbutton.component.js

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
 /* tslint:disable:no-access-missing-member */
-import { Component, ElementRef, TemplateRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, ViewContainerRef, NgZone, ChangeDetectorRef } from '@angular/core';
+import { Component, ElementRef, TemplateRef, Input, Output, HostBinding, HostListener, EventEmitter, ContentChild, ViewChild, ViewContainerRef, NgZone, ChangeDetectorRef, Renderer2 } 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';
@@ -16,7 +16,7 @@ import { isDocumentAvailable, guid, isChanged } from '@progress/kendo-angular-co
 import { isPresent, tick } from './../util';
 import { PreventableEvent } from '../preventable-event';
 import { Keys } from '@progress/kendo-angular-common';
-import { replaceMessagePlaceholder } from '../util';
+import { replaceMessagePlaceholder, getStylingClasses } from '../util';
 var NAVIGATION_SETTINGS = {
     useLeftRightArrows: true
 };
@@ -68,11 +68,12 @@ var NAVIGATION_SETTINGS_PROVIDER = {
  */
 var SplitButtonComponent = /** @class */ (function (_super) {
     tslib_1.__extends(SplitButtonComponent, _super);
-    function SplitButtonComponent(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr) {
+    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.
          */
@@ -107,29 +108,6 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          * * `null`
          */
         _this.size = 'medium';
-        /**
-         * 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`
-         */
-        _this.rounded = 'medium';
-        /**
-         * 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`
-         */
-        _this.fillMode = 'solid';
         /**
          * 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
@@ -226,17 +204,62 @@ var SplitButtonComponent = /** @class */ (function (_super) {
          * This event is preventable. If you cancel the event, the popup will remain open.
          */
         _this.close = new EventEmitter();
-        _this.listId = guid();
         /**
          * @hidden
          */
         _this.activeArrow = false;
+        _this.listId = 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) {
+            // Temporary workaround for missing 'clear' styles
+            this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(SplitButtonComponent.prototype, "disabled", {
         get: function () {
             return this._disabled;
@@ -448,6 +471,7 @@ var SplitButtonComponent = /** @class */ (function (_super) {
      */
     SplitButtonComponent.prototype.ngAfterViewInit = function () {
         this.updateButtonText();
+        this.handleClasses(this.rounded, 'rounded');
     };
     /**
      * @hidden
@@ -614,6 +638,16 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             this.popupRef = null;
         }
     };
+    SplitButtonComponent.prototype.handleClasses = function (value, input) {
+        var elem = this.wrapperRef.nativeElement;
+        var 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);
+        }
+    };
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -640,12 +674,14 @@ var SplitButtonComponent = /** @class */ (function (_super) {
     ], SplitButtonComponent.prototype, "size", void 0);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "rounded", void 0);
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SplitButtonComponent.prototype, "rounded", null);
     tslib_1.__decorate([
         Input(),
-        tslib_1.__metadata("design:type", String)
-    ], SplitButtonComponent.prototype, "fillMode", void 0);
+        tslib_1.__metadata("design:type", String),
+        tslib_1.__metadata("design:paramtypes", [String])
+    ], SplitButtonComponent.prototype, "fillMode", null);
     tslib_1.__decorate([
         Input(),
         tslib_1.__metadata("design:type", String)
@@ -786,7 +822,8 @@ var SplitButtonComponent = /** @class */ (function (_super) {
             PopupService,
             ElementRef,
             LocalizationService,
-            ChangeDetectorRef])
+            ChangeDetectorRef,
+            Renderer2])
     ], SplitButtonComponent);
     return SplitButtonComponent;
 }(ListButton));

package/dist/es2015/button/button.directive.d.ts

@@ -202,7 +202,6 @@ export declare class ButtonDirective implements OnDestroy, AfterViewInit {
     setSelected(value: boolean): void;
     private toggleAriaPressed;
     private hasText;
-    private readonly text;
     private addImgIcon;
     private addIcon;
     private addTextSpan;

package/dist/es2015/button/button.directive.js

@@ -9,7 +9,7 @@ import { isDocumentAvailable, isChanged, hasObservers, Keys } from '@progress/ke
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { getStylingClasses, getThemeColorClasses } from '../util';
+import { getStylingClasses, getThemeColorClasses, isPresent } from '../util';
 const SPAN_TAG_NAME = 'SPAN';
 /**
  * Represents the Kendo UI Button component for Angular.
@@ -285,9 +285,6 @@ let ButtonDirective = class ButtonDirective {
             case 'default':
                 this.fillMode = 'solid';
                 break;
-            case 'clear':
-                this.fillMode = 'link';
-                break;
             default:
                 this.fillMode = value;
                 break;
@@ -401,11 +398,6 @@ let ButtonDirective = class ButtonDirective {
             return false;
         }
     }
-    get text() {
-        if (isDocumentAvailable()) {
-            return this.element.innerHTML.trim();
-        }
-    }
     addImgIcon(imageUrl) {
         let renderer = this.renderer;
         this.iconSpanNode = renderer.createElement('span');
@@ -435,8 +427,11 @@ let ButtonDirective = class ButtonDirective {
         }
     }
     addTextSpan() {
-        if (isDocumentAvailable() && this.hasText()) {
-            this.element.innerHTML = `<span class='k-button-text'>${this.text}</span>`;
+        if (isDocumentAvailable() && this.hasText() && isPresent(this.element.append)) {
+            const span = this.renderer.createElement('span');
+            this.renderer.addClass(span, 'k-button-text');
+            span.append(...Array.from(this.element.childNodes));
+            this.element.append(span);
         }
     }
     prependChild(node) {

package/dist/es2015/buttongroup/buttongroup.component.js

@@ -10,6 +10,8 @@ import { isChanged, Keys } from '@progress/kendo-angular-common';
 import { KendoButtonService } from '../button/button.service';
 import { isPresent } from '../util';
 import { PreventableEvent } from '../preventable-event';
+import { packageMetadata } from '../package-metadata';
+import { validatePackage } from '@progress/kendo-licensing';
 /**
  * @hidden
  */
@@ -31,6 +33,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
         this.navigate = new EventEmitter();
         this._tabIndex = 0;
         this.currentTabIndex = 0;
+        validatePackage(packageMetadata);
         this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
     }
     /**
@@ -109,7 +112,7 @@ let ButtonGroupComponent = class ButtonGroupComponent {
             if (button.togglable) {
                 button.setSelected(newSelectionValue);
             }
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
         });
     }
     ngOnChanges(change) {
@@ -124,10 +127,10 @@ let ButtonGroupComponent = class ButtonGroupComponent {
     ngAfterContentInit() {
         this.buttons.forEach((button) => {
             if (button.selected) {
-                button.setAttribute(tabindex, "0");
+                button.setAttribute(tabindex, '0');
             }
             else {
-                button.setAttribute(tabindex, "-1");
+                button.setAttribute(tabindex, '-1');
             }
         });
     }
@@ -171,24 +174,24 @@ let ButtonGroupComponent = class ButtonGroupComponent {
     deactivate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(false);
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     }
     activate(buttons) {
         buttons.forEach((button) => {
             button.setSelected(true);
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     }
     defocus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, "-1");
+            button.setAttribute(tabindex, '-1');
         });
     }
     focus(buttons) {
         buttons.forEach((button) => {
-            button.setAttribute(tabindex, "0");
+            button.setAttribute(tabindex, '0');
             button.focus();
         });
     }

package/dist/es2015/chip/chip-list.component.js

@@ -7,6 +7,8 @@ import { Component, Input, HostBinding, ContentChildren, QueryList, EventEmitter
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { ChipComponent } from './chip.component';
 import { closest, getStylingClasses } from '../util';
+import { validatePackage } from '@progress/kendo-licensing';
+import { packageMetadata } from '../package-metadata';
 let ChipListComponent = class ChipListComponent {
     constructor(localizationService, renderer, element) {
         this.localizationService = localizationService;
@@ -32,6 +34,7 @@ let ChipListComponent = class ChipListComponent {
         this.remove = new EventEmitter();
         this.role = 'listbox';
         this._size = 'medium';
+        validatePackage(packageMetadata);
         this.direction = localizationService.rtl ? 'rtl' : 'ltr';
     }
     /**

package/dist/es2015/common/models/fillmode.d.ts

@@ -5,7 +5,7 @@
 /**
  * Represents the possible fillMode options of the buttons.
  */
-export declare type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link';
+export declare type ButtonFillMode = 'solid' | 'flat' | 'outline' | 'link' | 'clear';
 /**
  * Represents the possible fillMode options of the Chip.
  */

package/dist/es2015/dropdownbutton/dropdownbutton.component.d.ts

@@ -204,6 +204,7 @@ export declare class DropDownButtonComponent extends ListButton implements OnCha
     container: ViewContainerRef;
     popupRef: PopupRef;
     listId: string;
+    private _fillMode;
     /**
      * @hidden
      */

package/dist/es2015/dropdownbutton/dropdownbutton.component.js

@@ -103,18 +103,6 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
          * * `null`
          */
         this.rounded = 'medium';
-        /**
-         * The fillMode property specifies the background and border styles of the DropDownButton
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
-         *
-         * The available values are:
-         * * `solid` (default)
-         * * `flat`
-         * * `outline`
-         * * `link`
-         * * `null`
-         */
-        this.fillMode = 'solid';
         /**
          * The DropDownButton 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
@@ -162,6 +150,7 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
          */
         this.onBlur = new EventEmitter(); //tslint:disable-line:no-output-rename
         this.listId = guid();
+        this._fillMode = 'solid';
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -203,6 +192,24 @@ let DropDownButtonComponent = class DropDownButtonComponent extends ListButton {
     get data() {
         return this._data;
     }
+    /**
+     * The fillMode property specifies the background and border styles of the DropDownButton
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
+     *
+     * The available values are:
+     * * `solid` (default)
+     * * `flat`
+     * * `outline`
+     * * `link`
+     * * `null`
+     */
+    set fillMode(fillMode) {
+        // Temporary workaround for missing 'clear' styles
+        this._fillMode = fillMode === 'clear' ? 'flat' : fillMode;
+    }
+    get fillMode() {
+        return this._fillMode;
+    }
     /**
      * @hidden
      */
@@ -508,8 +515,9 @@ tslib_1.__decorate([
 ], DropDownButtonComponent.prototype, "rounded", void 0);
 tslib_1.__decorate([
     Input(),
-    tslib_1.__metadata("design:type", String)
-], DropDownButtonComponent.prototype, "fillMode", void 0);
+    tslib_1.__metadata("design:type", String),
+    tslib_1.__metadata("design:paramtypes", [String])
+], DropDownButtonComponent.prototype, "fillMode", null);
 tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", String)