text: import { ChangeDetectorRef, Directive, ElementRef, Host, HostBinding, HostListener, Input, NgZone } from '@angular/core';
  import { Subscription } from 'rxjs/Subscription';
  import { LocalizationService } from '@progress/kendo-angular-l10n';
  import { isBlank, isPresent, isTruthy } from '../utils';
  import { expandColumns, leafColumns, columnsToRender } from '../columns/column-common';
  import { DraggableDirective } from '../common/draggable.directive';
  import { ColumnResizingService } from './column-resizing.service';
  import { of } from 'rxjs/observable/of';
  import { delay } from 'rxjs/operators/delay';
  import { takeUntil } from 'rxjs/operators/takeUntil';
  import { filter } from 'rxjs/operators/filter';
  import { take } from 'rxjs/operators/take';
  import { tap } from 'rxjs/operators/tap';
  import { switchMap } from 'rxjs/operators/switchMap';
  import { map } from 'rxjs/operators/map';
  // TODO
  // tslint:disable:rxjs-no-unsafe-takeuntil
  /**
   * @hidden
   */
  var fromPercentage = function (value, percent) {
      var sign = percent < 0 ? -1 : 1;
      return Math.ceil((Math.abs(percent) / 100) * value) * sign;
  };
  /**
   * @hidden
   */
  var toPercentage = function (value, whole) { return (value / whole) * 100; };
  /**
   * @hidden
   */
  var headerWidth = function (handle) { return handle.nativeElement.parentElement.offsetWidth; };
  /**
   * @hidden
   */
  var allLeafColumns = function (columns) { return expandColumns(columns)
      .filter(function (c) { return !c.isColumnGroup; }); };
  /**
   * @hidden
   */
  var stopPropagation = function (_a) {
      var event = _a.originalEvent;
      event.stopPropagation();
      event.preventDefault();
  };
  /**
   * @hidden
   */
  var createMoveStream = function (service, draggable) { return function (mouseDown) {
      return draggable.kendo.drag.pipe(takeUntil(draggable.kendo.release.pipe(tap(function () { return service.end(); }))), map(function (_a) {
          var pageX = _a.pageX;
          return ({
              originalX: mouseDown.pageX,
              pageX: pageX
          });
      }));
  }; };
  /**
   * @hidden
   */
  var preventOnDblClick = function (release) { return function (mouseDown) {
      return of(mouseDown).pipe(delay(150), takeUntil(release));
  }; };
  /**
   * @hidden
   */
  var isInSpanColumn = function (column) { return !!(column.parent && column.parent.isSpanColumn); };
  /**
   * @hidden
   *
   * Calculates the column index. If the column is stated in `SpanColumn`,
   * the index for all child columns equals the index of the first child.
   */
  var indexOf = function (target, list) {
      var index = 0;
      var ignore = 0;
      var skip = 0;
      while (index < list.length) {
          var current = list[index];
          var isParentSpanColumn = isInSpanColumn(current);
          if (current === target) {
              break;
          }
          if ((ignore-- <= 0) && isParentSpanColumn) {
              ignore = current.parent.childColumns.length - 1;
              skip += ignore;
          }
          index++;
      }
      return index - skip;
  };
  /**
   * @hidden
   */
  var ColumnHandleDirective = /** @class */ (function () {
      function ColumnHandleDirective(draggable, element, service, zone, cdr, localization) {
          this.draggable = draggable;
          this.element = element;
          this.service = service;
          this.zone = zone;
          this.cdr = cdr;
          this.localization = localization;
          this.columns = [];
          this.subscriptions = new Subscription();
          this.rtl = false;
      }
      Object.defineProperty(ColumnHandleDirective.prototype, "visible", {
          get: function () {
              return this.column.resizable ? 'block' : 'none';
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ColumnHandleDirective.prototype, "leftStyle", {
          get: function () {
              return isTruthy(this.rtl) ? 0 : null;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(ColumnHandleDirective.prototype, "rightStyle", {
          get: function () {
              return isTruthy(this.rtl) ? null : 0;
          },
          enumerable: true,
          configurable: true
      });
      ColumnHandleDirective.prototype.autoFit = function () {
          var _this = this;
          var allLeafs = allLeafColumns(this.columns);
          var currentLeafs = leafColumns([this.column]).filter(function (column) { return isTruthy(column.resizable); });
          var columnInfo = currentLeafs.map(function (column) {
              var isParentSpan = isInSpanColumn(column);
              var isLastInSpan = isParentSpan ? column.parent.childColumns.last === column : false;
              var index = indexOf(column, allLeafs);
              return {
                  column: column,
                  headerIndex: _this.columnsForLevel(column.level).indexOf(column),
                  index: index,
                  isLastInSpan: isLastInSpan,
                  isParentSpan: isParentSpan,
                  level: column.level
              };
          });
          currentLeafs.forEach(function (column) { return column.width = 0; });
          this.service.measureColumns(columnInfo);
      };
      ColumnHandleDirective.prototype.ngOnInit = function () {
          var _this = this;
          var service = this.service.changes.pipe(filter(function () { return _this.column.resizable; }), filter(function (e) { return isPresent(e.columns.find(function (column) { return column === _this.column; })); }));
          this.subscriptions.add(service.pipe(filter(function (e) { return e.type === 'start'; }))
              .subscribe(this.initState.bind(this)));
          this.subscriptions.add(service.pipe(filter(function (e) { return e.type === 'resizeColumn'; }))
              .subscribe(this.resize.bind(this)));
          this.subscriptions.add(this.service.changes.pipe(filter(function (e) { return e.type === 'start'; }), filter(this.shouldUpdate.bind(this)), take(1) //on first resize only
          ).subscribe(this.initColumnWidth.bind(this)));
          this.subscriptions.add(this.zone.runOutsideAngular(function () {
              return _this.draggable.kendo.press.pipe(tap(stopPropagation), tap(function () { return _this.service.start(_this.column); }), switchMap(preventOnDblClick(_this.draggable.kendo.release)), switchMap(createMoveStream(_this.service, _this.draggable)))
                  .subscribe(function (_a) {
                  var pageX = _a.pageX, originalX = _a.originalX;
                  var delta = pageX - originalX;
                  var percent = toPercentage(delta, _this.originalWidth);
                  _this.service.resizeColumns(percent);
              });
          }));
          this.subscriptions.add(service.pipe(filter(function (e) { return e.type === 'autoFitComplete'; }))
              .subscribe(this.sizeToFit.bind(this)));
          this.subscriptions.add(service.pipe(filter(function (e) { return e.type === 'triggerAutoFit'; }))
              .subscribe(this.autoFit.bind(this)));
          this.subscriptions.add(this.localization.changes.subscribe(function (_a) {
              var rtl = _a.rtl;
              return _this.rtl = rtl;
          }));
      };
      ColumnHandleDirective.prototype.ngOnDestroy = function () {
          if (this.subscriptions) {
              this.subscriptions.unsubscribe();
          }
      };
      ColumnHandleDirective.prototype.shouldUpdate = function () {
          return !allLeafColumns(this.columns)
              .map(function (column) { return column.width; })
              .some(isBlank);
      };
      ColumnHandleDirective.prototype.initColumnWidth = function () {
          this.column.width = headerWidth(this.element);
      };
      ColumnHandleDirective.prototype.initState = function () {
          this.originalWidth = headerWidth(this.element);
          this.service.resizedColumn({
              column: this.column,
              oldWidth: this.originalWidth
          });
      };
      ColumnHandleDirective.prototype.resize = function (_a) {
          var deltaPercent = _a.deltaPercent;
          var delta = fromPercentage(this.originalWidth, deltaPercent);
          if (isTruthy(this.rtl)) {
              delta *= -1;
          }
          var newWidth = Math.max(this.originalWidth + delta, this.column.minResizableWidth);
          var tableDelta = newWidth > this.column.minResizableWidth ?
              delta : this.column.minResizableWidth - this.originalWidth;
          this.updateWidth(this.column, newWidth);
          this.service.resizeTable(tableDelta);
      };
      ColumnHandleDirective.prototype.sizeToFit = function (_a) {
          var columns = _a.columns, widths = _a.widths;
          var index = columns.indexOf(this.column);
          var width = Math.max.apply(Math, widths.map(function (w) { return w[index]; })) + 1; //add 1px for IE
          var tableDelta = width - this.originalWidth;
          this.updateWidth(this.column, width);
          this.service.resizeTable(tableDelta);
      };
      ColumnHandleDirective.prototype.updateWidth = function (column, width) {
          column.width = width;
          this.cdr.markForCheck(); //force CD cycle
      };
      ColumnHandleDirective.prototype.columnsForLevel = function (level) {
          return columnsToRender(this.columns ? this.columns.filter(function (column) { return column.level === level; }) : []);
      };
      ColumnHandleDirective.decorators = [
          { type: Directive, args: [{
                      selector: '[kendoGridColumnHandle]'
                  },] },
      ];
      /** @nocollapse */
      ColumnHandleDirective.ctorParameters = function () { return [
          { type: DraggableDirective, decorators: [{ type: Host },] },
          { type: ElementRef, },
          { type: ColumnResizingService, },
          { type: NgZone, },
          { type: ChangeDetectorRef, },
          { type: LocalizationService, },
      ]; };
      ColumnHandleDirective.propDecorators = {
          'columns': [{ type: Input },],
          'column': [{ type: Input },],
          'visible': [{ type: HostBinding, args: ['style.display',] },],
          'leftStyle': [{ type: HostBinding, args: ['style.left',] },],
          'rightStyle': [{ type: HostBinding, args: ['style.right',] },],
          'autoFit': [{ type: HostListener, args: ['dblclick',] },],
      };
      return ColumnHandleDirective;
  }());
  export { ColumnHandleDirective };
  