@firestitch/chip 13.1.6 → 15.0.0

package/fesm2015/firestitch-chip.mjs

@@ -1,381 +1,379 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, HostBinding, Input, Output, HostListener, forwardRef, ContentChildren, NgModule } from '@angular/core';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import { FsLabelModule } from '@firestitch/label';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-class FsChipComponent {
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-        this.fsChip = true;
-        this._outlined = false;
-        this.selectable = false;
-        this.removable = true;
-        this.styleBackgroundColor = '';
-        this.styleColor = '';
-        this.styleBorderColor = '';
-        this.classSmall = false;
-        this.classTiny = false;
-        this.classMicro = false;
-        this.selected = false;
-        this.selectedToggled = new EventEmitter();
-        this.removed = new EventEmitter();
-        this._destroy$ = new Subject();
-        this._backgroundColor = '';
-        this._color = '';
-    }
-    set setSize(value) {
-        this.classSmall = value === 'small';
-        this.classTiny = value === 'tiny';
-        this.classMicro = value === 'micro';
-    }
-    click() {
-        if (this.selectable) {
-            this.selected = !this.selected;
-            this.selectedToggled.emit({ value: this.value, selected: this.selected });
-        }
-    }
-    set backgroundColor(value) {
-        this._backgroundColor = value;
-        this._updateStyles();
-    }
-    set borderColor(value) {
-        this.styleBorderColor = value;
-        this._updateStyles();
-    }
-    set color(value) {
-        this._color = value;
-        this._updateStyles();
-    }
-    get destroy$() {
-        return this._destroy$.asObservable();
-    }
-    set outlined(value) {
-        this._outlined = value;
-        this._updateStyles();
-    }
-    select() {
-        this.selected = true;
-        this._cdRef.markForCheck();
-    }
-    unselect() {
-        this.selected = false;
-        this._cdRef.markForCheck();
-    }
-    ngOnInit() {
-        if (this.removed.observers.length === 0) {
-            this.removable = false;
-        }
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    remove(event) {
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        this.removed.next(event);
-    }
-    _isContrastYIQBlack(hexcolor) {
-        if (!hexcolor) {
-            return true;
-        }
-        hexcolor = hexcolor.replace('#', '');
-        const r = parseInt(hexcolor.substr(0, 2), 16);
-        const g = parseInt(hexcolor.substr(2, 2), 16);
-        const b = parseInt(hexcolor.substr(4, 2), 16);
-        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-        return yiq >= 200;
-    }
-    _updateStyles() {
-        this.styleBackgroundColor = this._backgroundColor;
-        if (this._color) {
-            this.styleColor = this._color;
-        }
-        else if (!this._outlined) {
-            this.styleColor = this._isContrastYIQBlack(this.styleBackgroundColor) ? '#474747' : '#fff';
-        }
-        if (this._outlined) {
-            this.styleBackgroundColor = '';
-            if (this._color) {
-                this.styleBorderColor = this._color;
-            }
-        }
-        this._cdRef.markForCheck();
-    }
-}
-FsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", icon: "icon", image: "image", selected: "selected", setSize: ["size", "setSize"], backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this.selectable", "class.removable": "this.removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.size-small": "this.classSmall", "class.size-tiny": "this.classTiny", "class.size-micro": "this.classMicro", "class.iconed": "this.icon", "class.imaged": "this.image", "class.selected": "this.selected" } }, ngImport: i0, template: "<img *ngIf=\"image\" [src]=\"image\" class=\"image\" alt=\"\">\n<ng-container *ngIf=\"icon\">\n  <mat-icon class=\"icon\">{{icon}}</mat-icon>\n</ng-container>\n<div class=\"fs-chip-content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"selected\">\n  <div class=\"selected-check\">\n    <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n  </div>\n</ng-container>\n<div *ngIf=\"removed.observers.length && removable\" class=\"remove\" (click)=\"remove($event)\">\n  <mat-icon [style.color]=\"styleColor\">remove_circle_outline</mat-icon>\n</div>", styles: [":host{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;height:30px;background-color:#e0e0e0;overflow:hidden}:host.imaged{overflow:visible;padding-left:0;vertical-align:middle}:host.imaged.outlined .image{margin-left:-2px}:host.iconed:not(.imaged){padding-left:5px}:host.removable,:host.selected{padding-right:3px}:host.selectable{cursor:pointer}:host.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}:host .icon{margin-right:5px}:host mat-icon{font-size:25px}:host .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}:host .fs-chip-content{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .selected-check{margin:0 5px;display:flex}:host .remove{display:flex;margin-left:5px;cursor:pointer}:host.size-micro{padding:0 5px;height:16px;line-height:normal}:host.size-micro .fs-chip-content{font-size:65%}:host.size-micro .image{height:100%;width:16px;margin-right:2px}:host.size-micro .remove{margin-left:1px}:host.size-micro .selected-check{margin:0 1px 0 0}:host.size-micro.imaged{padding-left:0}:host.size-micro.removable,:host.size-micro.selected{padding-right:0}:host.size-micro mat-icon{width:12px;height:12px;font-size:11px}:host.size-tiny{padding:0 6px;height:18px;line-height:normal}:host.size-tiny .fs-chip-content{font-size:75%}:host.size-tiny .image{height:18px;width:18px;margin-right:3px}:host.size-tiny.iconed:not(.imaged){padding-left:3px}:host.size-tiny .remove{margin-left:2px;margin-right:2px}:host.size-tiny .selected-check{margin:0 1px 0 0}:host.size-tiny.imaged{padding-left:0}:host.size-tiny.removable,:host.size-tiny.selected{padding-right:0}:host.size-tiny mat-icon{height:13px;width:13px;font-size:13px}:host.size-small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.size-small .image{height:25px;width:25px;margin-right:5px}:host.size-small.iconed:not(.imaged){padding-left:4px}:host.size-small.imaged{padding-left:0}:host.size-small .remove{margin-right:2px}:host.size-small .selected-check{margin:0 2px 0 0}:host.size-small .selected-check mat-icon{transform:scale(.7)}:host.size-small.removable,:host.size-small.selected{padding-right:0}:host.size-small mat-icon{height:22px;width:22px;font-size:22px}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img *ngIf=\"image\" [src]=\"image\" class=\"image\" alt=\"\">\n<ng-container *ngIf=\"icon\">\n  <mat-icon class=\"icon\">{{icon}}</mat-icon>\n</ng-container>\n<div class=\"fs-chip-content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"selected\">\n  <div class=\"selected-check\">\n    <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n  </div>\n</ng-container>\n<div *ngIf=\"removed.observers.length && removable\" class=\"remove\" (click)=\"remove($event)\">\n  <mat-icon [style.color]=\"styleColor\">remove_circle_outline</mat-icon>\n</div>", styles: [":host{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;height:30px;background-color:#e0e0e0;overflow:hidden}:host.imaged{overflow:visible;padding-left:0;vertical-align:middle}:host.imaged.outlined .image{margin-left:-2px}:host.iconed:not(.imaged){padding-left:5px}:host.removable,:host.selected{padding-right:3px}:host.selectable{cursor:pointer}:host.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}:host .icon{margin-right:5px}:host mat-icon{font-size:25px}:host .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}:host .fs-chip-content{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .selected-check{margin:0 5px;display:flex}:host .remove{display:flex;margin-left:5px;cursor:pointer}:host.size-micro{padding:0 5px;height:16px;line-height:normal}:host.size-micro .fs-chip-content{font-size:65%}:host.size-micro .image{height:100%;width:16px;margin-right:2px}:host.size-micro .remove{margin-left:1px}:host.size-micro .selected-check{margin:0 1px 0 0}:host.size-micro.imaged{padding-left:0}:host.size-micro.removable,:host.size-micro.selected{padding-right:0}:host.size-micro mat-icon{width:12px;height:12px;font-size:11px}:host.size-tiny{padding:0 6px;height:18px;line-height:normal}:host.size-tiny .fs-chip-content{font-size:75%}:host.size-tiny .image{height:18px;width:18px;margin-right:3px}:host.size-tiny.iconed:not(.imaged){padding-left:3px}:host.size-tiny .remove{margin-left:2px;margin-right:2px}:host.size-tiny .selected-check{margin:0 1px 0 0}:host.size-tiny.imaged{padding-left:0}:host.size-tiny.removable,:host.size-tiny.selected{padding-right:0}:host.size-tiny mat-icon{height:13px;width:13px;font-size:13px}:host.size-small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.size-small .image{height:25px;width:25px;margin-right:5px}:host.size-small.iconed:not(.imaged){padding-left:4px}:host.size-small.imaged{padding-left:0}:host.size-small .remove{margin-right:2px}:host.size-small .selected-check{margin:0 2px 0 0}:host.size-small .selected-check mat-icon{transform:scale(.7)}:host.size-small.removable,:host.size-small.selected{padding-right:0}:host.size-small mat-icon{height:22px;width:22px;font-size:22px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fsChip: [{
-                type: HostBinding,
-                args: ['class.fs-chip']
-            }], _outlined: [{
-                type: HostBinding,
-                args: ['class.outlined']
-            }], selectable: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.selectable']
-            }], removable: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.removable']
-            }], styleBackgroundColor: [{
-                type: HostBinding,
-                args: ['style.backgroundColor']
-            }], styleColor: [{
-                type: HostBinding,
-                args: ['style.color']
-            }], styleBorderColor: [{
-                type: HostBinding,
-                args: ['style.borderColor']
-            }], classSmall: [{
-                type: HostBinding,
-                args: ['class.size-small']
-            }], classTiny: [{
-                type: HostBinding,
-                args: ['class.size-tiny']
-            }], classMicro: [{
-                type: HostBinding,
-                args: ['class.size-micro']
-            }], value: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.iconed']
-            }], image: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.imaged']
-            }], selected: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.selected']
-            }], selectedToggled: [{
-                type: Output
-            }], removed: [{
-                type: Output
-            }], setSize: [{
-                type: Input,
-                args: ['size']
-            }], click: [{
-                type: HostListener,
-                args: ['click']
-            }], backgroundColor: [{
-                type: Input
-            }], borderColor: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], outlined: [{
-                type: Input
+class FsChipComponent {
+    constructor(_cdRef) {
+        this._cdRef = _cdRef;
+        this.fsChip = true;
+        this._outlined = false;
+        this.selectable = false;
+        this.removable = true;
+        this.styleBackgroundColor = '';
+        this.styleColor = '';
+        this.styleBorderColor = '';
+        this.classSmall = false;
+        this.classTiny = false;
+        this.classMicro = false;
+        this.selected = false;
+        this.selectedToggled = new EventEmitter();
+        this.removed = new EventEmitter();
+        this._destroy$ = new Subject();
+        this._backgroundColor = '';
+        this._color = '';
+    }
+    set setSize(value) {
+        this.classSmall = value === 'small';
+        this.classTiny = value === 'tiny';
+        this.classMicro = value === 'micro';
+    }
+    click() {
+        if (this.selectable) {
+            this.selected = !this.selected;
+            this.selectedToggled.emit({ value: this.value, selected: this.selected });
+        }
+    }
+    set backgroundColor(value) {
+        this._backgroundColor = value;
+        this._updateStyles();
+    }
+    set borderColor(value) {
+        this.styleBorderColor = value;
+        this._updateStyles();
+    }
+    set color(value) {
+        this._color = value;
+        this._updateStyles();
+    }
+    get destroy$() {
+        return this._destroy$.asObservable();
+    }
+    set outlined(value) {
+        this._outlined = value;
+        this._updateStyles();
+    }
+    select() {
+        this.selected = true;
+        this._cdRef.markForCheck();
+    }
+    unselect() {
+        this.selected = false;
+        this._cdRef.markForCheck();
+    }
+    ngOnInit() {
+        if (this.removed.observers.length === 0) {
+            this.removable = false;
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    remove(event) {
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        this.removed.next(event);
+    }
+    _isContrastYIQBlack(hexcolor) {
+        if (!hexcolor) {
+            return true;
+        }
+        hexcolor = hexcolor.replace('#', '');
+        const r = parseInt(hexcolor.substr(0, 2), 16);
+        const g = parseInt(hexcolor.substr(2, 2), 16);
+        const b = parseInt(hexcolor.substr(4, 2), 16);
+        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+        return yiq >= 200;
+    }
+    _updateStyles() {
+        this.styleBackgroundColor = this._backgroundColor;
+        if (this._color) {
+            this.styleColor = this._color;
+        }
+        else if (!this._outlined) {
+            this.styleColor = this._isContrastYIQBlack(this.styleBackgroundColor) ? '#474747' : '#fff';
+        }
+        if (this._outlined) {
+            this.styleBackgroundColor = '';
+            if (this._color) {
+                this.styleBorderColor = this._color;
+            }
+        }
+        this._cdRef.markForCheck();
+    }
+}
+FsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", icon: "icon", image: "image", selected: "selected", setSize: ["size", "setSize"], backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this.selectable", "class.removable": "this.removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.size-small": "this.classSmall", "class.size-tiny": "this.classTiny", "class.size-micro": "this.classMicro", "class.iconed": "this.icon", "class.imaged": "this.image", "class.selected": "this.selected" } }, ngImport: i0, template: "<img *ngIf=\"image\" [src]=\"image\" class=\"image\" alt=\"\">\n<ng-container *ngIf=\"icon\">\n  <mat-icon class=\"icon\">{{icon}}</mat-icon>\n</ng-container>\n<div class=\"fs-chip-content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"selected\">\n  <div class=\"selected-check\">\n    <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n  </div>\n</ng-container>\n<div *ngIf=\"removed.observers.length && removable\" class=\"remove\" (click)=\"remove($event)\">\n  <mat-icon [style.color]=\"styleColor\">remove_circle_outline</mat-icon>\n</div>", styles: [":host{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;height:30px;background-color:#e0e0e0;overflow:hidden}:host.imaged{overflow:visible;padding-left:0;vertical-align:middle}:host.imaged.outlined .image{margin-left:-2px}:host.iconed:not(.imaged){padding-left:5px}:host.removable,:host.selected{padding-right:3px}:host.selectable{cursor:pointer}:host.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}:host .icon{margin-right:5px}:host mat-icon{font-size:25px}:host .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}:host .fs-chip-content{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .selected-check{margin:0 5px;display:flex}:host .remove{display:flex;margin-left:5px;cursor:pointer}:host.size-micro{padding:0 5px;height:16px;line-height:normal}:host.size-micro .fs-chip-content{font-size:65%}:host.size-micro .image{height:100%;width:16px;margin-right:2px}:host.size-micro .remove{margin-left:1px}:host.size-micro .selected-check{margin:0 1px 0 0}:host.size-micro.imaged{padding-left:0}:host.size-micro.removable,:host.size-micro.selected{padding-right:0}:host.size-micro mat-icon{width:12px;height:12px;font-size:11px}:host.size-tiny{padding:0 6px;height:18px;line-height:normal}:host.size-tiny .fs-chip-content{font-size:75%}:host.size-tiny .image{height:18px;width:18px;margin-right:3px}:host.size-tiny.iconed:not(.imaged){padding-left:3px}:host.size-tiny .remove{margin-left:2px;margin-right:2px}:host.size-tiny .selected-check{margin:0 1px 0 0}:host.size-tiny.imaged{padding-left:0}:host.size-tiny.removable,:host.size-tiny.selected{padding-right:0}:host.size-tiny mat-icon{height:13px;width:13px;font-size:13px}:host.size-small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.size-small .image{height:25px;width:25px;margin-right:5px}:host.size-small.iconed:not(.imaged){padding-left:4px}:host.size-small.imaged{padding-left:0}:host.size-small .remove{margin-right:2px}:host.size-small .selected-check{margin:0 2px 0 0}:host.size-small .selected-check mat-icon{transform:scale(.7)}:host.size-small.removable,:host.size-small.selected{padding-right:0}:host.size-small mat-icon{height:22px;width:22px;font-size:22px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img *ngIf=\"image\" [src]=\"image\" class=\"image\" alt=\"\">\n<ng-container *ngIf=\"icon\">\n  <mat-icon class=\"icon\">{{icon}}</mat-icon>\n</ng-container>\n<div class=\"fs-chip-content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"selected\">\n  <div class=\"selected-check\">\n    <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n  </div>\n</ng-container>\n<div *ngIf=\"removed.observers.length && removable\" class=\"remove\" (click)=\"remove($event)\">\n  <mat-icon [style.color]=\"styleColor\">remove_circle_outline</mat-icon>\n</div>", styles: [":host{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;height:30px;background-color:#e0e0e0;overflow:hidden}:host.imaged{overflow:visible;padding-left:0;vertical-align:middle}:host.imaged.outlined .image{margin-left:-2px}:host.iconed:not(.imaged){padding-left:5px}:host.removable,:host.selected{padding-right:3px}:host.selectable{cursor:pointer}:host.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}:host .icon{margin-right:5px}:host mat-icon{font-size:25px}:host .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}:host .fs-chip-content{max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .selected-check{margin:0 5px;display:flex}:host .remove{display:flex;margin-left:5px;cursor:pointer}:host.size-micro{padding:0 5px;height:16px;line-height:normal}:host.size-micro .fs-chip-content{font-size:65%}:host.size-micro .image{height:100%;width:16px;margin-right:2px}:host.size-micro .remove{margin-left:1px}:host.size-micro .selected-check{margin:0 1px 0 0}:host.size-micro.imaged{padding-left:0}:host.size-micro.removable,:host.size-micro.selected{padding-right:0}:host.size-micro mat-icon{width:12px;height:12px;font-size:11px}:host.size-tiny{padding:0 6px;height:18px;line-height:normal}:host.size-tiny .fs-chip-content{font-size:75%}:host.size-tiny .image{height:18px;width:18px;margin-right:3px}:host.size-tiny.iconed:not(.imaged){padding-left:3px}:host.size-tiny .remove{margin-left:2px;margin-right:2px}:host.size-tiny .selected-check{margin:0 1px 0 0}:host.size-tiny.imaged{padding-left:0}:host.size-tiny.removable,:host.size-tiny.selected{padding-right:0}:host.size-tiny mat-icon{height:13px;width:13px;font-size:13px}:host.size-small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.size-small .image{height:25px;width:25px;margin-right:5px}:host.size-small.iconed:not(.imaged){padding-left:4px}:host.size-small.imaged{padding-left:0}:host.size-small .remove{margin-right:2px}:host.size-small .selected-check{margin:0 2px 0 0}:host.size-small .selected-check mat-icon{transform:scale(.7)}:host.size-small.removable,:host.size-small.selected{padding-right:0}:host.size-small mat-icon{height:22px;width:22px;font-size:22px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fsChip: [{
+                type: HostBinding,
+                args: ['class.fs-chip']
+            }], _outlined: [{
+                type: HostBinding,
+                args: ['class.outlined']
+            }], selectable: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.selectable']
+            }], removable: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.removable']
+            }], styleBackgroundColor: [{
+                type: HostBinding,
+                args: ['style.backgroundColor']
+            }], styleColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }], styleBorderColor: [{
+                type: HostBinding,
+                args: ['style.borderColor']
+            }], classSmall: [{
+                type: HostBinding,
+                args: ['class.size-small']
+            }], classTiny: [{
+                type: HostBinding,
+                args: ['class.size-tiny']
+            }], classMicro: [{
+                type: HostBinding,
+                args: ['class.size-micro']
+            }], value: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.iconed']
+            }], image: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.imaged']
+            }], selected: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.selected']
+            }], selectedToggled: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], setSize: [{
+                type: Input,
+                args: ['size']
+            }], click: [{
+                type: HostListener,
+                args: ['click']
+            }], backgroundColor: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], outlined: [{
+                type: Input
             }] } });
 
-class FsChipsComponent {
-    constructor(_cdRef, _iterable) {
-        this._cdRef = _cdRef;
-        this._iterable = _iterable;
-        this.classFsChips = true;
-        this.classHasChips = false;
-        this.multiple = true;
-        this._value = [];
-        this._destroy$ = new Subject();
-        this._chipDiffer = this._iterable.find([]).create();
-    }
-    setDisabledState(isDisabled) {
-        //
-    }
-    ngAfterContentInit() {
-        this._subscribeToSelectionChanges();
-        this._subscribeToItemsChange();
-    }
-    set value(value) {
-        if (this._value !== value) {
-            this._value = value;
-            this.onChange(this._value);
-            this.onTouch(this._value);
-        }
-    }
-    get value() {
-        return this._value;
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    writeValue(value) {
-        if (value !== this.value) {
-            this._value = value;
-        }
-        this._updateChips();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    _subscribeToSelectionChange() {
-        const changed = this._chipDiffer.diff(this.chips);
-        changed === null || changed === void 0 ? void 0 : changed.forEachAddedItem((change) => {
-            change.item.selectedToggled
-                .pipe(takeUntil(change.item.destroy$), takeUntil(this._destroy$))
-                .subscribe(({ selected, value }) => {
-                if (!selected) {
-                    const valueIndex = this.value.findIndex((item) => {
-                        return this._compareFn(item, value);
-                    });
-                    if (valueIndex > -1) {
-                        this.value.splice(valueIndex, 1);
-                        this.onChange(this._value);
-                        this.onTouch(this._value);
-                    }
-                }
-                else {
-                    this.value.push(value);
-                    this.onChange(this._value);
-                    this.onTouch(this._value);
-                }
-            });
-        });
-    }
-    /**
-     * Update ngModel value when selection changed
-     */
-    _subscribeToSelectionChanges() {
-        this._subscribeToSelectionChange();
-        this.chips.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._subscribeToSelectionChange();
-        });
-    }
-    /**
-     * Update selection if item was added or removed
-     */
-    _subscribeToItemsChange() {
-        this.chips.changes
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this.classHasChips = this.chips.length !== 0;
-            this._cdRef.markForCheck();
-            this._updateChips();
-        });
-        this.classHasChips = this.chips.length !== 0;
-        this._cdRef.markForCheck();
-    }
-    _compareFn(o1, o2) {
-        if (this.compare) {
-            return this.compare(o1, o2);
-        }
-        return o1 === o2;
-    }
-    _updateChips() {
-        if (this.multiple && Array.isArray(this.value) && this.chips) {
-            this.chips.forEach((chip) => {
-                const selected = this.value
-                    .some((o) => {
-                    return this._compareFn(o, chip.value);
-                });
-                if (selected) {
-                    chip.select();
-                }
-                else {
-                    chip.unselect();
-                }
-            });
-        }
-    }
-}
-FsChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-FsChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipsComponent, selector: "fs-chips", inputs: { compare: "compare", multiple: "multiple" }, host: { properties: { "class.fs-chips": "this.classFsChips", "class.has-chips": "this.classHasChips" } }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => FsChipsComponent),
-            multi: true,
-        },
-    ], queries: [{ propertyName: "chips", predicate: FsChipComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap}:host.has-chips{margin-top:-5px}:host ::ng-deep .fs-chip{margin-top:5px}:host ::ng-deep .fs-chip+.fs-chip{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fs-chips', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FsChipsComponent),
-                            multi: true,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap}:host.has-chips{margin-top:-5px}:host ::ng-deep .fs-chip{margin-top:5px}:host ::ng-deep .fs-chip+.fs-chip{margin-left:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }]; }, propDecorators: { classFsChips: [{
-                type: HostBinding,
-                args: ['class.fs-chips']
-            }], classHasChips: [{
-                type: HostBinding,
-                args: ['class.has-chips']
-            }], chips: [{
-                type: ContentChildren,
-                args: [FsChipComponent]
-            }], compare: [{
-                type: Input
-            }], multiple: [{
-                type: Input
+class FsChipsComponent {
+    constructor(_cdRef, _iterable) {
+        this._cdRef = _cdRef;
+        this._iterable = _iterable;
+        this.classFsChips = true;
+        this.classHasChips = false;
+        this.multiple = true;
+        this._value = [];
+        this._destroy$ = new Subject();
+        this._chipDiffer = this._iterable.find([]).create();
+    }
+    setDisabledState(isDisabled) {
+        //
+    }
+    ngAfterContentInit() {
+        this._subscribeToSelectionChanges();
+        this._subscribeToItemsChange();
+    }
+    set value(value) {
+        if (this._value !== value) {
+            this._value = value;
+            this.onChange(this._value);
+            this.onTouch(this._value);
+        }
+    }
+    get value() {
+        return this._value;
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    writeValue(value) {
+        if (value !== this.value) {
+            this._value = value;
+        }
+        this._updateChips();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
+    _subscribeToSelectionChange() {
+        const changed = this._chipDiffer.diff(this.chips);
+        changed === null || changed === void 0 ? void 0 : changed.forEachAddedItem((change) => {
+            change.item.selectedToggled
+                .pipe(takeUntil(change.item.destroy$), takeUntil(this._destroy$))
+                .subscribe(({ selected, value }) => {
+                if (!selected) {
+                    const valueIndex = this.value.findIndex((item) => {
+                        return this._compareFn(item, value);
+                    });
+                    if (valueIndex > -1) {
+                        this.value.splice(valueIndex, 1);
+                        this.onChange(this._value);
+                        this.onTouch(this._value);
+                    }
+                }
+                else {
+                    this.value.push(value);
+                    this.onChange(this._value);
+                    this.onTouch(this._value);
+                }
+            });
+        });
+    }
+    /**
+     * Update ngModel value when selection changed
+     */
+    _subscribeToSelectionChanges() {
+        this._subscribeToSelectionChange();
+        this.chips.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this._subscribeToSelectionChange();
+        });
+    }
+    /**
+     * Update selection if item was added or removed
+     */
+    _subscribeToItemsChange() {
+        this.chips.changes
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.classHasChips = this.chips.length !== 0;
+            this._cdRef.markForCheck();
+            this._updateChips();
+        });
+        this.classHasChips = this.chips.length !== 0;
+        this._cdRef.markForCheck();
+    }
+    _compareFn(o1, o2) {
+        if (this.compare) {
+            return this.compare(o1, o2);
+        }
+        return o1 === o2;
+    }
+    _updateChips() {
+        if (this.multiple && Array.isArray(this.value) && this.chips) {
+            this.chips.forEach((chip) => {
+                const selected = this.value
+                    .some((o) => {
+                    return this._compareFn(o, chip.value);
+                });
+                if (selected) {
+                    chip.select();
+                }
+                else {
+                    chip.unselect();
+                }
+            });
+        }
+    }
+}
+FsChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+FsChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FsChipsComponent, selector: "fs-chips", inputs: { compare: "compare", multiple: "multiple" }, host: { properties: { "class.fs-chips": "this.classFsChips", "class.has-chips": "this.classHasChips" } }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => FsChipsComponent),
+            multi: true,
+        },
+    ], queries: [{ propertyName: "chips", predicate: FsChipComponent }], ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap}:host.has-chips{margin-top:-5px}:host ::ng-deep .fs-chip{margin-top:5px}:host ::ng-deep .fs-chip+.fs-chip{margin-left:5px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsChipsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-chips', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FsChipsComponent),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-wrap:wrap}:host.has-chips{margin-top:-5px}:host ::ng-deep .fs-chip{margin-top:5px}:host ::ng-deep .fs-chip+.fs-chip{margin-left:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }]; }, propDecorators: { classFsChips: [{
+                type: HostBinding,
+                args: ['class.fs-chips']
+            }], classHasChips: [{
+                type: HostBinding,
+                args: ['class.has-chips']
+            }], chips: [{
+                type: ContentChildren,
+                args: [FsChipComponent]
+            }], compare: [{
+                type: Input
+            }], multiple: [{
+                type: Input
             }] } });
 
-class FsChipModule {
-    static forRoot() {
-        return {
-            ngModule: FsChipModule
-        };
-    }
-}
-FsChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FsChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipModule, declarations: [FsChipsComponent,
-        FsChipComponent], imports: [CommonModule,
-        MatIconModule,
-        FsLabelModule], exports: [FsChipsComponent,
-        FsChipComponent] });
-FsChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipModule, imports: [[
-            CommonModule,
-            MatIconModule,
-            FsLabelModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatIconModule,
-                        FsLabelModule
-                    ],
-                    exports: [
-                        FsChipsComponent,
-                        FsChipComponent,
-                    ],
-                    declarations: [
-                        FsChipsComponent,
-                        FsChipComponent,
-                    ]
-                }]
+class FsChipModule {
+    static forRoot() {
+        return {
+            ngModule: FsChipModule
+        };
+    }
+}
+FsChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FsChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FsChipModule, declarations: [FsChipsComponent,
+        FsChipComponent], imports: [CommonModule,
+        MatIconModule,
+        FsLabelModule], exports: [FsChipsComponent,
+        FsChipComponent] });
+FsChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsChipModule, imports: [CommonModule,
+        MatIconModule,
+        FsLabelModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FsChipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        MatIconModule,
+                        FsLabelModule
+                    ],
+                    exports: [
+                        FsChipsComponent,
+                        FsChipComponent,
+                    ],
+                    declarations: [
+                        FsChipsComponent,
+                        FsChipComponent,
+                    ]
+                }]
         }] });
 
-/*
- * Public API Surface of fs-menu
+/*
+ * Public API Surface of fs-menu
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { FsChipComponent, FsChipModule, FsChipsComponent };