@firestitch/chip 18.0.15 → 18.0.17
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 +7 -8
- package/app/components/chip-suffix/chip-suffix.component.d.ts +3 -1
- package/app/directives/chip-subcontent.directive.d.ts +5 -0
- package/app/directives/chip-suffix.directive.d.ts +3 -1
- package/app/directives/index.d.ts +1 -0
- package/app/fs-chip.module.d.ts +7 -5
- package/esm2022/app/components/chip/chip.component.mjs +22 -44
- package/esm2022/app/components/chip-suffix/chip-suffix.component.mjs +10 -3
- package/esm2022/app/components/chips/chips.component.mjs +2 -2
- package/esm2022/app/directives/chip-subcontent.directive.mjs +13 -0
- package/esm2022/app/directives/chip-suffix.directive.mjs +8 -2
- package/esm2022/app/directives/index.mjs +2 -1
- package/esm2022/app/fs-chip.module.mjs +12 -4
- package/esm2022/public_api.mjs +2 -1
- package/fesm2022/firestitch-chip.mjs +60 -50
- package/fesm2022/firestitch-chip.mjs.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +1 -0
|
@@ -2,9 +2,10 @@ import { CommonModule } from '@angular/common';
|
|
|
2
2
|
import { NgModule } from '@angular/core';
|
|
3
3
|
import { DragDropModule } from '@angular/cdk/drag-drop';
|
|
4
4
|
import { MatIconModule } from '@angular/material/icon';
|
|
5
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
5
6
|
import { FsLabelModule } from '@firestitch/label';
|
|
6
7
|
import { FsChipComponent, FsChipsComponent, FsChipSuffixComponent } from './components';
|
|
7
|
-
import { FsChipSuffixDirective } from './directives
|
|
8
|
+
import { FsChipSubcontentDirective, FsChipSuffixDirective } from './directives';
|
|
8
9
|
import * as i0 from "@angular/core";
|
|
9
10
|
export class FsChipModule {
|
|
10
11
|
static forRoot() {
|
|
@@ -16,15 +17,19 @@ export class FsChipModule {
|
|
|
16
17
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, declarations: [FsChipsComponent,
|
|
17
18
|
FsChipComponent,
|
|
18
19
|
FsChipSuffixComponent,
|
|
19
|
-
FsChipSuffixDirective
|
|
20
|
+
FsChipSuffixDirective,
|
|
21
|
+
FsChipSubcontentDirective], imports: [CommonModule,
|
|
20
22
|
DragDropModule,
|
|
21
23
|
MatIconModule,
|
|
24
|
+
MatTooltipModule,
|
|
22
25
|
FsLabelModule], exports: [FsChipsComponent,
|
|
23
26
|
FsChipComponent,
|
|
24
|
-
FsChipSuffixDirective
|
|
27
|
+
FsChipSuffixDirective,
|
|
28
|
+
FsChipSubcontentDirective] });
|
|
25
29
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, imports: [CommonModule,
|
|
26
30
|
DragDropModule,
|
|
27
31
|
MatIconModule,
|
|
32
|
+
MatTooltipModule,
|
|
28
33
|
FsLabelModule] });
|
|
29
34
|
}
|
|
30
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, decorators: [{
|
|
@@ -34,19 +39,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
34
39
|
CommonModule,
|
|
35
40
|
DragDropModule,
|
|
36
41
|
MatIconModule,
|
|
42
|
+
MatTooltipModule,
|
|
37
43
|
FsLabelModule,
|
|
38
44
|
],
|
|
39
45
|
exports: [
|
|
40
46
|
FsChipsComponent,
|
|
41
47
|
FsChipComponent,
|
|
42
48
|
FsChipSuffixDirective,
|
|
49
|
+
FsChipSubcontentDirective,
|
|
43
50
|
],
|
|
44
51
|
declarations: [
|
|
45
52
|
FsChipsComponent,
|
|
46
53
|
FsChipComponent,
|
|
47
54
|
FsChipSuffixComponent,
|
|
48
55
|
FsChipSuffixDirective,
|
|
56
|
+
FsChipSubcontentDirective,
|
|
49
57
|
],
|
|
50
58
|
}]
|
|
51
59
|
}] });
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
60
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnMtY2hpcC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvYXBwL2ZzLWNoaXAubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQXVCLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU5RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDeEQsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBRTdELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUVsRCxPQUFPLEVBQUUsZUFBZSxFQUFFLGdCQUFnQixFQUFFLHFCQUFxQixFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3hGLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7QUEwQmhGLE1BQU0sT0FBTyxZQUFZO0lBQ2hCLE1BQU0sQ0FBQyxPQUFPO1FBQ25CLE9BQU87WUFDTCxRQUFRLEVBQUUsWUFBWTtTQUN2QixDQUFDO0lBQ0osQ0FBQzt1R0FMVSxZQUFZO3dHQUFaLFlBQVksaUJBUHJCLGdCQUFnQjtZQUNoQixlQUFlO1lBQ2YscUJBQXFCO1lBQ3JCLHFCQUFxQjtZQUNyQix5QkFBeUIsYUFuQnpCLFlBQVk7WUFFWixjQUFjO1lBQ2QsYUFBYTtZQUNiLGdCQUFnQjtZQUVoQixhQUFhLGFBR2IsZ0JBQWdCO1lBQ2hCLGVBQWU7WUFDZixxQkFBcUI7WUFDckIseUJBQXlCO3dHQVVoQixZQUFZLFlBdEJyQixZQUFZO1lBRVosY0FBYztZQUNkLGFBQWE7WUFDYixnQkFBZ0I7WUFFaEIsYUFBYTs7MkZBZ0JKLFlBQVk7a0JBeEJ4QixRQUFRO21CQUFDO29CQUNSLE9BQU8sRUFBRTt3QkFDUCxZQUFZO3dCQUVaLGNBQWM7d0JBQ2QsYUFBYTt3QkFDYixnQkFBZ0I7d0JBRWhCLGFBQWE7cUJBQ2Q7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLGdCQUFnQjt3QkFDaEIsZUFBZTt3QkFDZixxQkFBcUI7d0JBQ3JCLHlCQUF5QjtxQkFDMUI7b0JBQ0QsWUFBWSxFQUFFO3dCQUNaLGdCQUFnQjt3QkFDaEIsZUFBZTt3QkFDZixxQkFBcUI7d0JBQ3JCLHFCQUFxQjt3QkFDckIseUJBQXlCO3FCQUMxQjtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBNb2R1bGVXaXRoUHJvdmlkZXJzLCBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBEcmFnRHJvcE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgTWF0VG9vbHRpcE1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3Rvb2x0aXAnO1xuXG5pbXBvcnQgeyBGc0xhYmVsTW9kdWxlIH0gZnJvbSAnQGZpcmVzdGl0Y2gvbGFiZWwnO1xuXG5pbXBvcnQgeyBGc0NoaXBDb21wb25lbnQsIEZzQ2hpcHNDb21wb25lbnQsIEZzQ2hpcFN1ZmZpeENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cyc7XG5pbXBvcnQgeyBGc0NoaXBTdWJjb250ZW50RGlyZWN0aXZlLCBGc0NoaXBTdWZmaXhEaXJlY3RpdmUgfSBmcm9tICcuL2RpcmVjdGl2ZXMnO1xuXG5ATmdNb2R1bGUoe1xuICBpbXBvcnRzOiBbXG4gICAgQ29tbW9uTW9kdWxlLFxuXG4gICAgRHJhZ0Ryb3BNb2R1bGUsXG4gICAgTWF0SWNvbk1vZHVsZSxcbiAgICBNYXRUb29sdGlwTW9kdWxlLFxuXG4gICAgRnNMYWJlbE1vZHVsZSxcbiAgXSxcbiAgZXhwb3J0czogW1xuICAgIEZzQ2hpcHNDb21wb25lbnQsXG4gICAgRnNDaGlwQ29tcG9uZW50LFxuICAgIEZzQ2hpcFN1ZmZpeERpcmVjdGl2ZSxcbiAgICBGc0NoaXBTdWJjb250ZW50RGlyZWN0aXZlLFxuICBdLFxuICBkZWNsYXJhdGlvbnM6IFtcbiAgICBGc0NoaXBzQ29tcG9uZW50LFxuICAgIEZzQ2hpcENvbXBvbmVudCxcbiAgICBGc0NoaXBTdWZmaXhDb21wb25lbnQsXG4gICAgRnNDaGlwU3VmZml4RGlyZWN0aXZlLFxuICAgIEZzQ2hpcFN1YmNvbnRlbnREaXJlY3RpdmUsXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEZzQ2hpcE1vZHVsZSB7XG4gIHB1YmxpYyBzdGF0aWMgZm9yUm9vdCgpOiBNb2R1bGVXaXRoUHJvdmlkZXJzPEZzQ2hpcE1vZHVsZT4ge1xuICAgIHJldHVybiB7XG4gICAgICBuZ01vZHVsZTogRnNDaGlwTW9kdWxlLFxuICAgIH07XG4gIH1cbn1cbiJdfQ==
|
package/esm2022/public_api.mjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
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 { FsChipSubcontentDirective } from './app/directives/chip-subcontent.directive';
|
|
4
5
|
export { FsChipSuffixDirective } from './app/directives/chip-suffix.directive';
|
|
5
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
6
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9wdWJsaWNfYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUVwRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFFMUUsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sNENBQTRDLENBQUM7QUFDdkYsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sd0NBQXdDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgeyBGc0NoaXBNb2R1bGUgfSBmcm9tICcuL2FwcC9mcy1jaGlwLm1vZHVsZSc7XG5cbmV4cG9ydCB7IEZzQ2hpcENvbXBvbmVudCB9IGZyb20gJy4vYXBwL2NvbXBvbmVudHMvY2hpcC9jaGlwLmNvbXBvbmVudCc7XG5leHBvcnQgeyBGc0NoaXBzQ29tcG9uZW50IH0gZnJvbSAnLi9hcHAvY29tcG9uZW50cy9jaGlwcy9jaGlwcy5jb21wb25lbnQnO1xuXG5leHBvcnQgeyBGc0NoaXBTdWJjb250ZW50RGlyZWN0aXZlIH0gZnJvbSAnLi9hcHAvZGlyZWN0aXZlcy9jaGlwLXN1YmNvbnRlbnQuZGlyZWN0aXZlJztcbmV4cG9ydCB7IEZzQ2hpcFN1ZmZpeERpcmVjdGl2ZSB9IGZyb20gJy4vYXBwL2RpcmVjdGl2ZXMvY2hpcC1zdWZmaXguZGlyZWN0aXZlJztcblxuIl19
|
|
@@ -1,27 +1,42 @@
|
|
|
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, inject, TemplateRef,
|
|
4
|
+
import { Directive, EventEmitter, inject, TemplateRef, Input, Output, Component, ChangeDetectionStrategy, ViewChild, ContentChildren, ContentChild, forwardRef, NgModule } from '@angular/core';
|
|
5
5
|
import * as i2$1 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 i3 from '@angular/material/tooltip';
|
|
10
|
+
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
9
11
|
import { FsLabelModule } from '@firestitch/label';
|
|
10
12
|
import { Subject } from 'rxjs';
|
|
11
13
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
12
14
|
import { takeUntil } from 'rxjs/operators';
|
|
13
15
|
|
|
16
|
+
class FsChipSubcontentDirective {
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSubcontentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
18
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSubcontentDirective, selector: "[fsChipSubtemplate]", ngImport: i0 });
|
|
19
|
+
}
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSubcontentDirective, decorators: [{
|
|
21
|
+
type: Directive,
|
|
22
|
+
args: [{
|
|
23
|
+
selector: '[fsChipSubtemplate]',
|
|
24
|
+
}]
|
|
25
|
+
}] });
|
|
26
|
+
|
|
14
27
|
class FsChipSuffixDirective {
|
|
15
28
|
icon;
|
|
16
29
|
link;
|
|
17
30
|
linkTarget;
|
|
18
31
|
color;
|
|
19
32
|
data;
|
|
33
|
+
show = true;
|
|
34
|
+
tooltip;
|
|
20
35
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
21
36
|
click = new EventEmitter();
|
|
22
37
|
templateRef = inject(TemplateRef);
|
|
23
38
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
24
|
-
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" }, outputs: { click: "click" }, ngImport: i0 });
|
|
39
|
+
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", show: "show", tooltip: "tooltip" }, outputs: { click: "click" }, ngImport: i0 });
|
|
25
40
|
}
|
|
26
41
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixDirective, decorators: [{
|
|
27
42
|
type: Directive,
|
|
@@ -38,6 +53,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
38
53
|
type: Input
|
|
39
54
|
}], data: [{
|
|
40
55
|
type: Input
|
|
56
|
+
}], show: [{
|
|
57
|
+
type: Input
|
|
58
|
+
}], tooltip: [{
|
|
59
|
+
type: Input
|
|
41
60
|
}], click: [{
|
|
42
61
|
type: Output
|
|
43
62
|
}] } });
|
|
@@ -47,13 +66,15 @@ class FsChipSuffixComponent {
|
|
|
47
66
|
link;
|
|
48
67
|
linkTarget;
|
|
49
68
|
color;
|
|
69
|
+
show = true;
|
|
70
|
+
tooltip;
|
|
50
71
|
click = new EventEmitter();
|
|
51
72
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
-
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" }, outputs: { click: "click" }, ngImport: i0, template: "@if (link) {\n
|
|
73
|
+
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: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53
74
|
}
|
|
54
75
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, decorators: [{
|
|
55
76
|
type: Component,
|
|
56
|
-
args: [{ selector: 'fs-chip-suffix', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (link) {\n
|
|
77
|
+
args: [{ selector: 'fs-chip-suffix', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
57
78
|
}], propDecorators: { icon: [{
|
|
58
79
|
type: Input
|
|
59
80
|
}], link: [{
|
|
@@ -62,6 +83,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
62
83
|
type: Input
|
|
63
84
|
}], color: [{
|
|
64
85
|
type: Input
|
|
86
|
+
}], show: [{
|
|
87
|
+
type: Input
|
|
88
|
+
}], tooltip: [{
|
|
89
|
+
type: Input
|
|
65
90
|
}], click: [{
|
|
66
91
|
type: Output
|
|
67
92
|
}] } });
|
|
@@ -70,6 +95,7 @@ class FsChipComponent {
|
|
|
70
95
|
_cdRef;
|
|
71
96
|
templateRef;
|
|
72
97
|
chipSuffixes;
|
|
98
|
+
chipSubcontentTemplateRef;
|
|
73
99
|
selectable = false;
|
|
74
100
|
removable = true;
|
|
75
101
|
value;
|
|
@@ -78,63 +104,38 @@ class FsChipComponent {
|
|
|
78
104
|
backgroundColor;
|
|
79
105
|
borderColor;
|
|
80
106
|
color;
|
|
107
|
+
shape = 'round';
|
|
81
108
|
outlined;
|
|
82
109
|
icon;
|
|
83
110
|
image;
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
this._selected = value;
|
|
87
|
-
}
|
|
88
|
-
get selected() {
|
|
89
|
-
return this._selected;
|
|
90
|
-
}
|
|
111
|
+
selected;
|
|
112
|
+
size = 'large';
|
|
91
113
|
selectedToggled = new EventEmitter();
|
|
92
114
|
removed = new EventEmitter();
|
|
93
115
|
styles = {};
|
|
94
|
-
classes = {};
|
|
95
116
|
hasChips;
|
|
96
117
|
_destroy$ = new Subject();
|
|
97
|
-
_selected = false;
|
|
98
118
|
constructor(_cdRef) {
|
|
99
119
|
this._cdRef = _cdRef;
|
|
100
120
|
}
|
|
101
|
-
set setSize(value) {
|
|
102
|
-
this.classes['size-small'] = value === 'small';
|
|
103
|
-
this.classes['size-tiny'] = value === 'tiny';
|
|
104
|
-
this.classes['size-micro'] = value === 'micro';
|
|
105
|
-
}
|
|
106
121
|
click() {
|
|
107
122
|
if (this.selectable) {
|
|
108
|
-
this.
|
|
123
|
+
this.selected = !this.selected;
|
|
109
124
|
this.selectedToggled.emit({ value: this.value, selected: this.selected });
|
|
110
125
|
}
|
|
111
126
|
}
|
|
112
127
|
select() {
|
|
113
|
-
this.
|
|
128
|
+
this.selected = true;
|
|
114
129
|
this._cdRef.markForCheck();
|
|
115
130
|
}
|
|
116
131
|
unselect() {
|
|
117
|
-
this.
|
|
132
|
+
this.selected = false;
|
|
118
133
|
this._cdRef.markForCheck();
|
|
119
134
|
}
|
|
120
135
|
get destroy$() {
|
|
121
136
|
return this._destroy$.asObservable();
|
|
122
137
|
}
|
|
123
|
-
ngOnChanges(
|
|
124
|
-
if (changes.selectable) {
|
|
125
|
-
this.classes.selectable = this.selectable;
|
|
126
|
-
}
|
|
127
|
-
if (changes.removable) {
|
|
128
|
-
this.classes.removable = this.removable;
|
|
129
|
-
}
|
|
130
|
-
if (changes.icon) {
|
|
131
|
-
this.classes.iconed = !!this.icon;
|
|
132
|
-
}
|
|
133
|
-
if (changes.image) {
|
|
134
|
-
this.classes.imaged = !!this.image;
|
|
135
|
-
}
|
|
136
|
-
// this.classes.actionable = this.chipSuffixes.length !== 0 ||
|
|
137
|
-
// (this.removed.observed && this.removable);
|
|
138
|
+
ngOnChanges() {
|
|
138
139
|
this._updateStyles();
|
|
139
140
|
}
|
|
140
141
|
actionClick(action, event) {
|
|
@@ -171,7 +172,6 @@ class FsChipComponent {
|
|
|
171
172
|
this.styles.backgroundColor = this.backgroundColor;
|
|
172
173
|
this.styles.borderColor = this.borderColor;
|
|
173
174
|
this.styles.width = this.width;
|
|
174
|
-
this.classes.outlined = this.outlined;
|
|
175
175
|
if (this.color) {
|
|
176
176
|
this.styles.color = this.color;
|
|
177
177
|
}
|
|
@@ -187,17 +187,20 @@ class FsChipComponent {
|
|
|
187
187
|
this._cdRef.markForCheck();
|
|
188
188
|
}
|
|
189
189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
190
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", maxWidth: "maxWidth", width: "width", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", icon: "icon", image: "image",
|
|
190
|
+
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", 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 [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [class.round]=\"shape === 'round'\"\n [class.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.subcontented]=\"!!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]=\"styles.color\">\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 || styles.color\"\n [show]=\"chipSuffix.show\"\n [tooltip]=\"chipSuffix.tooltip\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\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]=\"styles.color\"\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;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden;padding:0 12px}.fs-chip.round{border-radius:16px}.fs-chip.round.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.round.imaged.outlined .image{margin-left:-2px}.fs-chip.subcontented{padding:3px 10px}.fs-chip.square{border-radius:5px}.fs-chip.square .image{padding:4px 0}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.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-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.round.imaged{padding-left:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.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 .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.round.imaged{padding-left:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.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.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.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 ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
191
191
|
}
|
|
192
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
193
193
|
type: Component,
|
|
194
|
-
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [
|
|
194
|
+
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [class.round]=\"shape === 'round'\"\n [class.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.subcontented]=\"!!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]=\"styles.color\">\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 || styles.color\"\n [show]=\"chipSuffix.show\"\n [tooltip]=\"chipSuffix.tooltip\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\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]=\"styles.color\"\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;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden;padding:0 12px}.fs-chip.round{border-radius:16px}.fs-chip.round.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.round.imaged.outlined .image{margin-left:-2px}.fs-chip.subcontented{padding:3px 10px}.fs-chip.square{border-radius:5px}.fs-chip.square .image{padding:4px 0}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.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-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.round.imaged{padding-left:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.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 .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.round.imaged{padding-left:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.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.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.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 ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}.fs-chip:not(.size-large).actionable,.fs-chip:not(.size-large).selected{padding-right:0}\n"] }]
|
|
195
195
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { templateRef: [{
|
|
196
196
|
type: ViewChild,
|
|
197
197
|
args: [TemplateRef, { static: true }]
|
|
198
198
|
}], chipSuffixes: [{
|
|
199
199
|
type: ContentChildren,
|
|
200
200
|
args: [FsChipSuffixDirective]
|
|
201
|
+
}], chipSubcontentTemplateRef: [{
|
|
202
|
+
type: ContentChild,
|
|
203
|
+
args: [FsChipSubcontentDirective, { read: TemplateRef }]
|
|
201
204
|
}], selectable: [{
|
|
202
205
|
type: Input
|
|
203
206
|
}], removable: [{
|
|
@@ -214,22 +217,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
214
217
|
type: Input
|
|
215
218
|
}], color: [{
|
|
216
219
|
type: Input
|
|
220
|
+
}], shape: [{
|
|
221
|
+
type: Input
|
|
217
222
|
}], outlined: [{
|
|
218
223
|
type: Input
|
|
219
224
|
}], icon: [{
|
|
220
225
|
type: Input
|
|
221
226
|
}], image: [{
|
|
222
227
|
type: Input
|
|
223
|
-
}],
|
|
224
|
-
type: Input
|
|
225
|
-
|
|
228
|
+
}], selected: [{
|
|
229
|
+
type: Input
|
|
230
|
+
}], size: [{
|
|
231
|
+
type: Input
|
|
226
232
|
}], selectedToggled: [{
|
|
227
233
|
type: Output
|
|
228
234
|
}], removed: [{
|
|
229
235
|
type: Output
|
|
230
|
-
}], setSize: [{
|
|
231
|
-
type: Input,
|
|
232
|
-
args: ['size']
|
|
233
236
|
}] } });
|
|
234
237
|
|
|
235
238
|
class FsChipsComponent {
|
|
@@ -400,7 +403,7 @@ class FsChipsComponent {
|
|
|
400
403
|
useExisting: forwardRef(() => FsChipsComponent),
|
|
401
404
|
multi: true,
|
|
402
405
|
},
|
|
403
|
-
], queries: [{ propertyName: "chips", predicate: FsChipComponent }], viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], ngImport: i0, template: "@if (sortable) {\n <div\n class=\"fs-chips chips-sortable\"\n cdkDropList\n [cdkDropListLockAxis]=\"'y'\"\n [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]=\"!!selected\"\n [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n <a\n class=\"chip-handle\"\n mat-icon-button\n [ngClass]=\"{ 'visible': !selected || selected.includes(chip.value)}\"\n cdkDragHandle>\n <mat-icon>\n drag_indicator\n </mat-icon>\n </a>\n @if (selected) {\n @if (selected.includes(chip.value)) {\n <a\n class=\"select-button select-button-selected\"\n (click)=\"unselect(chip)\"\n mat-icon-button>\n <mat-icon>\n remove_circle_outline\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 add_circle_outline\n </mat-icon>\n </a>\n }\n }\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n} @else {\n <div class=\"fs-chips\">\n @for (chip of chips; track chip) {\n <div class=\"chip-container\">\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n}", styles: ["@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>*:not(:last-child):after{content:\",\\a0\"}.fs-chips{display:flex;flex-wrap:wrap}.fs-chips:not(.chips-sortable){gap:5px}.fs-chips.chips-sortable{flex-direction:column}.fs-chips.chips-sortable .fs-chip-drag-container{border-bottom:8px solid transparent}.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 .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:#ea4266}::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$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
406
|
+
], queries: [{ propertyName: "chips", predicate: FsChipComponent }], viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], ngImport: i0, template: "@if (sortable) {\n <div\n class=\"fs-chips chips-sortable\"\n cdkDropList\n [cdkDropListLockAxis]=\"'y'\"\n [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]=\"!!selected\"\n [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n <a\n class=\"chip-handle\"\n mat-icon-button\n [ngClass]=\"{ 'visible': !selected || selected.includes(chip.value)}\"\n cdkDragHandle>\n <mat-icon>\n drag_indicator\n </mat-icon>\n </a>\n @if (selected) {\n @if (selected.includes(chip.value)) {\n <a\n class=\"select-button select-button-selected\"\n (click)=\"unselect(chip)\"\n mat-icon-button>\n <mat-icon>\n remove_circle_outline\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 add_circle_outline\n </mat-icon>\n </a>\n }\n }\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n} @else {\n <div class=\"fs-chips\">\n @for (chip of chips; track chip) {\n <div class=\"chip-container\">\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n}", styles: ["@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}.fs-chips:not(.chips-sortable){gap:5px}.fs-chips.chips-sortable{flex-direction:column}.fs-chips.chips-sortable .fs-chip-drag-container{border-bottom:8px solid transparent}.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 .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:#ea4266}::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$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
404
407
|
}
|
|
405
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipsComponent, decorators: [{
|
|
406
409
|
type: Component,
|
|
@@ -410,7 +413,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
410
413
|
useExisting: forwardRef(() => FsChipsComponent),
|
|
411
414
|
multi: true,
|
|
412
415
|
},
|
|
413
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (sortable) {\n <div\n class=\"fs-chips chips-sortable\"\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]=\"!!selected\"\n [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n <a\n class=\"chip-handle\"\n mat-icon-button\n [ngClass]=\"{ 'visible': !selected || selected.includes(chip.value)}\"\n cdkDragHandle>\n <mat-icon>\n drag_indicator\n </mat-icon>\n </a>\n @if (selected) {\n @if (selected.includes(chip.value)) {\n <a\n class=\"select-button select-button-selected\"\n (click)=\"unselect(chip)\"\n mat-icon-button>\n <mat-icon>\n remove_circle_outline\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 add_circle_outline\n </mat-icon>\n </a>\n }\n }\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n} @else {\n <div class=\"fs-chips\">\n @for (chip of chips; track chip) {\n <div class=\"chip-container\">\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n}", styles: ["@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>*:not(:last-child):after{content:\",\\a0\"}.fs-chips{display:flex;flex-wrap:wrap}.fs-chips:not(.chips-sortable){gap:5px}.fs-chips.chips-sortable{flex-direction:column}.fs-chips.chips-sortable .fs-chip-drag-container{border-bottom:8px solid transparent}.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 .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:#ea4266}::ng-deep .fs-chip-drag-container .chip-handle:not(.visible){visibility:hidden}\n"] }]
|
|
416
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (sortable) {\n <div\n class=\"fs-chips chips-sortable\"\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]=\"!!selected\"\n [cdkDragPreviewClass]=\"'fs-chip-drag-preview'\">\n <a\n class=\"chip-handle\"\n mat-icon-button\n [ngClass]=\"{ 'visible': !selected || selected.includes(chip.value)}\"\n cdkDragHandle>\n <mat-icon>\n drag_indicator\n </mat-icon>\n </a>\n @if (selected) {\n @if (selected.includes(chip.value)) {\n <a\n class=\"select-button select-button-selected\"\n (click)=\"unselect(chip)\"\n mat-icon-button>\n <mat-icon>\n remove_circle_outline\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 add_circle_outline\n </mat-icon>\n </a>\n }\n }\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n} @else {\n <div class=\"fs-chips\">\n @for (chip of chips; track chip) {\n <div class=\"chip-container\">\n <ng-component [ngTemplateOutlet]=\"chip.templateRef\"></ng-component>\n </div>\n }\n </div>\n}", styles: ["@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}.fs-chips:not(.chips-sortable){gap:5px}.fs-chips.chips-sortable{flex-direction:column}.fs-chips.chips-sortable .fs-chip-drag-container{border-bottom:8px solid transparent}.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 .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:#ea4266}::ng-deep .fs-chip-drag-container .chip-handle:not(.visible){visibility:hidden}\n"] }]
|
|
414
417
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.IterableDiffers }], propDecorators: { dropList: [{
|
|
415
418
|
type: ViewChild,
|
|
416
419
|
args: [CdkDropList, { static: true }]
|
|
@@ -439,15 +442,19 @@ class FsChipModule {
|
|
|
439
442
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, declarations: [FsChipsComponent,
|
|
440
443
|
FsChipComponent,
|
|
441
444
|
FsChipSuffixComponent,
|
|
442
|
-
FsChipSuffixDirective
|
|
445
|
+
FsChipSuffixDirective,
|
|
446
|
+
FsChipSubcontentDirective], imports: [CommonModule,
|
|
443
447
|
DragDropModule,
|
|
444
448
|
MatIconModule,
|
|
449
|
+
MatTooltipModule,
|
|
445
450
|
FsLabelModule], exports: [FsChipsComponent,
|
|
446
451
|
FsChipComponent,
|
|
447
|
-
FsChipSuffixDirective
|
|
452
|
+
FsChipSuffixDirective,
|
|
453
|
+
FsChipSubcontentDirective] });
|
|
448
454
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, imports: [CommonModule,
|
|
449
455
|
DragDropModule,
|
|
450
456
|
MatIconModule,
|
|
457
|
+
MatTooltipModule,
|
|
451
458
|
FsLabelModule] });
|
|
452
459
|
}
|
|
453
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, decorators: [{
|
|
@@ -457,18 +464,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
457
464
|
CommonModule,
|
|
458
465
|
DragDropModule,
|
|
459
466
|
MatIconModule,
|
|
467
|
+
MatTooltipModule,
|
|
460
468
|
FsLabelModule,
|
|
461
469
|
],
|
|
462
470
|
exports: [
|
|
463
471
|
FsChipsComponent,
|
|
464
472
|
FsChipComponent,
|
|
465
473
|
FsChipSuffixDirective,
|
|
474
|
+
FsChipSubcontentDirective,
|
|
466
475
|
],
|
|
467
476
|
declarations: [
|
|
468
477
|
FsChipsComponent,
|
|
469
478
|
FsChipComponent,
|
|
470
479
|
FsChipSuffixComponent,
|
|
471
480
|
FsChipSuffixDirective,
|
|
481
|
+
FsChipSubcontentDirective,
|
|
472
482
|
],
|
|
473
483
|
}]
|
|
474
484
|
}] });
|
|
@@ -477,5 +487,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
477
487
|
* Generated bundle index. Do not edit.
|
|
478
488
|
*/
|
|
479
489
|
|
|
480
|
-
export { FsChipComponent, FsChipModule, FsChipSuffixDirective, FsChipsComponent };
|
|
490
|
+
export { FsChipComponent, FsChipModule, FsChipSubcontentDirective, FsChipSuffixDirective, FsChipsComponent };
|
|
481
491
|
//# sourceMappingURL=firestitch-chip.mjs.map
|