added @input actions

package.json

@@ -2,7 +2,7 @@
   "name": "@firestitch/chip",
   "title": "Chip",
   "description": "@firestitch/chip",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/Firestitch/ngx-chip"

playground/app/components/example/example.component.html

@@ -15,6 +15,11 @@
     <mat-checkbox [(ngModel)]="removable" (ngModelChange)="removedChanged()"></mat-checkbox>
   </fs-label-field>
 
+  <fs-label-field>
+    <fs-label>Show Actions</fs-label>
+    <mat-checkbox [(ngModel)]="actionable" (ngModelChange)="actionsChanged()"></mat-checkbox>
+  </fs-label-field>
+
   <fs-label-field>
     <fs-label>Show Selected</fs-label>
     <mat-checkbox [(ngModel)]="selected" (ngModelChange)="selectedChanged()"></mat-checkbox>
@@ -62,6 +67,7 @@
     [outlined]="outlined"
     [icon]="showIcon ? 'settings' : null"
     [size]="size"
+    [actions]="actions"
     (removed)="chipRemoved($event)">
     Tag A
   </fs-chip>

playground/app/components/example/example.component.ts

@@ -14,6 +14,7 @@ export class ExampleComponent {
   public showImage;
   public showIcon;
   public removable;
+  public actionable = false;
   public size;
   public outlined = false;
   public selected = false;
@@ -23,6 +24,7 @@ export class ExampleComponent {
   public icon;
   public config: any = {};
   public mm = [1, 2, 3];
+  public actions = [];
 
   constructor(
     private _message: FsMessage,
@@ -37,6 +39,19 @@ export class ExampleComponent {
     this._message.success(`Chip ${   e.selected ? 'Selected' : 'Unselected'}`);
   }
 
+  public actionsChanged() {
+    this.actions = this.actionable ? 
+      [
+        {
+          icon: 'help',
+          click: () => {
+            this._message.success('Action clicked');
+          },
+        },
+      ]
+      : [];
+  }
+
   public removedChanged() {
     if (this.removable) {
       this.selectable = false;

src/app/components/chip/chip.component.html

@@ -1,4 +1,6 @@
-<img *ngIf="image" [src]="image" class="image" alt="">
+<ng-container *ngIf="image">
+  <img [src]="image" class="image" alt="">
+</ng-container>
 <ng-container *ngIf="icon">
   <mat-icon class="icon">{{icon}}</mat-icon>
 </ng-container>
@@ -10,6 +12,11 @@
     <mat-icon [style.color]="styleColor">check</mat-icon>
   </div>
 </ng-container>
-<div *ngIf="removed.observers.length && removable" class="remove" (click)="remove($event)">
-  <mat-icon [style.color]="styleColor">remove_circle_outline</mat-icon>
-</div>
+@for (action of actions; track action.icon) {
+  <mat-icon   
+      [style.color]="styleColor" 
+      class="action"
+      (click)="action.click($event)">
+    {{action.icon}}
+  </mat-icon>
+}

src/app/components/chip/chip.component.scss

@@ -24,7 +24,7 @@
     padding-left: 5px;
   }
 
-  &.removable,
+  &.actionable,
   &.selected {
     padding-right: 3px;
   }
@@ -68,7 +68,7 @@
     display: flex;
   }
 
-  .remove {
+  .action {
     display: flex;
     margin-left: 5px;
     cursor: pointer;
@@ -89,7 +89,7 @@
       margin-right: 2px;
     }
 
-    .remove {
+    .action {
       margin-left: 1px;
     }
 
@@ -101,7 +101,7 @@
       padding-left: 0;
     }
 
-    &.removable,
+    &.actionable,
     &.selected {
       padding-right: 0px;
     }
@@ -132,12 +132,11 @@
       padding-left: 3px;
     }
 
-    .remove {
+    .action {
       margin-left: 2px;
       margin-right: 2px;
     }
 
-
     .selected-check {
       margin: 0 1px 0 0;
     }
@@ -146,7 +145,7 @@
       padding-left: 0;
     }
 
-    &.removable,
+    &.actionable,
     &.selected {
       padding-right: 0px;
     }
@@ -178,7 +177,7 @@
       padding-left: 0;
     }
 
-    .remove {
+    .action {
       margin-right: 2px;
     }
 
@@ -189,7 +188,7 @@
       }
     }
 
-    &.removable,
+    &.actionable,
     &.selected {
       padding-right: 0;
     }

src/app/components/chip/chip.component.ts

@@ -5,8 +5,8 @@ import {
   HostBinding,
   HostListener,
   Input,
+  OnChanges,
   OnDestroy,
-  OnInit,
   Output,
 } from '@angular/core';
 
@@ -19,7 +19,7 @@ import { Observable, Subject } from 'rxjs';
   styleUrls: ['./chip.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FsChipComponent implements OnInit, OnDestroy {
+export class FsChipComponent implements OnDestroy, OnChanges {
 
   @HostBinding('class.fs-chip') 
   public fsChip = true;
@@ -30,11 +30,15 @@ export class FsChipComponent implements OnInit, OnDestroy {
   @Input()
   @HostBinding('class.selectable') 
   public selectable = false;
-  
+
   @Input()
   @HostBinding('class.removable') 
   public removable = true;
 
+  @Input()
+  @HostBinding('class.actionable') 
+  public actionable = true;
+
   @HostBinding('style.backgroundColor') 
   public styleBackgroundColor = '';
 
@@ -54,6 +58,12 @@ export class FsChipComponent implements OnInit, OnDestroy {
   public classMicro = false;
 
   @Input() public value;
+
+  @Input() public actions: {
+    icon: string, 
+    click: (event: MouseEvent) => void, 
+    type?: 'remove' 
+  }[] = [];
 
   @Input() 
   @HostBinding('class.iconed') 
@@ -127,10 +137,19 @@ export class FsChipComponent implements OnInit, OnDestroy {
     this._cdRef.markForCheck();
   }
 
-  public ngOnInit() {
-    if(this.removed.observers.length === 0) {
-      this.removable = false;
+  public 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;
   }
 
   public ngOnDestroy() {