@firestitch/chip 18.0.14 → 18.0.15
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.
|
@@ -126,11 +126,11 @@ export class FsChipComponent {
|
|
|
126
126
|
this._cdRef.markForCheck();
|
|
127
127
|
}
|
|
128
128
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
129
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", maxWidth: "maxWidth", width: "width", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", icon: "icon", image: "image", setSelected: ["selected", "setSelected"], setSize: ["size", "setSize"] }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, queries: [{ propertyName: "chipSuffixes", predicate: FsChipSuffixDirective }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:
|
|
129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", maxWidth: "maxWidth", width: "width", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", icon: "icon", image: "image", setSelected: ["selected", "setSelected"], setSize: ["size", "setSize"] }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, queries: [{ propertyName: "chipSuffixes", predicate: FsChipSuffixDirective }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:3px}.fs-chip fs-chip-suffix.clickable{cursor:pointer}.fs-chip.size-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.imaged{padding-left:0}.fs-chip.size-micro.actionable,.fs-chip.size-micro.selected{padding-right:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.fs-chip.size-tiny{padding:0 6px;min-height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny .image{height:18px;width:18px;margin-right:3px}.fs-chip.size-tiny.iconed:not(.imaged){padding-left:3px}.fs-chip.size-tiny fs-chip-suffix{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.imaged{padding-left:0}.fs-chip.size-tiny.actionable,.fs-chip.size-tiny.selected{padding-right:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.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.actionable,.fs-chip.size-small.selected{padding-right:0}.fs-chip.size-small ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.FsChipSuffixComponent, selector: "fs-chip-suffix", inputs: ["icon", "link", "linkTarget", "color"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
130
130
|
}
|
|
131
131
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
132
132
|
type: Component,
|
|
133
|
-
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:
|
|
133
|
+
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:3px}.fs-chip fs-chip-suffix.clickable{cursor:pointer}.fs-chip.size-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.imaged{padding-left:0}.fs-chip.size-micro.actionable,.fs-chip.size-micro.selected{padding-right:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.fs-chip.size-tiny{padding:0 6px;min-height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny .image{height:18px;width:18px;margin-right:3px}.fs-chip.size-tiny.iconed:not(.imaged){padding-left:3px}.fs-chip.size-tiny fs-chip-suffix{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.imaged{padding-left:0}.fs-chip.size-tiny.actionable,.fs-chip.size-tiny.selected{padding-right:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.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.actionable,.fs-chip.size-small.selected{padding-right:0}.fs-chip.size-small ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}\n"] }]
|
|
134
134
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { templateRef: [{
|
|
135
135
|
type: ViewChild,
|
|
136
136
|
args: [TemplateRef, { static: true }]
|
|
@@ -187,11 +187,11 @@ class FsChipComponent {
|
|
|
187
187
|
this._cdRef.markForCheck();
|
|
188
188
|
}
|
|
189
189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
190
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", maxWidth: "maxWidth", width: "width", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", icon: "icon", image: "image", setSelected: ["selected", "setSelected"], setSize: ["size", "setSize"] }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, queries: [{ propertyName: "chipSuffixes", predicate: FsChipSuffixDirective }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:
|
|
190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsChipComponent, selector: "fs-chip", inputs: { selectable: "selectable", removable: "removable", value: "value", maxWidth: "maxWidth", width: "width", backgroundColor: "backgroundColor", borderColor: "borderColor", color: "color", outlined: "outlined", icon: "icon", image: "image", setSelected: ["selected", "setSelected"], setSize: ["size", "setSize"] }, outputs: { selectedToggled: "selectedToggled", removed: "removed" }, queries: [{ propertyName: "chipSuffixes", predicate: FsChipSuffixDirective }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:3px}.fs-chip fs-chip-suffix.clickable{cursor:pointer}.fs-chip.size-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.imaged{padding-left:0}.fs-chip.size-micro.actionable,.fs-chip.size-micro.selected{padding-right:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.fs-chip.size-tiny{padding:0 6px;min-height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny .image{height:18px;width:18px;margin-right:3px}.fs-chip.size-tiny.iconed:not(.imaged){padding-left:3px}.fs-chip.size-tiny fs-chip-suffix{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.imaged{padding-left:0}.fs-chip.size-tiny.actionable,.fs-chip.size-tiny.selected{padding-right:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.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.actionable,.fs-chip.size-small.selected{padding-right:0}.fs-chip.size-small ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FsChipSuffixComponent, selector: "fs-chip-suffix", inputs: ["icon", "link", "linkTarget", "color"], outputs: ["click"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
191
191
|
}
|
|
192
192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsChipComponent, decorators: [{
|
|
193
193
|
type: Component,
|
|
194
|
-
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:
|
|
194
|
+
args: [{ selector: 'fs-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template>\n <div\n class=\"fs-chip\"\n (click)=\"click()\"\n [ngStyle]=\"styles\"\n [class.actionable]=\"chipSuffixes.length !== 0 || (removed.observed && removable)\"\n [ngClass]=\"classes\">\n <ng-container *ngIf=\"image\">\n <img\n [src]=\"image\"\n class=\"image\"\n alt=\"\">\n </ng-container>\n <ng-container *ngIf=\"icon\">\n <mat-icon class=\"icon\">\n {{ icon }}\n </mat-icon>\n </ng-container>\n <div\n class=\"fs-chip-content\"\n [ngStyle]=\"{ 'max-width': maxWidth }\">\n <ng-content></ng-content>\n </div>\n @if (selected) {\n <div class=\"selected-check\">\n <mat-icon [style.color]=\"styles.color\">\n check\n </mat-icon>\n </div>\n }\n @if (chipSuffixes.length !== 0 || (removed.observed && removable)) {\n <div class=\"actions\">\n @for (chipSuffix of chipSuffixes; track chipSuffix) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': chipSuffix.click.observers.length }\"\n [icon]=\"chipSuffix.icon\"\n [link]=\"chipSuffix.link\"\n [linkTarget]=\"chipSuffix.linkTarget\"\n [color]=\"styles.color\"\n (click)=\"chipSuffixClick(chipSuffix, $event)\">\n <ng-container *ngTemplateOutlet=\"chipSuffix.templateRef\"></ng-container>\n </fs-chip-suffix>\n }\n @if (removed.observed && removable) {\n <fs-chip-suffix\n [ngClass]=\"{ 'clickable': true }\"\n [icon]=\"'remove_circle_outline'\"\n [color]=\"styles.color\"\n (click)=\"remove($event)\">\n </fs-chip-suffix>\n }\n </div>\n }\n </div>\n</ng-template>\n@if (!hasChips) {\n <ng-container [ngTemplateOutlet]=\"templateRef\"></ng-container>\n}", styles: [":host{display:flex}.fs-chip{-webkit-user-select:none;user-select:none;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);display:inline-flex;padding:0 12px;border-radius:16px;align-items:center;cursor:default;min-height:30px;background-color:#e7e7e7;overflow:hidden}.fs-chip.imaged{overflow:visible;padding-left:0;vertical-align:middle}.fs-chip.imaged.outlined .image{margin-left:-2px}.fs-chip.iconed:not(.imaged){padding-left:5px}.fs-chip.actionable,.fs-chip.selected{padding-right:5px}.fs-chip.selectable{cursor:pointer}.fs-chip.outlined{background-color:transparent;border:1px solid #e0e0e0;box-sizing:border-box}.fs-chip .icon{margin-right:5px}.fs-chip ::ng-deep mat-icon{font-size:25px}.fs-chip .actions{display:flex;flex-direction:row;margin-left:5px}.fs-chip .image{height:30px;width:30px;border-radius:50%;object-fit:cover;margin-left:-1px;margin-right:8px}.fs-chip .fs-chip-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.fs-chip .selected-check{margin:0 5px;display:flex}.fs-chip fs-chip-suffix{display:flex;align-items:center}.fs-chip fs-chip-suffix+fs-chip-suffix{margin-left:3px}.fs-chip fs-chip-suffix.clickable{cursor:pointer}.fs-chip.size-micro{padding:0 5px;min-height:16px;line-height:normal}.fs-chip.size-micro .fs-chip-content{font-size:65%}.fs-chip.size-micro .image{height:100%;width:16px;margin-right:2px}.fs-chip.size-micro fs-chip-suffix{margin-left:1px}.fs-chip.size-micro .selected-check{margin:0 1px 0 0}.fs-chip.size-micro.imaged{padding-left:0}.fs-chip.size-micro.actionable,.fs-chip.size-micro.selected{padding-right:0}.fs-chip.size-micro ::ng-deep mat-icon{width:12px;height:12px;font-size:11px}.fs-chip.size-tiny{padding:0 6px;min-height:18px;line-height:normal}.fs-chip.size-tiny .fs-chip-content{font-size:75%}.fs-chip.size-tiny .image{height:18px;width:18px;margin-right:3px}.fs-chip.size-tiny.iconed:not(.imaged){padding-left:3px}.fs-chip.size-tiny fs-chip-suffix{margin-left:2px;margin-right:2px}.fs-chip.size-tiny .selected-check{margin:0 1px 0 0}.fs-chip.size-tiny.imaged{padding-left:0}.fs-chip.size-tiny.actionable,.fs-chip.size-tiny.selected{padding-right:0}.fs-chip.size-tiny ::ng-deep mat-icon{height:13px;width:13px;font-size:13px}.fs-chip.size-small{padding:0 8px;font-size:85%;min-height:25px;line-height:normal}.fs-chip.size-small .image{height:25px;width:25px;margin-right:5px}.fs-chip.size-small.iconed:not(.imaged){padding-left:4px}.fs-chip.size-small.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.actionable,.fs-chip.size-small.selected{padding-right:0}.fs-chip.size-small ::ng-deep mat-icon{height:22px;width:22px;font-size:22px}\n"] }]
|
|
195
195
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { templateRef: [{
|
|
196
196
|
type: ViewChild,
|
|
197
197
|
args: [TemplateRef, { static: true }]
|