@colijnit/corecomponents_v12 12.1.1 → 12.1.3

package/bundles/colijnit-corecomponents_v12.umd.js

@@ -4926,7 +4926,7 @@
     CoDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-dialog',
-                    template: "\n        <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\"></div>\n        <div class=\"co-dialog-wrapper\" [ngClass]=\"customCssClass ? customCssClass : undefined\" @showHideDialog>\n            <div class=\"dialog-header\" *ngIf=\"!borderless\">\n                <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n                </div>\n                <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n                    <co-icon [icon]=\"icons.Cancel\"></co-icon>\n                </div>\n            </div>\n            <div class=\"dialog-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n                <ng-content></ng-content>\n            </div>\n            <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n                <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    ",
+                    template: "\n        <div class=\"co-dialog-overlay\" (click)=\"handleOverlayClick($event)\"></div>\n        <div class=\"co-dialog-wrapper\" [ngClass]=\"customCssClass ? customCssClass : undefined\" @showHideDialog>\n            <div class=\"dialog-header\" *ngIf=\"!borderless\">\n                <div class=\"dialog-header-caption\" *ngIf=\"headerTemplate\">\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\n                </div>\n                <div class=\"dialog-close-button\" *ngIf=\"showCloseIcon\" (click)=\"handleCloseDialog($event)\">\n                    <co-icon [icon]=\"icons.CrossSkinny\"></co-icon>\n                </div>\n            </div>\n            <div class=\"dialog-content\" [ngClass]=\"customCssClass ? customCssClass : undefined\">\n                <ng-content></ng-content>\n            </div>\n            <div class=\"dialog-footer\" *ngIf=\"footerTemplate\">\n                <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n            </div>\n        </div>\n    ",
                     animations: [
                         animations.trigger('showHideCoDialog', [
                             animations.transition('void => *', [
@@ -7094,6 +7094,9 @@
                 this.toggleCalendar();
             }
         };
+        InputDateRangePickerComponent.prototype.clearDate = function (index) {
+            this.model[index] = undefined;
+        };
         InputDateRangePickerComponent.prototype.toggleCalendar = function () {
             var _this = this;
             if (this.readonly) {
@@ -7152,7 +7155,7 @@
     InputDateRangePickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-date-range',
-                    template: "\n      <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n        <co-input-text class=\"no-focus-line custom-height\"\n                       [(model)]=\"firstDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [leftIcon]=\"leftIcon\"\n                       [leftIconData]=\"leftIconData\"\n                       [placeholder]=\"placeholder\"\n                       (blur)=\"handleFirstDateChanged(firstDateAsString)\"\n        ></co-input-text>\n        <co-input-text class=\"no-focus-line custom-height\"\n                       [(model)]= \"secondDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [rightIcon]=\"rightIcon\"\n                       (rightIconClick)=\"toggleCalendar()\"\n                       (blur)=\"handleSecondDateChanged(secondDateAsString)\"\n        ></co-input-text>\n      </div>\n    ",
+                    template: "\n      <div class=\"inputs-wrapper\" overlayParent #parentForOverlay=\"overlayParent\">\n        <co-input-text class=\"no-focus-line custom-height\"\n                       [(model)]=\"firstDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [leftIcon]=\"leftIcon\"\n                       [leftIconData]=\"leftIconData\"\n                       [placeholder]=\"placeholder\"\n                       (blur)=\"handleFirstDateChanged(firstDateAsString)\"\n                       (clearIconClick)=\"clearDate(0)\"\n        ></co-input-text>\n        <co-input-text class=\"no-focus-line custom-height\"\n                       [(model)]= \"secondDateAsString\"\n                       [noClickFocus]=\"true\"\n                       [pattern]=\"'yyyy-MM-dd'\"\n                       [type]=\"'date'\"\n                       [rightIcon]=\"rightIcon\"\n                       (rightIconClick)=\"toggleCalendar()\"\n                       (blur)=\"handleSecondDateChanged(secondDateAsString)\"\n                       (clearIconClick)=\"clearDate(1)\"\n        ></co-input-text>\n      </div>\n    ",
                     providers: [
                         OverlayService,
                         {
@@ -7678,6 +7681,9 @@
                 return false;
             }
         };
+        InputNumberPickerComponent.prototype.handleBlur = function () {
+            this.modelChange.next(this.model);
+        };
         InputNumberPickerComponent.prototype.handleChangeModel = function (value) {
             this._changeFromButton = false;
             this.numberLogic.setValue(value);
@@ -7794,7 +7800,7 @@
     InputNumberPickerComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-input-number-picker',
-                    template: "\n        <div class=\"icon-wrapper\" *ngIf=\"leftIconData\">\n            <co-icon class=\"input-number-picker-icon\" [iconData]=\"leftIconData\" (click)=\"iconClick.emit($event)\"></co-icon>\n            <div class=\"spacer\"></div>\n        </div>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"minus-operator\" [class.select]=\"minSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                       (mousedown)=\"onMinusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n        <input type=\"text\"\n               [tabIndex]=\"readonly ? -1 : 0\"\n               [ngModel]=\"model\"\n               [readonly]=\"readonly\"\n               [disabled]=\"disabled\"\n               [required]=\"required\"\n               (ngModelChange)=\"handleChangeModel($event)\"\n               (keydown)=\"handleInputKeyDown($event)\"/>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"plus-operator\" [class.select]=\"plusSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                       (mousedown)=\"onPlusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n    ",
+                    template: "\n        <div class=\"icon-wrapper\" *ngIf=\"leftIconData\">\n            <co-icon class=\"input-number-picker-icon\" [iconData]=\"leftIconData\" (click)=\"iconClick.emit($event)\"></co-icon>\n            <div class=\"spacer\"></div>\n        </div>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"minus-operator\" [class.select]=\"minSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(minusIcon)\"\n                       (mousedown)=\"onMinusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n        <input type=\"text\"\n               [tabIndex]=\"readonly ? -1 : 0\"\n               [ngModel]=\"model\"\n               [readonly]=\"readonly\"\n               [disabled]=\"disabled\"\n               [required]=\"required\"\n               (ngModelChange)=\"handleChangeModel($event)\"\n               (keydown)=\"handleInputKeyDown($event)\"\n               (blur)=\"handleBlur()\"/>\n        <div class=\"button-wrapper\">\n            <co-button *ngIf=\"showButtons\" class=\"plus-operator\" [class.select]=\"plusSelected\" tabindex=\"-1\"\n                       [disabled]=\"readonly\"\n                       [iconData]=\"iconCacheService.getIcon(plusIcon)\"\n                       (mousedown)=\"onPlusMouseDown($event)\"\n                       (mouseup)=\"stopAutoCounting()\" (mouseleave)=\"stopAutoCounting()\"></co-button>\n        </div>\n    ",
                     providers: [
                         OverlayService, {
                             provide: SCREEN_CONFIG_ADAPTER_COMPONENT_INTERFACE_NAME, useExisting: i0.forwardRef(function () { return InputNumberPickerComponent; })
@@ -10805,7 +10811,6 @@
             this._collection = [];
             this._searchTerm = '';
             this._lovItems = [];
-            this._activeIndex = -1;
         }
         Object.defineProperty(ListOfValuesPopupComponent.prototype, "lovItems", {
             set: function (children) {
@@ -10847,6 +10852,8 @@
             },
             set: function (value) {
                 this._searchTerm = value;
+                this.model = undefined;
+                this.highLightModel = undefined;
                 this.filterViewModels();
             },
             enumerable: false,
@@ -10856,7 +10863,6 @@
             var _this = this;
             if (this.model) {
                 if (!this.multiselect) {
-                    this._activeIndex = this.viewModelsMain.findIndex(function (v) { return v.model === _this.model; });
                     this._scrollIntoView();
                 }
                 else {
@@ -10873,53 +10879,92 @@
                 }
             }
         };
+        ListOfValuesPopupComponent.prototype.handleInputKeyDown = function (event) {
+            if (event) {
+                switch (event.code) {
+                    case KeyboardKey.Down:
+                        this.selectNextOption();
+                        return false;
+                    case KeyboardKey.Up:
+                        this.selectNextOption(true);
+                        return false;
+                    case KeyboardKey.SpaceBar:
+                        if (this.highLightModel) {
+                            this.selectViewModel(this.highLightModel, false);
+                            return false;
+                        }
+                }
+            }
+        };
         ListOfValuesPopupComponent.prototype.filterViewModels = function () {
             if (!this.collection) {
                 return;
             }
             this._prepareViewModels();
         };
-        ListOfValuesPopupComponent.prototype.selectViewModel = function (viewModel) {
-            var idx = this.viewModelsMain.findIndex(function (vm) { return vm === viewModel; });
+        ListOfValuesPopupComponent.prototype.selectViewModel = function (viewModel, closePopup) {
+            if (closePopup === void 0) { closePopup = true; }
             if (!this.multiselect) {
-                this._activeIndex = idx;
-                this.selectOptionByActiveIndex();
+                this.selectModelByViewModel(viewModel, closePopup);
             }
             else {
-                this.viewModelsMain[idx].checked = !this.viewModelsMain[idx].checked;
+                var idx = this.viewModels.findIndex(function (vm) { return vm === viewModel; });
+                this.viewModels[idx].checked = !this.viewModels[idx].checked;
                 this.selectOptions();
             }
         };
-        // for single select
-        ListOfValuesPopupComponent.prototype.selectOptionByActiveIndex = function (closePopup) {
+        ListOfValuesPopupComponent.prototype.selectModelByViewModel = function (viewModel, closePopup) {
             if (closePopup === void 0) { closePopup = true; }
-            if (this._activeIndex > -1) {
-                this.model = this.viewModelsMain[this._activeIndex].model;
-                this.modelChange.emit(this.model);
-                this._scrollIntoView();
-                if (closePopup) {
-                    this.closePopup.emit();
+            this.model = this.viewModelsMain.find(function (vm) { return vm === viewModel; }).model;
+            this.modelChange.emit(this.model);
+            this._scrollIntoView();
+            if (closePopup) {
+                this.closePopup.emit();
+            }
+        };
+        // for single select
+        ListOfValuesPopupComponent.prototype.selectOptionAndClosePopup = function () {
+            var _this = this;
+            if (!this.model && this.searchTerm) {
+                var wishModel = this.viewModelsMain.find(function (vmm) { return vmm.model[_this.displayField] === _this.searchTerm; });
+                if (wishModel) {
+                    this.selectViewModel(wishModel);
+                }
+                else {
+                    this.model = undefined;
+                    this.modelChange.emit(this.model);
+                    this.searchTerm = '';
                 }
             }
+            else {
+                this.closePopup.emit();
+            }
         };
         // for multi select
         ListOfValuesPopupComponent.prototype.selectOptions = function () {
             this.model = this.viewModelsMain.filter(function (v) { return v.checked; }).map(function (m) { return m.model; });
             this.modelChange.emit(this.model);
         };
-        ListOfValuesPopupComponent.prototype.selectNextOption = function () {
-            if (!this._lovItems || this._activeIndex >= this._lovItems.length - 1) {
-                return;
+        ListOfValuesPopupComponent.prototype.selectNextOption = function (back) {
+            var _this = this;
+            if (back === void 0) { back = false; }
+            var nextModel;
+            if (!this.highLightModel) {
+                nextModel = this.viewModels[back ? this.viewModels.length - 1 : 0];
             }
-            this._activeIndex++;
-            this.selectOptionByActiveIndex(false);
-        };
-        ListOfValuesPopupComponent.prototype.selectPreviousOption = function () {
-            if (this._activeIndex <= 0) {
-                return;
+            else {
+                var currentViewModelIdx = this.viewModels.findIndex(function (vm) { return vm === _this.highLightModel; });
+                if (back) {
+                    nextModel = this.viewModels[currentViewModelIdx <= 0 ? this.viewModels.length - 1 : currentViewModelIdx - 1];
+                }
+                else {
+                    nextModel = this.viewModels[currentViewModelIdx >= this.viewModels.length - 1 ? 0 : currentViewModelIdx + 1];
+                }
+            }
+            this.highLightModel = nextModel;
+            if (!this.multiselect) {
+                this.selectViewModel(nextModel, false);
             }
-            this._activeIndex--;
-            this.selectOptionByActiveIndex(false);
         };
         ListOfValuesPopupComponent.prototype._prepareViewModelsMain = function () {
             var _this = this;
@@ -10934,10 +10979,12 @@
             this.viewModels = this.viewModelsMain.filter(function (vm) { return vm.model[_this.displayField] && vm.model[_this.displayField].toLowerCase().includes(_this.searchTerm ? _this.searchTerm.toLowerCase() : ""); });
         };
         ListOfValuesPopupComponent.prototype._scrollIntoView = function () {
-            if (!this._lovItems || this._lovItems.length <= 0 || this._activeIndex < 0 || !this._lovItems[this._activeIndex] || !this.dropDownList) {
+            var _this = this;
+            var activeIndex = this.viewModels.findIndex(function (vmm) { return vmm === _this.highLightModel; });
+            if (!this._lovItems || this._lovItems.length <= 0 || activeIndex < 0 || !this.dropDownList) {
                 return;
             }
-            var activeItem = this._lovItems[this._activeIndex].nativeElement ? this._lovItems[this._activeIndex].nativeElement : undefined;
+            var activeItem = this._lovItems[activeIndex].nativeElement ? this._lovItems[activeIndex].nativeElement : undefined;
             var scrollParent = this.dropDownList.nativeElement ? this.dropDownList.nativeElement : undefined;
             this._scrollActiveItemIntoView(activeItem, scrollParent);
         };
@@ -10961,7 +11008,7 @@
     ListOfValuesPopupComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values-popup',
-                    template: "\n        <div class=\"lov-options\" #dropDownList [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" id=\"lov-popup\"\n             [tabIndex]=\"-1\" role=\"listbox\"\n             (clickOutside)=\"closePopup.emit($event)\">\n            <co-input-search *ngIf=\"multiselect\" [(model)]=\"searchTerm\" (modelChange)=\"filterViewModels()\" [placeholder]=\"searchPlaceholder\"></co-input-search>\n            <ul class=\"dropdown-list\">\n                <li #lovItem *ngFor=\"let viewModel of viewModels; let index = index\" [class.selected]=\"viewModel.model === model\"\n                    (click)=\"selectViewModel(viewModel)\" role=\"option\">\n                    <ng-container *ngIf=\"!multiselect\">\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"multiselect\">\n                        <co-input-checkbox [model]=\"viewModel.checked\" (modelChange)=\"selectViewModel(viewModel)\"></co-input-checkbox>\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    ",
+                    template: "\n        <div class=\"lov-options\" [overlay]=\"parentForOverlay\" [inheritWidth]=\"true\" [ngClass]=\"customCssClass\" id=\"lov-popup\"\n             [tabIndex]=\"-1\" role=\"listbox\"\n             (clickOutside)=\"closePopup.emit($event)\">\n            <co-input-search *ngIf=\"multiselect\" \n                             [(model)]=\"searchTerm\"\n                             [placeholder]=\"searchPlaceholder\"\n                             (keydown)=\"handleInputKeyDown($event)\"\n                             (modelChange)=\"filterViewModels()\"></co-input-search>\n            <ul class=\"dropdown-list\" #dropDownList>\n                <li #lovItem *ngFor=\"let viewModel of viewModels; let index = index\" [class.selected]=\"viewModel === highLightModel\"\n                    (click)=\"selectViewModel(viewModel, false)\" role=\"option\">\n                    <ng-container *ngIf=\"!multiselect\">\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                    <ng-container *ngIf=\"multiselect\">\n                        <co-input-checkbox [model]=\"viewModel.checked\" (modelChange)=\"selectViewModel(viewModel, false)\"></co-input-checkbox>\n                        <span class=\"lov-options-text\" [textContent]=\"viewModel.model[displayField]\"></span>\n                    </ng-container>\n                </li>\n            </ul>\n        </div>\n    ",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -11028,6 +11075,7 @@
             if (this._lovPopupComponentRef) {
                 this._lovPopupComponentRef.instance.searchTerm = model;
             }
+            this.selectedModel = model;
         };
         ListOfValuesComponent.prototype.handleInputKeyDown = function (event) {
             if (event) {
@@ -11041,13 +11089,13 @@
                             this._lovPopupComponentRef.instance.selectNextOption();
                             return false;
                         case KeyboardKey.Up:
-                            this._lovPopupComponentRef.instance.selectPreviousOption();
+                            this._lovPopupComponentRef.instance.selectNextOption(true);
                             return false;
                         case KeyboardKey.Enter:
-                            this._lovPopupComponentRef.instance.selectOptionByActiveIndex();
+                            this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
                             return false;
                         case KeyboardKey.Tab:
-                            this._lovPopupComponentRef.instance.selectOptionByActiveIndex();
+                            this._lovPopupComponentRef.instance.selectOptionAndClosePopup();
                     }
                 }
             }
@@ -11097,11 +11145,13 @@
         };
         ListOfValuesComponent.prototype.optionChosen = function (option) {
             var _this = this;
-            if (this.multiselect) {
-                this.selectedModels = option.map(function (o) { return o[_this.displayField]; });
-            }
-            else {
-                this.selectedModel = option[this.displayField];
+            if (option) {
+                if (this.multiselect) {
+                    this.selectedModels = option.map(function (o) { return o[_this.displayField]; });
+                }
+                else {
+                    this.selectedModel = option[this.displayField];
+                }
             }
             this.model = option;
             this.modelChange.emit(this.model);
@@ -11112,6 +11162,19 @@
             this._lovPopupComponentRef = undefined;
             this.focused = false;
         };
+        ListOfValuesComponent.prototype.checkModel = function () {
+            var _this = this;
+            if (!this.multiselect && this.selectedModel && this.collection) {
+                var model = this.collection.find(function (c) { return c[_this.displayField] === _this.selectedModel; });
+                if (model) {
+                    this.model = model;
+                }
+                else {
+                    this.model = undefined;
+                }
+                this.modelChange.emit(this.model);
+            }
+        };
         ListOfValuesComponent.prototype._setSelectedModel = function () {
             var _this = this;
             if (this.multiselect) {
@@ -11139,7 +11202,7 @@
     ListOfValuesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'co-list-of-values',
-                    template: "\n        <co-input-text aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isSelectOpen\" aria-controls=\"lov-popup\" role=\"combobox\"\n                       class=\"no-focus-line\"\n                       overlayParent\n                       #parentForOverlay=\"overlayParent\" type=\"text\" [id]=\"label\"\n                       [model]=\"multiselect ? selectedModels : selectedModel\"\n                       [placeholder]=\"label\"\n                       [readonly]=\"readonly\"\n                       [disabled]=\"disabled\"\n                       [required]=\"required\"\n                       [noClickFocus]=\"false\"\n                       [leftIconData]=\"leftIconData\"\n                       [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n                       [showClearButton]=\"true\"\n                       [useContent]=\"multiselect\"\n                       (modelChange)=\"handleInputModelChange($event)\"\n                       (click)=\"openPopup()\"\n                       (rightIconClick)=\"toggleSelect()\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (clearIconClick)=\"clearModel($event)\"\n        >\n        </co-input-text>\n        <ng-container *ngIf=\"multiselect\">\n            <div class=\"multiselect-chips-wrapper\">\n                <div class=\"chips\" *ngFor=\"let chip of model\">\n                    <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                    <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                </div>\n            </div>\n        </ng-container>\n    ",
+                    template: "\n        <co-input-text aria-haspopup=\"listbox\" [attr.aria-expanded]=\"isSelectOpen\" aria-controls=\"lov-popup\" role=\"combobox\"\n                       class=\"no-focus-line\"\n                       overlayParent\n                       #parentForOverlay=\"overlayParent\" type=\"text\" [id]=\"label\"\n                       [model]=\"multiselect ? selectedModels : selectedModel\"\n                       [placeholder]=\"label\"\n                       [readonly]=\"readonly\"\n                       [disabled]=\"disabled\"\n                       [required]=\"required\"\n                       [noClickFocus]=\"false\"\n                       [leftIconData]=\"leftIconData\"\n                       [rightIcon]=\"isSelectOpen ? icons.ChevronUpRegular : icons.ChevronDownRegular\"\n                       [showClearButton]=\"true\"\n                       [useContent]=\"multiselect\"\n                       (modelChange)=\"handleInputModelChange($event)\"\n                       (click)=\"openPopup()\"\n                       (rightIconClick)=\"toggleSelect()\"\n                       (keydown)=\"handleInputKeyDown($event)\"\n                       (clearIconClick)=\"clearModel($event)\"\n                       (blur)=\"checkModel()\"\n        >\n        </co-input-text>\n        <ng-container *ngIf=\"multiselect\">\n            <div class=\"multiselect-chips-wrapper\">\n                <div class=\"chips\" *ngFor=\"let chip of model\">\n                    <span class=\"chips-description\" [textContent]=\"chip[displayField]\"></span>\n                    <co-icon class=\"remove-chip-icon\" [icon]=\"icons.CrossSkinny\" (click)=\"removeOptionFromModel(chip)\"></co-icon>\n                </div>\n            </div>\n        </ng-container>\n    ",
                     providers: [
                         OverlayService
                     ],