@firestitch/chip 18.0.43 → 18.0.44
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 +6 -5
- package/app/components/chip-prefix/chip-prefix.component.d.ts +1 -1
- package/app/components/chip-suffix/chip-suffix.component.d.ts +1 -1
- package/app/components/chips/chips.component.d.ts +1 -1
- package/app/directives/chip-prefix.directive.d.ts +1 -1
- package/app/directives/chip-subcontent.directive.d.ts +1 -1
- package/app/directives/chip-suffix.directive.d.ts +1 -1
- package/app/fs-chip.module.d.ts +13 -13
- package/esm2022/app/components/chip/chip.component.mjs +34 -18
- package/esm2022/app/components/chip-prefix/chip-prefix.component.mjs +5 -5
- package/esm2022/app/components/chip-suffix/chip-suffix.component.mjs +10 -6
- package/esm2022/app/components/chips/chips.component.mjs +14 -8
- package/esm2022/app/directives/chip-prefix.directive.mjs +3 -2
- package/esm2022/app/directives/chip-subcontent.directive.mjs +3 -2
- package/esm2022/app/directives/chip-suffix.directive.mjs +3 -2
- package/esm2022/app/fs-chip.module.mjs +18 -15
- package/fesm2022/firestitch-chip.mjs +74 -45
- package/fesm2022/firestitch-chip.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { CommonModule } from '@angular/common';
|
|
1
|
+
import { NgTemplateOutlet, NgStyle, NgClass, CommonModule } from '@angular/common';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, inject, TemplateRef, Directive, ViewChild, ContentChildren, ContentChild,
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
9
|
-
import * as i2$1 from '@angular/material/tooltip';
|
|
10
|
-
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
3
|
+
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, inject, TemplateRef, Directive, ChangeDetectorRef, ViewChild, ContentChildren, ContentChild, IterableDiffers, forwardRef, NgModule } from '@angular/core';
|
|
4
|
+
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
5
|
+
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
6
|
+
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
11
7
|
import { FsLabelModule } from '@firestitch/label';
|
|
12
8
|
import { Subject } from 'rxjs';
|
|
13
9
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -24,11 +20,11 @@ class FsChipPrefixComponent {
|
|
|
24
20
|
return this.click.observers.length !== 0;
|
|
25
21
|
}
|
|
26
22
|
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:
|
|
23
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipPrefixComponent, isStandalone: true, 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28
24
|
}
|
|
29
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipPrefixComponent, decorators: [{
|
|
30
26
|
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"] }]
|
|
27
|
+
args: [{ selector: 'fs-chip-prefix', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIcon, MatTooltip], 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
28
|
}], propDecorators: { icon: [{
|
|
33
29
|
type: Input
|
|
34
30
|
}], color: [{
|
|
@@ -50,11 +46,15 @@ class FsChipSuffixComponent {
|
|
|
50
46
|
tooltip;
|
|
51
47
|
click = new EventEmitter();
|
|
52
48
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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:
|
|
49
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipSuffixComponent, isStandalone: true, 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
54
50
|
}
|
|
55
51
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, decorators: [{
|
|
56
52
|
type: Component,
|
|
57
|
-
args: [{ selector: 'fs-chip-suffix', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
53
|
+
args: [{ selector: 'fs-chip-suffix', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
54
|
+
NgTemplateOutlet,
|
|
55
|
+
MatIcon,
|
|
56
|
+
MatTooltip,
|
|
57
|
+
], 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"] }]
|
|
58
58
|
}], propDecorators: { icon: [{
|
|
59
59
|
type: Input
|
|
60
60
|
}], link: [{
|
|
@@ -79,12 +79,13 @@ class FsChipPrefixDirective {
|
|
|
79
79
|
click = new EventEmitter();
|
|
80
80
|
templateRef = inject(TemplateRef);
|
|
81
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 });
|
|
82
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipPrefixDirective, isStandalone: true, selector: "[fsChipPrefix]", inputs: { icon: "icon", color: "color", data: "data" }, outputs: { click: "click" }, ngImport: i0 });
|
|
83
83
|
}
|
|
84
84
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipPrefixDirective, decorators: [{
|
|
85
85
|
type: Directive,
|
|
86
86
|
args: [{
|
|
87
87
|
selector: '[fsChipPrefix]',
|
|
88
|
+
standalone: true,
|
|
88
89
|
}]
|
|
89
90
|
}], propDecorators: { icon: [{
|
|
90
91
|
type: Input
|
|
@@ -98,12 +99,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
98
99
|
|
|
99
100
|
class FsChipSubcontentDirective {
|
|
100
101
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSubcontentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
101
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSubcontentDirective, selector: "[fsChipSubcontent]", ngImport: i0 });
|
|
102
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSubcontentDirective, isStandalone: true, selector: "[fsChipSubcontent]", ngImport: i0 });
|
|
102
103
|
}
|
|
103
104
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSubcontentDirective, decorators: [{
|
|
104
105
|
type: Directive,
|
|
105
106
|
args: [{
|
|
106
107
|
selector: '[fsChipSubcontent]',
|
|
108
|
+
standalone: true,
|
|
107
109
|
}]
|
|
108
110
|
}] });
|
|
109
111
|
|
|
@@ -118,12 +120,13 @@ class FsChipSuffixDirective {
|
|
|
118
120
|
click = new EventEmitter();
|
|
119
121
|
templateRef = inject(TemplateRef);
|
|
120
122
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
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 });
|
|
123
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSuffixDirective, isStandalone: true, selector: "[fsChipSuffix]", inputs: { icon: "icon", link: "link", linkTarget: "linkTarget", color: "color", data: "data", tooltip: "tooltip" }, outputs: { click: "click" }, ngImport: i0 });
|
|
122
124
|
}
|
|
123
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixDirective, decorators: [{
|
|
124
126
|
type: Directive,
|
|
125
127
|
args: [{
|
|
126
128
|
selector: '[fsChipSuffix]',
|
|
129
|
+
standalone: true,
|
|
127
130
|
}]
|
|
128
131
|
}], propDecorators: { icon: [{
|
|
129
132
|
type: Input
|
|
@@ -142,7 +145,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
142
145
|
}] } });
|
|
143
146
|
|
|
144
147
|
class FsChipComponent {
|
|
145
|
-
_cdRef;
|
|
146
148
|
templateRef;
|
|
147
149
|
chipSuffixes;
|
|
148
150
|
chipPrefixes;
|
|
@@ -165,14 +167,13 @@ class FsChipComponent {
|
|
|
165
167
|
size = 'large';
|
|
166
168
|
selectedToggled = new EventEmitter();
|
|
167
169
|
removed = new EventEmitter();
|
|
170
|
+
click = new EventEmitter();
|
|
168
171
|
hasChips;
|
|
169
172
|
defaultColor = '#474747';
|
|
170
173
|
defaultBackgroundColor = '#e7e7e7';
|
|
171
174
|
_destroy$ = new Subject();
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
click() {
|
|
175
|
+
_cdRef = inject(ChangeDetectorRef);
|
|
176
|
+
clicked() {
|
|
176
177
|
if (this.selectable) {
|
|
177
178
|
this.selected = !this.selected;
|
|
178
179
|
this.selectedToggled.emit({ value: this.value, selected: this.selected });
|
|
@@ -204,9 +205,18 @@ class FsChipComponent {
|
|
|
204
205
|
}
|
|
205
206
|
}
|
|
206
207
|
chipSuffixClick(chipSuffix, event, value) {
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
208
|
+
if (chipSuffix.click.observed) {
|
|
209
|
+
event.stopImmediatePropagation();
|
|
210
|
+
event.stopPropagation();
|
|
211
|
+
chipSuffix.click.emit({ event, data: value ?? chipSuffix.data });
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
chipPrefixClick(chipPrefix, event, value) {
|
|
215
|
+
if (chipPrefix.click.observed) {
|
|
216
|
+
event.stopImmediatePropagation();
|
|
217
|
+
event.stopPropagation();
|
|
218
|
+
chipPrefix.click.emit({ event, data: value ?? chipPrefix.data });
|
|
219
|
+
}
|
|
210
220
|
}
|
|
211
221
|
ngOnDestroy() {
|
|
212
222
|
this._destroy$.next(null);
|
|
@@ -228,13 +238,20 @@ class FsChipComponent {
|
|
|
228
238
|
const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
|
|
229
239
|
return yiq >= 200;
|
|
230
240
|
}
|
|
231
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [
|
|
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)=\"
|
|
241
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
242
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, isStandalone: true, 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", click: "click" }, 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)=\"clicked()\"\n [style.backgroundColor]=\"backgroundColor ? backgroundColor : (outlined ? undefined : 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.clickable]=\"click.observed\"\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 [ngClass]=\"{ 'clickable': chipPrefix.click.observed }\"\n [icon]=\"chipPrefix.icon\"\n [color]=\"chipPrefix.color || color || contrastColor || defaultColor\"\n (click)=\"chipPrefixClick(chipPrefix, $event, 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.observed }\"\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;min-width:0}.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;box-sizing:border-box}.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 #f0f0f0;box-sizing:border-box}.fs-chip.outlined.clickable:hover{background-color:#efefef}.fs-chip.clickable{cursor:pointer}.fs-chip.clickable:hover{filter:brightness(90%)}.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 .prefixes fs-chip-prefix{margin-right:2px}.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,.fs-chip fs-chip-prefix.clickable{cursor:pointer}.fs-chip fs-chip-suffix.clickable:hover,.fs-chip fs-chip-prefix.clickable:hover{filter:brightness(200%)}.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: "component", type: FsChipPrefixComponent, selector: "fs-chip-prefix", inputs: ["icon", "color", "show", "tooltip"], outputs: ["click"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: FsChipSuffixComponent, selector: "fs-chip-suffix", inputs: ["icon", "link", "linkTarget", "color", "show", "tooltip"], outputs: ["click"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
233
243
|
}
|
|
234
244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
235
245
|
type: Component,
|
|
236
|
-
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
237
|
-
|
|
246
|
+
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
247
|
+
FsChipPrefixComponent,
|
|
248
|
+
NgTemplateOutlet,
|
|
249
|
+
MatIcon,
|
|
250
|
+
NgStyle,
|
|
251
|
+
FsChipSuffixComponent,
|
|
252
|
+
NgClass,
|
|
253
|
+
], template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"clicked()\"\n [style.backgroundColor]=\"backgroundColor ? backgroundColor : (outlined ? undefined : 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.clickable]=\"click.observed\"\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 [ngClass]=\"{ 'clickable': chipPrefix.click.observed }\"\n [icon]=\"chipPrefix.icon\"\n [color]=\"chipPrefix.color || color || contrastColor || defaultColor\"\n (click)=\"chipPrefixClick(chipPrefix, $event, 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.observed }\"\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;min-width:0}.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;box-sizing:border-box}.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 #f0f0f0;box-sizing:border-box}.fs-chip.outlined.clickable:hover{background-color:#efefef}.fs-chip.clickable{cursor:pointer}.fs-chip.clickable:hover{filter:brightness(90%)}.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 .prefixes fs-chip-prefix{margin-right:2px}.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,.fs-chip fs-chip-prefix.clickable{cursor:pointer}.fs-chip fs-chip-suffix.clickable:hover,.fs-chip fs-chip-prefix.clickable:hover{filter:brightness(200%)}.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"] }]
|
|
254
|
+
}], propDecorators: { templateRef: [{
|
|
238
255
|
type: ViewChild,
|
|
239
256
|
args: [TemplateRef, { static: true }]
|
|
240
257
|
}], chipSuffixes: [{
|
|
@@ -282,6 +299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
282
299
|
type: Output
|
|
283
300
|
}], removed: [{
|
|
284
301
|
type: Output
|
|
302
|
+
}], click: [{
|
|
303
|
+
type: Output
|
|
285
304
|
}] } });
|
|
286
305
|
|
|
287
306
|
class FsChipsComponent {
|
|
@@ -442,13 +461,13 @@ class FsChipsComponent {
|
|
|
442
461
|
}
|
|
443
462
|
}
|
|
444
463
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
445
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipsComponent, selector: "fs-chips", inputs: { compare: "compare", multiple: "multiple", sortable: "sortable", selectable: "selectable", orientation: "orientation", width: "width" }, providers: [
|
|
464
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipsComponent, isStandalone: true, selector: "fs-chips", inputs: { compare: "compare", multiple: "multiple", sortable: "sortable", selectable: "selectable", orientation: "orientation", width: "width" }, providers: [
|
|
446
465
|
{
|
|
447
466
|
provide: NG_VALUE_ACCESSOR,
|
|
448
467
|
useExisting: forwardRef(() => FsChipsComponent),
|
|
449
468
|
multi: true,
|
|
450
469
|
},
|
|
451
|
-
], queries: [{ propertyName: "chips", predicate: FsChipComponent }], viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], ngImport: i0, template: "@if (sortable) {\n <div\n [ngClass]=\"['fs-chips']\"\n [style.width]=\"width\"\n [class.orientation-vertical]=\"orientationVertical\"\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 <div\n class=\"fs-chip-container\"\n [class.orientation-vertical]=\"orientationVertical\">\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 </div>\n }\n </div>\n} @else {\n <div\n class=\"fs-chips\"\n [class.orientation-vertical]=\"orientationVertical\"\n [style.width]=\"width\">\n @for (chip of chips; track chip) {\n <div\n class=\"fs-chip-container\"\n [class.orientation-vertical]=\"orientationVertical\">\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\"}::ng-deep .fs-chip-container.orientation-vertical{display:flex;align-items:center;width:100%}::ng-deep .fs-chip-container.orientation-vertical .selected-check{display:none!important}.fs-chips{display:flex;flex-wrap:wrap;gap:5px}.fs-chips.orientation-vertical{gap:8px;flex-direction:column}.fs-chips.chips-sortable ::ng-deep .cdk-drag-placeholder{opacity:.3}.fs-chips .fs-chip-drag-container{display:flex}.fs-chips ::ng-deep .cdk-drag-placeholder{opacity:.5}::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.fs-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:#ddd}::ng-deep .fs-chip-drag-container .chip-handle:not(.visible){visibility:hidden}\n"], dependencies: [{ kind: "directive", type:
|
|
470
|
+
], queries: [{ propertyName: "chips", predicate: FsChipComponent }], viewQueries: [{ propertyName: "dropList", first: true, predicate: CdkDropList, descendants: true, static: true }], ngImport: i0, template: "@if (sortable) {\n <div\n [ngClass]=\"['fs-chips']\"\n [style.width]=\"width\"\n [class.orientation-vertical]=\"orientationVertical\"\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 <div\n class=\"fs-chip-container\"\n [class.orientation-vertical]=\"orientationVertical\">\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 </div>\n }\n </div>\n} @else {\n <div\n class=\"fs-chips\"\n [class.orientation-vertical]=\"orientationVertical\"\n [style.width]=\"width\">\n @for (chip of chips; track chip) {\n <div\n class=\"fs-chip-container\"\n [class.orientation-vertical]=\"orientationVertical\">\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\"}::ng-deep .fs-chip-container.orientation-vertical{display:flex;align-items:center;width:100%}::ng-deep .fs-chip-container.orientation-vertical .selected-check{display:none!important}.fs-chips{display:flex;flex-wrap:wrap;gap:5px}.fs-chips.orientation-vertical{gap:8px;flex-direction:column}.fs-chips.chips-sortable ::ng-deep .cdk-drag-placeholder{opacity:.3}.fs-chips .fs-chip-drag-container{display:flex}.fs-chips ::ng-deep .cdk-drag-placeholder{opacity:.5}::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.fs-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:#ddd}::ng-deep .fs-chip-drag-container .chip-handle:not(.visible){visibility:hidden}\n"], dependencies: [{ kind: "directive", type: 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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
452
471
|
}
|
|
453
472
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipsComponent, decorators: [{
|
|
454
473
|
type: Component,
|
|
@@ -458,7 +477,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
458
477
|
useExisting: forwardRef(() => FsChipsComponent),
|
|
459
478
|
multi: true,
|
|
460
479
|
},
|
|
461
|
-
], changeDetection: ChangeDetectionStrategy.OnPush,
|
|
480
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
481
|
+
CdkDropList,
|
|
482
|
+
NgClass,
|
|
483
|
+
CdkDrag,
|
|
484
|
+
CdkDragHandle,
|
|
485
|
+
MatIcon,
|
|
486
|
+
NgTemplateOutlet,
|
|
487
|
+
], template: "@if (sortable) {\n <div\n [ngClass]=\"['fs-chips']\"\n [style.width]=\"width\"\n [class.orientation-vertical]=\"orientationVertical\"\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 <div\n class=\"fs-chip-container\"\n [class.orientation-vertical]=\"orientationVertical\">\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 </div>\n }\n </div>\n} @else {\n <div\n class=\"fs-chips\"\n [class.orientation-vertical]=\"orientationVertical\"\n [style.width]=\"width\">\n @for (chip of chips; track chip) {\n <div\n class=\"fs-chip-container\"\n [class.orientation-vertical]=\"orientationVertical\">\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\"}::ng-deep .fs-chip-container.orientation-vertical{display:flex;align-items:center;width:100%}::ng-deep .fs-chip-container.orientation-vertical .selected-check{display:none!important}.fs-chips{display:flex;flex-wrap:wrap;gap:5px}.fs-chips.orientation-vertical{gap:8px;flex-direction:column}.fs-chips.chips-sortable ::ng-deep .cdk-drag-placeholder{opacity:.3}.fs-chips .fs-chip-drag-container{display:flex}.fs-chips ::ng-deep .cdk-drag-placeholder{opacity:.5}::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.fs-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:#ddd}::ng-deep .fs-chip-drag-container .chip-handle:not(.visible){visibility:hidden}\n"] }]
|
|
462
488
|
}], ctorParameters: () => [], propDecorators: { dropList: [{
|
|
463
489
|
type: ViewChild,
|
|
464
490
|
args: [CdkDropList, { static: true }]
|
|
@@ -486,17 +512,18 @@ class FsChipModule {
|
|
|
486
512
|
};
|
|
487
513
|
}
|
|
488
514
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
489
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule,
|
|
515
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, imports: [CommonModule,
|
|
516
|
+
DragDropModule,
|
|
517
|
+
MatIconModule,
|
|
518
|
+
MatTooltipModule,
|
|
519
|
+
FsLabelModule,
|
|
520
|
+
FsChipsComponent,
|
|
490
521
|
FsChipComponent,
|
|
491
522
|
FsChipSuffixComponent,
|
|
492
523
|
FsChipPrefixComponent,
|
|
493
524
|
FsChipPrefixDirective,
|
|
494
525
|
FsChipSuffixDirective,
|
|
495
|
-
FsChipSubcontentDirective],
|
|
496
|
-
DragDropModule,
|
|
497
|
-
MatIconModule,
|
|
498
|
-
MatTooltipModule,
|
|
499
|
-
FsLabelModule], exports: [FsChipsComponent,
|
|
526
|
+
FsChipSubcontentDirective], exports: [FsChipsComponent,
|
|
500
527
|
FsChipComponent,
|
|
501
528
|
FsChipSuffixDirective,
|
|
502
529
|
FsChipPrefixDirective,
|
|
@@ -505,7 +532,11 @@ class FsChipModule {
|
|
|
505
532
|
DragDropModule,
|
|
506
533
|
MatIconModule,
|
|
507
534
|
MatTooltipModule,
|
|
508
|
-
FsLabelModule
|
|
535
|
+
FsLabelModule,
|
|
536
|
+
FsChipsComponent,
|
|
537
|
+
FsChipComponent,
|
|
538
|
+
FsChipSuffixComponent,
|
|
539
|
+
FsChipPrefixComponent] });
|
|
509
540
|
}
|
|
510
541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, decorators: [{
|
|
511
542
|
type: NgModule,
|
|
@@ -516,21 +547,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
516
547
|
MatIconModule,
|
|
517
548
|
MatTooltipModule,
|
|
518
549
|
FsLabelModule,
|
|
519
|
-
],
|
|
520
|
-
exports: [
|
|
521
550
|
FsChipsComponent,
|
|
522
551
|
FsChipComponent,
|
|
523
|
-
|
|
552
|
+
FsChipSuffixComponent,
|
|
553
|
+
FsChipPrefixComponent,
|
|
524
554
|
FsChipPrefixDirective,
|
|
555
|
+
FsChipSuffixDirective,
|
|
525
556
|
FsChipSubcontentDirective,
|
|
526
557
|
],
|
|
527
|
-
|
|
558
|
+
exports: [
|
|
528
559
|
FsChipsComponent,
|
|
529
560
|
FsChipComponent,
|
|
530
|
-
FsChipSuffixComponent,
|
|
531
|
-
FsChipPrefixComponent,
|
|
532
|
-
FsChipPrefixDirective,
|
|
533
561
|
FsChipSuffixDirective,
|
|
562
|
+
FsChipPrefixDirective,
|
|
534
563
|
FsChipSubcontentDirective,
|
|
535
564
|
],
|
|
536
565
|
}]
|