@firestitch/chip 18.0.53 → 18.0.56
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-select/chip-select-option.component.d.ts +10 -0
- package/app/components/chip-select/chip-select-trigger.directive.d.ts +7 -0
- package/app/components/chip-select/chip-select.component.d.ts +32 -0
- package/app/fs-chip.module.d.ts +2 -1
- package/esm2022/app/components/chip/chip.component.mjs +4 -4
- package/esm2022/app/components/chip-select/chip-select-option.component.mjs +29 -0
- package/esm2022/app/components/chip-select/chip-select-trigger.directive.mjs +20 -0
- package/esm2022/app/components/chip-select/chip-select.component.mjs +128 -0
- package/esm2022/app/fs-chip.module.mjs +10 -4
- package/esm2022/public_api.mjs +2 -1
- package/fesm2022/firestitch-chip.mjs +213 -44
- package/fesm2022/firestitch-chip.mjs.map +1 -1
- package/package.json +1 -1
- package/public_api.d.ts +1 -0
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import { NgTemplateOutlet, NgStyle, NgClass, CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, inject, TemplateRef, Directive, ChangeDetectorRef, ViewChild, ContentChildren, ContentChild, IterableDiffers, forwardRef, NgModule } from '@angular/core';
|
|
3
|
+
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, inject, TemplateRef, Directive, ChangeDetectorRef, ViewChild, ContentChildren, ContentChild, ElementRef, IterableDiffers, forwardRef, NgModule } from '@angular/core';
|
|
4
4
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
5
5
|
import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
6
6
|
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
|
|
7
7
|
import { FsLabelModule } from '@firestitch/label';
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
8
|
+
import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
9
|
+
import { Subject, merge } from 'rxjs';
|
|
10
10
|
import { takeUntil } from 'rxjs/operators';
|
|
11
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
11
12
|
|
|
12
13
|
class FsChipPrefixComponent {
|
|
13
14
|
icon;
|
|
@@ -37,40 +38,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
37
38
|
type: Output
|
|
38
39
|
}] } });
|
|
39
40
|
|
|
40
|
-
class FsChipSuffixComponent {
|
|
41
|
-
icon;
|
|
42
|
-
link;
|
|
43
|
-
linkTarget;
|
|
44
|
-
color;
|
|
45
|
-
show = true;
|
|
46
|
-
tooltip;
|
|
47
|
-
click = new EventEmitter();
|
|
48
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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 });
|
|
50
|
-
}
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, decorators: [{
|
|
52
|
-
type: Component,
|
|
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
|
-
}], propDecorators: { icon: [{
|
|
59
|
-
type: Input
|
|
60
|
-
}], link: [{
|
|
61
|
-
type: Input
|
|
62
|
-
}], linkTarget: [{
|
|
63
|
-
type: Input
|
|
64
|
-
}], color: [{
|
|
65
|
-
type: Input
|
|
66
|
-
}], show: [{
|
|
67
|
-
type: Input
|
|
68
|
-
}], tooltip: [{
|
|
69
|
-
type: Input
|
|
70
|
-
}], click: [{
|
|
71
|
-
type: Output
|
|
72
|
-
}] } });
|
|
73
|
-
|
|
74
41
|
class FsChipPrefixDirective {
|
|
75
42
|
icon;
|
|
76
43
|
color;
|
|
@@ -144,6 +111,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
144
111
|
type: Output
|
|
145
112
|
}] } });
|
|
146
113
|
|
|
114
|
+
class FsChipSuffixComponent {
|
|
115
|
+
icon;
|
|
116
|
+
link;
|
|
117
|
+
linkTarget;
|
|
118
|
+
color;
|
|
119
|
+
show = true;
|
|
120
|
+
tooltip;
|
|
121
|
+
click = new EventEmitter();
|
|
122
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
123
|
+
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 });
|
|
124
|
+
}
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSuffixComponent, decorators: [{
|
|
126
|
+
type: Component,
|
|
127
|
+
args: [{ selector: 'fs-chip-suffix', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
128
|
+
NgTemplateOutlet,
|
|
129
|
+
MatIcon,
|
|
130
|
+
MatTooltip,
|
|
131
|
+
], 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"] }]
|
|
132
|
+
}], propDecorators: { icon: [{
|
|
133
|
+
type: Input
|
|
134
|
+
}], link: [{
|
|
135
|
+
type: Input
|
|
136
|
+
}], linkTarget: [{
|
|
137
|
+
type: Input
|
|
138
|
+
}], color: [{
|
|
139
|
+
type: Input
|
|
140
|
+
}], show: [{
|
|
141
|
+
type: Input
|
|
142
|
+
}], tooltip: [{
|
|
143
|
+
type: Input
|
|
144
|
+
}], click: [{
|
|
145
|
+
type: Output
|
|
146
|
+
}] } });
|
|
147
|
+
|
|
147
148
|
class FsChipComponent {
|
|
148
149
|
templateRef;
|
|
149
150
|
chipSuffixes;
|
|
@@ -165,7 +166,7 @@ class FsChipComponent {
|
|
|
165
166
|
selected;
|
|
166
167
|
padding;
|
|
167
168
|
contrastColor;
|
|
168
|
-
size = '
|
|
169
|
+
size = 'medium';
|
|
169
170
|
selectedToggled = new EventEmitter();
|
|
170
171
|
removed = new EventEmitter();
|
|
171
172
|
click = new EventEmitter();
|
|
@@ -240,7 +241,7 @@ class FsChipComponent {
|
|
|
240
241
|
return yiq >= 200;
|
|
241
242
|
}
|
|
242
243
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
-
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", outlineDash: "outlineDash", 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.suffixable]=\"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.size-medium]=\"size === 'medium'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.outline-dash]=\"outlineDash\"\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=\"suffixes\">\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]=\"'cancel'\"\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:
|
|
244
|
+
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", outlineDash: "outlineDash", 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.suffixable]=\"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.size-medium]=\"size === 'medium'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.outline-dash]=\"outlineDash\"\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=\"suffixes\">\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]=\"'cancel'\"\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:0 8px}.fs-chip.shape-square .image{padding:5% 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.outline-dash{border-style:dashed}.fs-chip.outlined.clickable:hover{background-color:#efefef}.fs-chip.clickable{cursor:pointer}.fs-chip.clickable:hover{filter:brightness(90%)}.fs-chip.sub-content .fs-chip-content{padding-top:4px;padding-bottom:4px}.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 .suffixes{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 3px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:2px}.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:not(.shape-square).suffixable,.fs-chip:not(.shape-square).selected{padding-right:0}.fs-chip:not(.shape-square) fs-chip-suffix:last-child{margin-right:3px}.fs-chip.shape-square fs-chip-suffix:last-child{margin-right:-3px}.fs-chip.size-large.prefixable:not(.imaged){padding-left:4px}.fs-chip.size-large ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}.fs-chip.size-medium{padding:0 8px;font-size:90%;min-height:25px;line-height:normal}.fs-chip.size-medium .image{height:26px;width:26px;margin-right:6px}.fs-chip.size-medium.prefixable:not(.imaged){padding-left:4px}.fs-chip.size-medium.iconed:not(.imaged){padding-left:5px}.fs-chip.size-medium.shape-round.imaged{padding-left:0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium ::ng-deep mat-icon{height:20px;width:20px;font-size:20px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:24px;line-height:normal}.fs-chip.size-small .image{height:24px;width:24px;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 .selected-check mat-icon{transform:scale(.7)}.fs-chip.size-small ::ng-deep mat-icon{height:18px;width:18px;font-size:18px}.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}.fs-chip.size-tiny.shape-round.imaged{padding-left:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:14px;width:14px;font-size:14px}.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.shape-round.imaged{padding-left:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}\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 });
|
|
244
245
|
}
|
|
245
246
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
246
247
|
type: Component,
|
|
@@ -251,7 +252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
251
252
|
NgStyle,
|
|
252
253
|
FsChipSuffixComponent,
|
|
253
254
|
NgClass,
|
|
254
|
-
], 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.suffixable]=\"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.size-medium]=\"size === 'medium'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.outline-dash]=\"outlineDash\"\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=\"suffixes\">\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]=\"'cancel'\"\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:
|
|
255
|
+
], 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.suffixable]=\"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.size-medium]=\"size === 'medium'\"\n [class.selectable]=\"selectable\"\n [class.removable]=\"removable\"\n [class.iconed]=\"!!icon\"\n [class.imaged]=\"!!image\"\n [class.outlined]=\"outlined\"\n [class.outline-dash]=\"outlineDash\"\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=\"suffixes\">\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]=\"'cancel'\"\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:0 8px}.fs-chip.shape-square .image{padding:5% 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.outline-dash{border-style:dashed}.fs-chip.outlined.clickable:hover{background-color:#efefef}.fs-chip.clickable{cursor:pointer}.fs-chip.clickable:hover{filter:brightness(90%)}.fs-chip.sub-content .fs-chip-content{padding-top:4px;padding-bottom:4px}.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 .suffixes{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 3px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:2px}.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:not(.shape-square).suffixable,.fs-chip:not(.shape-square).selected{padding-right:0}.fs-chip:not(.shape-square) fs-chip-suffix:last-child{margin-right:3px}.fs-chip.shape-square fs-chip-suffix:last-child{margin-right:-3px}.fs-chip.size-large.prefixable:not(.imaged){padding-left:4px}.fs-chip.size-large ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}.fs-chip.size-medium{padding:0 8px;font-size:90%;min-height:25px;line-height:normal}.fs-chip.size-medium .image{height:26px;width:26px;margin-right:6px}.fs-chip.size-medium.prefixable:not(.imaged){padding-left:4px}.fs-chip.size-medium.iconed:not(.imaged){padding-left:5px}.fs-chip.size-medium.shape-round.imaged{padding-left:0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium ::ng-deep mat-icon{height:20px;width:20px;font-size:20px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:24px;line-height:normal}.fs-chip.size-small .image{height:24px;width:24px;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 .selected-check mat-icon{transform:scale(.7)}.fs-chip.size-small ::ng-deep mat-icon{height:18px;width:18px;font-size:18px}.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}.fs-chip.size-tiny.shape-round.imaged{padding-left:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:14px;width:14px;font-size:14px}.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.shape-round.imaged{padding-left:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}\n"] }]
|
|
255
256
|
}], propDecorators: { templateRef: [{
|
|
256
257
|
type: ViewChild,
|
|
257
258
|
args: [TemplateRef, { static: true }]
|
|
@@ -306,6 +307,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
306
307
|
type: Output
|
|
307
308
|
}] } });
|
|
308
309
|
|
|
310
|
+
class FsChipSelectOptionComponent {
|
|
311
|
+
value;
|
|
312
|
+
select = new EventEmitter();
|
|
313
|
+
el = inject(ElementRef);
|
|
314
|
+
optionClick() {
|
|
315
|
+
this.select.emit(this.value);
|
|
316
|
+
}
|
|
317
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
318
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSelectOptionComponent, isStandalone: true, selector: "fs-chip-select-option", inputs: { value: "value" }, outputs: { select: "select" }, ngImport: i0, template: `
|
|
319
|
+
<div class="fs-chip-select-option" (click)="optionClick()">
|
|
320
|
+
<ng-content></ng-content>
|
|
321
|
+
</div>
|
|
322
|
+
`, isInline: true, styles: [".fs-chip-select-option{padding:10px 16px;cursor:pointer;white-space:nowrap}.fs-chip-select-option:hover{background-color:#0000000a}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
323
|
+
}
|
|
324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSelectOptionComponent, decorators: [{
|
|
325
|
+
type: Component,
|
|
326
|
+
args: [{ selector: 'fs-chip-select-option', template: `
|
|
327
|
+
<div class="fs-chip-select-option" (click)="optionClick()">
|
|
328
|
+
<ng-content></ng-content>
|
|
329
|
+
</div>
|
|
330
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".fs-chip-select-option{padding:10px 16px;cursor:pointer;white-space:nowrap}.fs-chip-select-option:hover{background-color:#0000000a}\n"] }]
|
|
331
|
+
}], propDecorators: { value: [{
|
|
332
|
+
type: Input
|
|
333
|
+
}], select: [{
|
|
334
|
+
type: Output
|
|
335
|
+
}] } });
|
|
336
|
+
|
|
337
|
+
class FsChipSelectTriggerDirective {
|
|
338
|
+
templateRef;
|
|
339
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSelectTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
340
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsChipSelectTriggerDirective, isStandalone: true, selector: "fs-chip-select-trigger", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, static: true }], ngImport: i0, template: `<ng-template #templateRef><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
341
|
+
}
|
|
342
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSelectTriggerDirective, decorators: [{
|
|
343
|
+
type: Component,
|
|
344
|
+
args: [{
|
|
345
|
+
selector: 'fs-chip-select-trigger',
|
|
346
|
+
template: `<ng-template #templateRef><ng-content></ng-content></ng-template>`,
|
|
347
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
348
|
+
standalone: true,
|
|
349
|
+
}]
|
|
350
|
+
}], propDecorators: { templateRef: [{
|
|
351
|
+
type: ViewChild,
|
|
352
|
+
args: ['templateRef', { static: true }]
|
|
353
|
+
}] } });
|
|
354
|
+
|
|
355
|
+
class FsChipSelectComponent {
|
|
356
|
+
chip;
|
|
357
|
+
overlayOrigin;
|
|
358
|
+
trigger;
|
|
359
|
+
options;
|
|
360
|
+
size = 'medium';
|
|
361
|
+
backgroundColor;
|
|
362
|
+
borderColor;
|
|
363
|
+
color;
|
|
364
|
+
shape = 'round';
|
|
365
|
+
outlined;
|
|
366
|
+
outlineDash;
|
|
367
|
+
select = new EventEmitter();
|
|
368
|
+
isOpen = false;
|
|
369
|
+
positions = [
|
|
370
|
+
{
|
|
371
|
+
originX: 'start',
|
|
372
|
+
originY: 'bottom',
|
|
373
|
+
overlayX: 'start',
|
|
374
|
+
overlayY: 'top',
|
|
375
|
+
offsetY: 2,
|
|
376
|
+
},
|
|
377
|
+
{
|
|
378
|
+
originX: 'start',
|
|
379
|
+
originY: 'top',
|
|
380
|
+
overlayX: 'start',
|
|
381
|
+
overlayY: 'bottom',
|
|
382
|
+
offsetY: -2,
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
originX: 'end',
|
|
386
|
+
originY: 'bottom',
|
|
387
|
+
overlayX: 'end',
|
|
388
|
+
overlayY: 'top',
|
|
389
|
+
offsetY: 2,
|
|
390
|
+
},
|
|
391
|
+
{
|
|
392
|
+
originX: 'end',
|
|
393
|
+
originY: 'top',
|
|
394
|
+
overlayX: 'end',
|
|
395
|
+
overlayY: 'bottom',
|
|
396
|
+
offsetY: -2,
|
|
397
|
+
},
|
|
398
|
+
];
|
|
399
|
+
_destroy$ = new Subject();
|
|
400
|
+
_cdRef = inject(ChangeDetectorRef);
|
|
401
|
+
ngAfterContentInit() {
|
|
402
|
+
this._subscribeToOptions();
|
|
403
|
+
this.options.changes
|
|
404
|
+
.pipe(takeUntil(this._destroy$))
|
|
405
|
+
.subscribe(() => this._subscribeToOptions());
|
|
406
|
+
}
|
|
407
|
+
toggleDropdown() {
|
|
408
|
+
this.isOpen = !this.isOpen;
|
|
409
|
+
this._cdRef.markForCheck();
|
|
410
|
+
}
|
|
411
|
+
closeDropdown() {
|
|
412
|
+
this.isOpen = false;
|
|
413
|
+
this._cdRef.markForCheck();
|
|
414
|
+
}
|
|
415
|
+
onOptionSelect(value) {
|
|
416
|
+
this.select.emit(value);
|
|
417
|
+
this.closeDropdown();
|
|
418
|
+
}
|
|
419
|
+
ngOnDestroy() {
|
|
420
|
+
this._destroy$.next();
|
|
421
|
+
this._destroy$.complete();
|
|
422
|
+
}
|
|
423
|
+
_subscribeToOptions() {
|
|
424
|
+
if (this.options.length === 0) {
|
|
425
|
+
return;
|
|
426
|
+
}
|
|
427
|
+
merge(...this.options.map((opt) => opt.select))
|
|
428
|
+
.pipe(takeUntil(this._destroy$))
|
|
429
|
+
.subscribe((value) => this.onOptionSelect(value));
|
|
430
|
+
}
|
|
431
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
432
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipSelectComponent, isStandalone: true, selector: "fs-chip-select", inputs: { size: "size", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", shape: "shape", outlined: "outlined", outlineDash: "outlineDash" }, outputs: { select: "select" }, queries: [{ propertyName: "trigger", first: true, predicate: FsChipSelectTriggerDirective, descendants: true }, { propertyName: "options", predicate: FsChipSelectOptionComponent }], viewQueries: [{ propertyName: "chip", first: true, predicate: ["chip"], descendants: true, static: true }, { propertyName: "overlayOrigin", first: true, predicate: ["overlayOrigin"], descendants: true, static: true }], ngImport: i0, template: "<fs-chip\n #chip\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [size]=\"size\"\n [backgroundColor]=\"backgroundColor\"\n [borderColor]=\"borderColor\"\n [color]=\"color\"\n [shape]=\"shape\"\n [outlined]=\"outlined\"\n [outlineDash]=\"outlineDash\"\n (click)=\"toggleDropdown()\">\n <div class=\"fs-chip-select-trigger\">\n @if (trigger) {\n <ng-container *ngTemplateOutlet=\"trigger.templateRef\"></ng-container>\n }\n <span\n class=\"fs-chip-select-caret\"\n [class.open]=\"isOpen\">\n <mat-icon>\n arrow_drop_down\n </mat-icon>\n </span>\n </div>\n</fs-chip>\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\">\n <div class=\"fs-chip-select-panel\">\n <ng-content></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-flex}fs-chip{cursor:pointer}.fs-chip-select-caret{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:2px;margin-right:-4px;transition:transform .2s ease}.fs-chip-select-caret mat-icon{display:flex;align-items:center;justify-content:center;line-height:1}.fs-chip-select-caret.open{transform:rotate(180deg)}.fs-chip-select-panel{background:#fff;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;min-width:120px;max-height:256px;overflow-y:auto;padding:8px 0}.fs-chip-select-trigger{display:flex;align-items:center}:host-context(.size-large) .fs-chip-select-caret mat-icon,:host fs-chip.size-large .fs-chip-select-caret mat-icon{width:22px;height:22px;font-size:22px}:host-context(.size-medium) .fs-chip-select-caret mat-icon,:host fs-chip.size-medium .fs-chip-select-caret mat-icon{width:20px;height:20px;font-size:20px}:host-context(.size-small) .fs-chip-select-caret mat-icon,:host fs-chip.size-small .fs-chip-select-caret mat-icon{width:18px;height:18px;font-size:18px}:host-context(.size-tiny) .fs-chip-select-caret mat-icon,:host fs-chip.size-tiny .fs-chip-select-caret mat-icon{width:14px;height:14px;font-size:14px}:host-context(.size-micro) .fs-chip-select-caret mat-icon,:host fs-chip.size-micro .fs-chip-select-caret mat-icon{width:12px;height:12px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: FsChipComponent, selector: "fs-chip", inputs: ["selectable", "removable", "value", "maxWidth", "width", "backgroundColor", "borderColor", "color", "shape", "outlined", "outlineDash", "icon", "image", "selected", "padding", "contrastColor", "size"], outputs: ["selectedToggled", "removed", "click"] }, { 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 });
|
|
433
|
+
}
|
|
434
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipSelectComponent, decorators: [{
|
|
435
|
+
type: Component,
|
|
436
|
+
args: [{ selector: 'fs-chip-select', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
437
|
+
CdkConnectedOverlay,
|
|
438
|
+
CdkOverlayOrigin,
|
|
439
|
+
FsChipComponent,
|
|
440
|
+
MatIcon,
|
|
441
|
+
NgTemplateOutlet,
|
|
442
|
+
], template: "<fs-chip\n #chip\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [size]=\"size\"\n [backgroundColor]=\"backgroundColor\"\n [borderColor]=\"borderColor\"\n [color]=\"color\"\n [shape]=\"shape\"\n [outlined]=\"outlined\"\n [outlineDash]=\"outlineDash\"\n (click)=\"toggleDropdown()\">\n <div class=\"fs-chip-select-trigger\">\n @if (trigger) {\n <ng-container *ngTemplateOutlet=\"trigger.templateRef\"></ng-container>\n }\n <span\n class=\"fs-chip-select-caret\"\n [class.open]=\"isOpen\">\n <mat-icon>\n arrow_drop_down\n </mat-icon>\n </span>\n </div>\n</fs-chip>\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n (backdropClick)=\"closeDropdown()\">\n <div class=\"fs-chip-select-panel\">\n <ng-content></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-flex}fs-chip{cursor:pointer}.fs-chip-select-caret{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:2px;margin-right:-4px;transition:transform .2s ease}.fs-chip-select-caret mat-icon{display:flex;align-items:center;justify-content:center;line-height:1}.fs-chip-select-caret.open{transform:rotate(180deg)}.fs-chip-select-panel{background:#fff;border-radius:4px;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;min-width:120px;max-height:256px;overflow-y:auto;padding:8px 0}.fs-chip-select-trigger{display:flex;align-items:center}:host-context(.size-large) .fs-chip-select-caret mat-icon,:host fs-chip.size-large .fs-chip-select-caret mat-icon{width:22px;height:22px;font-size:22px}:host-context(.size-medium) .fs-chip-select-caret mat-icon,:host fs-chip.size-medium .fs-chip-select-caret mat-icon{width:20px;height:20px;font-size:20px}:host-context(.size-small) .fs-chip-select-caret mat-icon,:host fs-chip.size-small .fs-chip-select-caret mat-icon{width:18px;height:18px;font-size:18px}:host-context(.size-tiny) .fs-chip-select-caret mat-icon,:host fs-chip.size-tiny .fs-chip-select-caret mat-icon{width:14px;height:14px;font-size:14px}:host-context(.size-micro) .fs-chip-select-caret mat-icon,:host fs-chip.size-micro .fs-chip-select-caret mat-icon{width:12px;height:12px;font-size:12px}\n"] }]
|
|
443
|
+
}], propDecorators: { chip: [{
|
|
444
|
+
type: ViewChild,
|
|
445
|
+
args: ['chip', { static: true }]
|
|
446
|
+
}], overlayOrigin: [{
|
|
447
|
+
type: ViewChild,
|
|
448
|
+
args: ['overlayOrigin', { static: true }]
|
|
449
|
+
}], trigger: [{
|
|
450
|
+
type: ContentChild,
|
|
451
|
+
args: [FsChipSelectTriggerDirective]
|
|
452
|
+
}], options: [{
|
|
453
|
+
type: ContentChildren,
|
|
454
|
+
args: [FsChipSelectOptionComponent]
|
|
455
|
+
}], size: [{
|
|
456
|
+
type: Input
|
|
457
|
+
}], backgroundColor: [{
|
|
458
|
+
type: Input
|
|
459
|
+
}], borderColor: [{
|
|
460
|
+
type: Input
|
|
461
|
+
}], color: [{
|
|
462
|
+
type: Input
|
|
463
|
+
}], shape: [{
|
|
464
|
+
type: Input
|
|
465
|
+
}], outlined: [{
|
|
466
|
+
type: Input
|
|
467
|
+
}], outlineDash: [{
|
|
468
|
+
type: Input
|
|
469
|
+
}], select: [{
|
|
470
|
+
type: Output
|
|
471
|
+
}] } });
|
|
472
|
+
|
|
309
473
|
class FsChipsComponent {
|
|
310
474
|
dropList;
|
|
311
475
|
chips;
|
|
@@ -529,11 +693,13 @@ class FsChipModule {
|
|
|
529
693
|
FsChipPrefixComponent,
|
|
530
694
|
FsChipPrefixDirective,
|
|
531
695
|
FsChipSuffixDirective,
|
|
532
|
-
FsChipSubcontentDirective
|
|
696
|
+
FsChipSubcontentDirective,
|
|
697
|
+
FsChipSelectComponent], exports: [FsChipsComponent,
|
|
533
698
|
FsChipComponent,
|
|
534
699
|
FsChipSuffixDirective,
|
|
535
700
|
FsChipPrefixDirective,
|
|
536
|
-
FsChipSubcontentDirective
|
|
701
|
+
FsChipSubcontentDirective,
|
|
702
|
+
FsChipSelectComponent] });
|
|
537
703
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, imports: [CommonModule,
|
|
538
704
|
DragDropModule,
|
|
539
705
|
MatIconModule,
|
|
@@ -542,7 +708,8 @@ class FsChipModule {
|
|
|
542
708
|
FsChipsComponent,
|
|
543
709
|
FsChipComponent,
|
|
544
710
|
FsChipSuffixComponent,
|
|
545
|
-
FsChipPrefixComponent
|
|
711
|
+
FsChipPrefixComponent,
|
|
712
|
+
FsChipSelectComponent] });
|
|
546
713
|
}
|
|
547
714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipModule, decorators: [{
|
|
548
715
|
type: NgModule,
|
|
@@ -560,6 +727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
560
727
|
FsChipPrefixDirective,
|
|
561
728
|
FsChipSuffixDirective,
|
|
562
729
|
FsChipSubcontentDirective,
|
|
730
|
+
FsChipSelectComponent,
|
|
563
731
|
],
|
|
564
732
|
exports: [
|
|
565
733
|
FsChipsComponent,
|
|
@@ -567,6 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
567
735
|
FsChipSuffixDirective,
|
|
568
736
|
FsChipPrefixDirective,
|
|
569
737
|
FsChipSubcontentDirective,
|
|
738
|
+
FsChipSelectComponent,
|
|
570
739
|
],
|
|
571
740
|
}]
|
|
572
741
|
}] });
|
|
@@ -575,5 +744,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
575
744
|
* Generated bundle index. Do not edit.
|
|
576
745
|
*/
|
|
577
746
|
|
|
578
|
-
export { FsChipComponent, FsChipModule, FsChipPrefixDirective, FsChipSubcontentDirective, FsChipSuffixDirective, FsChipsComponent };
|
|
747
|
+
export { FsChipComponent, FsChipModule, FsChipPrefixDirective, FsChipSelectComponent, FsChipSubcontentDirective, FsChipSuffixDirective, FsChipsComponent };
|
|
579
748
|
//# sourceMappingURL=firestitch-chip.mjs.map
|