@firestitch/chip 18.0.45 → 18.0.46
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.
|
@@ -104,7 +104,7 @@ export class FsChipComponent {
|
|
|
104
104
|
return yiq >= 200;
|
|
105
105
|
}
|
|
106
106
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
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.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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:28px;line-height:normal}.fs-chip.size-medium .image{height:28px;width:25px;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 fs-chip-suffix{margin-right:3px}.fs-chip.size-medium .selected-check{margin:0 3px 0 0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium.sub-content{padding:4px 7px}.fs-chip.size-medium ::ng-deep mat-icon{height:23px;width:23px;font-size:23px}.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 });
|
|
107
|
+
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.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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:26px;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 fs-chip-suffix{margin-right:3px}.fs-chip.size-medium .selected-check{margin:0 3px 0 0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium.sub-content{padding:4px 7px}.fs-chip.size-medium ::ng-deep mat-icon{height:23px;width:23px;font-size:23px}.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 });
|
|
108
108
|
}
|
|
109
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
110
110
|
type: Component,
|
|
@@ -115,7 +115,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
115
115
|
NgStyle,
|
|
116
116
|
FsChipSuffixComponent,
|
|
117
117
|
NgClass,
|
|
118
|
-
], 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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:
|
|
118
|
+
], 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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:26px;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 fs-chip-suffix{margin-right:3px}.fs-chip.size-medium .selected-check{margin:0 3px 0 0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium.sub-content{padding:4px 7px}.fs-chip.size-medium ::ng-deep mat-icon{height:23px;width:23px;font-size:23px}.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"] }]
|
|
119
119
|
}], propDecorators: { templateRef: [{
|
|
120
120
|
type: ViewChild,
|
|
121
121
|
args: [TemplateRef, { static: true }]
|
|
@@ -240,7 +240,7 @@ class FsChipComponent {
|
|
|
240
240
|
return yiq >= 200;
|
|
241
241
|
}
|
|
242
242
|
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.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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:28px;line-height:normal}.fs-chip.size-medium .image{height:28px;width:25px;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 fs-chip-suffix{margin-right:3px}.fs-chip.size-medium .selected-check{margin:0 3px 0 0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium.sub-content{padding:4px 7px}.fs-chip.size-medium ::ng-deep mat-icon{height:23px;width:23px;font-size:23px}.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 });
|
|
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.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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:26px;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 fs-chip-suffix{margin-right:3px}.fs-chip.size-medium .selected-check{margin:0 3px 0 0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium.sub-content{padding:4px 7px}.fs-chip.size-medium ::ng-deep mat-icon{height:23px;width:23px;font-size:23px}.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 });
|
|
244
244
|
}
|
|
245
245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
246
246
|
type: Component,
|
|
@@ -251,7 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
251
251
|
NgStyle,
|
|
252
252
|
FsChipSuffixComponent,
|
|
253
253
|
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.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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:
|
|
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.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.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=\"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.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 .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-medium{padding:0 8px;font-size:90%;min-height:26px;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 fs-chip-suffix{margin-right:3px}.fs-chip.size-medium .selected-check{margin:0 3px 0 0}.fs-chip.size-medium .selected-check mat-icon{transform:scale(.8)}.fs-chip.size-medium.sub-content{padding:4px 7px}.fs-chip.size-medium ::ng-deep mat-icon{height:23px;width:23px;font-size:23px}.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"] }]
|
|
255
255
|
}], propDecorators: { templateRef: [{
|
|
256
256
|
type: ViewChild,
|
|
257
257
|
args: [TemplateRef, { static: true }]
|