@firestitch/chip 18.0.32 → 18.0.34
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.
- package/app/components/chip/chip.component.d.ts +3 -1
- package/app/components/chip-prefix/chip-prefix.component.d.ts +12 -0
- package/app/directives/chip-prefix.directive.d.ts +14 -0
- package/app/directives/chip-suffix.directive.d.ts +1 -2
- package/app/fs-chip.module.d.ts +10 -8
- package/esm2022/app/components/chip/chip.component.mjs +9 -3
- package/esm2022/app/components/chip-prefix/chip-prefix.component.mjs +32 -0
- package/esm2022/app/components/chips/chips.component.mjs +31 -16
- package/esm2022/app/directives/chip-prefix.directive.mjs +27 -0
- package/esm2022/app/directives/chip-suffix.directive.mjs +2 -5
- package/esm2022/app/fs-chip.module.mjs +9 -1
- package/esm2022/public_api.mjs +2 -1
- package/fesm2022/firestitch-chip.mjs +102 -27
- package/fesm2022/firestitch-chip.mjs.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +1 -0
|
@@ -4,9 +4,11 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
|
4
4
|
import { MatIconModule } from '@angular/material/icon';
|
|
5
5
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
6
6
|
import { FsLabelModule } from '@firestitch/label';
|
|
7
|
+
import { FsChipPrefixComponent } from './components/chip-prefix/chip-prefix.component';
|
|
7
8
|
import { FsChipSuffixComponent } from './components/chip-suffix/chip-suffix.component';
|
|
8
9
|
import { FsChipComponent } from './components/chip/chip.component';
|
|
9
10
|
import { FsChipsComponent } from './components/chips/chips.component';
|
|
11
|
+
import { FsChipPrefixDirective } from './directives/chip-prefix.directive';
|
|
10
12
|
import { FsChipSubcontentDirective } from './directives/chip-subcontent.directive';
|
|
11
13
|
import { FsChipSuffixDirective } from './directives/chip-suffix.directive';
|
|
12
14
|
import * as i0 from "@angular/core";
|
|
@@ -20,6 +22,8 @@ export class FsChipModule {
|
|
|
20
22
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, declarations: [FsChipsComponent,
|
|
21
23
|
FsChipComponent,
|
|
22
24
|
FsChipSuffixComponent,
|
|
25
|
+
FsChipPrefixComponent,
|
|
26
|
+
FsChipPrefixDirective,
|
|
23
27
|
FsChipSuffixDirective,
|
|
24
28
|
FsChipSubcontentDirective], imports: [CommonModule,
|
|
25
29
|
DragDropModule,
|
|
@@ -28,6 +32,7 @@ export class FsChipModule {
|
|
|
28
32
|
FsLabelModule], exports: [FsChipsComponent,
|
|
29
33
|
FsChipComponent,
|
|
30
34
|
FsChipSuffixDirective,
|
|
35
|
+
FsChipPrefixDirective,
|
|
31
36
|
FsChipSubcontentDirective] });
|
|
32
37
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, imports: [CommonModule,
|
|
33
38
|
DragDropModule,
|
|
@@ -49,15 +54,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
49
54
|
FsChipsComponent,
|
|
50
55
|
FsChipComponent,
|
|
51
56
|
FsChipSuffixDirective,
|
|
57
|
+
FsChipPrefixDirective,
|
|
52
58
|
FsChipSubcontentDirective,
|
|
53
59
|
],
|
|
54
60
|
declarations: [
|
|
55
61
|
FsChipsComponent,
|
|
56
62
|
FsChipComponent,
|
|
57
63
|
FsChipSuffixComponent,
|
|
64
|
+
FsChipPrefixComponent,
|
|
65
|
+
FsChipPrefixDirective,
|
|
58
66
|
FsChipSuffixDirective,
|
|
59
67
|
FsChipSubcontentDirective,
|
|
60
68
|
],
|
|
61
69
|
}]
|
|
62
70
|
}] });
|
|
63
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
71
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnMtY2hpcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2ZzLWNoaXAubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQXVCLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU5RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBRTdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUVsRCxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUN2RixPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxnREFBZ0QsQ0FBQztBQUN2RixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDbkUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDdEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDM0UsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDbkYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sb0NBQW9DLENBQUM7O0FBNkIzRSxNQUFNLE9BQU8sWUFBWTtJQUNoQixNQUFNLENBQUMsT0FBTztRQUNuQixPQUFPO1lBQ0wsUUFBUSxFQUFFLFlBQVk7U0FDdkIsQ0FBQztJQUNKLENBQUM7dUdBTFUsWUFBWTt3R0FBWixZQUFZLGlCQVRyQixnQkFBZ0I7WUFDaEIsZUFBZTtZQUNmLHFCQUFxQjtZQUNyQixxQkFBcUI7WUFDckIscUJBQXFCO1lBQ3JCLHFCQUFxQjtZQUNyQix5QkFBeUIsYUF0QnpCLFlBQVk7WUFFWixjQUFjO1lBQ2QsYUFBYTtZQUNiLGdCQUFnQjtZQUVoQixhQUFhLGFBR2IsZ0JBQWdCO1lBQ2hCLGVBQWU7WUFDZixxQkFBcUI7WUFDckIscUJBQXFCO1lBQ3JCLHlCQUF5Qjt3R0FZaEIsWUFBWSxZQXpCckIsWUFBWTtZQUVaLGNBQWM7WUFDZCxhQUFhO1lBQ2IsZ0JBQWdCO1lBRWhCLGFBQWE7OzJGQW1CSixZQUFZO2tCQTNCeEIsUUFBUTttQkFBQztvQkFDUixPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFFWixjQUFjO3dCQUNkLGFBQWE7d0JBQ2IsZ0JBQWdCO3dCQUVoQixhQUFhO3FCQUNkO29CQUNELE9BQU8sRUFBRTt3QkFDUCxnQkFBZ0I7d0JBQ2hCLGVBQWU7d0JBQ2YscUJBQXFCO3dCQUNyQixxQkFBcUI7d0JBQ3JCLHlCQUF5QjtxQkFDMUI7b0JBQ0QsWUFBWSxFQUFFO3dCQUNaLGdCQUFnQjt3QkFDaEIsZUFBZTt3QkFDZixxQkFBcUI7d0JBQ3JCLHFCQUFxQjt3QkFDckIscUJBQXFCO3dCQUNyQixxQkFBcUI7d0JBQ3JCLHlCQUF5QjtxQkFDMUI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgTW9kdWxlV2l0aFByb3ZpZGVycywgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgRHJhZ0Ryb3BNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcbmltcG9ydCB7IE1hdFRvb2x0aXBNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC90b29sdGlwJztcblxuaW1wb3J0IHsgRnNMYWJlbE1vZHVsZSB9IGZyb20gJ0BmaXJlc3RpdGNoL2xhYmVsJztcblxuaW1wb3J0IHsgRnNDaGlwUHJlZml4Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NoaXAtcHJlZml4L2NoaXAtcHJlZml4LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBGc0NoaXBTdWZmaXhDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvY2hpcC1zdWZmaXgvY2hpcC1zdWZmaXguY29tcG9uZW50JztcbmltcG9ydCB7IEZzQ2hpcENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jaGlwL2NoaXAuY29tcG9uZW50JztcbmltcG9ydCB7IEZzQ2hpcHNDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvY2hpcHMvY2hpcHMuY29tcG9uZW50JztcbmltcG9ydCB7IEZzQ2hpcFByZWZpeERpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9jaGlwLXByZWZpeC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgRnNDaGlwU3ViY29udGVudERpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9jaGlwLXN1YmNvbnRlbnQuZGlyZWN0aXZlJztcbmltcG9ydCB7IEZzQ2hpcFN1ZmZpeERpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9jaGlwLXN1ZmZpeC5kaXJlY3RpdmUnO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuXG4gICAgRHJhZ0Ryb3BNb2R1bGUsXG4gICAgTWF0SWNvbk1vZHVsZSxcbiAgICBNYXRUb29sdGlwTW9kdWxlLFxuXG4gICAgRnNMYWJlbE1vZHVsZSxcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIEZzQ2hpcHNDb21wb25lbnQsXG4gICAgRnNDaGlwQ29tcG9uZW50LFxuICAgIEZzQ2hpcFN1ZmZpeERpcmVjdGl2ZSxcbiAgICBGc0NoaXBQcmVmaXhEaXJlY3RpdmUsXG4gICAgRnNDaGlwU3ViY29udGVudERpcmVjdGl2ZSxcbiAgXSxcbiAgZGVjbGFyYXRpb25zOiBbXG4gICAgRnNDaGlwc0NvbXBvbmVudCxcbiAgICBGc0NoaXBDb21wb25lbnQsXG4gICAgRnNDaGlwU3VmZml4Q29tcG9uZW50LFxuICAgIEZzQ2hpcFByZWZpeENvbXBvbmVudCxcbiAgICBGc0NoaXBQcmVmaXhEaXJlY3RpdmUsXG4gICAgRnNDaGlwU3VmZml4RGlyZWN0aXZlLFxuICAgIEZzQ2hpcFN1YmNvbnRlbnREaXJlY3RpdmUsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEZzQ2hpcE1vZHVsZSB7XG4gIHB1YmxpYyBzdGF0aWMgZm9yUm9vdCgpOiBNb2R1bGVXaXRoUHJvdmlkZXJzPEZzQ2hpcE1vZHVsZT4ge1xuICAgIHJldHVybiB7XG4gICAgICBuZ01vZHVsZTogRnNDaGlwTW9kdWxlLFxuICAgIH07XG4gIH1cbn1cbiJdfQ==
|
package/esm2022/public_api.mjs
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export { FsChipModule } from './app/fs-chip.module';
|
|
2
2
|
export { FsChipComponent } from './app/components/chip/chip.component';
|
|
3
3
|
export { FsChipsComponent } from './app/components/chips/chips.component';
|
|
4
|
+
export { FsChipPrefixDirective } from './app/directives/chip-prefix.directive';
|
|
4
5
|
export { FsChipSubcontentDirective } from './app/directives/chip-subcontent.directive';
|
|
5
6
|
export { FsChipSuffixDirective } from './app/directives/chip-suffix.directive';
|
|
6
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
7
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUVwRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFFMUUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDL0UsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDdkYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sd0NBQXdDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBGc0NoaXBNb2R1bGUgfSBmcm9tICcuL2FwcC9mcy1jaGlwLm1vZHVsZSc7XG5cbmV4cG9ydCB7IEZzQ2hpcENvbXBvbmVudCB9IGZyb20gJy4vYXBwL2NvbXBvbmVudHMvY2hpcC9jaGlwLmNvbXBvbmVudCc7XG5leHBvcnQgeyBGc0NoaXBzQ29tcG9uZW50IH0gZnJvbSAnLi9hcHAvY29tcG9uZW50cy9jaGlwcy9jaGlwcy5jb21wb25lbnQnO1xuXG5leHBvcnQgeyBGc0NoaXBQcmVmaXhEaXJlY3RpdmUgfSBmcm9tICcuL2FwcC9kaXJlY3RpdmVzL2NoaXAtcHJlZml4LmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBGc0NoaXBTdWJjb250ZW50RGlyZWN0aXZlIH0gZnJvbSAnLi9hcHAvZGlyZWN0aXZlcy9jaGlwLXN1YmNvbnRlbnQuZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzQ2hpcFN1ZmZpeERpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvY2hpcC1zdWZmaXguZGlyZWN0aXZlJztcblxuIl19
|
|
@@ -1,18 +1,46 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output,
|
|
5
|
-
import * as i2$
|
|
4
|
+
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, inject, TemplateRef, Directive, ViewChild, ContentChildren, ContentChild, forwardRef, NgModule } from '@angular/core';
|
|
5
|
+
import * as i2$2 from '@angular/cdk/drag-drop';
|
|
6
6
|
import { moveItemInArray, CdkDropList, DragDropModule } from '@angular/cdk/drag-drop';
|
|
7
7
|
import * as i2 from '@angular/material/icon';
|
|
8
8
|
import { MatIconModule } from '@angular/material/icon';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i2$1 from '@angular/material/tooltip';
|
|
10
10
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
11
11
|
import { FsLabelModule } from '@firestitch/label';
|
|
12
12
|
import { Subject } from 'rxjs';
|
|
13
13
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
14
14
|
import { takeUntil } from 'rxjs/operators';
|
|
15
15
|
|
|
16
|
+
class FsChipPrefixComponent {
|
|
17
|
+
icon;
|
|
18
|
+
color;
|
|
19
|
+
show = true;
|
|
20
|
+
tooltip;
|
|
21
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
22
|
+
click = new EventEmitter();
|
|
23
|
+
get clickable() {
|
|
24
|
+
return this.click.observers.length !== 0;
|
|
25
|
+
}
|
|
26
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipPrefixComponent, selector: "fs-chip-prefix", inputs: { icon: "icon", color: "color", show: "show", tooltip: "tooltip" }, outputs: { click: "click" }, ngImport: i0, template: "<ng-content></ng-content>\n@if (icon) {\n <mat-icon\n [class.clickable]=\"clickable\"\n cdkHighlight\n [style.color]=\"color\"\n [matTooltip]=\"tooltip\"\n class=\"action\"\n (click)=\"click.emit($event)\">\n {{ icon }}\n </mat-icon>\n}", styles: [":host{display:flex}.clickable{cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28
|
+
}
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipPrefixComponent, decorators: [{
|
|
30
|
+
type: Component,
|
|
31
|
+
args: [{ selector: 'fs-chip-prefix', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n@if (icon) {\n <mat-icon\n [class.clickable]=\"clickable\"\n cdkHighlight\n [style.color]=\"color\"\n [matTooltip]=\"tooltip\"\n class=\"action\"\n (click)=\"click.emit($event)\">\n {{ icon }}\n </mat-icon>\n}", styles: [":host{display:flex}.clickable{cursor:pointer}\n"] }]
|
|
32
|
+
}], propDecorators: { icon: [{
|
|
33
|
+
type: Input
|
|
34
|
+
}], color: [{
|
|
35
|
+
type: Input
|
|
36
|
+
}], show: [{
|
|
37
|
+
type: Input
|
|
38
|
+
}], tooltip: [{
|
|
39
|
+
type: Input
|
|
40
|
+
}], click: [{
|
|
41
|
+
type: Output
|
|
42
|
+
}] } });
|
|
43
|
+
|
|
16
44
|
class FsChipSuffixComponent {
|
|
17
45
|
icon;
|
|
18
46
|
link;
|
|
@@ -22,7 +50,7 @@ class FsChipSuffixComponent {
|
|
|
22
50
|
tooltip;
|
|
23
51
|
click = new EventEmitter();
|
|
24
52
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
25
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipSuffixComponent, selector: "fs-chip-suffix", inputs: { icon: "icon", link: "link", linkTarget: "linkTarget", color: "color", show: "show", tooltip: "tooltip" }, outputs: { click: "click" }, ngImport: i0, template: "@if (show) {\n @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 <ng-content></ng-content>\n @if (icon) {\n <mat-icon\n cdkHighlight\n [style.color]=\"color\"\n [matTooltip]=\"tooltip\"\n class=\"action\"\n (click)=\"click.emit($event)\">\n {{ icon }}\n </mat-icon>\n }\n </ng-template>\n}", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipSuffixComponent, selector: "fs-chip-suffix", inputs: { icon: "icon", link: "link", linkTarget: "linkTarget", color: "color", show: "show", tooltip: "tooltip" }, outputs: { click: "click" }, ngImport: i0, template: "@if (show) {\n @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 <ng-content></ng-content>\n @if (icon) {\n <mat-icon\n cdkHighlight\n [style.color]=\"color\"\n [matTooltip]=\"tooltip\"\n class=\"action\"\n (click)=\"click.emit($event)\">\n {{ icon }}\n </mat-icon>\n }\n </ng-template>\n}", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i2$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26
54
|
}
|
|
27
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, decorators: [{
|
|
28
56
|
type: Component,
|
|
@@ -43,6 +71,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
43
71
|
type: Output
|
|
44
72
|
}] } });
|
|
45
73
|
|
|
74
|
+
class FsChipPrefixDirective {
|
|
75
|
+
icon;
|
|
76
|
+
color;
|
|
77
|
+
data;
|
|
78
|
+
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
79
|
+
click = new EventEmitter();
|
|
80
|
+
templateRef = inject(TemplateRef);
|
|
81
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
82
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipPrefixDirective, selector: "[fsChipPrefix]", inputs: { icon: "icon", color: "color", data: "data" }, outputs: { click: "click" }, ngImport: i0 });
|
|
83
|
+
}
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipPrefixDirective, decorators: [{
|
|
85
|
+
type: Directive,
|
|
86
|
+
args: [{
|
|
87
|
+
selector: '[fsChipPrefix]',
|
|
88
|
+
}]
|
|
89
|
+
}], propDecorators: { icon: [{
|
|
90
|
+
type: Input
|
|
91
|
+
}], color: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], data: [{
|
|
94
|
+
type: Input
|
|
95
|
+
}], click: [{
|
|
96
|
+
type: Output
|
|
97
|
+
}] } });
|
|
98
|
+
|
|
46
99
|
class FsChipSubcontentDirective {
|
|
47
100
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSubcontentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
48
101
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSubcontentDirective, selector: "[fsChipSubcontent]", ngImport: i0 });
|
|
@@ -60,13 +113,12 @@ class FsChipSuffixDirective {
|
|
|
60
113
|
linkTarget;
|
|
61
114
|
color;
|
|
62
115
|
data;
|
|
63
|
-
show = true;
|
|
64
116
|
tooltip;
|
|
65
117
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
66
118
|
click = new EventEmitter();
|
|
67
119
|
templateRef = inject(TemplateRef);
|
|
68
120
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
69
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: { icon: "icon", link: "link", linkTarget: "linkTarget", color: "color", data: "data",
|
|
121
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSuffixDirective, selector: "[fsChipSuffix]", inputs: { icon: "icon", link: "link", linkTarget: "linkTarget", color: "color", data: "data", tooltip: "tooltip" }, outputs: { click: "click" }, ngImport: i0 });
|
|
70
122
|
}
|
|
71
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixDirective, decorators: [{
|
|
72
124
|
type: Directive,
|
|
@@ -83,8 +135,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
83
135
|
type: Input
|
|
84
136
|
}], data: [{
|
|
85
137
|
type: Input
|
|
86
|
-
}], show: [{
|
|
87
|
-
type: Input
|
|
88
138
|
}], tooltip: [{
|
|
89
139
|
type: Input
|
|
90
140
|
}], click: [{
|
|
@@ -95,6 +145,7 @@ class FsChipComponent {
|
|
|
95
145
|
_cdRef;
|
|
96
146
|
templateRef;
|
|
97
147
|
chipSuffixes;
|
|
148
|
+
chipPrefixes;
|
|
98
149
|
chipSubcontentTemplateRef;
|
|
99
150
|
selectable = false;
|
|
100
151
|
removable = true;
|
|
@@ -178,17 +229,20 @@ class FsChipComponent {
|
|
|
178
229
|
return yiq >= 200;
|
|
179
230
|
}
|
|
180
231
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
181
|
-
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", shape: "shape", outlined: "outlined", icon: "icon", image: "image", selected: "selected", padding: "padding", contrastColor: "contrastColor", size: "size" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, queries: [{ propertyName: "chipSubcontentTemplateRef", first: true, predicate: FsChipSubcontentDirective, descendants: true, read: TemplateRef }, { propertyName: "chipSuffixes", predicate: FsChipSuffixDirective }], 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 [style.backgroundColor]=\"outlined ? 'transparent' : backgroundColor || defaultBackgroundColor\"\n [style.padding]=\"padding\"\n [style.borderColor]=\"borderColor || (outlined && color ? color : null)\"\n [style.width]=\"width\"\n [style.color]=\"color || contrastColor || defaultColor\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [class.shape-round]=\"shape === 'round'\"\n [class.shape-square]=\"shape === 'square'\"\n [class.size-small]=\"size === 'small'\"\n [class.size-tiny]=\"size === 'tiny'\"\n [class.size-micro]=\"size === 'micro'\"\n [class.size-large]=\"size === 'large'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.selected]=\"selected\"\n [class.sub-content]=\"!!chipSubcontentTemplateRef\">\n @if (image) {\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n }\n @if (icon) {\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n }\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n @if (chipSubcontentTemplateRef) {\n <div class=\"fs-chip-subcontent\">\n <ng-container *ngTemplateOutlet=\"chipSubcontentTemplateRef\"></ng-container>\n </div>\n }\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"color || contrastColor || defaultColor\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"chipSuffix.color || color || contrastColor || defaultColor\"\n [
|
|
232
|
+
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", shape: "shape", outlined: "outlined", icon: "icon", image: "image", selected: "selected", padding: "padding", contrastColor: "contrastColor", size: "size" }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, queries: [{ propertyName: "chipSubcontentTemplateRef", first: true, predicate: FsChipSubcontentDirective, descendants: true, read: TemplateRef }, { propertyName: "chipSuffixes", predicate: FsChipSuffixDirective }, { propertyName: "chipPrefixes", predicate: FsChipPrefixDirective }], 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 [style.backgroundColor]=\"outlined ? 'transparent' : backgroundColor || defaultBackgroundColor\"\n [style.padding]=\"padding\"\n [style.borderColor]=\"borderColor || (outlined && color ? color : null)\"\n [style.width]=\"width\"\n [style.color]=\"color || contrastColor || defaultColor\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [class.prefixable]=\"chipPrefixes.length !== 0\"\n [class.shape-round]=\"shape === 'round'\"\n [class.shape-square]=\"shape === 'square'\"\n [class.size-small]=\"size === 'small'\"\n [class.size-tiny]=\"size === 'tiny'\"\n [class.size-micro]=\"size === 'micro'\"\n [class.size-large]=\"size === 'large'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.selected]=\"selected\"\n [class.sub-content]=\"!!chipSubcontentTemplateRef\">\n @if (image) {\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n }\n @if (chipPrefixes.length !== 0) {\n <div class=\"prefixes\">\n @for (chipPrefix of chipPrefixes; track chipPrefix) {\n <fs-chip-prefix\n [icon]=\"chipPrefix.icon\"\n [color]=\"chipPrefix.color || color || contrastColor || defaultColor\"\n (click)=\"chipPrefix.click.emit({ event: $event, data: value })\">\n <ng-container *ngTemplateOutlet=\"chipPrefix.templateRef\"></ng-container>\n </fs-chip-prefix>\n }\n </div>\n }\n @if (icon) {\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n }\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n @if (chipSubcontentTemplateRef) {\n <div class=\"fs-chip-subcontent\">\n <ng-container *ngTemplateOutlet=\"chipSubcontentTemplateRef\"></ng-container>\n </div>\n }\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"color || contrastColor || defaultColor\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"chipSuffix.color || color || contrastColor || defaultColor\"\n [tooltip]=\"chipSuffix.tooltip\"\n (click)=\"chipSuffixClick(chipSuffix, $event, value)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"color || contrastColor || defaultColor\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;min-height:30px;overflow:hidden;padding:0 10px;min-width:0}.fs-chip.shape-round{border-radius:16px}.fs-chip.shape-round.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.shape-round.imaged.outlined .image{margin-left:-2px}.fs-chip.shape-square{border-radius:5px;padding:4px 8px}.fs-chip.shape-square .image{padding:4px 0}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .prefixes{display:flex;flex-direction:row;margin-right:3px}.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;flex:1;line-height:normal}.fs-chip .fs-chip-content .fs-chip-subcontent{font-size:85%}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:3px}.fs-chip fs-chip-suffix.clickable{cursor:pointer}.fs-chip.size-large.actionable,.fs-chip.size-large.selected{padding-right:5px}.fs-chip.size-large.sub-content{padding:4px 8px}.fs-chip.size-large.prefixable:not(.imaged){padding-left:4px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.prefixable:not(.imaged){padding-left:3px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.shape-round.imaged{padding-left:0}.fs-chip.size-small fs-chip-suffix{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.sub-content{padding:3px 6px}.fs-chip.size-small ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}.fs-chip.size-tiny{padding:0 6px;min-height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny.prefixable:not(.imaged){padding-left:2px}.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-suffix{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.sub-content{padding:2px 4px}.fs-chip.size-tiny.shape-round.imaged{padding-left:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro.prefixable:not(.imaged){padding-left:2px}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.sub-content{padding:1px 2px}.fs-chip.size-micro.shape-round.imaged{padding-left:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.fs-chip:not(.size-large).actionable,.fs-chip:not(.size-large).selected{padding-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FsChipSuffixComponent, selector: "fs-chip-suffix", inputs: ["icon", "link", "linkTarget", "color", "show", "tooltip"], outputs: ["click"] }, { kind: "component", type: FsChipPrefixComponent, selector: "fs-chip-prefix", inputs: ["icon", "color", "show", "tooltip"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
182
233
|
}
|
|
183
234
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
184
235
|
type: Component,
|
|
185
|
-
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [style.backgroundColor]=\"outlined ? 'transparent' : backgroundColor || defaultBackgroundColor\"\n [style.padding]=\"padding\"\n [style.borderColor]=\"borderColor || (outlined && color ? color : null)\"\n [style.width]=\"width\"\n [style.color]=\"color || contrastColor || defaultColor\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [class.shape-round]=\"shape === 'round'\"\n [class.shape-square]=\"shape === 'square'\"\n [class.size-small]=\"size === 'small'\"\n [class.size-tiny]=\"size === 'tiny'\"\n [class.size-micro]=\"size === 'micro'\"\n [class.size-large]=\"size === 'large'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.selected]=\"selected\"\n [class.sub-content]=\"!!chipSubcontentTemplateRef\">\n @if (image) {\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n }\n @if (icon) {\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n }\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n @if (chipSubcontentTemplateRef) {\n <div class=\"fs-chip-subcontent\">\n <ng-container *ngTemplateOutlet=\"chipSubcontentTemplateRef\"></ng-container>\n </div>\n }\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"color || contrastColor || defaultColor\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"chipSuffix.color || color || contrastColor || defaultColor\"\n [
|
|
236
|
+
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [style.backgroundColor]=\"outlined ? 'transparent' : backgroundColor || defaultBackgroundColor\"\n [style.padding]=\"padding\"\n [style.borderColor]=\"borderColor || (outlined && color ? color : null)\"\n [style.width]=\"width\"\n [style.color]=\"color || contrastColor || defaultColor\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [class.prefixable]=\"chipPrefixes.length !== 0\"\n [class.shape-round]=\"shape === 'round'\"\n [class.shape-square]=\"shape === 'square'\"\n [class.size-small]=\"size === 'small'\"\n [class.size-tiny]=\"size === 'tiny'\"\n [class.size-micro]=\"size === 'micro'\"\n [class.size-large]=\"size === 'large'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.selected]=\"selected\"\n [class.sub-content]=\"!!chipSubcontentTemplateRef\">\n @if (image) {\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n }\n @if (chipPrefixes.length !== 0) {\n <div class=\"prefixes\">\n @for (chipPrefix of chipPrefixes; track chipPrefix) {\n <fs-chip-prefix\n [icon]=\"chipPrefix.icon\"\n [color]=\"chipPrefix.color || color || contrastColor || defaultColor\"\n (click)=\"chipPrefix.click.emit({ event: $event, data: value })\">\n <ng-container *ngTemplateOutlet=\"chipPrefix.templateRef\"></ng-container>\n </fs-chip-prefix>\n }\n </div>\n }\n @if (icon) {\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n }\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n @if (chipSubcontentTemplateRef) {\n <div class=\"fs-chip-subcontent\">\n <ng-container *ngTemplateOutlet=\"chipSubcontentTemplateRef\"></ng-container>\n </div>\n }\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"color || contrastColor || defaultColor\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"chipSuffix.color || color || contrastColor || defaultColor\"\n [tooltip]=\"chipSuffix.tooltip\"\n (click)=\"chipSuffixClick(chipSuffix, $event, value)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"color || contrastColor || defaultColor\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;min-height:30px;overflow:hidden;padding:0 10px;min-width:0}.fs-chip.shape-round{border-radius:16px}.fs-chip.shape-round.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.shape-round.imaged.outlined .image{margin-left:-2px}.fs-chip.shape-square{border-radius:5px;padding:4px 8px}.fs-chip.shape-square .image{padding:4px 0}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .prefixes{display:flex;flex-direction:row;margin-right:3px}.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;flex:1;line-height:normal}.fs-chip .fs-chip-content .fs-chip-subcontent{font-size:85%}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:3px}.fs-chip fs-chip-suffix.clickable{cursor:pointer}.fs-chip.size-large.actionable,.fs-chip.size-large.selected{padding-right:5px}.fs-chip.size-large.sub-content{padding:4px 8px}.fs-chip.size-large.prefixable:not(.imaged){padding-left:4px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.prefixable:not(.imaged){padding-left:3px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.shape-round.imaged{padding-left:0}.fs-chip.size-small fs-chip-suffix{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.sub-content{padding:3px 6px}.fs-chip.size-small ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}.fs-chip.size-tiny{padding:0 6px;min-height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny.prefixable:not(.imaged){padding-left:2px}.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-suffix{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.sub-content{padding:2px 4px}.fs-chip.size-tiny.shape-round.imaged{padding-left:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro.prefixable:not(.imaged){padding-left:2px}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.sub-content{padding:1px 2px}.fs-chip.size-micro.shape-round.imaged{padding-left:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.fs-chip:not(.size-large).actionable,.fs-chip:not(.size-large).selected{padding-right:0}\n"] }]
|
|
186
237
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { templateRef: [{
|
|
187
238
|
type: ViewChild,
|
|
188
239
|
args: [TemplateRef, { static: true }]
|
|
189
240
|
}], chipSuffixes: [{
|
|
190
241
|
type: ContentChildren,
|
|
191
242
|
args: [FsChipSuffixDirective]
|
|
243
|
+
}], chipPrefixes: [{
|
|
244
|
+
type: ContentChildren,
|
|
245
|
+
args: [FsChipPrefixDirective]
|
|
192
246
|
}], chipSubcontentTemplateRef: [{
|
|
193
247
|
type: ContentChild,
|
|
194
248
|
args: [FsChipSubcontentDirective, { read: TemplateRef }]
|
|
@@ -308,7 +362,7 @@ class FsChipsComponent {
|
|
|
308
362
|
this.chips.reset(chipArray);
|
|
309
363
|
}
|
|
310
364
|
writeValue(value) {
|
|
311
|
-
this._value = value;
|
|
365
|
+
this._value = value || [];
|
|
312
366
|
this._updateChips();
|
|
313
367
|
}
|
|
314
368
|
registerOnChange(fn) {
|
|
@@ -371,21 +425,36 @@ class FsChipsComponent {
|
|
|
371
425
|
return item === chipValue;
|
|
372
426
|
}
|
|
373
427
|
_updateChips() {
|
|
374
|
-
if (this.multiple) {
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
428
|
+
if (this.multiple && this.chips) {
|
|
429
|
+
const chips = this.chips.toArray()
|
|
430
|
+
.sort((c1, c2) => {
|
|
431
|
+
const aIndex = this._value.findIndex((item) => this._compareFn(item, c1.value));
|
|
432
|
+
const bIndex = this._value.findIndex((item) => this._compareFn(item, c2.value));
|
|
433
|
+
// If both are in _value, sort by their position in _value
|
|
434
|
+
if (aIndex !== -1 && bIndex !== -1) {
|
|
435
|
+
return aIndex - bIndex;
|
|
436
|
+
}
|
|
437
|
+
// If only one is in _value, it comes first
|
|
438
|
+
if (aIndex !== -1)
|
|
439
|
+
return -1;
|
|
440
|
+
if (bIndex !== -1)
|
|
441
|
+
return 1;
|
|
442
|
+
// If neither is in _value, maintain original order
|
|
443
|
+
return 0;
|
|
444
|
+
});
|
|
445
|
+
this.chips.reset(chips);
|
|
446
|
+
this.chips.forEach((chip) => {
|
|
447
|
+
const selected = this.value
|
|
448
|
+
.some((item) => {
|
|
449
|
+
return this._compareFn(item, chip.value);
|
|
387
450
|
});
|
|
388
|
-
|
|
451
|
+
if (selected) {
|
|
452
|
+
chip.select();
|
|
453
|
+
}
|
|
454
|
+
else {
|
|
455
|
+
chip.unselect();
|
|
456
|
+
}
|
|
457
|
+
});
|
|
389
458
|
}
|
|
390
459
|
}
|
|
391
460
|
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 });
|
|
@@ -395,7 +464,7 @@ class FsChipsComponent {
|
|
|
395
464
|
useExisting: forwardRef(() => FsChipsComponent),
|
|
396
465
|
multi: true,
|
|
397
466
|
},
|
|
398
|
-
], 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 [style.width]=\"width\"\n cdkDropList\n [cdkDropListLockAxis]=\"'y'\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"drop($event)\">\n @for (chip of chips; track chip) {\n <div\n cdkDrag\n class=\"fs-chip-drag-container\"\n [class.chips-selectable]=\"!!selectable\"\n [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n <a\n class=\"chip-handle\"\n mat-icon-button\n [ngClass]=\"{ 'visible': (selectable && chip.selected) || (!selectable && sortable) }\"\n cdkDragHandle>\n <mat-icon>\n drag_indicator\n </mat-icon>\n </a>\n @if (selectable) {\n @if (chip.selected) {\n <a\n class=\"select-button select-button-selected\"\n (click)=\"unselect(chip)\"\n mat-icon-button>\n <mat-icon>\n check_box\n </mat-icon>\n </a>\n } @else {\n <a\n class=\"select-button select-button-unselected\"\n (click)=\"select(chip)\"\n mat-icon-button>\n <mat-icon>\n check_box_outline_blank\n </mat-icon>\n </a>\n }\n }\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n} @else {\n <div\n class=\"fs-chips\"\n [style.width]=\"width\">\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: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*{display:inline-flex}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}.fs-chips{display:flex;flex-wrap:wrap;gap:5px}.fs-chips.chips-sortable{gap:8px;flex-direction:column}.fs-chips.chips-sortable ::ng-deep .cdk-drag-placeholder{opacity:.3}.fs-chips .fs-chip-drag-container{display:flex}::ng-deep .fs-chip-drag-container{display:flex;align-items:center}::ng-deep .fs-chip-drag-container.fs-chip-drag-preview{display:flex;overflow:visible}::ng-deep .fs-chip-drag-container.fs-chip-drag-preview .select-button{visibility:hidden}::ng-deep .fs-chip-drag-container.fs-chip-drag-preview.chip-container .fs-chip{box-shadow:3px 3px 3px #c4c4c4}::ng-deep .fs-chip-drag-container.chips-selectable .chip-handle{order:10}::ng-deep .fs-chip-drag-container.chips-selectable .selected-check{display:none!important}::ng-deep .fs-chip-drag-container .select-button,::ng-deep .fs-chip-drag-container .chip-handle{color:inherit;display:flex;align-items:center}::ng-deep .fs-chip-drag-container .select-button{margin-right:5px}::ng-deep .fs-chip-drag-container .select-button.select-button-selected mat-icon{color:#92d050}::ng-deep .fs-chip-drag-container .select-button.select-button-unselected mat-icon{color:#ddd}::ng-deep .fs-chip-drag-container .chip-handle:not(.visible){visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$
|
|
467
|
+
], 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 [style.width]=\"width\"\n cdkDropList\n [cdkDropListLockAxis]=\"'y'\"\n [cdkDropListSortPredicate]=\"sortPredicate\"\n (cdkDropListDropped)=\"drop($event)\">\n @for (chip of chips; track chip) {\n <div\n cdkDrag\n class=\"fs-chip-drag-container\"\n [class.chips-selectable]=\"!!selectable\"\n [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n <a\n class=\"chip-handle\"\n mat-icon-button\n [ngClass]=\"{ 'visible': (selectable && chip.selected) || (!selectable && sortable) }\"\n cdkDragHandle>\n <mat-icon>\n drag_indicator\n </mat-icon>\n </a>\n @if (selectable) {\n @if (chip.selected) {\n <a\n class=\"select-button select-button-selected\"\n (click)=\"unselect(chip)\"\n mat-icon-button>\n <mat-icon>\n check_box\n </mat-icon>\n </a>\n } @else {\n <a\n class=\"select-button select-button-unselected\"\n (click)=\"select(chip)\"\n mat-icon-button>\n <mat-icon>\n check_box_outline_blank\n </mat-icon>\n </a>\n }\n }\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n} @else {\n <div\n class=\"fs-chips\"\n [style.width]=\"width\">\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: ["@charset \"UTF-8\";@media (max-width: 599px){h1[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-xs*=fs-heading][fs\\.lt-xs*=\".top-none\"]{margin-top:0}}@media (max-width: 1023px){h1[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-sm*=fs-heading][fs\\.lt-sm*=\".top-none\"]{margin-top:0}}@media (max-width: 1439px){h1[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h2[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"],h3[class*=\".top\"][fs\\.lt-md*=fs-heading][fs\\.lt-md*=\".top-none\"]{margin-top:0}}.fs-delimit>*{display:inline-flex}.fs-delimit>*:not(:last-child):after{content:\",\\a0\"}.fs-chips{display:flex;flex-wrap:wrap;gap:5px}.fs-chips.chips-sortable{gap:8px;flex-direction:column}.fs-chips.chips-sortable ::ng-deep .cdk-drag-placeholder{opacity:.3}.fs-chips .fs-chip-drag-container{display:flex}::ng-deep .fs-chip-drag-container{display:flex;align-items:center}::ng-deep .fs-chip-drag-container.fs-chip-drag-preview{display:flex;overflow:visible}::ng-deep .fs-chip-drag-container.fs-chip-drag-preview .select-button{visibility:hidden}::ng-deep .fs-chip-drag-container.fs-chip-drag-preview.chip-container .fs-chip{box-shadow:3px 3px 3px #c4c4c4}::ng-deep .fs-chip-drag-container.chips-selectable .chip-handle{order:10}::ng-deep .fs-chip-drag-container.chips-selectable .selected-check{display:none!important}::ng-deep .fs-chip-drag-container .select-button,::ng-deep .fs-chip-drag-container .chip-handle{color:inherit;display:flex;align-items:center}::ng-deep .fs-chip-drag-container .select-button{margin-right:5px}::ng-deep .fs-chip-drag-container .select-button.select-button-selected mat-icon{color:#92d050}::ng-deep .fs-chip-drag-container .select-button.select-button-unselected mat-icon{color:#ddd}::ng-deep .fs-chip-drag-container .chip-handle:not(.visible){visibility:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.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$2.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$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
399
468
|
}
|
|
400
469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipsComponent, decorators: [{
|
|
401
470
|
type: Component,
|
|
@@ -434,6 +503,8 @@ class FsChipModule {
|
|
|
434
503
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, declarations: [FsChipsComponent,
|
|
435
504
|
FsChipComponent,
|
|
436
505
|
FsChipSuffixComponent,
|
|
506
|
+
FsChipPrefixComponent,
|
|
507
|
+
FsChipPrefixDirective,
|
|
437
508
|
FsChipSuffixDirective,
|
|
438
509
|
FsChipSubcontentDirective], imports: [CommonModule,
|
|
439
510
|
DragDropModule,
|
|
@@ -442,6 +513,7 @@ class FsChipModule {
|
|
|
442
513
|
FsLabelModule], exports: [FsChipsComponent,
|
|
443
514
|
FsChipComponent,
|
|
444
515
|
FsChipSuffixDirective,
|
|
516
|
+
FsChipPrefixDirective,
|
|
445
517
|
FsChipSubcontentDirective] });
|
|
446
518
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, imports: [CommonModule,
|
|
447
519
|
DragDropModule,
|
|
@@ -463,12 +535,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
463
535
|
FsChipsComponent,
|
|
464
536
|
FsChipComponent,
|
|
465
537
|
FsChipSuffixDirective,
|
|
538
|
+
FsChipPrefixDirective,
|
|
466
539
|
FsChipSubcontentDirective,
|
|
467
540
|
],
|
|
468
541
|
declarations: [
|
|
469
542
|
FsChipsComponent,
|
|
470
543
|
FsChipComponent,
|
|
471
544
|
FsChipSuffixComponent,
|
|
545
|
+
FsChipPrefixComponent,
|
|
546
|
+
FsChipPrefixDirective,
|
|
472
547
|
FsChipSuffixDirective,
|
|
473
548
|
FsChipSubcontentDirective,
|
|
474
549
|
],
|
|
@@ -479,5 +554,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
479
554
|
* Generated bundle index. Do not edit.
|
|
480
555
|
*/
|
|
481
556
|
|
|
482
|
-
export { FsChipComponent, FsChipModule, FsChipSubcontentDirective, FsChipSuffixDirective, FsChipsComponent };
|
|
557
|
+
export { FsChipComponent, FsChipModule, FsChipPrefixDirective, FsChipSubcontentDirective, FsChipSuffixDirective, FsChipsComponent };
|
|
483
558
|
//# sourceMappingURL=firestitch-chip.mjs.map
|