@firestitch/chip 13.0.0 → 13.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -142,10 +142,10 @@ export class FsChipComponent {
|
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
FsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FsChipsService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
-
FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipComponent, selector: "fs-chip", inputs: { setSize: ["size", "setSize"], value: "value", icon: "icon", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", removable: "removable", selectable: "selectable", selected: "selected", image: "image" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this._selectable", "class.imaged": "this._image", "class.selected": "this._selected", "class.removable": "this._removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.small": "this.classSmall", "class.tiny": "this.classTiny", "class.micro": "this.classMicro", "class.iconed": "this.icon" } }, 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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.
|
|
145
|
+
FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipComponent, selector: "fs-chip", inputs: { setSize: ["size", "setSize"], value: "value", icon: "icon", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", removable: "removable", selectable: "selectable", selected: "selected", image: "image" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this._selectable", "class.imaged": "this._image", "class.selected": "this._selected", "class.removable": "this._removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.small": "this.classSmall", "class.tiny": "this.classTiny", "class.micro": "this.classMicro", "class.iconed": "this.icon" } }, 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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.micro{padding:0 5px;height:16px;line-height:normal}:host.micro .fs-chip-content{font-size:65%}:host.micro .image{height:100%;width:16px;margin-right:2px}:host.micro .remove{margin-left:1px}:host.micro .selected-check{margin:0 1px 0 0}:host.micro.imaged{padding-left:0}:host.micro.removable,:host.micro.selected{padding-right:0}:host.micro mat-icon{width:12px;height:12px;font-size:11px}:host.tiny{padding:0 6px;height:18px;line-height:normal}:host.tiny .fs-chip-content{font-size:75%}:host.tiny .image{height:18px;width:18px;margin-right:3px}:host.tiny.iconed:not(.imaged){padding-left:3px}:host.tiny .remove{margin-left:2px}:host.tiny .selected-check{margin:0 1px 0 0}:host.tiny.imaged{padding-left:0}:host.tiny.removable,:host.tiny.selected{padding-right:0}:host.tiny mat-icon{height:15px;width:15px;font-size:15px}:host.small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.small .image{height:25px;width:25px;margin-right:5px}:host.small.iconed:not(.imaged){padding-left:4px}:host.small.imaged{padding-left:0}:host.small .remove{margin-left:3px}:host.small .selected-check{margin:0 2px 0 0}:host.small .selected-check mat-icon{transform:scale(.7)}:host.small.removable,:host.small.selected{padding-right:0}:host.small mat-icon{height:22px;width:22px;font-size:20px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
146
146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
147
147
|
type: Component,
|
|
148
|
-
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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.
|
|
148
|
+
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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.micro{padding:0 5px;height:16px;line-height:normal}:host.micro .fs-chip-content{font-size:65%}:host.micro .image{height:100%;width:16px;margin-right:2px}:host.micro .remove{margin-left:1px}:host.micro .selected-check{margin:0 1px 0 0}:host.micro.imaged{padding-left:0}:host.micro.removable,:host.micro.selected{padding-right:0}:host.micro mat-icon{width:12px;height:12px;font-size:11px}:host.tiny{padding:0 6px;height:18px;line-height:normal}:host.tiny .fs-chip-content{font-size:75%}:host.tiny .image{height:18px;width:18px;margin-right:3px}:host.tiny.iconed:not(.imaged){padding-left:3px}:host.tiny .remove{margin-left:2px}:host.tiny .selected-check{margin:0 1px 0 0}:host.tiny.imaged{padding-left:0}:host.tiny.removable,:host.tiny.selected{padding-right:0}:host.tiny mat-icon{height:15px;width:15px;font-size:15px}:host.small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.small .image{height:25px;width:25px;margin-right:5px}:host.small.iconed:not(.imaged){padding-left:4px}:host.small.imaged{padding-left:0}:host.small .remove{margin-left:3px}:host.small .selected-check{margin:0 2px 0 0}:host.small .selected-check mat-icon{transform:scale(.7)}:host.small.removable,:host.small.selected{padding-right:0}:host.small mat-icon{height:22px;width:22px;font-size:20px}\n"] }]
|
|
149
149
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.FsChipsService, decorators: [{
|
|
150
150
|
type: Optional
|
|
151
151
|
}] }]; }, propDecorators: { fsChip: [{
|
|
@@ -314,10 +314,10 @@ class FsChipComponent {
|
|
|
314
314
|
}
|
|
315
315
|
}
|
|
316
316
|
FsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FsChipsService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
-
FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipComponent, selector: "fs-chip", inputs: { setSize: ["size", "setSize"], value: "value", icon: "icon", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", removable: "removable", selectable: "selectable", selected: "selected", image: "image" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this._selectable", "class.imaged": "this._image", "class.selected": "this._selected", "class.removable": "this._removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.small": "this.classSmall", "class.tiny": "this.classTiny", "class.micro": "this.classMicro", "class.iconed": "this.icon" } }, 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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.
|
|
317
|
+
FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipComponent, selector: "fs-chip", inputs: { setSize: ["size", "setSize"], value: "value", icon: "icon", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", removable: "removable", selectable: "selectable", selected: "selected", image: "image" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this._selectable", "class.imaged": "this._image", "class.selected": "this._selected", "class.removable": "this._removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.small": "this.classSmall", "class.tiny": "this.classTiny", "class.micro": "this.classMicro", "class.iconed": "this.icon" } }, 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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.micro{padding:0 5px;height:16px;line-height:normal}:host.micro .fs-chip-content{font-size:65%}:host.micro .image{height:100%;width:16px;margin-right:2px}:host.micro .remove{margin-left:1px}:host.micro .selected-check{margin:0 1px 0 0}:host.micro.imaged{padding-left:0}:host.micro.removable,:host.micro.selected{padding-right:0}:host.micro mat-icon{width:12px;height:12px;font-size:11px}:host.tiny{padding:0 6px;height:18px;line-height:normal}:host.tiny .fs-chip-content{font-size:75%}:host.tiny .image{height:18px;width:18px;margin-right:3px}:host.tiny.iconed:not(.imaged){padding-left:3px}:host.tiny .remove{margin-left:2px}:host.tiny .selected-check{margin:0 1px 0 0}:host.tiny.imaged{padding-left:0}:host.tiny.removable,:host.tiny.selected{padding-right:0}:host.tiny mat-icon{height:15px;width:15px;font-size:15px}:host.small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.small .image{height:25px;width:25px;margin-right:5px}:host.small.iconed:not(.imaged){padding-left:4px}:host.small.imaged{padding-left:0}:host.small .remove{margin-left:3px}:host.small .selected-check{margin:0 2px 0 0}:host.small .selected-check mat-icon{transform:scale(.7)}:host.small.removable,:host.small.selected{padding-right:0}:host.small mat-icon{height:22px;width:22px;font-size:20px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
318
318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
319
319
|
type: Component,
|
|
320
|
-
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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.
|
|
320
|
+
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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.micro{padding:0 5px;height:16px;line-height:normal}:host.micro .fs-chip-content{font-size:65%}:host.micro .image{height:100%;width:16px;margin-right:2px}:host.micro .remove{margin-left:1px}:host.micro .selected-check{margin:0 1px 0 0}:host.micro.imaged{padding-left:0}:host.micro.removable,:host.micro.selected{padding-right:0}:host.micro mat-icon{width:12px;height:12px;font-size:11px}:host.tiny{padding:0 6px;height:18px;line-height:normal}:host.tiny .fs-chip-content{font-size:75%}:host.tiny .image{height:18px;width:18px;margin-right:3px}:host.tiny.iconed:not(.imaged){padding-left:3px}:host.tiny .remove{margin-left:2px}:host.tiny .selected-check{margin:0 1px 0 0}:host.tiny.imaged{padding-left:0}:host.tiny.removable,:host.tiny.selected{padding-right:0}:host.tiny mat-icon{height:15px;width:15px;font-size:15px}:host.small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.small .image{height:25px;width:25px;margin-right:5px}:host.small.iconed:not(.imaged){padding-left:4px}:host.small.imaged{padding-left:0}:host.small .remove{margin-left:3px}:host.small .selected-check{margin:0 2px 0 0}:host.small .selected-check mat-icon{transform:scale(.7)}:host.small.removable,:host.small.selected{padding-right:0}:host.small mat-icon{height:22px;width:22px;font-size:20px}\n"] }]
|
|
321
321
|
}], ctorParameters: function () {
|
|
322
322
|
return [{ type: i0.ChangeDetectorRef }, { type: FsChipsService, decorators: [{
|
|
323
323
|
type: Optional
|
|
@@ -314,10 +314,10 @@ class FsChipComponent {
|
|
|
314
314
|
}
|
|
315
315
|
}
|
|
316
316
|
FsChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FsChipsService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
-
FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipComponent, selector: "fs-chip", inputs: { setSize: ["size", "setSize"], value: "value", icon: "icon", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", removable: "removable", selectable: "selectable", selected: "selected", image: "image" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this._selectable", "class.imaged": "this._image", "class.selected": "this._selected", "class.removable": "this._removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.small": "this.classSmall", "class.tiny": "this.classTiny", "class.micro": "this.classMicro", "class.iconed": "this.icon" } }, 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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.
|
|
317
|
+
FsChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsChipComponent, selector: "fs-chip", inputs: { setSize: ["size", "setSize"], value: "value", icon: "icon", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", removable: "removable", selectable: "selectable", selected: "selected", image: "image" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, host: { listeners: { "click": "click()" }, properties: { "class.fs-chip": "this.fsChip", "class.outlined": "this._outlined", "class.selectable": "this._selectable", "class.imaged": "this._image", "class.selected": "this._selected", "class.removable": "this._removable", "style.backgroundColor": "this.styleBackgroundColor", "style.color": "this.styleColor", "style.borderColor": "this.styleBorderColor", "class.small": "this.classSmall", "class.tiny": "this.classTiny", "class.micro": "this.classMicro", "class.iconed": "this.icon" } }, 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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.micro{padding:0 5px;height:16px;line-height:normal}:host.micro .fs-chip-content{font-size:65%}:host.micro .image{height:100%;width:16px;margin-right:2px}:host.micro .remove{margin-left:1px}:host.micro .selected-check{margin:0 1px 0 0}:host.micro.imaged{padding-left:0}:host.micro.removable,:host.micro.selected{padding-right:0}:host.micro mat-icon{width:12px;height:12px;font-size:11px}:host.tiny{padding:0 6px;height:18px;line-height:normal}:host.tiny .fs-chip-content{font-size:75%}:host.tiny .image{height:18px;width:18px;margin-right:3px}:host.tiny.iconed:not(.imaged){padding-left:3px}:host.tiny .remove{margin-left:2px}:host.tiny .selected-check{margin:0 1px 0 0}:host.tiny.imaged{padding-left:0}:host.tiny.removable,:host.tiny.selected{padding-right:0}:host.tiny mat-icon{height:15px;width:15px;font-size:15px}:host.small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.small .image{height:25px;width:25px;margin-right:5px}:host.small.iconed:not(.imaged){padding-left:4px}:host.small.imaged{padding-left:0}:host.small .remove{margin-left:3px}:host.small .selected-check{margin:0 2px 0 0}:host.small .selected-check mat-icon{transform:scale(.7)}:host.small.removable,:host.small.selected{padding-right:0}:host.small mat-icon{height:22px;width:22px;font-size:20px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
318
318
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
319
319
|
type: Component,
|
|
320
|
-
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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.
|
|
320
|
+
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<div class=\"selected-check\" *ngIf=\"selected\">\n <mat-icon [style.color]=\"styleColor\">check</mat-icon>\n</div>\n<a *ngIf=\"removable\" class=\"remove\" (click)=\"remove($event)\">\n <mat-icon [style.color]=\"styleColor\">cancel</mat-icon>\n</a>\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}: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 .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.micro{padding:0 5px;height:16px;line-height:normal}:host.micro .fs-chip-content{font-size:65%}:host.micro .image{height:100%;width:16px;margin-right:2px}:host.micro .remove{margin-left:1px}:host.micro .selected-check{margin:0 1px 0 0}:host.micro.imaged{padding-left:0}:host.micro.removable,:host.micro.selected{padding-right:0}:host.micro mat-icon{width:12px;height:12px;font-size:11px}:host.tiny{padding:0 6px;height:18px;line-height:normal}:host.tiny .fs-chip-content{font-size:75%}:host.tiny .image{height:18px;width:18px;margin-right:3px}:host.tiny.iconed:not(.imaged){padding-left:3px}:host.tiny .remove{margin-left:2px}:host.tiny .selected-check{margin:0 1px 0 0}:host.tiny.imaged{padding-left:0}:host.tiny.removable,:host.tiny.selected{padding-right:0}:host.tiny mat-icon{height:15px;width:15px;font-size:15px}:host.small{padding:0 8px;font-size:85%;height:25px;line-height:normal}:host.small .image{height:25px;width:25px;margin-right:5px}:host.small.iconed:not(.imaged){padding-left:4px}:host.small.imaged{padding-left:0}:host.small .remove{margin-left:3px}:host.small .selected-check{margin:0 2px 0 0}:host.small .selected-check mat-icon{transform:scale(.7)}:host.small.removable,:host.small.selected{padding-right:0}:host.small mat-icon{height:22px;width:22px;font-size:20px}\n"] }]
|
|
321
321
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: FsChipsService, decorators: [{
|
|
322
322
|
type: Optional
|
|
323
323
|
}] }]; }, propDecorators: { fsChip: [{
|