@firestitch/chip 18.0.1 → 18.0.3

package/fesm2022/firestitch-chip.mjs

@@ -1,221 +1,52 @@
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, HostBinding, Input, Output, HostListener, forwardRef, ContentChildren, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/icon';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, forwardRef, ViewChild, ContentChildren, TemplateRef, Optional, NgModule } from '@angular/core';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i3 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 { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 
-class FsChipComponent {
-    _cdRef;
-    fsChip = true;
-    _outlined = false;
-    selectable = false;
-    removable = true;
-    actionable = true;
-    styleBackgroundColor = '';
-    styleColor = '';
-    styleBorderColor = '';
-    classSmall = false;
-    classTiny = false;
-    classMicro = false;
-    value;
-    actions = [];
+class FsChipActionComponent {
     icon;
-    image;
-    selected = false;
-    selectedToggled = new EventEmitter();
-    removed = new EventEmitter();
-    _destroy$ = new Subject();
-    _backgroundColor = '';
-    _color = '';
-    constructor(_cdRef) {
-        this._cdRef = _cdRef;
-    }
-    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();
-    }
-    ngOnChanges() {
-        this.actions = this.actions
-            .filter((action) => action.type !== 'remove');
-        if (this.removed.observed && this.removable) {
-            this.actions.push({
-                icon: 'remove_circle_outline',
-                click: (event) => this.remove(event),
-                type: 'remove',
-            });
-        }
-        this.actionable = this.actions.length !== 0;
-    }
-    ngOnDestroy() {
-        this._destroy$.next(null);
-        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();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", actionable: "actionable", value: "value", actions: "actions", 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", "class.actionable": "this.actionable", "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" } }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"image\">\n  <img [src]=\"image\" class=\"image\" alt=\"\">\n</ng-container>\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@for (action of actions; track action.icon) {\n  <mat-icon   \n      [style.color]=\"styleColor\" \n      class=\"action\"\n      (click)=\"action.click($event)\">\n    {{action.icon}}\n  </mat-icon>\n}", 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.actionable,: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 .action{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 .action{margin-left:1px}:host.size-micro .selected-check{margin:0 1px 0 0}:host.size-micro.imaged{padding-left:0}:host.size-micro.actionable,: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 .action{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.actionable,: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 .action{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.actionable,: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 });
+    link;
+    linkTarget;
+    color;
+    actionClick = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipActionComponent, selector: "fs-chip-action", inputs: { icon: "icon", link: "link", linkTarget: "linkTarget", color: "color" }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "@if (link) {\n  <a\n      [href]=\"link\"\n      [target]=\"linkTarget || '_self'\">\n    <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n  </a>\n} @else {\n  <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n}\n<ng-template #actionTemplate>\n  <mat-icon\n      cdkHighlight\n      [style.color]=\"color\"\n      class=\"action\"\n      (click)=\"actionClick.emit($event)\">\n    {{ icon }}\n  </mat-icon>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"image\">\n  <img [src]=\"image\" class=\"image\" alt=\"\">\n</ng-container>\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@for (action of actions; track action.icon) {\n  <mat-icon   \n      [style.color]=\"styleColor\" \n      class=\"action\"\n      (click)=\"action.click($event)\">\n    {{action.icon}}\n  </mat-icon>\n}", 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.actionable,: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 .action{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 .action{margin-left:1px}:host.size-micro .selected-check{margin:0 1px 0 0}:host.size-micro.imaged{padding-left:0}:host.size-micro.actionable,: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 .action{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.actionable,: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 .action{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.actionable,:host.size-small.selected{padding-right:0}:host.size-small mat-icon{height:22px;width:22px;font-size:22px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { fsChip: [{
-                type: HostBinding,
-                args: ['class.fs-chip']
-            }], _outlined: [{
-                type: HostBinding,
-                args: ['class.outlined']
-            }], selectable: [{
+            args: [{ selector: 'fs-chip-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (link) {\n  <a\n      [href]=\"link\"\n      [target]=\"linkTarget || '_self'\">\n    <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n  </a>\n} @else {\n  <ng-container *ngTemplateOutlet=\"actionTemplate\"></ng-container>\n}\n<ng-template #actionTemplate>\n  <mat-icon\n      cdkHighlight\n      [style.color]=\"color\"\n      class=\"action\"\n      (click)=\"actionClick.emit($event)\">\n    {{ icon }}\n  </mat-icon>\n</ng-template>" }]
+        }], propDecorators: { icon: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.selectable']
-            }], removable: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.removable']
-            }], actionable: [{
+            }], link: [{
                 type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.actionable']
-            }], 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
-            }], actions: [{
-                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: [{
+            }], linkTarget: [{
                 type: Input
             }], color: [{
                 type: Input
-            }], outlined: [{
-                type: Input
+            }], actionClick: [{
+                type: Output
             }] } });
 
 class FsChipsComponent {
     _cdRef;
     _iterable;
-    classFsChips = true;
-    classHasChips = false;
+    dropList;
     chips;
     compare;
     multiple = true;
+    sortable = false;
     onChange;
     onTouch;
     _value = [];
+    _selectable = false;
     _destroy$ = new Subject();
     _chipDiffer;
     constructor(_cdRef, _iterable) {
@@ -223,12 +54,13 @@ class FsChipsComponent {
         this._iterable = _iterable;
         this._chipDiffer = this._iterable.find([]).create();
     }
-    setDisabledState(isDisabled) {
-        //
+    drop(event) {
+        moveItemInArray(this._value, event.previousIndex, event.currentIndex);
+        this.onChange(this._value);
     }
     ngAfterContentInit() {
-        this._subscribeToSelectionChanges();
-        this._subscribeToItemsChange();
+        this._subscribeToSelectionChange();
+        this._subscribeChanges();
     }
     set value(value) {
         if (this._value !== value) {
@@ -259,50 +91,48 @@ class FsChipsComponent {
     _subscribeToSelectionChange() {
         const changed = this._chipDiffer.diff(this.chips);
         changed?.forEachAddedItem((change) => {
+            this._selectable = this.chips.some((chip) => chip.selectable);
             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);
+                if (this.multiple) {
+                    if (selected) {
+                        this.value.push(value);
+                    }
+                    else {
+                        const valueIndex = this.value.findIndex((item) => {
+                            return this._compareFn(item, value);
+                        });
+                        if (valueIndex > -1) {
+                            this.value.splice(valueIndex, 1);
+                        }
                     }
                 }
                 else {
-                    this.value.push(value);
-                    this.onChange(this._value);
-                    this.onTouch(this._value);
+                    this.chips
+                        .forEach((chip) => {
+                        if (!this._compareFn(chip.value, value)) {
+                            chip.unselect();
+                        }
+                    });
+                    this.value = selected ? value : null;
                 }
+                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() {
+    _subscribeChanges() {
         this.chips.changes
             .pipe(takeUntil(this._destroy$))
             .subscribe(() => {
-            this.classHasChips = this.chips.length !== 0;
+            this._subscribeToSelectionChange();
             this._cdRef.markForCheck();
             this._updateChips();
         });
-        this.classHasChips = this.chips.length !== 0;
         this._cdRef.markForCheck();
     }
     _compareFn(o1, o2) {
@@ -312,29 +142,31 @@ class FsChipsComponent {
         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 (this.multiple && this._selectable) {
+            if (Array.isArray(this.value)) {
+                this.chips.forEach((chip) => {
+                    const selected = this.value
+                        .some((item) => {
+                        return this._compareFn(item, chip.value);
+                    });
+                    if (selected) {
+                        chip.select();
+                    }
+                    else {
+                        chip.unselect();
+                    }
                 });
-                if (selected) {
-                    chip.select();
-                }
-                else {
-                    chip.unselect();
-                }
-            });
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsChipsComponent, selector: "fs-chips", inputs: { compare: "compare", multiple: "multiple" }, host: { properties: { "class.fs-chips": "this.classFsChips", "class.has-chips": "this.classHasChips" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipsComponent, selector: "fs-chips", inputs: { compare: "compare", multiple: "multiple", sortable: "sortable" }, 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 });
+        ], queries: [{ propertyName: "chips", predicate: FsChipComponent }], viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], ngImport: i0, template: "@if (sortable) {\n  <div\n      class=\"fs-chips chips-sortable\"\n      cdkDropList\n      [cdkDropListLockAxis]=\"'y'\"\n      (cdkDropListDropped)=\"drop($event)\">\n    @for (chip of chips; track chip) {\n      <div\n          class=\"chip-container\"\n          cdkDrag\n          [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n        <a\n            class=\"chip-handle\"\n            mat-icon-button\n            cdkDragHandle>\n          <mat-icon>\n            drag_indicator\n          </mat-icon>\n        </a>\n        <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"fs-chips\">\n    @for (chip of chips; track chip) {\n      <div class=\"chip-container\">\n        <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n      </div>\n    }\n  </div>\n}", styles: [".fs-chips{display:flex}.fs-chips:not(.chips-sortable){gap:5px}.fs-chips.chips-sortable{flex-direction:column}.fs-chips.chips-sortable .chip-container{display:flex;align-items:center}.fs-chips.chips-sortable .chip-container+.chip-container{border-top:7px solid transparent}.fs-chips.chips-sortable .chip-container .chip-handle{color:inherit;display:flex;align-items:center}.fs-chips.chips-sortable ::ng-deep .cdk-drag-placeholder{opacity:.3}.fs-chips .fs-chip-container{display:flex}::ng-deep .fs-chip-drag-preview{display:flex;overflow:visible}::ng-deep .fs-chip-drag-preview .chip-handle{color:inherit;display:flex;align-items:center}::ng-deep .fs-chip-drag-preview.chip-container .fs-chip{box-shadow:3px 3px 3px #c4c4c4}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipsComponent, decorators: [{
             type: Component,
@@ -344,13 +176,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                             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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }], propDecorators: { classFsChips: [{
-                type: HostBinding,
-                args: ['class.fs-chips']
-            }], classHasChips: [{
-                type: HostBinding,
-                args: ['class.has-chips']
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (sortable) {\n  <div\n      class=\"fs-chips chips-sortable\"\n      cdkDropList\n      [cdkDropListLockAxis]=\"'y'\"\n      (cdkDropListDropped)=\"drop($event)\">\n    @for (chip of chips; track chip) {\n      <div\n          class=\"chip-container\"\n          cdkDrag\n          [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n        <a\n            class=\"chip-handle\"\n            mat-icon-button\n            cdkDragHandle>\n          <mat-icon>\n            drag_indicator\n          </mat-icon>\n        </a>\n        <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n      </div>\n    }\n  </div>\n} @else {\n  <div class=\"fs-chips\">\n    @for (chip of chips; track chip) {\n      <div class=\"chip-container\">\n        <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n      </div>\n    }\n  </div>\n}", styles: [".fs-chips{display:flex}.fs-chips:not(.chips-sortable){gap:5px}.fs-chips.chips-sortable{flex-direction:column}.fs-chips.chips-sortable .chip-container{display:flex;align-items:center}.fs-chips.chips-sortable .chip-container+.chip-container{border-top:7px solid transparent}.fs-chips.chips-sortable .chip-container .chip-handle{color:inherit;display:flex;align-items:center}.fs-chips.chips-sortable ::ng-deep .cdk-drag-placeholder{opacity:.3}.fs-chips .fs-chip-container{display:flex}::ng-deep .fs-chip-drag-preview{display:flex;overflow:visible}::ng-deep .fs-chip-drag-preview .chip-handle{color:inherit;display:flex;align-items:center}::ng-deep .fs-chip-drag-preview.chip-container .fs-chip{box-shadow:3px 3px 3px #c4c4c4}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }], propDecorators: { dropList: [{
+                type: ViewChild,
+                args: [CdkDropList, { static: true }]
             }], chips: [{
                 type: ContentChildren,
                 args: [FsChipComponent]
@@ -358,21 +187,197 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], multiple: [{
                 type: Input
+            }], sortable: [{
+                type: Input
+            }] } });
+
+class FsChipComponent {
+    chips;
+    _cdRef;
+    templateRef;
+    selectable = false;
+    removable = true;
+    value;
+    maxWidth;
+    width;
+    backgroundColor;
+    borderColor;
+    color;
+    outlined;
+    actions = [];
+    icon;
+    image;
+    set setSelected(value) {
+        this.classes.selected = value;
+        this._selected = value;
+    }
+    get selected() {
+        return this._selected;
+    }
+    selectedToggled = new EventEmitter();
+    removed = new EventEmitter();
+    styles = {};
+    classes = {};
+    _destroy$ = new Subject();
+    _selected = false;
+    constructor(chips, _cdRef) {
+        this.chips = chips;
+        this._cdRef = _cdRef;
+    }
+    set setSize(value) {
+        this.classes['size-small'] = value === 'small';
+        this.classes['size-tiny'] = value === 'tiny';
+        this.classes['size-micro'] = value === 'micro';
+    }
+    click() {
+        if (this.selectable) {
+            this.setSelected = !this.selected;
+            this.selectedToggled.emit({ value: this.value, selected: this.selected });
+        }
+    }
+    select() {
+        this.setSelected = true;
+        this._cdRef.markForCheck();
+    }
+    unselect() {
+        this.setSelected = false;
+        this._cdRef.markForCheck();
+    }
+    get destroy$() {
+        return this._destroy$.asObservable();
+    }
+    ngOnChanges(changes) {
+        this.actions = this.actions
+            .filter((action) => action.type !== 'remove');
+        if (changes.selectable) {
+            this.classes.selectable = this.selectable;
+        }
+        if (changes.removable) {
+            this.classes.removable = this.removable;
+        }
+        if (changes.icon) {
+            this.classes.iconed = !!this.icon;
+        }
+        if (changes.image) {
+            this.classes.imaged = !!this.image;
+        }
+        if (this.removed.observed && this.removable) {
+            this.actions.push({
+                icon: 'remove_circle_outline',
+                click: (event) => this.remove(event),
+                type: 'remove',
+            });
+        }
+        this.classes.actionable = this.actions.length !== 0;
+        this._updateStyles();
+    }
+    actionClick(action, event) {
+        if (action.click) {
+            action.click(event);
+        }
+    }
+    ngOnDestroy() {
+        this._destroy$.next(null);
+        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.styles.backgroundColor = this.backgroundColor;
+        this.styles.borderColor = this.borderColor;
+        this.styles.width = this.width;
+        this.classes.outlined = this.outlined;
+        if (this.color) {
+            this.styles.color = this.color;
+        }
+        else if (!this.outlined) {
+            this.styles.color = this._isContrastYIQBlack(this.backgroundColor) ? '#474747' : '#fff';
+        }
+        if (this.outlined) {
+            this.styles.backgroundColor = '';
+            if (this.color) {
+                this.styles.borderColor = this.color;
+            }
+        }
+        this._cdRef.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [{ token: FsChipsComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", maxWidth: "maxWidth", width: "width", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", actions: "actions", icon: "icon", image: "image", setSelected: ["selected", "setSelected"], setSize: ["size", "setSize"] }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n  <div\n      class=\"fs-chip\"\n      (click)=\"click()\"\n      [ngStyle]=\"styles\"\n      [ngClass]=\"classes\">\n    <ng-container *ngIf=\"image\">\n      <img\n        [src]=\"image\"\n        class=\"image\"\n        alt=\"\">\n    </ng-container>\n    <ng-container *ngIf=\"icon\">\n      <mat-icon class=\"icon\">\n        {{ icon }}\n      </mat-icon>\n    </ng-container>\n    <div\n        class=\"fs-chip-content\"\n        [ngStyle]=\"{ 'max-width': maxWidth }\">\n      <ng-content></ng-content>\n    </div>\n    @if (selected) {\n      <div class=\"selected-check\">\n        <mat-icon [style.color]=\"styles.color\">\n          check\n        </mat-icon>\n      </div>\n    }\n    @if (actions) {\n      <div class=\"actions\">\n        @for (action of actions; track action.icon) {\n          <fs-chip-action\n            [icon]=\"action.icon\"\n            [link]=\"action.link\"\n            [linkTarget]=\"action.linkTarget\"\n            [color]=\"styles.color\"\n            (actionClick)=\"actionClick(action, $event)\">\n          </fs-chip-action>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n@if (!chips) {\n  <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [".fs-chip{-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:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:3px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-action{display:flex;cursor:pointer}.fs-chip.size-micro{padding:0 5px;height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-action{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.imaged{padding-left:0}.fs-chip.size-micro.actionable,.fs-chip.size-micro.selected{padding-right:0}.fs-chip.size-micro mat-icon{width:12px;height:12px;font-size:11px}.fs-chip.size-tiny{padding:0 6px;height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny .image{height:18px;width:18px;margin-right:3px}.fs-chip.size-tiny.iconed:not(.imaged){padding-left:3px}.fs-chip.size-tiny fs-chip-action{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.imaged{padding-left:0}.fs-chip.size-tiny.actionable,.fs-chip.size-tiny.selected{padding-right:0}.fs-chip.size-tiny mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-small{padding:0 8px;font-size:85%;height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.imaged{padding-left:0}.fs-chip.size-small fs-chip-action{margin-right:2px}.fs-chip.size-small .selected-check{margin:0 2px 0 0}.fs-chip.size-small .selected-check mat-icon{transform:scale(.7)}.fs-chip.size-small.actionable,.fs-chip.size-small.selected{padding-right:0}.fs-chip.size-small mat-icon{height:22px;width:22px;font-size:22px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FsChipActionComponent, selector: "fs-chip-action", inputs: ["icon", "link", "linkTarget", "color"], outputs: ["actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n  <div\n      class=\"fs-chip\"\n      (click)=\"click()\"\n      [ngStyle]=\"styles\"\n      [ngClass]=\"classes\">\n    <ng-container *ngIf=\"image\">\n      <img\n        [src]=\"image\"\n        class=\"image\"\n        alt=\"\">\n    </ng-container>\n    <ng-container *ngIf=\"icon\">\n      <mat-icon class=\"icon\">\n        {{ icon }}\n      </mat-icon>\n    </ng-container>\n    <div\n        class=\"fs-chip-content\"\n        [ngStyle]=\"{ 'max-width': maxWidth }\">\n      <ng-content></ng-content>\n    </div>\n    @if (selected) {\n      <div class=\"selected-check\">\n        <mat-icon [style.color]=\"styles.color\">\n          check\n        </mat-icon>\n      </div>\n    }\n    @if (actions) {\n      <div class=\"actions\">\n        @for (action of actions; track action.icon) {\n          <fs-chip-action\n            [icon]=\"action.icon\"\n            [link]=\"action.link\"\n            [linkTarget]=\"action.linkTarget\"\n            [color]=\"styles.color\"\n            (actionClick)=\"actionClick(action, $event)\">\n          </fs-chip-action>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n@if (!chips) {\n  <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [".fs-chip{-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:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:3px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-action{display:flex;cursor:pointer}.fs-chip.size-micro{padding:0 5px;height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-action{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.imaged{padding-left:0}.fs-chip.size-micro.actionable,.fs-chip.size-micro.selected{padding-right:0}.fs-chip.size-micro mat-icon{width:12px;height:12px;font-size:11px}.fs-chip.size-tiny{padding:0 6px;height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny .image{height:18px;width:18px;margin-right:3px}.fs-chip.size-tiny.iconed:not(.imaged){padding-left:3px}.fs-chip.size-tiny fs-chip-action{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.imaged{padding-left:0}.fs-chip.size-tiny.actionable,.fs-chip.size-tiny.selected{padding-right:0}.fs-chip.size-tiny mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-small{padding:0 8px;font-size:85%;height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.imaged{padding-left:0}.fs-chip.size-small fs-chip-action{margin-right:2px}.fs-chip.size-small .selected-check{margin:0 2px 0 0}.fs-chip.size-small .selected-check mat-icon{transform:scale(.7)}.fs-chip.size-small.actionable,.fs-chip.size-small.selected{padding-right:0}.fs-chip.size-small mat-icon{height:22px;width:22px;font-size:22px}\n"] }]
+        }], ctorParameters: () => [{ type: FsChipsComponent, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { templateRef: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }], selectable: [{
+                type: Input
+            }], removable: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], backgroundColor: [{
+                type: Input
+            }], borderColor: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], outlined: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], setSelected: [{
+                type: Input,
+                args: ['selected']
+            }], selectedToggled: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }], setSize: [{
+                type: Input,
+                args: ['size']
             }] } });
 
 class FsChipModule {
     static forRoot() {
         return {
-            ngModule: FsChipModule
+            ngModule: FsChipModule,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, declarations: [FsChipsComponent,
-            FsChipComponent], imports: [CommonModule,
+            FsChipComponent,
+            FsChipActionComponent], imports: [CommonModule,
+            DragDropModule,
             MatIconModule,
             FsLabelModule], exports: [FsChipsComponent,
             FsChipComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, imports: [CommonModule,
+            DragDropModule,
             MatIconModule,
             FsLabelModule] });
 }
@@ -381,8 +386,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     imports: [
                         CommonModule,
+                        DragDropModule,
                         MatIconModule,
-                        FsLabelModule
+                        FsLabelModule,
                     ],
                     exports: [
                         FsChipsComponent,
@@ -391,7 +397,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     declarations: [
                         FsChipsComponent,
                         FsChipComponent,
-                    ]
+                        FsChipActionComponent,
+                    ],
                 }]
         }] });