text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var core_1 = require("@angular/core");
  var toolbar_tool_component_1 = require("./toolbar-tool.component");
  var kendo_angular_common_1 = require("@progress/kendo-angular-common");
  var kendo_angular_buttons_1 = require("@progress/kendo-angular-buttons");
  var single_focusable_navigation_service_1 = require("../navigation/single-focusable-navigation.service");
  /**
   * @hidden
   */
  exports.display = function (property, displayMode, overflows) {
      switch (displayMode) {
          case "toolbar":
              return overflows ? undefined : property;
          case "overflow":
              return overflows ? property : undefined;
          default:
              return property;
      }
  };
  /**
   * Represents the [Kendo UI ToolBar Button tool for Angular]({% slug controltypes_toolbar %}#toc-buttons).
   */
  var ToolBarButtonComponent = /** @class */ (function (_super) {
      tslib_1.__extends(ToolBarButtonComponent, _super);
      function ToolBarButtonComponent() {
          var _this = _super.call(this) || this;
          /**
           * @hidden
           */
          _this.showText = "both";
          /**
           * Provides visual styling that indicates if the Button is active
           * ([see example]({% slug controltypes_toolbar %}#toc-toggle-buttons)).
           * By default, `toggleable` is set to `false`.
           */
          _this.toggleable = false;
          /**
           * Adds visual weight to the Button and makes it primary
           * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
           */
          _this.primary = false;
          /**
           * Changes the visual appearance by using alternative styling options
           * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
           *
           * The available values are:
           * * `bare`
           * * `flat`
           * * `outline`
           */
          _this.look = "default";
          /**
           * Sets the selected state of the Button.
           */
          _this.selected = false;
          /**
           * @hidden
           */
          _this.showIcon = "both";
          /**
           * Fires each time the Button is clicked.
           */
          _this.click = new core_1.EventEmitter();
          /**
           * Fires each time the selected state of a Toggle Button is changed.
           * The event argument is the new selected state (Boolean).
           */
          _this.selectedChange = new core_1.EventEmitter();
          _this.internalState = { selected: undefined };
          _this.navigationService = new single_focusable_navigation_service_1.SingleFocusableNavigationService();
          return _this;
      }
      Object.defineProperty(ToolBarButtonComponent.prototype, "text", {
          get: function () {
              return exports.display(this._text, this.showText, this.overflows);
          },
          /**
           * Specifies the text of the Button ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
           */
          set: function (text) {
              this._text = text;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ToolBarButtonComponent.prototype, "togglable", {
          /**
           * @hidden
           */
          get: function () {
              return this.toggleable;
          },
          set: function (value) {
              this.toggleable = value;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ToolBarButtonComponent.prototype, "icon", {
          get: function () {
              return exports.display(this._icon, this.showIcon, this.overflows);
          },
          /**
           * Defines the name for an existing icon in a Kendo UI theme
           * ([see example]({% slug controltypes_toolbar %}#toc-buttons)).
           * The icon is rendered inside the Button by a `span.k-icon` element.
           */
          set: function (icon) {
              this._icon = icon;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ToolBarButtonComponent.prototype, "iconClass", {
          get: function () {
              return exports.display(this._iconClass, this.showIcon, this.overflows);
          },
          /**
           * Defines a CSS class&mdash;or multiple classes separated by spaces&mdash;
           * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
           */
          set: function (iconClass) {
              this._iconClass = iconClass;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ToolBarButtonComponent.prototype, "imageUrl", {
          get: function () {
              return exports.display(this._imageUrl, this.showIcon, this.overflows);
          },
          /**
           * Defines a URL which is used for an `img` element inside the Button.
           * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
           */
          set: function (imageUrl) {
              this._imageUrl = imageUrl;
          },
          enumerable: true,
          configurable: true
      });
      ToolBarButtonComponent.prototype.ngOnChanges = function (changes) {
          if (kendo_angular_common_1.isChanged("selected", changes)) {
              this.internalState.selected = this.selected;
          }
      };
      ToolBarButtonComponent.prototype.selectedChangeHandler = function (state) {
          this.internalState.selected = state;
          this.selectedChange.emit(state);
      };
      ToolBarButtonComponent.decorators = [
          { type: core_1.Component, args: [{
                      exportAs: 'kendoToolBarButton',
                      // tslint:disable-next-line:no-forward-ref
                      providers: [{ provide: toolbar_tool_component_1.ToolBarToolComponent, useExisting: core_1.forwardRef(function () { return ToolBarButtonComponent; }) }],
                      selector: 'kendo-toolbar-button',
                      template: "\n        <ng-template #toolbarTemplate>\n            <button #toolbarButton tabindex=\"-1\" type=\"button\" kendoButton\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [primary]=\"primary\"\n                [selected]=\"internalState.selected\"\n                [icon]=\"icon\"\n                [iconClass]=\"iconClass\"\n                [imageUrl]=\"imageUrl\"\n                [look]=\"look\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChangeHandler($event)\">\n                {{ text }}\n            </button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button #overflowButton tabindex=\"-1\" type=\"button\" kendoButton\n                class=\"k-overflow-button\"\n                [ngStyle]=\"style\"\n                [ngClass]=\"className\"\n                [attr.title]=\"title\"\n                [disabled]=\"disabled\"\n                [toggleable]=\"toggleable\"\n                [primary]=\"primary\"\n                [selected]=\"internalState.selected\"\n                [icon]=\"icon\"\n                [iconClass]=\"iconClass\"\n                [imageUrl]=\"imageUrl\"\n                [look]=\"look\"\n                (click)=\"click.emit($event)\"\n                (selectedChange)=\"selectedChangeHandler($event)\">\n                {{ text }}\n            </button>\n        </ng-template>\n    "
                  },] },
      ];
      /** @nocollapse */
      ToolBarButtonComponent.ctorParameters = function () { return []; };
      ToolBarButtonComponent.propDecorators = {
          text: [{ type: core_1.Input }],
          showText: [{ type: core_1.Input }],
          style: [{ type: core_1.Input }],
          className: [{ type: core_1.Input }],
          title: [{ type: core_1.Input }],
          disabled: [{ type: core_1.Input }],
          toggleable: [{ type: core_1.Input }],
          togglable: [{ type: core_1.Input }],
          primary: [{ type: core_1.Input }],
          look: [{ type: core_1.Input }],
          selected: [{ type: core_1.Input }],
          icon: [{ type: core_1.Input }],
          iconClass: [{ type: core_1.Input }],
          imageUrl: [{ type: core_1.Input }],
          showIcon: [{ type: core_1.Input }],
          click: [{ type: core_1.Output }],
          selectedChange: [{ type: core_1.Output }],
          toolbarTemplate: [{ type: core_1.ViewChild, args: ["toolbarTemplate",] }],
          popupTemplate: [{ type: core_1.ViewChild, args: ["popupTemplate",] }],
          button: [{ type: core_1.ViewChild, args: ["toolbarButton", { read: kendo_angular_buttons_1.Button },] }]
      };
      return ToolBarButtonComponent;
  }(toolbar_tool_component_1.ToolBarToolComponent));
  exports.ToolBarButtonComponent = ToolBarButtonComponent;
  