text: import { __extends } from 'tslib';
  import { Component, Input, Output, forwardRef, ViewChild, ViewChildren, HostListener, ElementRef, Optional, Inject, Directive, TemplateRef, ViewContainerRef, ContentChild, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding, Renderer2, EventEmitter, NgModule } from '@angular/core';
  import { DOCUMENT } from '@angular/platform-browser';
  import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule } from '@angular/forms';
  import { TemplatePortalDirective } from '@angular/cdk/portal';
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
  import { UP_ARROW, DOWN_ARROW, ESCAPE, LEFT_ARROW, RIGHT_ARROW, DELETE, BACKSPACE, TAB } from '@angular/cdk/keycodes';
  import { MatChip, MatChipsModule } from '@angular/material/chips';
  import { MatInput, MatInputModule } from '@angular/material/input';
  import { MatOption } from '@angular/material/core';
  import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
  import { timer, merge, fromEvent } from 'rxjs';
  import { filter, debounceTime } from 'rxjs/operators';
  import { mixinDisabled, mixinControlValueAccessor } from '@covalent/core/common';
  import { CommonModule } from '@angular/common';
  import { MatIconModule } from '@angular/material/icon';
  
  var TdChipDirective = /** @class */ (function (_super) {
      __extends(TdChipDirective, _super);
      function TdChipDirective(templateRef, viewContainerRef) {
          return _super.call(this, templateRef, viewContainerRef) || this;
      }
      return TdChipDirective;
  }(TemplatePortalDirective));
  TdChipDirective.decorators = [
      { type: Directive, args: [{
                  selector: '[td-chip]ng-template',
              },] },
  ];
  TdChipDirective.ctorParameters = function () { return [
      { type: TemplateRef, },
      { type: ViewContainerRef, },
  ]; };
  var TdAutocompleteOptionDirective = /** @class */ (function (_super) {
      __extends(TdAutocompleteOptionDirective, _super);
      function TdAutocompleteOptionDirective(templateRef, viewContainerRef) {
          return _super.call(this, templateRef, viewContainerRef) || this;
      }
      return TdAutocompleteOptionDirective;
  }(TemplatePortalDirective));
  TdAutocompleteOptionDirective.decorators = [
      { type: Directive, args: [{
                  selector: '[td-autocomplete-option]ng-template',
              },] },
  ];
  TdAutocompleteOptionDirective.ctorParameters = function () { return [
      { type: TemplateRef, },
      { type: ViewContainerRef, },
  ]; };
  var TdChipsBase = /** @class */ (function () {
      function TdChipsBase(_changeDetectorRef) {
          this._changeDetectorRef = _changeDetectorRef;
      }
      return TdChipsBase;
  }());
  var _TdChipsMixinBase = mixinControlValueAccessor(mixinDisabled(TdChipsBase), []);
  var TdChipsComponent = /** @class */ (function (_super) {
      __extends(TdChipsComponent, _super);
      function TdChipsComponent(_elementRef, _renderer, _document, _changeDetectorRef) {
          var _this = _super.call(this, _changeDetectorRef) || this;
          _this._elementRef = _elementRef;
          _this._renderer = _renderer;
          _this._document = _document;
          _this._isMousedown = false;
          _this._length = 0;
          _this._stacked = false;
          _this._requireMatch = false;
          _this._color = 'primary';
          _this._inputPosition = 'after';
          _this._chipAddition = true;
          _this._chipRemoval = true;
          _this._focused = false;
          _this._tabIndex = 0;
          _this._internalClick = false;
          _this._internalActivateOption = false;
          _this.inputControl = new FormControl();
          _this.debounce = 200;
          _this.onAdd = new EventEmitter();
          _this.onRemove = new EventEmitter();
          _this.onInputChange = new EventEmitter();
          _this.onChipFocus = new EventEmitter();
          _this.onChipBlur = new EventEmitter();
          _this._renderer.addClass(_this._elementRef.nativeElement, 'mat-' + _this._color);
          return _this;
      }
      Object.defineProperty(TdChipsComponent.prototype, "focused", {
          get: function () {
              return this._focused;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "items", {
          get: function () {
              return this._items;
          },
          set: function (items) {
              this._items = items;
              this._setFirstOptionActive();
              this._changeDetectorRef.markForCheck();
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "stacked", {
          get: function () {
              return this._stacked;
          },
          set: function (stacked) {
              this._stacked = coerceBooleanProperty(stacked);
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "inputPosition", {
          get: function () {
              return this._inputPosition;
          },
          set: function (inputPosition) {
              this._inputPosition = inputPosition;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "requireMatch", {
          get: function () {
              return this._requireMatch;
          },
          set: function (requireMatch) {
              this._requireMatch = coerceBooleanProperty(requireMatch);
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "chipAddition", {
          get: function () {
              return this._chipAddition;
          },
          set: function (chipAddition) {
              this._chipAddition = chipAddition;
              this._toggleInput();
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "canAddChip", {
          get: function () {
              return this.chipAddition && !this.disabled;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "chipRemoval", {
          get: function () {
              return this._chipRemoval;
          },
          set: function (chipRemoval) {
              this._chipRemoval = chipRemoval;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "canRemoveChip", {
          get: function () {
              return this.chipRemoval && !this.disabled;
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "color", {
          get: function () {
              return this._color;
          },
          set: function (color) {
              if (color) {
                  this._renderer.removeClass(this._elementRef.nativeElement, 'mat-' + this._color);
                  this._color = color;
                  this._renderer.addClass(this._elementRef.nativeElement, 'mat-' + this._color);
              }
          },
          enumerable: true,
          configurable: true
      });
      Object.defineProperty(TdChipsComponent.prototype, "tabIndex", {
          get: function () {
              return this.disabled ? -1 : this._tabIndex;
          },
          enumerable: true,
          configurable: true
      });
      TdChipsComponent.prototype.focusListener = function (event) {
          if (!this._isMousedown) {
              this.focus();
          }
          event.preventDefault();
      };
      TdChipsComponent.prototype.mousedownListener = function (event) {
          var _this = this;
          this._isMousedown = true;
          timer().toPromise().then(function () {
              _this._isMousedown = false;
          });
      };
      TdChipsComponent.prototype.clickListener = function (event) {
          var clickTarget = (event.target);
          if (clickTarget === this._elementRef.nativeElement ||
              clickTarget.className.indexOf('td-chips-wrapper') > -1) {
              this.focus();
              event.preventDefault();
              event.stopPropagation();
          }
      };
      TdChipsComponent.prototype.keydownListener = function (event) {
          var _this = this;
          switch (event.keyCode) {
              case TAB:
                  timer().toPromise().then(function () {
                      _this.removeFocusedState();
                  });
                  break;
              case ESCAPE:
                  if (this._inputChild.focused) {
                      this._nativeInput.nativeElement.blur();
                      this.removeFocusedState();
                      this._closeAutocomplete();
                  }
                  else {
                      this.focus();
                  }
                  break;
              default:
          }
      };
      TdChipsComponent.prototype.ngOnInit = function () {
          var _this = this;
          this.inputControl.valueChanges.pipe(debounceTime(this.debounce)).subscribe(function (value) {
              _this.onInputChange.emit(value ? value : '');
          });
          this._changeDetectorRef.markForCheck();
      };
      TdChipsComponent.prototype.ngAfterViewInit = function () {
          this._watchOutsideClick();
          this._changeDetectorRef.markForCheck();
      };
      TdChipsComponent.prototype.ngDoCheck = function () {
          if (this.value && this.value.length !== this._length) {
              this._length = this.value.length;
              this.onChange(this.value);
          }
      };
      TdChipsComponent.prototype.ngOnDestroy = function () {
          if (this._outsideClickSubs) {
              this._outsideClickSubs.unsubscribe();
              this._outsideClickSubs = undefined;
          }
      };
      TdChipsComponent.prototype._setInternalClick = function () {
          this._internalClick = true;
      };
      TdChipsComponent.prototype.onDisabledChange = function (v) {
          this._toggleInput();
      };
      TdChipsComponent.prototype._handleAddChip = function () {
          var value;
          if (this.requireMatch) {
              var selectedOptions = this._options.toArray().filter(function (option) {
                  return option.active;
              });
              if (selectedOptions.length > 0) {
                  value = selectedOptions[0].value;
                  selectedOptions[0].setInactiveStyles();
              }
              if (!value) {
                  return false;
              }
          }
          else {
              if (this._autocompleteTrigger.activeOption) {
                  value = this._autocompleteTrigger.activeOption.value;
                  this._autocompleteTrigger.activeOption.setInactiveStyles();
              }
              else {
                  value = this._inputChild.value;
                  if (value.trim() === '') {
                      return false;
                  }
              }
          }
          return this.addChip(value);
      };
      TdChipsComponent.prototype.addChip = function (value) {
          var _this = this;
          this._closeAutocomplete();
          timer(this.debounce).toPromise().then(function () {
              _this.setFocusedState();
              _this._setFirstOptionActive();
              _this._openAutocomplete();
          });
          this.inputControl.setValue('');
          if (this.value.indexOf(value) > -1) {
              return false;
          }
          this.value.push(value);
          this.onAdd.emit(value);
          this.onChange(this.value);
          this._changeDetectorRef.markForCheck();
          return true;
      };
      TdChipsComponent.prototype.removeChip = function (index) {
          var removedValues = this.value.splice(index, 1);
          if (removedValues.length === 0) {
              return false;
          }
          if (index === (this._totalChips - 1) && index === 0) {
              this._inputChild.focus();
          }
          else if (index < (this._totalChips - 1)) {
              this._focusChip(index + 1);
          }
          else if (index > 0) {
              this._focusChip(index - 1);
          }
          this.onRemove.emit(removedValues[0]);
          this.onChange(this.value);
          this.inputControl.setValue('');
          this._changeDetectorRef.markForCheck();
          return true;
      };
      TdChipsComponent.prototype._handleChipBlur = function (event, value) {
          this.onChipBlur.emit(value);
      };
      TdChipsComponent.prototype._handleChipFocus = function (event, value) {
          this.setFocusedState();
          this.onChipFocus.emit(value);
      };
      TdChipsComponent.prototype._handleFocus = function () {
          this.setFocusedState();
          this._setFirstOptionActive();
          return true;
      };
      TdChipsComponent.prototype.setFocusedState = function () {
          if (!this.disabled) {
              this._focused = true;
              this._tabIndex = -1;
              this._changeDetectorRef.markForCheck();
          }
      };
      TdChipsComponent.prototype.removeFocusedState = function () {
          this._focused = false;
          this._tabIndex = 0;
          this._changeDetectorRef.markForCheck();
      };
      TdChipsComponent.prototype.focus = function () {
          if (this.canAddChip) {
              this._inputChild.focus();
          }
          else if (!this.disabled) {
              this._focusFirstChip();
          }
      };
      TdChipsComponent.prototype._inputKeydown = function (event) {
          switch (event.keyCode) {
              case UP_ARROW:
                  if (this.requireMatch) {
                      var length = this._options.length;
                      if (length > 1 && this._options.toArray()[0].active && this._internalActivateOption) {
                          this._options.toArray()[0].setInactiveStyles();
                          this._internalActivateOption = false;
                          event.preventDefault();
                      }
                  }
                  break;
              case LEFT_ARROW:
              case DELETE:
              case BACKSPACE:
                  this._closeAutocomplete();
                  if (!this._inputChild.value) {
                      this._focusLastChip();
                      event.preventDefault();
                  }
                  break;
              case RIGHT_ARROW:
                  this._closeAutocomplete();
                  if (!this._inputChild.value) {
                      this._focusFirstChip();
                      event.preventDefault();
                  }
                  break;
              default:
          }
      };
      TdChipsComponent.prototype._chipKeydown = function (event, index) {
          switch (event.keyCode) {
              case DELETE:
              case BACKSPACE:
                  if (this.canRemoveChip) {
                      this.removeChip(index);
                  }
                  break;
              case UP_ARROW:
              case LEFT_ARROW:
                  if (index === 0) {
                      if (this.canAddChip && event.keyCode === LEFT_ARROW) {
                          this._inputChild.focus();
                      }
                      else {
                          this._focusLastChip();
                      }
                  }
                  else if (index > 0) {
                      this._focusChip(index - 1);
                  }
                  event.preventDefault();
                  break;
              case DOWN_ARROW:
              case RIGHT_ARROW:
                  if (index === (this._totalChips - 1)) {
                      if (this.canAddChip && event.keyCode === RIGHT_ARROW) {
                          this._inputChild.focus();
                      }
                      else {
                          this._focusFirstChip();
                      }
                  }
                  else if (index < (this._totalChips - 1)) {
                      this._focusChip(index + 1);
                  }
                  event.preventDefault();
                  break;
              default:
          }
      };
      TdChipsComponent.prototype._removeInputDisplay = function () {
          return '';
      };
      TdChipsComponent.prototype._openAutocomplete = function () {
          if (!this._autocompleteTrigger.panelOpen) {
              this._autocompleteTrigger.openPanel();
              this._changeDetectorRef.markForCheck();
          }
      };
      TdChipsComponent.prototype._closeAutocomplete = function () {
          if (this._autocompleteTrigger.panelOpen) {
              this._autocompleteTrigger.closePanel();
              this._changeDetectorRef.markForCheck();
          }
      };
      Object.defineProperty(TdChipsComponent.prototype, "_totalChips", {
          get: function () {
              var chips = this._chipsChildren.toArray();
              return chips.length;
          },
          enumerable: true,
          configurable: true
      });
      TdChipsComponent.prototype._focusChip = function (index) {
          if (index > -1 && this._totalChips > index) {
              this._chipsChildren.toArray()[index].focus();
          }
      };
      TdChipsComponent.prototype._focusFirstChip = function () {
          this._focusChip(0);
      };
      TdChipsComponent.prototype._focusLastChip = function () {
          this._focusChip(this._totalChips - 1);
      };
      TdChipsComponent.prototype._toggleInput = function () {
          if (this.canAddChip) {
              this.inputControl.enable();
          }
          else {
              this.inputControl.disable();
          }
          this._changeDetectorRef.markForCheck();
      };
      TdChipsComponent.prototype._setFirstOptionActive = function () {
          var _this = this;
          if (this.requireMatch) {
              timer().toPromise().then(function () {
                  if (_this.focused && _this._options && _this._options.length > 0) {
                      _this._options.toArray().forEach(function (option) {
                          option.setInactiveStyles();
                      });
                      _this._options.toArray()[0].setActiveStyles();
                      _this._internalActivateOption = true;
                      _this._changeDetectorRef.markForCheck();
                  }
              });
          }
      };
      TdChipsComponent.prototype._watchOutsideClick = function () {
          var _this = this;
          if (this._document) {
              merge(fromEvent(this._document, 'click'), fromEvent(this._document, 'touchend')).pipe(filter(function (event) {
                  var clickTarget = (event.target);
                  setTimeout(function () {
                      _this._internalClick = false;
                  });
                  return _this.focused &&
                      (clickTarget !== _this._elementRef.nativeElement) &&
                      !_this._elementRef.nativeElement.contains(clickTarget) && !_this._internalClick;
              })).subscribe(function () {
                  if (_this.focused) {
                      _this._autocompleteTrigger.closePanel();
                      _this.removeFocusedState();
                      _this.onTouched();
                      _this._changeDetectorRef.markForCheck();
                  }
              });
          }
          return undefined;
      };
      return TdChipsComponent;
  }(_TdChipsMixinBase));
  TdChipsComponent.decorators = [
      { type: Component, args: [{
                  providers: [{
                          provide: NG_VALUE_ACCESSOR,
                          useExisting: forwardRef(function () { return TdChipsComponent; }),
                          multi: true,
                      }],
                  selector: 'td-chips',
                  inputs: ['disabled', 'value'],
                  styles: [":host{display:block;padding:0 5px;min-height:48px}:host .td-chips-wrapper{min-height:42px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}:host .td-chips-wrapper.td-chips-stacked .mat-basic-chip,:host .td-chips-wrapper.td-chips-stacked .td-chips-form-field{width:100%}:host .td-chips-wrapper.td-chips-input-before-position .td-chips-form-field{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}:host .td-chip,:host .td-chip>.td-chip-content{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;max-width:100%;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}:host .td-chip.td-chip-stacked,:host .td-chip>.td-chip-content.td-chip-stacked{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:2px}:host ::ng-deep .mat-basic-chip{display:inline-block;cursor:default;border-radius:16px;margin:8px 8px 0 0;-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;position:relative}html[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip{margin:8px 0 0 8px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip{min-height:32px;line-height:32px;font-size:13px;padding:0 0 0 12px}html[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip{padding:0 12px 0 0;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip .td-chip bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{display:inline-block;-webkit-box-ordinal-group:-19;-ms-flex-order:-20;order:-20;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;height:32px;width:32px;margin:0 8px 0 -12px;border-radius:50%}html[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar]{margin:0 -12px 0 8px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar] bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip .td-chip [td-chip-avatar] bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 12px 0 0}html[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}body[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}[dir=rtl] :host ::ng-deep .mat-basic-chip.td-chip-after-pad{padding:0 0 0 12px;unicode-bidi:embed}:host ::ng-deep .mat-basic-chip.td-chip-after-pad bdo[dir=rtl]{direction:rtl;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip.td-chip-after-pad bdo[dir=ltr]{direction:ltr;unicode-bidi:bidi-override}:host ::ng-deep .mat-basic-chip mat-icon.td-chip-removal{margin:0 4px;font-size:21px;line-height:22px}:host ::ng-deep .mat-basic-chip mat-icon.td-chip-removal:hover{cursor:pointer}:host ::ng-deep .td-chips-stacked .mat-basic-chip{margin:4px 0}:host ::ng-deep .td-chips-stacked .mat-basic-chip:first-of-type{margin:8px 0 4px}:host ::ng-deep .td-chips-stacked .mat-basic-chip:last-of-type{margin:4px 0 8px}:host .mat-form-field-underline{position:relative;height:1px;width:100%;bottom:0}:host .mat-form-field-underline.mat-disabled{background-position:0;bottom:-4px;background-color:transparent}:host .mat-form-field-underline .mat-form-field-ripple{position:absolute;height:2px;top:0;width:100%;-webkit-transform-origin:50%;transform-origin:50%;-webkit-transform:scaleX(.5);transform:scaleX(.5);visibility:hidden;opacity:0;-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2);transition:background-color .3s cubic-bezier(.55,0,.55,.2)}:host .mat-form-field-underline .mat-form-field-ripple.mat-focused{visibility:visible;opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transition:background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear;transition:background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear;transition:transform 150ms linear,background-color .3s cubic-bezier(.55,0,.55,.2);transition:transform 150ms linear,background-color .3s cubic-bezier(.55,0,.55,.2),-webkit-transform 150ms linear}:host ::ng-deep mat-form-field .mat-form-field-underline{display:none}"],
                  template: "<div class=\"td-chips-wrapper\"\n     [class.td-chips-stacked]=\"stacked\"\n     [class.td-chips-input-before-position]=\"inputPosition === 'before'\">\n  <ng-template let-chip let-first=\"first\" let-index=\"index\" ngFor [ngForOf]=\"value\">\n    <mat-basic-chip [class.td-chip-disabled]=\"disabled\"\n                   [class.td-chip-after-pad]=\"!canRemoveChip\"\n                   [disableRipple]=\"true\"\n                   [color]=\"color\"\n                   (keydown)=\"_chipKeydown($event, index)\"\n                   (blur)=\"_handleChipBlur($event, chip)\"\n                   (focus)=\"_handleChipFocus($event, chip)\">\n      <div class=\"td-chip\" [class.td-chip-stacked]=\"stacked\">\n        <span class=\"td-chip-content\">\n          <span *ngIf=\"!_chipTemplate?.templateRef\">{{chip}}</span>\n          <ng-template\n            *ngIf=\"_chipTemplate?.templateRef\"\n            [ngTemplateOutlet]=\"_chipTemplate?.templateRef\"\n            [ngTemplateOutletContext]=\"{ chip: chip }\">\n          </ng-template>\n        </span>\n        <mat-icon *ngIf=\"canRemoveChip\" class=\"td-chip-removal\" (click)=\"_internalClick = removeChip(index)\">\n          cancel\n        </mat-icon>\n      </div>\n    </mat-basic-chip>\n  </ng-template>\n  <mat-form-field floatLabel=\"never\"\n                  class=\"td-chips-form-field\"\n                  [style.width.px]=\"canAddChip ? null : 0\"\n                  [style.height.px]=\"canAddChip ? null : 0\"\n                  [color]=\"color\">\n    <input matInput\n            #input\n            [tabIndex]=\"-1\"\n            [matAutocomplete]=\"autocomplete\"\n            [formControl]=\"inputControl\"\n            [placeholder]=\"canAddChip? placeholder : ''\"\n            (keydown)=\"_inputKeydown($event)\"\n            (keyup.enter)=\"_handleAddChip()\"\n            (focus)=\"_handleFocus()\">\n  </mat-form-field>\n  <mat-autocomplete #autocomplete=\"matAutocomplete\"\n                   [displayWith]=\"_removeInputDisplay\"\n                   (optionSelected)=\"addChip($event.option.value)\">\n    <ng-template let-item let-first=\"first\" ngFor [ngForOf]=\"items\">\n      <mat-option (click)=\"_setInternalClick()\" [value]=\"item\">\n        <span *ngIf=\"!_autocompleteOptionTemplate?.templateRef\">{{item}}</span>\n        <ng-template\n          *ngIf=\"_autocompleteOptionTemplate?.templateRef\"\n          [ngTemplateOutlet]=\"_autocompleteOptionTemplate?.templateRef\"\n          [ngTemplateOutletContext]=\"{ option: item }\">\n        </ng-template>\n      </mat-option>\n    </ng-template>\n  </mat-autocomplete>\n</div>\n<div *ngIf=\"chipAddition\" class=\"mat-form-field-underline\"\n      [class.mat-disabled]=\"disabled\">\n  <span class=\"mat-form-field-ripple\"\n        [class.mat-focused]=\"focused\"></span>\n</div>\n<ng-content></ng-content>",
                  changeDetection: ChangeDetectionStrategy.OnPush,
              },] },
  ];
  TdChipsComponent.ctorParameters = function () { return [
      { type: ElementRef, },
      { type: Renderer2, },
      { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [DOCUMENT,] },] },
      { type: ChangeDetectorRef, },
  ]; };
  TdChipsComponent.propDecorators = {
      "_nativeInput": [{ type: ViewChild, args: ['input',] },],
      "_inputChild": [{ type: ViewChild, args: [MatInput,] },],
      "_autocompleteTrigger": [{ type: ViewChild, args: [MatAutocompleteTrigger,] },],
      "_chipsChildren": [{ type: ViewChildren, args: [MatChip,] },],
      "_chipTemplate": [{ type: ContentChild, args: [TdChipDirective,] },],
      "_autocompleteOptionTemplate": [{ type: ContentChild, args: [TdAutocompleteOptionDirective,] },],
      "_options": [{ type: ViewChildren, args: [MatOption,] },],
      "items": [{ type: Input, args: ['items',] },],
      "stacked": [{ type: Input, args: ['stacked',] },],
      "inputPosition": [{ type: Input, args: ['inputPosition',] },],
      "requireMatch": [{ type: Input, args: ['requireMatch',] },],
      "chipAddition": [{ type: Input, args: ['chipAddition',] },],
      "chipRemoval": [{ type: Input, args: ['chipRemoval',] },],
      "placeholder": [{ type: Input, args: ['placeholder',] },],
      "debounce": [{ type: Input, args: ['debounce',] },],
      "color": [{ type: Input, args: ['color',] },],
      "onAdd": [{ type: Output, args: ['add',] },],
      "onRemove": [{ type: Output, args: ['remove',] },],
      "onInputChange": [{ type: Output, args: ['inputChange',] },],
      "onChipFocus": [{ type: Output, args: ['chipFocus',] },],
      "onChipBlur": [{ type: Output, args: ['chipBlur',] },],
      "tabIndex": [{ type: HostBinding, args: ['attr.tabindex',] },],
      "focusListener": [{ type: HostListener, args: ['focus', ['$event'],] },],
      "mousedownListener": [{ type: HostListener, args: ['mousedown', ['$event'],] },],
      "clickListener": [{ type: HostListener, args: ['click', ['$event'],] },],
      "keydownListener": [{ type: HostListener, args: ['keydown', ['$event'],] },],
  };
  var CovalentChipsModule = /** @class */ (function () {
      function CovalentChipsModule() {
      }
      return CovalentChipsModule;
  }());
  CovalentChipsModule.decorators = [
      { type: NgModule, args: [{
                  imports: [
                      ReactiveFormsModule,
                      CommonModule,
                      MatInputModule,
                      MatIconModule,
                      MatChipsModule,
                      MatAutocompleteModule,
                  ],
                  declarations: [
                      TdChipsComponent,
                      TdChipDirective,
                      TdAutocompleteOptionDirective,
                  ],
                  exports: [
                      TdChipsComponent,
                      TdChipDirective,
                      TdAutocompleteOptionDirective,
                  ],
              },] },
  ];
  CovalentChipsModule.ctorParameters = function () { return []; };
  
  export { CovalentChipsModule, TdChipDirective, TdAutocompleteOptionDirective, TdChipsBase, _TdChipsMixinBase, TdChipsComponent };
  //# sourceMappingURL=covalent-core-chips.js.map
  